Progress on Workspace Member Management

code/client/src/App.tsx

@@ -10,8 +10,9 @@ import { WorkspaceProvider } from '@ui/contexts/workspace/WorkspaceContext';
 import Workspaces from '@ui/pages/workspaces/Workspaces';
 import { CommunicationProvider } from '@ui/contexts/communication/CommunicationContext';
 import Home from '@ui/pages/home/Home';
-import Login from '@ui/pages/login/Login';
 import AuthProvider from '@ui/contexts/auth/AuthContext';
+import Profile from '@ui/pages/profile/Profile';
+import Landing from '@ui/pages/landing/Landing';
 
 function App() {
   return (
@@ -23,16 +24,17 @@ function App() {
               <Header />
               <div className="content">
                 <Routes>
+                  <Route path="/" element={<Landing />} />
                   <Route
-                    path="/"
+                    path="/home"
                     element={
                       <>
                         <Sidebar />
                         <Home />
                       </>
                     }
                   />
-                  <Route path="/login" element={<Login />} />
+                  <Route path="/profile/:id" element={<Profile />} />
                   <Route
                     path="/workspaces/*"
                     element={

code/client/src/domain/workspaces/useWorkspaces.ts

@@ -42,6 +42,18 @@ function useWorkspaces() {
     return await service.updateWorkspace(id, newProps);
   }
 
+  async function getWorkspaceMembers(id: string) {
+    return await service.getWorkspaceMembers(id);
+  }
+
+  async function addWorkspaceMember(id: string, email: string) {
+    return await service.addWorkspaceMember(id, email);
+  }
+
+  async function removeWorkspaceMember(id: string, email: string) {
+    return await service.removeWorkspaceMember(id, email);
+  }
+
   useSocketListeners(socket, {
     createdWorkspace: onCreateWorkspace,
     deletedWorkspace: onDeleteWorkspace,
@@ -62,6 +74,9 @@ function useWorkspaces() {
       createWorkspace,
       deleteWorkspace,
       updateWorkspace,
+      getWorkspaceMembers,
+      addWorkspaceMember,
+      removeWorkspaceMember,
     },
   };
 }

code/client/src/services/auth/authService.ts

@@ -1,12 +1,13 @@
-import { UserData } from '@notespace/shared/src/users/types';
+import { User, UserData } from '@notespace/shared/src/users/types';
 import { HttpCommunication } from '@services/communication/http/httpCommunication';
+import Cookies from 'js-cookie';
 
 function authService(http: HttpCommunication) {
   async function registerUser(id: string, data: UserData) {
     await http.post('/users', { id, ...data });
   }
 
-  async function getUser(id: string) {
+  async function getUser(id: string): Promise<User> {
     return await http.get(`/users/${id}`);
   }
 
@@ -16,6 +17,7 @@ function authService(http: HttpCommunication) {
 
   async function deleteUser(id: string) {
     await http.delete(`/users/${id}`);
+    Cookies.remove('token');
   }
 
   return {

code/client/src/services/workspace/workspaceService.ts

@@ -1,6 +1,7 @@
 import { HttpCommunication } from '@services/communication/http/httpCommunication';
 import { WorkspaceInputModel, WorkspaceMeta } from '@notespace/shared/src/workspace/types/workspace';
 import { Workspace } from '@notespace/shared/src/workspace/types/workspace';
+import { UserData } from '@notespace/shared/src/users/types';
 
 function workspaceService(http: HttpCommunication) {
   async function getWorkspace(id: string): Promise<Workspace> {
@@ -23,12 +24,28 @@ function workspaceService(http: HttpCommunication) {
     await http.put(`/workspaces/${id}`, newProps);
   }
 
+  async function getWorkspaceMembers(id: string): Promise<UserData[]> {
+    const workspace: WorkspaceMeta = await http.get(`/workspaces/${id}`);
+    return workspace.members;
+  }
+
+  async function addWorkspaceMember(id: string, email: string): Promise<void> {
+    await http.post(`/workspaces/${id}/members`, { email });
+  }
+
+  async function removeWorkspaceMember(id: string, email: string): Promise<void> {
+    await http.delete(`/workspaces/${id}/members`, { email });
+  }
+
   return {
     getWorkspace,
     getWorkspaces,
     createWorkspace,
     deleteWorkspace,
     updateWorkspace,
+    getWorkspaceMembers,
+    addWorkspaceMember,
+    removeWorkspaceMember,
   };
 }
 

code/client/src/ui/components/dialog/Dialog.tsx

@@ -21,10 +21,11 @@ interface DialogProps {
   fields: Field[];
   onSubmit: (values: { [key: string]: any }) => void;
   submitText?: string;
+  extraContent?: React.ReactNode;
   children: React.ReactNode;
 }
 
-function Dialog({ title, fields, onSubmit, submitText, children }: DialogProps) {
+function Dialog({ title, fields, onSubmit, submitText, extraContent, children }: DialogProps) {
   const [open, setOpen] = useState(false);
   const [values, setValues] = useState<{ [key: string]: any }>(
     fields.reduce((obj, item) => ({ ...obj, [item.name]: item.type === 'checkbox' ? false : '' }), {})
@@ -82,6 +83,7 @@ function Dialog({ title, fields, onSubmit, submitText, children }: DialogProps)
               />
             )
           )}
+          {extraContent}
         </DialogContent>
         <DialogActions>
           <button onClick={handleClose}>Cancel</button>

code/client/src/ui/components/header/Header.scss

@@ -11,6 +11,10 @@
   justify-content: space-between;
   align-items: center;
 
+  a {
+    padding-left: 10vh;
+  }
+
   div {
     display: flex;
     align-items: center;

code/client/src/ui/components/header/Header.tsx

@@ -6,16 +6,16 @@ function Header() {
   const { currentUser, logout } = useAuth();
   return (
     <header className="header">
-      <p></p>
+      <Link to={currentUser ? '/home' : '/'}>NoteSpace</Link>
       <div>
-        {currentUser ? (
-          <div className="account">
-            <p>{currentUser?.displayName}</p>
-            <button onClick={logout}>Logout</button>
-          </div>
-        ) : (
-          <Link to="/login">Login</Link>
-        )}
+        <div className="account">
+          {currentUser && (
+            <>
+              <Link to={`/profile/${currentUser.uid}`}>{currentUser?.displayName}</Link>
+              <button onClick={logout}>Logout</button>
+            </>
+          )}
+        </div>
       </div>
     </header>
   );

code/client/src/ui/components/sidebar/Sidebar.tsx

@@ -29,7 +29,6 @@ function Sidebar() {
             <IoMenu className="icon-menu" />
           )}
         </button>
-        <Link to="/">NoteSpace</Link>
       </div>
       <ul>
         <li>

code/client/src/ui/contexts/auth/AuthContext.tsx

@@ -32,7 +32,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
   const loginWithProvider = async (provider: Provider) => {
     try {
       const { user } = await signInWithPopup(auth, provider);
-      await registerUser(user.uid, { username: user.displayName!, email: user.email! });
+      await registerUser(user.uid, { name: user.displayName!, email: user.email! });
       const token = await user.getIdToken();
       Cookies.set('token', token, { expires: 1, secure: true, sameSite: 'Strict' });
     } catch (e) {
@@ -56,6 +56,13 @@ export function AuthProvider({ children }: AuthProviderProps) {
     });
   }, []);
 
+  useEffect(() => {
+    console.log(currentUser);
+    if (!currentUser && window.location.pathname !== '/') {
+      window.location.href = '/';
+    }
+  }, [currentUser]);
+
   return (
     <AuthContext.Provider
       value={{

code/client/src/ui/pages/login/Login.scss → code/client/src/ui/pages/landing/Landing.scss

@@ -1,4 +1,4 @@
-.login {
+.landing {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -15,7 +15,7 @@
     button {
       background-color: white;
       color: black;
-      padding: 1.5vh;
+      padding: 1.5vh 3vh 1.5vh 3vh;
       font-size: larger;
       border-radius: 50px;
       border: 1px solid gray;

code/client/src/ui/pages/login/Login.tsx → code/client/src/ui/pages/landing/Landing.tsx

@@ -1,22 +1,23 @@
 import { useAuth } from '@ui/contexts/auth/useAuth';
-import { FaGithub } from 'react-icons/fa6';
-import googleIcon from '@assets/images/google-icon.png';
-import './Login.scss';
-import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
+import googleIcon from '@assets/images/google-icon.png';
+import { FaGithub } from 'react-icons/fa6';
+import './Landing.scss';
 
-function Login() {
+function Landing() {
   const { currentUser, loginWithGoogle, loginWithGithub } = useAuth();
   const navigate = useNavigate();
+
   useEffect(() => {
     if (currentUser) {
-      navigate('/');
+      navigate('/home');
     }
   }, [currentUser, navigate]);
 
   return (
-    <div className="login">
-      <h1>Login</h1>
+    <div className="landing">
+      <h1>Welcome to NoteSpace</h1>
       <div>
         <button onClick={loginWithGoogle}>
           Login With Google
@@ -32,4 +33,4 @@ function Login() {
   );
 }
 
-export default Login;
+export default Landing;

code/client/src/ui/pages/profile/Profile.scss

@@ -0,0 +1,7 @@
+.profile {
+  button {
+    background: indianred;
+    color: white;
+    margin-top: 8vh;
+  }
+}

code/client/src/ui/pages/profile/Profile.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import useAuthService from '@services/auth/useAuthService';
+import { User } from '@notespace/shared/src/users/types';
+import { formatDate } from '@/utils/utils';
+import { useAuth } from '@ui/contexts/auth/useAuth';
+import './Profile.scss';
+
+function Profile() {
+  const { id } = useParams();
+  const { getUser, deleteUser } = useAuthService();
+  const [user, setUser] = useState<User | null>(null);
+  const { currentUser } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!id) return;
+    async function fetchUser() {
+      const user = await getUser(id!);
+      setUser(user);
+    }
+    fetchUser();
+  }, [id, getUser]);
+
+  async function onDeleteAccount() {
+    if (!currentUser || currentUser.uid !== user?.id) return;
+    await currentUser.delete();
+    await deleteUser(user.id);
+    navigate('/');
+  }
+
+  return (
+    user && (
+      <div className="profile">
+        <h2>{user.name}</h2>
+        <p>{user.email}</p>
+        <p>Joined {formatDate(user.createdAt)}</p>
+        {currentUser?.uid === user.id && <button onClick={onDeleteAccount}>Delete Account</button>}
+      </div>
+    )
+  );
+}
+
+export default Profile;

code/client/src/ui/pages/workspace/components/ManageMembersDialog.tsx

@@ -0,0 +1,44 @@
+import Dialog from '@ui/components/dialog/Dialog';
+import { FaCross, FaUsers } from 'react-icons/fa6';
+import { UserData } from '@notespace/shared/src/users/types';
+
+type ManageMembersDialog = {
+  members: UserData[];
+  onAddMember: (email: string) => void;
+  onRemoveMember: (email: string) => void;
+};
+
+function ManageMembersDialog({ members, onAddMember, onRemoveMember }: ManageMembersDialog) {
+  return (
+    <Dialog
+      title="Manage members in workspace"
+      fields={[{ name: 'Add new member', label: 'User email' }]}
+      onSubmit={values => {
+        onAddMember(values['Add new member']);
+      }}
+      submitText="Add Member"
+      extraContent={
+        <div>
+          <h3>Members</h3>
+          <ul>
+            {members?.map(member => (
+              <li key={member.email}>
+                <p>{member.email}</p>
+                <button onClick={() => onRemoveMember(member.email)}>
+                  <FaCross />
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      }
+    >
+      <div>
+        <FaUsers />
+        Members
+      </div>
+    </Dialog>
+  );
+}
+
+export default ManageMembersDialog;