Fixes for state mangement, small refactors, and new workspaces

Author: joeldevelops

…ckages/app/src/components/AppSidebar.tsx …pp/src/components/Sidebar/AppSidebar.tsxpackages/app/src/components/AppSidebar.tsx renamed to packages/app/src/components/Sidebar/AppSidebar.tsx packages/app/src/components/AppSidebar.tsx renamed to packages/app/src/components/Sidebar/AppSidebar.tsx

@@ -1,53 +1,21 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router";
-import { StoreContext } from "../contexts/StoreContext";
+import { StoreContext } from "../../contexts/StoreContext";
+import WorkspaceDetails from "./WorkspaceDetails"
 import WorkspaceMenu from "./WorkspaceMenu";
-import { Workspace } from "../types";
 
 export default function AppSidebar() {
   const { state } = useContext(StoreContext);
   const location = useLocation();
   const navigate = useNavigate();
 
-  const [workspace, setWorkspace] = useState<Workspace>({ 
-    name: "Default", 
-    users: [] ,
-    id: "0",
-    projects: [],
-    settings: {},
-    createdAt: new Date().toISOString(),
-    updatedAt: new Date().toISOString(),
-  });
-
   useEffect(() => {
     const userData = state.user;
     console.log("userData", userData);
     if (!userData) {
       return;
     }
-
-    console.log("activeWorkspace", state.activeWorkspace);
-
-    let activeWorkspace;
-    if (!state.activeWorkspace) {
-      if (!localStorage.getItem("activeWorkspace")) {
-        return;
-      }
-      activeWorkspace = parseInt(localStorage.getItem("activeWorkspace") as string);
-    } else {
-      activeWorkspace = state.activeWorkspace;
-    }
-
-    const workspaces = userData.workspaces;
-    const found = workspaces.find(
-      (ws: any) => ws.id === activeWorkspace
-    );
-    if (!found) {
-      return;
-    }
-    console.log("found", found);
-    setWorkspace(found);
-  }, [state.activeWorkspace, state.user]);
+  }, [state.user]);
 
   return (
     <div className="bg-secondaryBackground-light dark:bg-secondaryBackground-dark w-80 px-4 py-2 rounded-xl flex flex-col">
@@ -66,28 +34,7 @@ export default function AppSidebar() {
       </div>
 
       {/* Workspace info */}
-      <div className="px-4 py-4 bg-[#212047] rounded-lg mt-4 border-[1px] border-[#35345B]">
-        <h2 className="font-bold">{workspace.name} Workspace</h2>
-        <div className="flex gap-x-2 border-b-[1px] border-[#2B2A51] pt-2 pb-3">
-          {/* IMG */}
-          <div className="flex">
-            {workspace.users[0] && <img className="w-6 h-6 rounded-full border-[1px] border-foreground-light dark:border-foreground-dark" src={workspace.users[0].avatar} alt="Profile" />}
-            {workspace.users[1] && <img className="w-6 h-6 ml-[-6px] rounded-full border-[1px] border-foreground-light dark:border-foreground-dark" src={workspace.users[1].avatar} alt="Profile" />}
-            {workspace.users[2] && <img className="w-6 h-6 ml-[-6px] rounded-full border-[1px] border-foreground-light dark:border-foreground-dark" src={workspace.users[2].avatar} alt="Profile" />}
-          </div>
-          <p className="text-text-lightInfo dark:text-text-darkInfo text-sm">{workspace.users.length} {workspace.users.length === 1 ? "member" : "members"}</p>
-        </div>
-
-        {/* Invite teammates */}
-        <button className="flex text-text-gray w-full mt-2 p-2 gap-x-2 rounded-lg hover:bg-hover-light dark:hover:bg-hover-dark transition-all">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.35861 12.7691C4.92484 11.6727 4 9.94433 4 8C4 4.68629 6.68629 2 10 2C13.3137 2 16 4.68629 16 8C16 9.94433 15.0752 11.6727 13.6414 12.7691C14.479 13.1397 15.2595 13.6379 15.9535 14.25C16.3677 14.6153 16.4073 15.2473 16.0419 15.6615C15.6766 16.0756 15.0447 16.1152 14.6305 15.7499C13.6202 14.8587 12.3741 14.278 11.0419 14.0775C10.7144 14.0282 10.3851 14.0024 10.0564 13.9997L10 14L9.94361 13.9997C8.97355 14.0076 8.01151 14.217 7.12002 14.6194C5.89211 15.1737 4.85024 16.0705 4.11943 17.2023C3.38862 18.3341 2.99993 19.6527 3 20.9999C3.00003 21.5522 2.55234 21.9999 2.00005 22C1.44777 22 1.00003 21.5523 1 21C0.999905 19.2679 1.49965 17.5725 2.43926 16.1174C3.37888 14.6622 4.71843 13.5092 6.29717 12.7965L6.35861 12.7691ZM6 8C6 5.79086 7.79086 4 10 4C12.2091 4 14 5.79086 14 8C14 10.1917 12.2374 11.9716 10.0524 11.9997C10.0175 11.9995 9.98255 11.9995 9.94766 11.9997C7.76264 11.9716 6 10.1917 6 8Z" fill="currentColor"/>
-            <path d="M19 15C19.5523 15 20 15.4477 20 16V18H22C22.5523 18 23 18.4477 23 19C23 19.5523 22.5523 20 22 20H20V22C20 22.5523 19.5523 23 19 23C18.4477 23 18 22.5523 18 22V20H16C15.4477 20 15 19.5523 15 19C15 18.4477 15.4477 18 16 18H18V16C18 15.4477 18.4477 15 19 15Z" fill="currentColor"/>
-          </svg>
-          <p className="text-md">Invite teammates</p>
-
-        </button>
-      </div>
+      <WorkspaceDetails />
 
       {/* Navigation */}
       <div className="grow flex flex-col mt-8 gap-y-2">

packages/app/src/components/Sidebar/WorkspaceDetails.tsx

@@ -0,0 +1,53 @@
+import { useContext, useEffect, useState } from "react";
+import { StoreContext } from "../../contexts/StoreContext";
+import { Workspace } from "../../types";
+
+export default function WorkspaceDetails() {
+  const { state } = useContext(StoreContext);
+
+  const [workspace, setWorkspace] = useState<Workspace>({ 
+    name: "Default", 
+    users: [] ,
+    id: 0,
+    projects: [],
+    settings: {},
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  });
+
+  useEffect(() => {
+    const userData = state.user;
+    if (!userData) {
+      return;
+    }
+
+    if (state.activeWorkspace) {
+      setWorkspace(state.activeWorkspace);
+    }
+  }, [state.activeWorkspace, state.user]);
+
+  return (
+    <div className="px-4 py-4 bg-[#212047] rounded-lg mt-4 border-[1px] border-[#35345B]">
+      <h2 className="font-bold">{workspace.name} Workspace</h2>
+      <div className="flex gap-x-2 border-b-[1px] border-[#2B2A51] pt-2 pb-3">
+        {/* IMG */}
+        <div className="flex">
+          {workspace.users[0] && <img className="w-6 h-6 rounded-full border-[1px] border-foreground-light dark:border-foreground-dark" src={workspace.users[0].avatar} alt="Profile" />}
+          {workspace.users[1] && <img className="w-6 h-6 ml-[-6px] rounded-full border-[1px] border-foreground-light dark:border-foreground-dark" src={workspace.users[1].avatar} alt="Profile" />}
+          {workspace.users[2] && <img className="w-6 h-6 ml-[-6px] rounded-full border-[1px] border-foreground-light dark:border-foreground-dark" src={workspace.users[2].avatar} alt="Profile" />}
+        </div>
+        <p className="text-text-lightInfo dark:text-text-darkInfo text-sm">{workspace.users.length} {workspace.users.length === 1 ? "member" : "members"}</p>
+      </div>
+
+      {/* Invite teammates */}
+      <button className="flex text-text-gray w-full mt-2 p-2 gap-x-2 rounded-lg hover:bg-hover-light dark:hover:bg-hover-dark transition-all">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M6.35861 12.7691C4.92484 11.6727 4 9.94433 4 8C4 4.68629 6.68629 2 10 2C13.3137 2 16 4.68629 16 8C16 9.94433 15.0752 11.6727 13.6414 12.7691C14.479 13.1397 15.2595 13.6379 15.9535 14.25C16.3677 14.6153 16.4073 15.2473 16.0419 15.6615C15.6766 16.0756 15.0447 16.1152 14.6305 15.7499C13.6202 14.8587 12.3741 14.278 11.0419 14.0775C10.7144 14.0282 10.3851 14.0024 10.0564 13.9997L10 14L9.94361 13.9997C8.97355 14.0076 8.01151 14.217 7.12002 14.6194C5.89211 15.1737 4.85024 16.0705 4.11943 17.2023C3.38862 18.3341 2.99993 19.6527 3 20.9999C3.00003 21.5522 2.55234 21.9999 2.00005 22C1.44777 22 1.00003 21.5523 1 21C0.999905 19.2679 1.49965 17.5725 2.43926 16.1174C3.37888 14.6622 4.71843 13.5092 6.29717 12.7965L6.35861 12.7691ZM6 8C6 5.79086 7.79086 4 10 4C12.2091 4 14 5.79086 14 8C14 10.1917 12.2374 11.9716 10.0524 11.9997C10.0175 11.9995 9.98255 11.9995 9.94766 11.9997C7.76264 11.9716 6 10.1917 6 8Z" fill="currentColor"/>
+          <path d="M19 15C19.5523 15 20 15.4477 20 16V18H22C22.5523 18 23 18.4477 23 19C23 19.5523 22.5523 20 22 20H20V22C20 22.5523 19.5523 23 19 23C18.4477 23 18 22.5523 18 22V20H16C15.4477 20 15 19.5523 15 19C15 18.4477 15.4477 18 16 18H18V16C18 15.4477 18.4477 15 19 15Z" fill="currentColor"/>
+        </svg>
+        <p className="text-md">Invite teammates</p>
+
+      </button>
+    </div>
+  )
+}

…ges/app/src/components/WorkspaceMenu.tsx …src/components/Sidebar/WorkspaceMenu.tsxpackages/app/src/components/WorkspaceMenu.tsx renamed to packages/app/src/components/Sidebar/WorkspaceMenu.tsx packages/app/src/components/WorkspaceMenu.tsx renamed to packages/app/src/components/Sidebar/WorkspaceMenu.tsx

@@ -1,6 +1,6 @@
 import { DropdownMenu } from '@radix-ui/themes';
 import { useEffect, useState, useContext } from 'react';
-import { StoreContext } from '../contexts/StoreContext';
+import { StoreContext } from '../../contexts/StoreContext';
 import { useNavigate } from 'react-router';
 // import { NewWorkspaceDialog } from './NewWorkspaceDialog';
 
@@ -12,12 +12,12 @@ export default function WorkspaceMenu() {
   const isActiveWorkspace = (workspace: any) => {
     const activeWorkspace = stateContext.state.activeWorkspace;
     console.log(activeWorkspace, workspace.id);
-    return activeWorkspace && workspace.id === activeWorkspace;
+    return activeWorkspace && workspace.id === activeWorkspace.id;
   }
 
   const setActiveWorkspace = (workspace: any) => {
-    stateContext.changeState({ activeWorkspace: workspace.id });
-    localStorage.setItem('activeWorkspace', workspace.id);
+    stateContext.changeState({ activeWorkspace: workspace });
+    localStorage.setItem('activeWorkspaceId', workspace.id);
     navigate('/projects');
   }
 

packages/app/src/contexts/StoreContext.tsx

@@ -1,7 +1,8 @@
 import { createContext, useState, useEffect } from "react";
+import { Workspace } from "../types";
 
 export type State = {
-  activeWorkspace: string | null;
+  activeWorkspace: Workspace | null;
   user: any;
 };
 
@@ -26,6 +27,7 @@ export function StoreProvider({ children }: { children: React.ReactNode }) {
       if (response.ok) {
         const user = await response.json();
         changeState({ user });
+        return user;
       } else {
         console.error("Failed to fetch user");
       }
@@ -36,19 +38,51 @@ export function StoreProvider({ children }: { children: React.ReactNode }) {
 
   useEffect(() => {
     if (localStorage.getItem("jwt")) {
-      loadUser();
+      loadUser()
+        .then((user: any) => {
+          if (!user) {
+            localStorage.removeItem("jwt");
+            localStorage.removeItem("activeWorkspace");
+            window.location.reload();
+          }
 
-      const activeWorkspace = localStorage.getItem("activeWorkspace");
-      if (activeWorkspace) {
-        changeState({ activeWorkspace });
-      }
+          let activeWorkspaceId: number;
+          if (!state.activeWorkspace) {
+            // If we don't already have the active workspace in the state, we'll try to get it from the local storage. In the case it's not there, we'll set the workspace to the one named "Default".
+            if (!localStorage.getItem("activeWorkspace")) {
+              const defaultWorkspace = user.workspaces.find((workspace: Workspace) => workspace.name === "Default");
+              localStorage.setItem("activeWorkspace", defaultWorkspace.id);
+              changeState({ activeWorkspace: defaultWorkspace });
+              return;
+            }
+
+            activeWorkspaceId = parseInt(localStorage.getItem("activeWorkspace") as string);
+          } else {
+            activeWorkspaceId = state.activeWorkspace.id;
+          }
+
+          if (activeWorkspaceId) {
+            const activeWorkspace = user.workspaces.find((workspace: Workspace) => workspace.id === activeWorkspaceId);
+            changeState({ activeWorkspace });
+          }
+        });
     }
   }, []);
 
   function getInitialState() {
+    if (!localStorage.getItem("jwt")) {
+      return {
+        activeWorkspace: null,
+        user: null,
+      };
+    }
+
+    const user = JSON.parse(localStorage.getItem("user") as string);
+    const activeWorkspaceId = localStorage.getItem("activeWorkspace");
+
     return {
-      activeWorkspace: null,
-      user: null,
+      activeWorkspace: user.workspaces.find((workspace: Workspace) => workspace.id === parseInt(activeWorkspaceId as string)),
+      user,
     };
   }
 

packages/app/src/pages/auth/index.tsx

@@ -54,26 +54,27 @@ export default function Auth(props: {
       }
 
       const user = await userResponse.json();
-      console.log('User data:', user);
 
       // Store the user data (e.g., in localStorage)
       localStorage.setItem('user', JSON.stringify(user));
       const defaultWorkspace = user.workspaces.find((workspace: any) => workspace.name === "Default");
 
       // Check if we've set an active workspace before
-      const localStoreWorkspace = localStorage.getItem('activeWorkspace');
+      const localStoreWorkspace = localStorage.getItem('activeWorkspaceId');
       if (localStoreWorkspace) {
+        const workspace = user.workspaces.find((workspace: any) => workspace.id === parseInt(localStoreWorkspace));
 
         changeState({
-          activeWorkspace: localStoreWorkspace,
+          activeWorkspace: workspace,
           user,
         });
         navigate('/projects');
         return;
       }
 
+      localStorage.setItem('activeWorkspaceId', defaultWorkspace.id);
       changeState({
-        activeWorkspace: defaultWorkspace.id,
+        activeWorkspace: defaultWorkspace,
         user,
       })
 
@@ -114,6 +115,46 @@ export default function Auth(props: {
       // Store the token (e.g., in localStorage)
       localStorage.setItem("jwt", token);
 
+      const userResponse = await fetch(
+        `${process.env.REACT_APP_BACKEND_API_URL}/api/v1/users/self`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/json',
+          },
+        }
+      );
+
+      if (!userResponse.ok) {
+        throw new Error('Failed to fetch user data');
+      }
+
+      const user = await userResponse.json();
+
+      // Store the user data (e.g., in localStorage)
+      localStorage.setItem('user', JSON.stringify(user));
+      const defaultWorkspace = user.workspaces.find((workspace: any) => workspace.name === "Default");
+
+      // Check if we've set an active workspace before
+      const localStoreWorkspace = localStorage.getItem('activeWorkspaceId');
+      if (localStoreWorkspace) {
+        const workspace = user.workspaces.find((workspace: any) => workspace.id === parseInt(localStoreWorkspace));
+        
+        changeState({
+          activeWorkspace: workspace,
+          user,
+        });
+        navigate('/projects');
+        return;
+      }
+
+      localStorage.setItem('activeWorkspaceId', defaultWorkspace.id);
+      changeState({
+        activeWorkspace: defaultWorkspace,
+        user,
+      })
+
+
       // Redirect to the dashboard or a protected route
       navigate("/projects");
     } catch (error) {
@@ -151,6 +192,45 @@ export default function Auth(props: {
       // Store the token (e.g., in localStorage)
       localStorage.setItem("jwt", token);
 
+      const userResponse = await fetch(
+        `${process.env.REACT_APP_BACKEND_API_URL}/api/v1/users/self`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/json',
+          },
+        }
+      );
+
+      if (!userResponse.ok) {
+        throw new Error('Failed to fetch user data');
+      }
+
+      const user = await userResponse.json();
+
+      // Store the user data (e.g., in localStorage)
+      localStorage.setItem('user', JSON.stringify(user));
+      const defaultWorkspace = user.workspaces.find((workspace: any) => workspace.name === "Default");
+
+      // Check if we've set an active workspace before
+      const localStoreWorkspace = localStorage.getItem('activeWorkspaceId');
+      if (localStoreWorkspace) {
+        const workspace = user.workspaces.find((workspace: any) => workspace.id === parseInt(localStoreWorkspace));
+        
+        changeState({
+          activeWorkspace: workspace,
+          user,
+        });
+        navigate('/projects');
+        return;
+      }
+
+      localStorage.setItem('activeWorkspaceId', defaultWorkspace.id);
+      changeState({
+        activeWorkspace: defaultWorkspace,
+        user,
+      })
+
       // Redirect to the dashboard or a protected route
       navigate("/projects");
     } catch (error) {

…/app/src/components/NewProjectDialog.tsx …/src/pages/projects/NewProjectDialog.tsxpackages/app/src/components/NewProjectDialog.tsx renamed to packages/app/src/pages/projects/NewProjectDialog.tsx packages/app/src/components/NewProjectDialog.tsx renamed to packages/app/src/pages/projects/NewProjectDialog.tsx

@@ -4,7 +4,7 @@ import {
   TextField
 } from "@radix-ui/themes";
 import { useState, useContext } from "react";
-import { StoreContext } from "../contexts/StoreContext";
+import { StoreContext } from "../../contexts/StoreContext";
 
 export default function NewProjectDialog() {
   const { state } = useContext(StoreContext);