Add wait before updating deployer LRNs after auction completion

packages/backend/src/service.ts

@@ -1080,6 +1080,7 @@ export class Service {
       if (deployment.isCurrent) {
         const currentDeploymentURL = `https://${(deployment.project.name).toLowerCase()}.${deployment.baseDomain}`;
 
+        // TODO: Store the latest DNS deployment record
         const deploymentRecords =
           await this.laconicRegistry.getDeploymentRecordsByFilter({
             application: deployment.applicationRecordId,
@@ -1094,8 +1095,12 @@ export class Service {
           return false;
         }
 
+        // Multiple records are fetched, take the latest record
+        const latestRecord = deploymentRecords
+          .sort((a, b) => new Date(b.createTime).getTime() - new Date(a.createTime).getTime())[0];
+
         await this.laconicRegistry.createApplicationDeploymentRemovalRequest({
-          deploymentId: deploymentRecords[deploymentRecords.length - 1].id,
+          deploymentId: latestRecord.id,
           deployerLrn: deployment.deployerLrn
         });
       }

packages/frontend/src/components/projects/project/overview/Activity/AuctionCard.tsx

@@ -12,7 +12,7 @@ import { CheckRoundFilledIcon, LoadingIcon } from 'components/shared/CustomIcon'
 import { useGQLClient } from 'context/GQLClientContext';
 import { Button, Heading, Tag } from 'components/shared';
 
-const CHECK_AUCTION_STATUS_INTERVAL = 2000;
+const WAIT_DURATION = 5000;
 
 export const AuctionCard = ({ project }: { project: Project }) => {
   const [auctionStatus, setAuctionStatus] = useState<string>('');
@@ -28,21 +28,36 @@ export const AuctionCard = ({ project }: { project: Project }) => {
     const result = await client.getAuctionData(project.auctionId);
     setAuctionStatus(result.status);
     setAuctionDetails(result);
-    setDeployerLrns(project.deployerLrns);
+  }, [client, project.auctionId]);
-    }, [client, project.auctionId, project.deployerLrns]);
 
   useEffect(() => {
+    const fetchUpdatedProject = async () => {
+      if (auctionStatus === 'completed') {
+        // Wait for 5 secs since the project is not immediately updated with deployer LRNs
+        await new Promise((resolve) => setTimeout(resolve, WAIT_DURATION));
+
+        const updatedProject = await client.getProject(project.id);
+        setDeployerLrns(updatedProject.project!.deployerLrns || []);
+      }
+    };
+
     if (auctionStatus !== 'completed') {
-      const intervalId = setInterval(checkAuctionStatus, CHECK_AUCTION_STATUS_INTERVAL);
+      const intervalId = setInterval(checkAuctionStatus, WAIT_DURATION);
       checkAuctionStatus();
 
       return () => clearInterval(intervalId);
+    } else {
+      fetchUpdatedProject();
     }
-  }, [auctionStatus, checkAuctionStatus]);
+  }, [auctionStatus, checkAuctionStatus, client]);
 
   const renderAuctionStatus = useCallback(
     () => (
-      <Tag leftIcon={getIconByAuctionStatus(auctionStatus)} size="xs" type={auctionStatus === 'completed' ? 'positive' : 'emphasized'}>
+      <Tag
+        leftIcon={getIconByAuctionStatus(auctionStatus)}
+        size="xs"
+        type={auctionStatus === 'completed' ? 'positive' : 'emphasized'}
+      >
         {auctionStatus.toUpperCase()}
       </Tag>
     ),
@@ -54,49 +69,47 @@ export const AuctionCard = ({ project }: { project: Project }) => {
 
   return (
     <>
-    <div className="p-3 gap-2 rounded-xl border border-gray-200 transition-colors hover:bg-base-bg-alternate flex flex-col mt-8">
+      <div className="p-3 gap-2 rounded-xl border border-gray-200 transition-colors hover:bg-base-bg-alternate flex flex-col mt-8">
-      <div className="flex justify-between items-center">
+        <div className="flex justify-between items-center">
-      <Heading className="text-lg leading-6 font-medium">Auction details</Heading>
+          <Heading className="text-lg leading-6 font-medium">Auction details</Heading>
-        <Button onClick={handleOpenDialog} variant="tertiary" size="sm">
+          <Button onClick={handleOpenDialog} variant="tertiary" size="sm">
-          View details
+            View details
-        </Button>
+          </Button>
-      </div>
-
-      <div className="flex justify-between items-center mt-1">
-        <span className="text-elements-high-em text-sm font-medium tracking-tight">Auction Status</span>
-        <div className="ml-2">{renderAuctionStatus()}</div>
-      </div>
-
-      <div className="flex justify-between items-center mt-2">
-        <span className="text-elements-high-em text-sm font-medium tracking-tight">Auction Id</span>
-        <span className="text-elements-mid-em text-sm text-right">
-          {project.auctionId}
-        </span>
-      </div>
-
-      {project.deployerLrns && (
-        <div className="mt-3">
-          <span className="text-elements-high-em text-sm font-medium tracking-tight">Deployer LRNs</span>
-          {deployerLrns.map((lrn, index) => (
-            <p key={index} className="text-elements-mid-em text-sm">
-              {'\u2022'} {lrn}
-            </p>
-          ))}
         </div>
-      )}
-    </div>
 
-    <Dialog open={openDialog} onClose={handleCloseDialog} fullWidth maxWidth="md">
+        <div className="flex justify-between items-center mt-1">
-      <DialogTitle>Auction Details</DialogTitle>
+          <span className="text-elements-high-em text-sm font-medium tracking-tight">Auction Status</span>
-      <DialogContent>
+          <div className="ml-2">{renderAuctionStatus()}</div>
-        {auctionDetails && (
+        </div>
-          <pre>{JSON.stringify(auctionDetails, null, 2)}</pre>
+
+        <div className="flex justify-between items-center mt-2">
+          <span className="text-elements-high-em text-sm font-medium tracking-tight">Auction Id</span>
+          <span className="text-elements-mid-em text-sm text-right">
+            {project.auctionId}
+          </span>
+        </div>
+
+        {deployerLrns.length > 0 && (
+          <div className="mt-3">
+            <span className="text-elements-high-em text-sm font-medium tracking-tight">Deployer LRNs</span>
+            {deployerLrns.map((lrn, index) => (
+              <p key={index} className="text-elements-mid-em text-sm">
+                {'\u2022'} {lrn}
+              </p>
+            ))}
+          </div>
         )}
-      </DialogContent>
+      </div>
-      <DialogActions>
+
-        <Button onClick={handleCloseDialog}>Close</Button>
+      <Dialog open={openDialog} onClose={handleCloseDialog} fullWidth maxWidth="md">
-      </DialogActions>
+        <DialogTitle>Auction Details</DialogTitle>
-    </Dialog>
+        <DialogContent>
-  </>
+          {auctionDetails && <pre>{JSON.stringify(auctionDetails, null, 2)}</pre>}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseDialog}>Close</Button>
+        </DialogActions>
+      </Dialog>
+    </>
   );
 };