From dee84f18cbb9878aea0c8fd39454b3a299c49237 Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Mon, 24 Jun 2024 18:44:34 -0400
Subject: [PATCH] feat: dynamic project success page and update links (#220)

### TL;DR

Integrates project data fetching for dynamic subdomain display on the Project Deployment Success page and the OverviewTabPanel.

### What changed?

- Updated `Id.tsx` to fetch project data and dynamically display project's subdomain after deployment.
- Modified `Overview.tsx` to make project's subdomain a clickable link.

### How to test?

1. Deploy a new project and check the deployment success page for correct subdomain display.
2. Open a project's overview tab and click the subdomain link to ensure it navigates correctly.

### Why make this change?

Improves user experience by displaying the actual subdomain and making it clickable, ensuring users can conveniently verify their deployment and access project domain.

---
---
 .../org-slug/projects/create/success/Id.tsx   | 190 ++++++++++--------
 .../pages/org-slug/projects/id/Overview.tsx   |   7 +-
 2 files changed, 115 insertions(+), 82 deletions(-)

diff --git a/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx b/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx
index b7f98c76..7e8deb3b 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx
@@ -11,98 +11,128 @@ import {
 import { Heading } from 'components/shared/Heading';
 
 import logoAnimation from 'components/../../public/lottie/logo.json';
+import { useGQLClient } from 'context/GQLClientContext';
+import { Project } from 'gql-client';
+import { useEffect, useState } from 'react';
 
 const Id = () => {
   const { id, orgSlug } = useParams();
+  const client = useGQLClient();
+  const [project, setProject] = useState<Project | null>(null);
 
-  const handleSetupDomain = () => {
-    //TODO: Implement this
+  const handleSetupDomain = async () => {
+    if (id) {
+      // console.log('id', id);
+      // console.log('getting project for id', id);
+      const project = await client.getProject(id);
+      // console.log('project found:', project);
+      if (project && project.project) {
+        // console.log('project:', project.project);
+        setProject(project.project);
+      }
+    } else {
+      window.location.href = '/';
+    }
   };
+
+  useEffect(() => {
+    handleSetupDomain();
+  });
+
   return (
-    <div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto py-6 lg:py-12">
-      {/* Icon */}
-      <div className="flex justify-center">
-        <Lottie animationData={logoAnimation} loop={false} size={40} />
-      </div>
-
-      {/* Heading */}
-      <div className="flex flex-col items-center gap-1.5">
-        <Heading as="h3" className="font-medium text-xl">
-          Project deployed successfully.
-        </Heading>
-        <p className="flex flex-col items-center lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
-          Your project has been deployed at{' '}
-          <Button
-            className="no-underline text-elements-link"
-            // TODO: use dynamic value
-            href="https://www.iglootools.snowballtools.xyz"
-            as="a"
-            variant="link-emphasized"
-            external
-            leftIcon={<LinkChainIcon />}
-          >
-            {/* // TODO: use dynamic value */}
-            www.iglootools.snowballtools.xyz
-          </Button>
-        </p>
-      </div>
-
-      {/* Card */}
-      <div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
-        {/* Trigger question */}
-        <div className="flex gap-2 justify-center items-center py-3">
-          <div className="h-5 w-5">
-            <QuestionMarkRoundFilledIcon size={18} />
+    <>
+      {project ? (
+        <div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto py-6 lg:py-12">
+          {/* Icon */}
+          <div className="flex justify-center">
+            <Lottie animationData={logoAnimation} loop={false} size={40} />
           </div>
-          <Heading as="h5" className="font-sans font-medium text-sm">
-            {`Wondering what's next?`}
-          </Heading>
-        </div>
 
-        {/* CTA card */}
-        <div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
-          <div className="flex gap-2">
-            <Badge variant="secondary">1</Badge>
-            <div className="space-y-3">
-              <div className="flex flex-col gap-1">
-                <Heading as="h6" className="text-sm font-sans">
-                  Add a custom domain
-                </Heading>
-                <p className="text-xs text-elements-low-em font-sans">
-                  Make it easy for your visitors to remember your URL with a
-                  custom domain.
-                </p>
-              </div>
-              <Button onClick={handleSetupDomain} variant="tertiary" size="sm">
-                Setup domain
+          {/* Heading */}
+          <div className="flex flex-col items-center gap-1.5">
+            <Heading as="h3" className="font-medium text-xl">
+              Project deployed successfully.
+            </Heading>
+            <p className="flex flex-col items-center lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
+              Your project has been deployed at{' '}
+              <Button
+                className="no-underline text-elements-link"
+                // TODO: use dynamic value
+                href={project ? `https://${project.subDomain}` : ''}
+                as="a"
+                variant="link-emphasized"
+                external
+                leftIcon={<LinkChainIcon />}
+              >
+                {project.subDomain}
               </Button>
+            </p>
+          </div>
+
+          {/* Card */}
+          <div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
+            {/* Trigger question */}
+            <div className="flex gap-2 justify-center items-center py-3">
+              <div className="h-5 w-5">
+                <QuestionMarkRoundFilledIcon size={18} />
+              </div>
+              <Heading as="h5" className="font-sans font-medium text-sm">
+                {`Wondering what's next?`}
+              </Heading>
+            </div>
+
+            {/* CTA card */}
+            <div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
+              <div className="flex gap-2">
+                <Badge variant="secondary">1</Badge>
+                <div className="space-y-3">
+                  <div className="flex flex-col gap-1">
+                    <Heading as="h6" className="text-sm font-sans">
+                      Add a custom domain
+                    </Heading>
+                    <p className="text-xs text-elements-low-em font-sans">
+                      Make it easy for your visitors to remember your URL with a
+                      custom domain.
+                    </p>
+                  </div>
+                  <Button
+                    onClick={handleSetupDomain}
+                    variant="tertiary"
+                    size="sm"
+                  >
+                    Setup domain
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* CTA Buttons */}
+          <div className="flex flex-col lg:flex-row justify-center gap-3">
+            <div className="w-full lg:w-fit">
+              <Link to="/">
+                <Button
+                  leftIcon={<ArrowLeftCircleFilledIcon />}
+                  fullWidth
+                  variant="tertiary"
+                >
+                  Back to projects
+                </Button>
+              </Link>
+            </div>
+            <div className="w-full lg:w-fit">
+              <Link to={`/${orgSlug}/projects/${id}`}>
+                <Button fullWidth variant="primary">
+                  View project
+                </Button>
+              </Link>
             </div>
           </div>
         </div>
-      </div>
-
-      {/* CTA Buttons */}
-      <div className="flex flex-col lg:flex-row justify-center gap-3">
-        <div className="w-full lg:w-fit">
-          <Link to="/">
-            <Button
-              leftIcon={<ArrowLeftCircleFilledIcon />}
-              fullWidth
-              variant="tertiary"
-            >
-              Back to projects
-            </Button>
-          </Link>
-        </div>
-        <div className="w-full lg:w-fit">
-          <Link to={`/${orgSlug}/projects/${id}`}>
-            <Button fullWidth variant="primary">
-              View project
-            </Button>
-          </Link>
-        </div>
-      </div>
-    </div>
+      ) : (
+        <></>
+      )}
+    </>
   );
 };
 
diff --git a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
index 2de55d8c..367b348d 100644
--- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
@@ -131,9 +131,12 @@ const OverviewTabPanel = () => {
             <Heading className="text-lg leading-6 font-medium truncate">
               {project.name}
             </Heading>
-            <p className="text-sm text-elements-low-em tracking-tight truncate">
+            <a
+              href={`https://${project.subDomain}`}
+              className="text-sm text-elements-low-em tracking-tight truncate"
+            >
               {project.subDomain}
-            </p>
+            </a>
           </div>
         </div>
         <OverviewInfo label="Domain" icon={<GlobeIcon />}>