Add fetching and displaying profile information for startups

components/DirectoryLayout.tsx

@@ -16,7 +16,11 @@ const DirectoryLayout = (props: LayoutProps) => {
 
   useEffect(() => {
     const fetchStartups = async () => {
-      const { data } = await supabase.from("startups").select();
+      const { data } = await supabase
+        .from("startups")
+        // This is necessary due to Supabase's API formatting requirements.
+        // eslint-disable-next-line quotes
+        .select(`*, profiles!startups_members (username, name)`);
       setStartups(data);
     };
     fetchStartups();

components/startups/StartupProfileTile.tsx

@@ -5,19 +5,13 @@ export default function StartupProfileTile({
 }: {
   startupProfile: StartupProfile;
 }) {
-  const { headshot, name, role } = startupProfile;
+  const { username, name } = startupProfile;
 
   return (
     <div className="flex flex-col items-center mr-5">
-      <img
-        className="rounded-lg"
-        height={90}
-        width={90}
-        src={headshot}
-        alt={name}
-      />
-      <h1 className="mt-1">{name}</h1>
-      <p className="text-gray-400 text-xs">{role}</p>
+      <h1 className="mt-1">{name ?? username}</h1>
+      {/* TODO(jonas): roles+images */}
+      <p className="text-gray-400 text-xs">Software Engineer</p>
     </div>
   );
 }

components/startups/StartupTile.tsx

@@ -10,7 +10,7 @@ import { Startup } from "../../utils/types";
 import StartupProfileTile from "./StartupProfileTile";
 
 export default function StartupTile({ startup }: { startup: Startup }) {
-  const { name, description, logo, website, industries, members } = startup;
+  const { name, description, logo, website, industries, profiles } = startup;
   const [dialogOpen, setDialogOpen] = useState(false);
 
   return (
@@ -135,8 +135,8 @@ export default function StartupTile({ startup }: { startup: Startup }) {
                       </div>
                     </div>
                     <div className="flex">
-                      {members?.map((member) => (
-                        <StartupProfileTile startupProfile={member} />
+                      {profiles?.map((profile) => (
+                        <StartupProfileTile startupProfile={profile} />
                       ))}
                     </div>
                   </div>

utils/types.ts

@@ -1,7 +1,6 @@
 export type StartupProfile = {
-  headshot: string;
-  name: string;
-  role: string;
+  name: string | null;
+  username: string;
 };
 
 export type Startup = {
@@ -16,5 +15,5 @@ export type Startup = {
   stage: string;
   tech: string[];
   website: string;
-  members: StartupProfile[];
+  profiles: StartupProfile[];
 };