changes on the routing system

WardAnalytics · Feb 20, 2024 · 3faec5d · 3faec5d
1 parent 67053df
commit 3faec5d
Show file tree

Hide file tree

Showing 14 changed files with 109 additions and 97 deletions.
diff --git a/src/PrivateApp.tsx b/src/PrivateApp.tsx
@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
 
 import Navbar from "./components/navbar";
 import {
@@ -16,29 +16,29 @@ interface PrivateAppProps {
 const PrivateApp: FC<PrivateAppProps> = ({
   userID
 }) => {
-  console.log(userID);
-
   return (
-    <div className="flex h-screen w-screen flex-row">
-      <BrowserRouter>
-        <Navbar />
-        <Routes>
-          <Route
-            path={`/${userID}/graph/:uid`}
-            element={<UnsavedGraphTemplate showLandingPage={false} />}
-          />
-          <Route
-            path={`/${userID}/graph`}
-            element={<UnsavedGraphTemplate showLandingPage={false} />}
-          />
-          <Route path={`/${userID}/graph/new`} element={<UnsavedGraphTemplate showLandingPage={false} />} />
-          <Route path="/saved-graph/:uid" element={<SavedGraphTemplate />} />
-          <Route path={`${userID}/billing`} element={<BillingTemplate />} />
-          <Route path={`${userID}/graphs`} element={<SavedGraphsTemplate />} />
-          <Route path="*" element={<UnsavedGraphTemplate showLandingPage={false} />} />
-        </Routes>
-      </BrowserRouter>
-    </div>
+    userID ?
+      <div className="flex h-screen w-screen flex-row">
+        < BrowserRouter >
+          <Navbar userID={userID} />
+          <Routes>
+            <Route
+              path={`/${userID}/graph/:uid`}
+              element={<UnsavedGraphTemplate showLandingPage={false} />}
+            />
+            <Route
+              path={`/${userID}/graph`}
+              element={<UnsavedGraphTemplate showLandingPage={false} />}
+            />
+            <Route path={`/${userID}/graph/new`} element={<UnsavedGraphTemplate showLandingPage={false} />} />
+            <Route path={`/${userID}/saved-graph/:uid`} element={<SavedGraphTemplate />} />
+            <Route path={`/${userID}/billing`} element={<BillingTemplate />} />
+            <Route path={`/${userID}/graphs`} element={<SavedGraphsTemplate />} />
+            <Route path="*" element={<Navigate to={`/${userID}/graph`} />} />
+          </Routes>
+        </BrowserRouter >
+      </div >
+      : null
   );
 };
 

diff --git a/src/PublicApp.tsx b/src/PublicApp.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { FC, createContext, useEffect, useState } from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
 
 import AuthDialog from "./components/auth";
 import { UnsavedGraphTemplate } from "./templates";
@@ -53,9 +53,10 @@ const PublicApp: FC = () => {
       <UnauthenticatedTimeContext.Provider value={unauthenticatedTimeContext}>
         <div className="flex h-screen w-screen flex-row">
           <Routes>
+            <Route path="/public" element={<UnsavedGraphTemplate showLandingPage={true} />} />
             <Route path="/public/graph/:uid" element={<UnsavedGraphTemplate />} />
             <Route path="/public/graph" element={<UnsavedGraphTemplate />} />
-            <Route path="*" element={<UnsavedGraphTemplate />} />
+            <Route path="*" element={<Navigate to="/public" />} />
           </Routes>
         </div>
       </UnauthenticatedTimeContext.Provider>

diff --git a/src/components/auth/AuthDialog.tsx b/src/components/auth/AuthDialog.tsx
@@ -7,12 +7,12 @@ import { FC, createContext, useEffect, useState } from "react";
 import AuthApiErrors from "../../services/auth/auth.errors";
 
 import { EnvelopeIcon } from "@heroicons/react/24/solid";
+import { useNavigate } from "react-router";
+import { logAnalyticsEvent } from "../../services/firestore/analytics/analytics";
 import Modal from "../common/Modal";
 import ForgotPasswordForm from "./ForgotPasswordForm";
 import LoginForm from "./LoginForm";
 import SignupForm from "./SignupForm";
-import { logAnalyticsEvent } from "../../services/firestore/analytics/analytics";
-import { useNavigate } from "react-router";
 import { RedirectUrl } from "./WithAuth";
 
 
@@ -23,9 +23,9 @@ export enum AuthDialogState {
 }
 
 interface AuthContextProps {
-  onLoginSuccess: () => void;
+  onLoginSuccess: (userID: string) => void;
   onLoginError: (error: any) => void;
-  onGoogleLoginSucess: () => void;
+  onGoogleLoginSucess: (userID: string) => void;
   onGoogleLoginError: (error: any) => void;
   onSignupSuccess: () => void;
   onSignupError: (error: any) => void;
@@ -73,6 +73,27 @@ const AuthDialog: FC<AuthDialogProps> = ({
     null,
   );
 
+  const redirectOnLogin = (userID: string) => {
+
+    const { pathname, queryParams } = redirectUrl;
+
+    const url: { pathname: string; search: string } = {
+      pathname,
+      search: ""
+    }
+
+    url.pathname = `/${userID}/${pathname}`;
+
+    if (queryParams) {
+      const searchParams = new URLSearchParams(queryParams);
+      url.search = searchParams.toString();
+
+    }
+
+    navigate(url);
+
+  }
+
   /**
    * Resets the authApiErrorMessage state to null
    *
@@ -99,25 +120,10 @@ const AuthDialog: FC<AuthDialogProps> = ({
    *
    * @returns void
    */
-  const onLoginSuccess = () => {
+  const onLoginSuccess = (userID: string) => {
     logAnalyticsEvent("login", { method: "email" });
     closeDialog();
-    if (redirectUrl) {
-      const { pathname, queryParams } = redirectUrl;
-
-      const url: { pathname: string; search: string } = {
-        pathname,
-        search: ""
-      }
-
-      if (queryParams) {
-        const searchParams = new URLSearchParams(queryParams);
-        url.search = searchParams.toString();
-      }
-
-      navigate(url);
-      return;
-    }
+    redirectOnLogin(userID);
   };
 
   /**
@@ -143,9 +149,10 @@ const AuthDialog: FC<AuthDialogProps> = ({
    *
    * @returns void
    */
-  const onGoogleLoginSucess = () => {
+  const onGoogleLoginSucess = (userID: string) => {
     logAnalyticsEvent("login", { method: "google" });
     closeDialog();
+    redirectOnLogin(userID);
   };
 
   /**

diff --git a/src/components/banner/LoginBanner.tsx b/src/components/banner/LoginBanner.tsx
@@ -1,21 +1,10 @@
-import { FC, useMemo, useState } from "react";
+import { FC, useState } from "react";
 import Banner from ".";
 import LoginDialog from "../auth";
-import useAuthState from "../../hooks/useAuthState";
 
 const LoginBanner: FC = () => {
     const [isLoginDialogOpen, setIsLoginDialogOpen] = useState<boolean>(false);
 
-    const { user } = useAuthState();
-
-    const userID = useMemo(() => {
-        if (user) {
-            return user.uid;
-        }
-
-        return "";
-    }, [user]);
-
     return (
         <>
             <Banner>
@@ -40,7 +29,6 @@ const LoginBanner: FC = () => {
             <LoginDialog
                 isOpen={isLoginDialogOpen}
                 setIsOpen={setIsLoginDialogOpen}
-                redirectUrl={{ pathname: `/${userID}/graph` }}
             />
         </>
     )

diff --git a/src/components/common/CreateGraphDialog.tsx b/src/components/common/CreateGraphDialog.tsx
@@ -46,7 +46,7 @@ const CreateGraphDialog: FC<CreateGraphDialogProps> = ({
     };
     createPersonalGraph(user.uid, graph).then((uid) => {
       setOpen(false);
-      navigate(`/saved-graph/${uid}`);
+      navigate(`/${user.uid}/saved-graph/${uid}`);
     });
   }, [graphName]);
 

diff --git a/src/components/graph/hotbar/components/CreateGraphDialog.tsx b/src/components/graph/hotbar/components/CreateGraphDialog.tsx
@@ -47,7 +47,7 @@ const CreateGraphDialog: FC<CreateGraphDialogProps> = ({
     createPersonalGraph(user!.uid, graph).then((uid) => {
       logAnalyticsEvent("graph_created", { graphName });
       setOpen(false);
-      navigate(`/saved-graph/${uid}`);
+      navigate(`/${user?.uid}/saved-graph/${uid}`);
     });
   }, [graphName]);
 

diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -24,7 +24,6 @@ import {
   PlusCircleIcon,
   WrenchScrewdriverIcon,
 } from "@heroicons/react/16/solid";
-import useAuthState from "../../hooks/useAuthState";
 import { logAnalyticsEvent } from "../../services/firestore/analytics/analytics";
 import {
   getGraphHref,
@@ -102,11 +101,16 @@ interface SavedGraphRowProps {
 
 const SAVED_GRAPHS_LIMIT = 3;
 
-const SavedGraphs: FC = () => {
+interface SavedGraphsProps {
+  userID: string
+}
+
+const SavedGraphs: FC<SavedGraphsProps> = ({
+  userID,
+}) => {
   const navigate = useNavigate();
 
-  const { user } = useAuthState();
-  const { graphs } = usePersonalGraphs(user ? user.uid : "");
+  const { graphs } = usePersonalGraphs(userID ? userID : "");
   const { displayedGraphs } = useMemo(() => {
     return {
       displayedGraphs: graphs.slice(0, SAVED_GRAPHS_LIMIT),
@@ -124,7 +128,7 @@ const SavedGraphs: FC = () => {
     }
 
     // If we are on a saved graph, we want to navigate to the new graph page
-    navigate("/graph/new");
+    navigate(`/${userID}/graph/new`);
   }
 
   return (
@@ -143,7 +147,7 @@ const SavedGraphs: FC = () => {
         >
           <SavedGraphRow
             name={graph.name}
-            href={getGraphHref(graph)}
+            href={getGraphHref(userID, graph)}
             isLast={index === displayedGraphs.length - 1}
           />
         </Transition>
@@ -207,9 +211,16 @@ const SavedGraphRow: FC<SavedGraphRowProps> = ({ name, href }) => {
   );
 };
 
-const Navbar: FC = () => {
+interface NavbarProps {
+  userID: string;
+}
+
+const Navbar: FC<NavbarProps> = ({
+  userID
+}) => {
   // Sign out functionality
   const navigate = useNavigate();
+
   const handleSignOut = () => {
     authService.logout(onLogoutSuccess, onLogoutError);
   };
@@ -260,14 +271,14 @@ const Navbar: FC = () => {
                           Icon={item.icon}
                           onClick={() => {
                             logAnalyticsEvent("navbar_option_clicked", { name: item.name });
-                            navigate(item.href)
+                            navigate(`/${userID}/${item.href}`)
                           }}
                           isBeta={item.isBeta}
                         />
                       </li>
                     ))}
                     <li>
-                      <SavedGraphs />
+                      <SavedGraphs userID={userID} />
                     </li>
                   </ul>
                 </li>
@@ -280,7 +291,7 @@ const Navbar: FC = () => {
                     isBeta={false}
                     onClick={() => {
                       logAnalyticsEvent("navbar_option_clicked", { name: "Plan & Billing" });
-                      navigate("billing")
+                      navigate(`/${userID}/billing`)
                     }}
                   />
                   <a

diff --git a/src/components/premium/PlansList.tsx b/src/components/premium/PlansList.tsx
@@ -50,15 +50,15 @@ const DiscoverPlan: FC<PlanProps> = ({ isPro }) => {
 interface ProPlanProps extends PlanProps {
     userID: string;
     subscription?: Subscription;
-    sucessRedirectPath?: string;
+    successRedirectPath?: string;
     cancelRedirectPath?: string;
 }
 
 const ProPlan: FC<ProPlanProps> = ({
     isPro,
     userID,
     subscription,
-    sucessRedirectPath,
+    successRedirectPath,
     cancelRedirectPath,
 }) => {
     const [buyPlanClicked, setBuyPlanClicked] = useState<boolean>(false);
@@ -72,7 +72,7 @@ const ProPlan: FC<ProPlanProps> = ({
         url: checkoutSessionUrl,
         loading: isLoadingCheckoutSession,
         refetch: getCheckoutSession,
-    } = useCheckoutSessionUrl(priceId, userID, { enabled: false, successPath: sucessRedirectPath, cancelPath: cancelRedirectPath });
+    } = useCheckoutSessionUrl(priceId, userID, { enabled: false, successPath: successRedirectPath, cancelPath: cancelRedirectPath });
 
     useEffect(() => {
         if (buyPlanClicked) {
@@ -213,15 +213,15 @@ interface PlanListProps {
     isPro: boolean;
     userID: string;
     subscription?: Subscription;
-    sucessRedirectPath?: string;
+    successRedirectPath?: string;
     cancelRedirectPath?: string;
 }
 
 const PlansList: FC<PlanListProps> = ({
     isPro,
     userID,
     subscription,
-    sucessRedirectPath,
+    successRedirectPath,
     cancelRedirectPath,
 }) => {
     return (
@@ -233,7 +233,7 @@ const PlansList: FC<PlanListProps> = ({
                     isPro={isPro}
                     userID={userID}
                     subscription={subscription}
-                    sucessRedirectPath={sucessRedirectPath}
+                    successRedirectPath={successRedirectPath}
                     cancelRedirectPath={cancelRedirectPath}
                 />
                 <EnterprisePlan />

diff --git a/src/components/premium/TurnPremiumDialog.tsx b/src/components/premium/TurnPremiumDialog.tsx
@@ -49,7 +49,7 @@ const TurnPremiumDialog: FC<TurnPremiumDialogProps> = ({
                 <p className="text-gray-500">
                     You reached the limit of the free usage of this feature. To continue using it, you need to upgrade to a Pro plan.
                 </p>
-                <PlansList isPro={false} userID={userID} sucessRedirectPath={sucessRedirectPath} cancelRedirectPath={cancelRedirectPath} />
+                <PlansList isPro={false} userID={userID} successRedirectPath={sucessRedirectPath} cancelRedirectPath={cancelRedirectPath} />
             </div>
         </Modal >
     )