Display custom domain in project card

packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx

@@ -4,9 +4,15 @@ import {
   MenuItem,
   MenuList,
 } from '@snowballtools/material-tailwind-react-fork';
-import { ComponentPropsWithoutRef, MouseEvent, useCallback } from 'react';
+import {
+  ComponentPropsWithoutRef,
+  MouseEvent,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Project } from 'gql-client';
+import { Domain, Project } from 'gql-client';
 import { Avatar } from 'components/shared/Avatar';
 import { Button } from 'components/shared/Button';
 import {
@@ -21,6 +27,7 @@ import { WavyBorder } from 'components/shared/WavyBorder';
 import { relativeTimeMs } from 'utils/time';
 import { getInitials } from 'utils/geInitials';
 import { ProjectCardTheme, projectCardTheme } from './ProjectCard.theme';
+import { useGQLClient } from 'context/GQLClientContext';
 
 export interface ProjectCardProps
   extends ComponentPropsWithoutRef<'div'>,
@@ -42,6 +49,9 @@ export const ProjectCard = ({
   const hasError = status === 'failure';
 
   const navigate = useNavigate();
+  const client = useGQLClient();
+
+  const [customDomain, setCustomDomain] = useState<Domain | null>(null);
 
   const handleOptionsClick = (
     e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>,
@@ -63,6 +73,16 @@ export const ProjectCard = ({
     [project.id, navigate],
   );
 
+  useEffect(() => {
+    const fetchCustomDomain = async () => {
+      const { oldestDomain } = await client.oldestDomain(project.id);
+
+      setCustomDomain(oldestDomain);
+    };
+
+    fetchCustomDomain();
+  }, [project]);
+
   return (
     <div
       {...props}
@@ -83,7 +103,7 @@ export const ProjectCard = ({
             <p className={theme.title()}>{project.name}</p>
           </Tooltip>
           <p className={theme.description()}>
-            {project.deployments[0]?.domain?.name ?? 'No domain'}
+            {customDomain && customDomain.name ? customDomain.name : 'No domain'}
           </p>
         </div>
         {/* Icons */}