adding route that works with creating user and such

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

@@ -5,24 +5,27 @@ import { nirvanaApi } from "../../controller/nirvanaApi";
 import { useEffect } from "react";
 import { useGetUserDetails } from "../../controller/index";
 
-export default function ProtectedRoute({ ...children }) {
+export default function ProtectedRoute({
+  children,
+}: {
+  children?: React.ReactNode;
+}) {
   const { isLoading, isError } = useGetUserDetails();
-
-  useEffect(() => {
-    // console.log(window.electronAPI.store.get(STORE_ITEMS.AUTH_TOKENS));
-    // nirvanaApi.getUserDetails();
-  }, []);
-
   const navigate = useNavigate();
 
-  if (isLoading) return <span>please wait while we authenticate you</span>;
-
   useEffect(() => {
     if (isError) {
       navigate("/login");
     }
   }, [isError]);
 
+  useEffect(() => {
+    // console.log(window.electronAPI.store.get(STORE_ITEMS.AUTH_TOKENS));
+    // nirvanaApi.getUserDetails();
+  }, []);
+
+  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

@@ -1,12 +1,22 @@
+import { useMutation, useQuery } from "react-query";
+
 import { nirvanaApi } from "./nirvanaApi";
-import { useQuery } from "react-query";
+import { queryClient } from "../nirvanaApp";
 
 export enum Querytypes {
   GET_USER_DETAILS = "GET_USER_DETAILS",
 }
 
 export function useGetUserDetails() {
-  return useQuery(Querytypes.GET_USER_DETAILS, () =>
-    nirvanaApi.getUserDetails()
-  );
+  return useQuery(Querytypes.GET_USER_DETAILS, nirvanaApi.user.getUserDetails, {
+    retry: false,
+  });
+}
+
+export function useCreateUser() {
+  return useMutation(nirvanaApi.user.createUser, {
+    onSettled: (data, error) => {
+      return queryClient.invalidateQueries(Querytypes.GET_USER_DETAILS);
+    },
+  });
 }

packages/desktop/src/controller/nirvanaApi.ts

@@ -40,14 +40,24 @@ class NirvanaApi {
     }
   }
 
-  async getUserDetails(): Promise<User> {
-    return await (
-      await fetch(localHost + `/users`, {
-        method: "GET",
-        headers: { Authorization: this._authToken },
-      })
-    ).json();
-  }
+  user = {
+    async getUserDetails(): Promise<User> {
+      return await (
+        await fetch(localHost + `/users`, {
+          method: "GET",
+          headers: { Authorization: this._authToken },
+        })
+      ).json();
+    },
+    async createUser(accessToken: string) {
+      return await fetch(
+        localHost + `/users/create?access_token=${accessToken}`,
+        {
+          method: "POST",
+        }
+      );
+    },
+  };
 }
 
 export const nirvanaApi = new NirvanaApi();

packages/desktop/src/nirvanaApp.tsx

@@ -10,7 +10,7 @@ import testConnection from "@nirvana/core";
 testConnection();
 
 // Create a client
-const queryClient = new QueryClient();
+export const queryClient = new QueryClient();
 
 function NirvanaApp() {
   return (

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

@@ -4,12 +4,17 @@ import Channels from "../../electron/constants";
 import { CircularProgress } from "@mui/material";
 import Logo from "../../components/Logo";
 import { nirvanaApi } from "../../controller/nirvanaApi";
+import { useCreateUser } from "../../controller/index";
 import { useNavigate } from "react-router-dom";
 
 export default function Login() {
   const navigate = useNavigate();
 
-  const logIn = () => {
+  const [isSignUp, setIsSignUp] = useState<boolean>(false);
+
+  const { mutateAsync } = useCreateUser();
+
+  const continueAuth = () => {
     setIsLoading(true);
     // send to main process
     // ipcRenderer.send(Channels.ACTIVATE_LOG_IN);
@@ -25,7 +30,12 @@ export default function Login() {
 
       nirvanaApi.setGoogleIdToken(id_token);
 
-      // home should handle this user now that they have signed in with google
+      // create user if on sign up page
+      if (isSignUp) {
+        await mutateAsync(access_token);
+      }
+
+      // now can go to home and get authenticated regardless of type of user
       navigate("/home");
     });
 
@@ -48,10 +58,20 @@ export default function Login() {
         </>
       ) : (
         <button
-          onClick={logIn}
+          onClick={continueAuth}
           className="text-white p-3 rounded shadow border border-white"
         >
-          Sign In
+          {isSignUp ? "Sign Up" : "Sign In"}
+        </button>
+      )}
+
+      {isSignUp ? (
+        <button onClick={() => setIsSignUp(false)} className="text-slate-200">
+          Sign In Here
+        </button>
+      ) : (
+        <button onClick={() => setIsSignUp(true)} className="text-slate-200">
+          Create Account Here
         </button>
       )}
     </div>