simpler routing without react router...better for me

packages/desktop/package.json

@@ -106,7 +106,6 @@
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-query": "^3.34.16",
-    "react-router-dom": "^6.2.2",
     "recoil": "^0.6.1"
   }
 }

packages/desktop/src/components/ProtectedRoute/index.tsx

@@ -1,5 +1,4 @@
-import { Route, useNavigate } from "react-router-dom";
-
+import Login from "../../pages/Login";
 import { STORE_ITEMS } from "../../electron/store";
 import { nirvanaApi } from "../../controller/nirvanaApi";
 import { useEffect } from "react";
@@ -10,21 +9,20 @@ export default function ProtectedRoute({
 }: {
   children?: React.ReactNode;
 }) {
-  const { isLoading, isError } = useGetUserDetails();
-  const navigate = useNavigate();
+  const { isLoading, isError, refetch } = useGetUserDetails();
 
   useEffect(() => {
     // console.log(window.electronAPI.store.get(STORE_ITEMS.AUTH_TOKENS));
     // nirvanaApi.getUserDetails();
   }, []);
 
+  if (isLoading || true)
+    return <span>please wait while we authenticate you</span>;
+
   if (isError) {
-    navigate("/login");
+    return <Login onReady={() => refetch()} />;
   }
 
-  if (isLoading) return <span>please wait while we authenticate you</span>;
-
   // if we can successfully get user details, we are good to continue
-
   return <>{children}</>;
 }

packages/desktop/src/controller/index.tsx

@@ -27,7 +27,7 @@ export function useGetUserDetails() {
 
   return useQuery(
     Querytypes.GET_USER_DETAILS,
-    () => getUserDetails(authTokens.accessToken, authTokens.idToken),
+    () => getUserDetails(authTokens?.accessToken, authTokens?.idToken),
     {
       retry: false,
     }

packages/desktop/src/controller/recoil.tsx

@@ -4,7 +4,7 @@ export const $authTokens = atom<{
   accessToken: string;
   refreshToken: string;
   idToken: string;
-}>({
+} | null>({
   key: "AUTH_TOKENS", // unique ID (with respect to other atoms/selectors)
   default: null, // default value (aka initial value)
 });

packages/desktop/src/nirvanaApp.tsx

@@ -1,4 +1,3 @@
-import { BrowserRouter, HashRouter, Route, Routes } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
 
 import Home from "./pages/Home";
@@ -18,22 +17,9 @@ function NirvanaApp() {
     <>
       <QueryClientProvider client={queryClient}>
         <RecoilRoot>
-          <HashRouter>
-            <Routes>
-              <Route path="/" element={<Login />} />
-              <Route
-                path="home"
-                element={
-                  <ProtectedRoute>
-                    <Home />
-                  </ProtectedRoute>
-                }
-              />
-              {/* <Route exact path="/profile/create" component={Sit} />
-            <Route exact path="/profile/edit" component={Sit} /> */}
-            </Routes>
-          </HashRouter>
-
+          <ProtectedRoute>
+            <Home />
+          </ProtectedRoute>
           <ReactQueryDevtools initialIsOpen={false} />
         </RecoilRoot>
       </QueryClientProvider>

packages/desktop/src/pages/Login/index.tsx

@@ -7,11 +7,9 @@ import { FcGoogle } from "react-icons/fc";
 import Logo from "../../components/Logo";
 import { nirvanaApi } from "../../controller/nirvanaApi";
 import { useCreateUser } from "../../controller/index";
-import { useNavigate } from "react-router-dom";
 import { useSetRecoilState } from "recoil";
 
-export default function Login() {
-  const navigate = useNavigate();
+export default function Login({ onReady }: { onReady: Function }) {
   const setAuthTokens = useSetRecoilState($authTokens);
 
   const continueAuth = () => {
@@ -34,7 +32,7 @@ export default function Login() {
         });
 
         // now can go to home and get authenticated regardless of type of user
-        navigate("/home");
+        onReady();
       }
     );