Merge branch 'main' of https://github.com/NoteSpaceTeam/NoteSpace

code/client/src/App.tsx

@@ -3,7 +3,6 @@ import Document from '@ui/pages/document/Document';
 import Header from '@ui/components/header/Header';
 import Workspace from '@ui/pages/workspace/Workspace';
 import NotFound from '@ui/pages/notfound/NotFound';
-import './App.scss';
 import { ErrorProvider } from '@/contexts/error/ErrorContext';
 import Sidebar from '@ui/components/sidebar/Sidebar';
 import { WorkspaceProvider } from '@/contexts/workspace/WorkspaceContext';
@@ -12,10 +11,11 @@ import { CommunicationProvider } from '@/contexts/communication/CommunicationCon
 import Home from '@ui/pages/home/Home';
 import AuthProvider from '@/contexts/auth/AuthContext';
 import Profile from '@ui/pages/profile/Profile';
-import Landing from '@ui/pages/landing/Landing';
+import Login from '@ui/pages/login/Login';
 import Search from '@ui/pages/search/Search';
 import CommitHistory from '@ui/pages/document/components/commit-history/CommitHistory';
 import Commit from '@ui/pages/document/components/commit/Commit';
+import './App.scss';
 
 function App() {
   return (
@@ -27,9 +27,9 @@ function App() {
               <Header />
               <div className="content">
                 <Routes>
-                  <Route path="/" element={<Landing />} />
+                  <Route path="/login" element={<Login />} />
                   <Route
-                    path="/home"
+                    path="/"
                     element={
                       <>
                         <Sidebar />

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

@@ -7,6 +7,7 @@ import { useNavigate } from 'react-router-dom';
 
 export type AuthContextType = {
   currentUser: User | null;
+  isLoggedIn: boolean;
   loginWithGoogle: () => Promise<void>;
   loginWithGithub: () => Promise<void>;
   logout: () => Promise<void>;
@@ -15,6 +16,7 @@ export type AuthContextType = {
 
 export const AuthContext = createContext<AuthContextType>({
   currentUser: null,
+  isLoggedIn: false,
   loginWithGoogle: async () => {},
   loginWithGithub: async () => {},
   logout: async () => {},
@@ -69,6 +71,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
     <AuthContext.Provider
       value={{
         currentUser,
+        isLoggedIn: !!currentUser,
         loginWithGoogle,
         loginWithGithub,
         logout,

code/client/src/contexts/workspace/WorkspaceContext.tsx

@@ -21,7 +21,7 @@ export type WorkspaceContextType = {
   workspace?: WorkspaceMeta;
   resources?: Resources;
   operations?: WorkspaceOperations;
-  isMember: boolean;
+  isMember?: boolean;
 };
 
 export const WorkspaceContext = createContext<WorkspaceContextType>({});

code/client/src/services/commits/commitsService.ts

@@ -11,8 +11,8 @@ function commitsService(http: HttpCommunication, errorHandler: ErrorHandler, wid
     return errorHandler(async () => await http.post(`/workspaces/${wid}/${id}/rollback`, { commitId }));
   }
 
-  async function fork(commitId: string) {
-    return errorHandler(async () => await http.post(`/workspaces/${wid}/${id}/fork`, { commitId }));
+  async function clone(commitId: string) {
+    return errorHandler(async () => await http.post(`/workspaces/${wid}/${id}/clone`, { commitId }));
   }
 
   async function getCommits(): Promise<Commit[]> {
@@ -26,7 +26,7 @@ function commitsService(http: HttpCommunication, errorHandler: ErrorHandler, wid
   return {
     commit,
     rollback,
-    fork,
+    clone,
     getCommits,
     getCommit,
   };

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

@@ -25,9 +25,16 @@
     align-items: center;
     margin-right: 1rem;
     gap: 2vh;
+    padding-left: 10vh;
+    padding-right: 2vh;
 
     button {
-      padding: 1vh;
+      padding: 1.5vh;
+      gap: 1vh;
+
+      svg {
+        font-size: larger;
+      }
     }
   }
 

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

@@ -2,6 +2,7 @@ import { useAuth } from '@/contexts/auth/useAuth';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { ChangeEvent, FormEvent, useState } from 'react';
 import './Header.scss';
+import { MdLogin, MdLogout } from 'react-icons/md';
 
 function Header() {
   const { currentUser, logout } = useAuth();
@@ -20,9 +21,9 @@ function Header() {
 
   return (
     <header className="header">
-      <Link to={currentUser ? '/home' : '/'}>NoteSpace</Link>
+      <Link to="/">NoteSpace</Link>
       <div>
-        {location.pathname !== '/' && (
+        {location.pathname !== '/login' && (
           <form onSubmit={handleSearchSubmit}>
             <input
               type="text"
@@ -35,11 +36,21 @@ function Header() {
         )}
 
         <div className="account">
-          {currentUser && (
+          {currentUser ? (
             <>
               <Link to={`/profile/${currentUser.uid}`}>{currentUser?.displayName}</Link>
-              <button onClick={logout}>Logout</button>
+              <button onClick={logout}>
+                Logout
+                <MdLogout />
+              </button>
             </>
+          ) : (
+            location.pathname !== '/login' && (
+              <button onClick={() => navigate('/login')}>
+                Login
+                <MdLogin />
+              </button>
+            )
           )}
         </div>
       </div>

code/client/src/ui/components/popup-menu/PopupMenu.tsx

@@ -1,6 +1,7 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useState } from 'react';
 import { Menu, PopoverPosition } from '@mui/material';
 import './PopupMenu.scss';
+import useWorkspace from '@/contexts/workspace/useWorkspace';
 
 type PopupMenuProps = {
   item: ReactNode;
@@ -11,15 +12,20 @@ type PopupMenuProps = {
 function PopupMenu({ item, trigger, children }: PopupMenuProps) {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [contextMenuPosition, setContextMenuPosition] = useState<PopoverPosition | null>(null);
+  const { isMember } = useWorkspace();
 
-  const onOpen = (event: MouseEvent | React.MouseEvent) => {
-    event.preventDefault();
-    setContextMenuPosition({
-      left: event.clientX - 2,
-      top: event.clientY - 4,
-    });
-    setAnchorEl(event.currentTarget as HTMLElement);
-  };
+  const onOpen = useCallback(
+    (event: MouseEvent | React.MouseEvent) => {
+      event.preventDefault();
+      if (!isMember) return;
+      setContextMenuPosition({
+        left: event.clientX - 2,
+        top: event.clientY - 4,
+      });
+      setAnchorEl(event.currentTarget as HTMLElement);
+    },
+    [isMember]
+  );
 
   const onClose = () => {
     setAnchorEl(null);
@@ -34,7 +40,7 @@ function PopupMenu({ item, trigger, children }: PopupMenuProps) {
     return () => {
       triggerElement.removeEventListener('click', onOpen);
     };
-  }, [trigger]);
+  }, [onOpen, trigger]);
 
   return (
     <div onContextMenu={trigger ? () => {} : onOpen} onClick={onClose}>

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

@@ -9,11 +9,13 @@ import { TiHome } from 'react-icons/ti';
 import { GoPlus } from 'react-icons/go';
 import { ResourceType } from '@notespace/shared/src/workspace/types/resource';
 import CreateResourceMenu from '@ui/components/sidebar/components/CreateResourceMenu';
+import { useAuth } from '@/contexts/auth/useAuth';
 import './Sidebar.scss';
 
 function Sidebar() {
   const { width, isOpen, isLocked, isLoaded, handlers } = useSidebarState();
-  const { workspace, resources, operations } = useWorkspace();
+  const { workspace, resources, operations, isMember } = useWorkspace();
+  const { isLoggedIn } = useAuth();
 
   if (!isLoaded) return null;
   return (
@@ -35,10 +37,12 @@ function Sidebar() {
           <TiHome />
           <Link to="/">Home</Link>
         </li>
-        <li>
-          <RiTeamFill />
-          <Link to="/workspaces">Workspaces</Link>
-        </li>
+        {isLoggedIn && (
+          <li>
+            <RiTeamFill />
+            <Link to="/workspaces">Workspaces</Link>
+          </li>
+        )}
         <li>
           <IoTime />
           <Link to="/recent">Recent</Link>
@@ -58,9 +62,11 @@ function Sidebar() {
                 onCreateNew={(type: ResourceType) => operations.createResource('Untitled', type, workspace.id)}
                 trigger="sidebar-create-resource"
               />
-              <button id="sidebar-create-resource">
-                <GoPlus />
-              </button>
+              {isMember && (
+                <button id="sidebar-create-resource">
+                  <GoPlus />
+                </button>
+              )}
             </div>
             <WorkspaceTree workspace={workspace} resources={resources} operations={operations} />
           </>

code/client/src/ui/components/sidebar/components/workspace-tree/TreeResourceView.tsx

@@ -8,6 +8,7 @@ import CreateResourceMenu from '@ui/components/sidebar/components/CreateResource
 import { GoPlus } from 'react-icons/go';
 import ResourceContextMenu from '@ui/pages/workspace/components/ResourceContextMenu';
 import useEditing from '@ui/hooks/useEditing';
+import useWorkspace from '@/contexts/workspace/useWorkspace';
 
 type TreeResourceViewProps = {
   workspace: string;
@@ -34,6 +35,7 @@ function TreeResourceView({
   onDrag,
   onDrop,
 }: TreeResourceViewProps) {
+  const { isMember } = useWorkspace();
   const [isOpen, setIsOpen] = useState(true);
   const { component, isEditing, setIsEditing } = useEditing(resource.name || 'Untitled', (name: string) =>
     onRenameResource!(resource.id, name)
@@ -45,7 +47,7 @@ function TreeResourceView({
 
   const props: React.HTMLProps<HTMLDivElement> = {
     id: resource.id,
-    draggable: true,
+    draggable: isMember,
     onDragOver: (e: React.DragEvent) => e.preventDefault(),
     onDragStart: onDrag,
     onDrop: onDrop,
@@ -92,7 +94,7 @@ function TreeResourceView({
             </div>
           )}
         </ResourceContextMenu>
-        {!isEditing && (
+        {!isEditing && isMember && (
           <button id={'create-new-resource-' + resource.id}>
             <GoPlus />
           </button>

code/client/src/ui/pages/document/components/commit-history/CommitHistory.tsx

@@ -1,4 +1,3 @@
-import './CommitHistory.scss';
 import useCommitsService from '@services/commits/useCommitsService';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import useResourcesService from '@services/resource/useResourcesService';
@@ -7,25 +6,28 @@ import useLoading from '@ui/hooks/useLoading';
 import { DocumentResource } from '@notespace/shared/src/workspace/types/resource';
 import { Commit } from '@notespace/shared/src/document/types/commits';
 import { formatTimePassed } from '@/utils/utils';
-import { FaCodeFork } from 'react-icons/fa6';
+import { FaClone } from 'react-icons/fa6';
 import { FaUndo } from 'react-icons/fa';
+import useWorkspace from '@/contexts/workspace/useWorkspace';
+import './CommitHistory.scss';
 
 function CommitHistory() {
   const [document, setDocument] = useState<DocumentResource>();
   const [commits, setCommits] = useState<Commit[]>([]);
   const { loading, spinner, startLoading, stopLoading } = useLoading();
   const { wid, id } = useParams();
   const { getResource } = useResourcesService();
-  const { getCommits, fork, rollback } = useCommitsService();
+  const { getCommits, clone, rollback } = useCommitsService();
+  const { isMember } = useWorkspace();
   const navigate = useNavigate();
 
   async function onRollback(commitId: string) {
     await rollback(commitId);
     navigate(`/workspaces/${wid}/${id}`);
   }
 
-  async function onFork(commitId: string) {
-    await fork(commitId);
+  async function onClone(commitId: string) {
+    await clone(commitId);
     navigate(`/workspaces/${wid}`);
   }
 
@@ -59,16 +61,18 @@ function CommitHistory() {
                     <Link to={`/profile/${commit.author.id}`}>{commit.author.name}</Link> committed{' '}
                     {formatTimePassed(new Date(commit.timestamp).toLocaleString())}
                   </p>
-                  <div className="commit-actions">
-                    <button onClick={() => onRollback(commit.id)}>
-                      <FaUndo />
-                      Rollback
-                    </button>
-                    <button onClick={() => onFork(commit.id)}>
-                      <FaCodeFork />
-                      Fork
-                    </button>
-                  </div>
+                  {isMember && (
+                    <div className="commit-actions">
+                      <button onClick={() => onRollback(commit.id)}>
+                        <FaUndo />
+                        Rollback
+                      </button>
+                      <button onClick={() => onClone(commit.id)}>
+                        <FaClone />
+                        Clone
+                      </button>
+                    </div>
+                  )}
                 </Link>
               ))
             ) : (

code/client/src/ui/pages/document/components/floating-buttons/FloatingButtons.tsx

@@ -3,14 +3,16 @@ import CommitDialog from '@ui/pages/document/components/floating-buttons/CommitD
 import useCommitsService from '@services/commits/useCommitsService';
 import { useNavigate, useParams } from 'react-router-dom';
 import { MdHistory } from 'react-icons/md';
+import useWorkspace from '@/contexts/workspace/useWorkspace';
 
 function FloatingButtons() {
   const { wid, id } = useParams();
   const { commit } = useCommitsService();
+  const { isMember } = useWorkspace();
   const navigate = useNavigate();
   return (
     <div className="floating-buttons">
-      <CommitDialog onCommit={commit} />
+      {isMember && <CommitDialog onCommit={commit} />}
       <button onClick={() => navigate(`/workspaces/${wid}/${id}/commits`)}>
         <MdHistory />
       </button>

code/client/src/ui/pages/home/Home.tsx

@@ -23,21 +23,19 @@ function Home() {
   return (
     <div className="home">
       <h2>Home</h2>
-      <p>Welcome to NoteSpace</p>
-      <Link to="/workspaces">Go to Workspaces</Link>
-      <br />
-      <hr />
-      <br />
-      <h2>Public Workspaces</h2>
-      {loading
-        ? spinner
-        : workspaces.map(workspace => (
-            <div className="workspace">
-              <Link key={workspace.id} to={`/workspaces/${workspace.id}`}>
-                {workspace.name}
-              </Link>
-            </div>
-          ))}
+      {loading ? (
+        spinner
+      ) : workspaces.length > 0 ? (
+        workspaces.map(workspace => (
+          <div className="workspace">
+            <Link key={workspace.id} to={`/workspaces/${workspace.id}`}>
+              {workspace.name}
+            </Link>
+          </div>
+        ))
+      ) : (
+        <p>No workspaces yet</p>
+      )}
     </div>
   );
 }