Populate domainId while creating deployment

packages/backend/src/service.ts

@@ -706,7 +706,8 @@ export class Service {
     await this.db.updateDeploymentById(newDeployment.id, {
       applicationDeploymentRequestId,
       applicationDeploymentRequestData,
-      dnsDeploymentRequestId
+      dnsDeploymentRequestId,
+      domainId: domain?.id ?? null
     });
 
     return newDeployment;

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

@@ -8,11 +8,9 @@ import {
   ComponentPropsWithoutRef,
   MouseEvent,
   useCallback,
-  useEffect,
-  useState,
 } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Domain, Project } from 'gql-client';
+import { Project } from 'gql-client';
 import { Avatar } from 'components/shared/Avatar';
 import { Button } from 'components/shared/Button';
 import {
@@ -27,7 +25,6 @@ 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'>,
@@ -49,9 +46,6 @@ 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>,
@@ -73,16 +67,6 @@ export const ProjectCard = ({
     [project.id, navigate],
   );
 
-  useEffect(() => {
-    const fetchCustomDomain = async () => {
-      const { oldestDomain } = await client.oldestDomain(project.id);
-
-      setCustomDomain(oldestDomain);
-    };
-
-    fetchCustomDomain();
-  }, [project]);
-
   return (
     <div
       {...props}
@@ -103,7 +87,7 @@ export const ProjectCard = ({
             <p className={theme.title()}>{project.name}</p>
           </Tooltip>
           <p className={theme.description()}>
-            {customDomain && customDomain.name ? customDomain.name : 'No domain'}
+            {project.deployments[0]?.domain?.name ?? 'No domain'}
           </p>
         </div>
         {/* Icons */}

packages/frontend/src/pages/org-slug/projects/id/Overview.tsx

@@ -32,7 +32,6 @@ const OverviewTabPanel = () => {
   const [activities, setActivities] = useState<GitCommitWithBranch[]>([]);
   const [fetchingActivities, setFetchingActivities] = useState(true);
   const [liveDomain, setLiveDomain] = useState<Domain>();
-  const [customDomain, setCustomDomain] = useState<Domain | null>(null);
 
   const client = useGQLClient();
   const { project, onUpdate } = useOutletContext<OutletContextType>();
@@ -125,16 +124,6 @@ const OverviewTabPanel = () => {
     fetchLiveProdDomain();
   }, [project]);
 
-  useEffect(() => {
-    const fetchCustomDomain = async () => {
-      const { oldestDomain } = await client.oldestDomain(project.id);
-
-      setCustomDomain(oldestDomain);
-    };
-
-    fetchCustomDomain();
-  }, [project]);
-
   return (
     <div className="grid grid-cols-5 gap-6 md:gap-[72px]">
       <div className="col-span-5 md:col-span-3">
@@ -206,13 +195,13 @@ const OverviewTabPanel = () => {
                   <div className="flex gap-2 items-center">
                     <Link
                       to={
-                        customDomain && customDomain.name
-                          ? `https://${customDomain.name}`
+                        deployment.domain.name
+                          ? `https://${deployment.domain.name}`
                           : `https://${project.name.toLowerCase()}.${deployment.deployer.baseDomain}`
                       }
                     >
                       <span className="text-controls-primary dark:text-foreground group hover:border-controls-primary transition-colors border-b border-b-transparent flex gap-2 items-center text-sm tracking-tight">
-                        {customDomain?.name ??
+                        {deployment.domain.name ??
                           `https://${project.name.toLowerCase()}.${deployment.deployer.baseDomain}`}
                         <LinkIcon className="group-hover:rotate-45 transition-transform" />
                       </span>