From 3bef9aa633618ed8343c0fe746046c0fa87b8824 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Fri, 30 Aug 2024 14:53:11 -0300
Subject: [PATCH] refactor: custom post loading and add AppAuthenticatedPage
 (#3632)

* Added post loading hook to appInitPage

* Removed custom post loading

* Changed custom post loading to cusotm post auth

* Adds AppAuthenticatedPage

* Uses AppAuthenticatedPage inside protected route
---
 .../hooks/use-custom-post-auth.ts             |  16 ++
 .../src/pages/AppAuthenticatedPage/index.tsx  |   8 +
 src/frontend/src/routes.tsx                   | 165 ++++++++++--------
 3 files changed, 112 insertions(+), 77 deletions(-)
 create mode 100644 src/frontend/src/customization/hooks/use-custom-post-auth.ts
 create mode 100644 src/frontend/src/pages/AppAuthenticatedPage/index.tsx

diff --git a/src/frontend/src/customization/hooks/use-custom-post-auth.ts b/src/frontend/src/customization/hooks/use-custom-post-auth.ts
new file mode 100644
index 000000000..72d0f2dbc
--- /dev/null
+++ b/src/frontend/src/customization/hooks/use-custom-post-auth.ts
@@ -0,0 +1,16 @@
+import { UseRequestProcessor } from "@/controllers/API/services/request-processor";
+import { useQueryFunctionType } from "@/types/api";
+
+export const useCustomPostAuth: useQueryFunctionType<undefined, null> = (
+  options,
+) => {
+  const { query } = UseRequestProcessor();
+
+  const getPostAuthFn = async () => {
+    return null;
+  };
+
+  const queryResult = query(["usePostAuth"], getPostAuthFn, options);
+
+  return queryResult;
+};
diff --git a/src/frontend/src/pages/AppAuthenticatedPage/index.tsx b/src/frontend/src/pages/AppAuthenticatedPage/index.tsx
new file mode 100644
index 000000000..35902300d
--- /dev/null
+++ b/src/frontend/src/pages/AppAuthenticatedPage/index.tsx
@@ -0,0 +1,8 @@
+import { useCustomPostAuth } from "@/customization/hooks/use-custom-post-auth";
+import { Outlet } from "react-router-dom";
+
+export function AppAuthenticatedPage() {
+  useCustomPostAuth();
+
+  return <Outlet />;
+}
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index 913a19b64..af38687d5 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -14,6 +14,7 @@ import ContextWrapper from "./contexts";
 import { CustomNavigate } from "./customization/components/custom-navigate";
 import { BASENAME } from "./customization/config-constants";
 import { ENABLE_CUSTOM_PARAM } from "./customization/feature-flags";
+import { AppAuthenticatedPage } from "./pages/AppAuthenticatedPage";
 import { AppInitPage } from "./pages/AppInitPage";
 import { AppWrapperPage } from "./pages/AppWrapperPage";
 import { DashboardWrapperPage } from "./pages/DashboardWrapperPage";
@@ -57,102 +58,112 @@ const router = createBrowserRouter(
               </ProtectedRoute>
             }
           >
-            <Route path="" element={<DashboardWrapperPage />}>
-              <Route path="" element={<HomePage />}>
-                <Route index element={<CustomNavigate replace to={"all"} />} />
-                <Route
-                  path="flows/"
-                  element={<MyCollectionComponent key="flows" type="flow" />}
-                >
+            <Route path="" element={<AppAuthenticatedPage />}>
+              <Route path="" element={<DashboardWrapperPage />}>
+                <Route path="" element={<HomePage />}>
                   <Route
-                    path="folder/:folderId"
-                    element={<MyCollectionComponent key="flows" type="flow" />}
+                    index
+                    element={<CustomNavigate replace to={"all"} />}
                   />
-                </Route>
-                <Route
-                  path="components/"
-                  element={
-                    <MyCollectionComponent key="components" type="component" />
-                  }
-                >
                   <Route
-                    path="folder/:folderId"
+                    path="flows/"
+                    element={<MyCollectionComponent key="flows" type="flow" />}
+                  >
+                    <Route
+                      path="folder/:folderId"
+                      element={
+                        <MyCollectionComponent key="flows" type="flow" />
+                      }
+                    />
+                  </Route>
+                  <Route
+                    path="components/"
                     element={
                       <MyCollectionComponent
                         key="components"
                         type="component"
                       />
                     }
-                  />
-                </Route>
-                <Route
-                  path="all/"
-                  element={<MyCollectionComponent key="all" type="all" />}
-                >
+                  >
+                    <Route
+                      path="folder/:folderId"
+                      element={
+                        <MyCollectionComponent
+                          key="components"
+                          type="component"
+                        />
+                      }
+                    />
+                  </Route>
                   <Route
-                    path="folder/:folderId"
+                    path="all/"
                     element={<MyCollectionComponent key="all" type="all" />}
-                  />
+                  >
+                    <Route
+                      path="folder/:folderId"
+                      element={<MyCollectionComponent key="all" type="all" />}
+                    />
+                  </Route>
+                </Route>
+                <Route path="settings" element={<SettingsPage />}>
+                  <Route
+                    index
+                    element={<CustomNavigate replace to={"general"} />}
+                  />
+                  <Route
+                    path="global-variables"
+                    element={<GlobalVariablesPage />}
+                  />
+                  <Route path="api-keys" element={<ApiKeysPage />} />
+                  <Route
+                    path="general/:scrollId?"
+                    element={
+                      <AuthSettingsGuard>
+                        <GeneralPage />
+                      </AuthSettingsGuard>
+                    }
+                  />
+                  <Route path="shortcuts" element={<ShortcutsPage />} />
+                  <Route path="messages" element={<MessagesPage />} />
                 </Route>
-              </Route>
-              <Route path="settings" element={<SettingsPage />}>
                 <Route
-                  index
-                  element={<CustomNavigate replace to={"general"} />}
-                />
-                <Route
-                  path="global-variables"
-                  element={<GlobalVariablesPage />}
-                />
-                <Route path="api-keys" element={<ApiKeysPage />} />
-                <Route
-                  path="general/:scrollId?"
+                  path="store"
                   element={
-                    <AuthSettingsGuard>
-                      <GeneralPage />
-                    </AuthSettingsGuard>
+                    <StoreGuard>
+                      <StorePage />
+                    </StoreGuard>
+                  }
+                />
+                <Route
+                  path="store/:id/"
+                  element={
+                    <StoreGuard>
+                      <StorePage />
+                    </StoreGuard>
+                  }
+                />
+                <Route path="account">
+                  <Route path="delete" element={<DeleteAccountPage />}></Route>
+                </Route>
+                <Route
+                  path="admin"
+                  element={
+                    <ProtectedAdminRoute>
+                      <AdminPage />
+                    </ProtectedAdminRoute>
                   }
                 />
-                <Route path="shortcuts" element={<ShortcutsPage />} />
-                <Route path="messages" element={<MessagesPage />} />
               </Route>
-              <Route
-                path="store"
-                element={
-                  <StoreGuard>
-                    <StorePage />
-                  </StoreGuard>
-                }
-              />
-              <Route
-                path="store/:id/"
-                element={
-                  <StoreGuard>
-                    <StorePage />
-                  </StoreGuard>
-                }
-              />
-              <Route path="account">
-                <Route path="delete" element={<DeleteAccountPage />}></Route>
+              <Route path="flow/:id/">
+                <Route path="" element={<DashboardWrapperPage />}>
+                  <Route path="folder/:folderId/" element={<FlowPage />} />
+                  <Route path="" element={<FlowPage />} />
+                </Route>
+                <Route path="view" element={<ViewPage />} />
               </Route>
-              <Route
-                path="admin"
-                element={
-                  <ProtectedAdminRoute>
-                    <AdminPage />
-                  </ProtectedAdminRoute>
-                }
-              />
-            </Route>
-            <Route path="flow/:id/">
-              <Route path="" element={<DashboardWrapperPage />}>
-                <Route path="folder/:folderId/" element={<FlowPage />} />
-                <Route path="" element={<FlowPage />} />
+              <Route path="playground/:id/">
+                <Route path="" element={<PlaygroundPage />} />
               </Route>
-              <Route path="view" element={<ViewPage />} />
-            </Route>
-            <Route path="playground/:id/">
-              <Route path="" element={<PlaygroundPage />} />
             </Route>
           </Route>
           <Route