From 9a0999e1275f7e67129ade4ced4be91d6cdb9c3c Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Fri, 10 Jun 2022 20:38:00 +0800
Subject: [PATCH] refactor(console): add dedicated route path for create app
 popup dialog

---
 packages/console/src/App.tsx                    |  1 +
 .../console/src/pages/Applications/index.tsx    | 17 +++++++++--------
 packages/console/src/pages/GetStarted/hook.ts   |  2 +-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx
index bf853d4a7..a75ecb012 100644
--- a/packages/console/src/App.tsx
+++ b/packages/console/src/App.tsx
@@ -50,6 +50,7 @@ const Main = () => {
               <Route path="get-started" element={<GetStarted />} />
               <Route path="applications">
                 <Route index element={<Applications />} />
+                <Route path="create" element={<Applications />} />
                 <Route path=":id">
                   <Route index element={<Navigate to="settings" />} />
                   <Route path="settings" element={<ApplicationDetails />} />
diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx
index 037a994af..5b21dd780 100644
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/packages/console/src/pages/Applications/index.tsx
@@ -1,10 +1,10 @@
 import { Application } from '@logto/schemas';
 import classNames from 'classnames';
-import React, { useState } from 'react';
+import React from 'react';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import Modal from 'react-modal';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import useSWR from 'swr';
 
 import Button from '@/components/Button';
@@ -29,7 +29,9 @@ import * as styles from './index.module.scss';
 const pageSize = 20;
 
 const Applications = () => {
-  const [isCreateFormOpen, setIsCreateFormOpen] = useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const isCreateNew = location.pathname.endsWith('/create');
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [query, setQuery] = useSearchParams();
   const pageIndex = Number(query.get('page') ?? '1');
@@ -37,7 +39,6 @@ const Applications = () => {
     `/api/applications?page=${pageIndex}&page_size=${pageSize}`
   );
   const isLoading = !data && !error;
-  const navigate = useNavigate();
   const [applications, totalCount] = data ?? [];
 
   return (
@@ -49,17 +50,17 @@ const Applications = () => {
           title="admin_console.applications.create"
           type="primary"
           onClick={() => {
-            setIsCreateFormOpen(true);
+            navigate('/applications/create');
           }}
         />
         <Modal
-          isOpen={isCreateFormOpen}
+          isOpen={isCreateNew}
           className={modalStyles.content}
           overlayClassName={modalStyles.overlay}
         >
           <CreateForm
             onClose={(createdApp) => {
-              setIsCreateFormOpen(false);
+              navigate('/applications');
 
               if (createdApp) {
                 toast.success(t('applications.application_created', { name: createdApp.name }));
@@ -96,7 +97,7 @@ const Applications = () => {
                   title="admin_console.applications.create"
                   type="outline"
                   onClick={() => {
-                    setIsCreateFormOpen(true);
+                    navigate('/applications/create');
                   }}
                 />
               </TableEmpty>
diff --git a/packages/console/src/pages/GetStarted/hook.ts b/packages/console/src/pages/GetStarted/hook.ts
index 4099a582d..e33bbee61 100644
--- a/packages/console/src/pages/GetStarted/hook.ts
+++ b/packages/console/src/pages/GetStarted/hook.ts
@@ -67,7 +67,7 @@ const useGetStartedMetadata = ({ checkDemoAppExists }: Props) => {
       buttonText: 'general.create',
       isComplete: settings?.createApplication,
       onClick: () => {
-        navigate('/applications');
+        navigate('/applications/create');
       },
     },
     {