fix(console): Can't reach app delete prompt from dashboard (#2569)

proofzero · Aug 2, 2023 · 5002e0f · 5002e0f
1 parent 8d1c4a0
commit 5002e0f
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 28 deletions.
diff --git a/apps/console/app/components/AppBox/index.tsx b/apps/console/app/components/AppBox/index.tsx
@@ -16,6 +16,7 @@ type AppBoxProps = {
     published?: boolean
     createdTimestamp?: number
     icon?: string
+    hasCustomDomain: boolean
   }[]
   // Link target for creating a new application.
   createLink: string
@@ -31,6 +32,7 @@ export default function AppBox(props: AppBoxProps) {
     createdTimestamp: app.createdTimestamp,
     published: app.published,
     icon: app.icon,
+    hasCustomDomain: app.hasCustomDomain,
   }))
 
   return (

diff --git a/apps/console/app/components/Applications/ApplicationList.tsx b/apps/console/app/components/Applications/ApplicationList.tsx
@@ -25,6 +25,7 @@ export const ApplicationList = ({
     | {
         clientId: string
         name: string
+        hasCustomDomain: boolean
       }
     | undefined
   >()
@@ -65,8 +66,9 @@ export const ApplicationList = ({
             deleteAppCallback={() => {
               setDeleteModalOpen(false)
             }}
-            clientId={actionApp?.clientId}
+            appClientID={actionApp?.clientId}
             appName={actionApp?.name}
+            appHasCustomDomain={actionApp?.hasCustomDomain}
           />
         )}
 
@@ -75,10 +77,11 @@ export const ApplicationList = ({
             key={ali.id}
             navigate={navigate}
             {...ali}
-            onDeleteApplication={(clientId, appName) => {
+            onDeleteApplication={(clientId, appName, hasCustomDomain) => {
               setActionApp({
                 clientId,
                 name: appName,
+                hasCustomDomain,
               })
               setDeleteModalOpen(true)
             }}

diff --git a/apps/console/app/components/Applications/ApplicationListItem.tsx b/apps/console/app/components/Applications/ApplicationListItem.tsx
@@ -39,15 +39,21 @@ export type ApplicationListItemProps = {
   createdTimestamp?: number
   icon?: string
   published?: boolean
+  hasCustomDomain: boolean
   navigate?: (clientId: string) => void
-  onDeleteApplication?: (clientId: string, appName: string) => void
+  onDeleteApplication?: (
+    clientId: string,
+    appName: string,
+    hasCustomDomain: boolean
+  ) => void
 }
 export const ApplicationListItem = ({
   id,
   name,
   createdTimestamp,
   icon,
   published,
+  hasCustomDomain,
   onDeleteApplication,
   navigate,
 }: ApplicationListItemProps) => (
@@ -129,7 +135,7 @@ export const ApplicationListItem = ({
                 hover:rounded-[6px] hover:bg-gray-100 "
                 onClick={() => {
                   if (onDeleteApplication) {
-                    onDeleteApplication(id, name ?? '')
+                    onDeleteApplication(id, name ?? '', hasCustomDomain)
                   }
                 }}
               >

diff --git a/apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx b/apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx
@@ -10,21 +10,23 @@ import dangerVector from '../../images/danger.svg'
 import { Input } from '@proofzero/design-system/src/atoms/form/Input'
 import { RiLoader5Fill } from 'react-icons/ri'
 
-import type { appDetailsProps } from '~/types'
-
 export type DeleteAppModalProps = {
-  appDetails: appDetailsProps
+  appName: string
+  appClientID: string
+  appHasCustomDomain: boolean
   isOpen: boolean
   deleteAppCallback: (state: boolean) => unknown
 }
 
 export const DeleteAppModal = ({
-  appDetails,
+  appName,
+  appClientID,
+  appHasCustomDomain,
   isOpen,
   deleteAppCallback,
 }: DeleteAppModalProps) => {
   const fetcher = useFetcher()
-  const [hasCustomDomain] = useState(Boolean(appDetails.customDomain))
+  const [hasCustomDomain] = useState(Boolean(appHasCustomDomain))
 
   return (
     <Modal
@@ -44,12 +46,13 @@ export const DeleteAppModal = ({
           </Text>
 
           {hasCustomDomain && (
-            <HasCustomDomain appDetails={appDetails}></HasCustomDomain>
+            <HasCustomDomain clientID={appClientID}></HasCustomDomain>
           )}
           {!hasCustomDomain && (
             <DeleteModalAppForm
               fetcher={fetcher}
-              appDetails={appDetails}
+              appName={appName}
+              appClientID={appClientID}
               callback={deleteAppCallback}
             />
           )}
@@ -61,22 +64,24 @@ export const DeleteAppModal = ({
 
 type DeleteModalAppFormProps = {
   fetcher: FetcherWithComponents<any>
-  appDetails: appDetailsProps
+  appClientID: string
+  appName: string
   callback: (state: boolean) => unknown
 }
 
 const DeleteModalAppForm = ({
   fetcher,
-  appDetails,
+  appClientID,
+  appName,
   callback,
 }: DeleteModalAppFormProps) => {
   const [isAppNameMatches, setAppNameMatches] = useState(false)
   return (
     <fetcher.Form method="post" action="/apps/delete" reloadDocument={true}>
       <section className="mb-4">
         <Text size="sm" weight="normal" className="text-gray-500 my-3">
-          Are you sure you want to delete <b>{appDetails.app.name}</b> app? This
-          action cannot be undone once confirmed.
+          Are you sure you want to delete <b>{appName}</b> app? This action
+          cannot be undone once confirmed.
         </Text>
         <Text size="sm" weight="normal" className="text-gray-500 my-3">
           Confirm you want to delete this application by typing its name below.
@@ -87,12 +92,10 @@ const DeleteModalAppForm = ({
           placeholder="My application"
           required
           className="mb-12"
-          onChange={(e) =>
-            setAppNameMatches(appDetails.app.name === e?.target?.value)
-          }
+          onChange={(e) => setAppNameMatches(appName === e?.target?.value)}
         />
       </section>
-      <input type="hidden" name="clientId" value={appDetails.clientId} />
+      <input type="hidden" name="clientId" value={appClientID} />
 
       <div className="flex justify-end items-center space-x-3">
         <Button
@@ -123,17 +126,17 @@ const DeleteModalAppForm = ({
 }
 
 type HasCustomDomainProps = {
-  appDetails: appDetailsProps
+  clientID: string
 }
 
-const HasCustomDomain = ({ appDetails }: HasCustomDomainProps) => (
+const HasCustomDomain = ({ clientID }: HasCustomDomainProps) => (
   <section className="flex flex-col mb-4">
     <Text size="sm" weight="normal" className="text-gray-500 my-3">
       This application has a custom domain configured. You need to delete it
       before you can delete the application.
     </Text>
 
-    <Link to={`/apps/${appDetails.clientId}/domain`} className="self-end">
+    <Link to={`/apps/${clientID}/domain`} className="self-end">
       <Button btnType="secondary-alt">Go to Custom Domain</Button>
     </Link>
   </section>

diff --git a/apps/console/app/root.tsx b/apps/console/app/root.tsx
@@ -79,6 +79,7 @@ export type AppLoaderData = {
   published?: boolean
   createdTimestamp?: number
   appPlan: ServicePlanType
+  hasCustomDomain: boolean
 }
 
 export type LoaderData = {
@@ -124,6 +125,7 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
           published: a.published,
           createdTimestamp: a.createdTimestamp,
           appPlan: a.appPlan,
+          hasCustomDomain: Boolean(a.customDomain),
         }
       })
 

diff --git a/apps/console/app/routes/apps/$clientId/auth.tsx b/apps/console/app/routes/apps/$clientId/auth.tsx
@@ -297,11 +297,15 @@ export default function AppDetailIndexPage() {
   return (
     <>
       {isImgUploading ? <Loader /> : null}
-      <DeleteAppModal
-        appDetails={appDetails}
-        isOpen={deleteModalOpen}
-        deleteAppCallback={() => setDeleteModalOpen(false)}
-      />
+      {appDetails.clientId && (
+        <DeleteAppModal
+          appClientID={appDetails.clientId}
+          appName={appDetails.app.name}
+          appHasCustomDomain={Boolean(appDetails.customDomain)}
+          isOpen={deleteModalOpen}
+          deleteAppCallback={() => setDeleteModalOpen(false)}
+        />
+      )}
 
       <Form
         method="post"
@@ -436,7 +440,7 @@ export default function AppDetailIndexPage() {
                       label="Published"
                       disabled={!appContactAddress}
                       onToggle={() => {
-                        ; (setIsFormChanged as (val: boolean) => {})(true)
+                        ;(setIsFormChanged as (val: boolean) => {})(true)
                       }}
                       checked={appDetails.published}
                     />