Yyassin · AbdallaAbdelhadi · Mar 15, 2024 · Mar 14, 2024
diff --git a/client/src/WebsocketClient.ts b/client/src/WebsocketClient.ts
@@ -13,7 +13,7 @@ import {
 import { CanvasElement } from '@/stores/CanvasElementsStore';
 import { EVENT } from './types';
 import { ValueOf } from './lib/misc';
-import { UpdatedTimeMessage } from './stores/WebSocketStore';
+import { BoardMetaData, UpdatedTimeMessage } from './stores/WebSocketStore';
 import { Comment } from './stores/CommentsStore';
 
 interface CallBacksType {
@@ -215,6 +215,7 @@ export default class WebsocketClient {
       | string
       | string[]
       | UpdatedTimeMessage
+      | BoardMetaData
       | null
       | { elemID: string; comment: Partial<Comment> }
       | Record<string, unknown>,

diff --git a/client/src/components/lib/BoardHeader.tsx b/client/src/components/lib/BoardHeader.tsx
@@ -226,7 +226,9 @@ const BoardHeader = ({
                       fields: { serialized: state },
                     });
                     setBoardMeta({ lastModified: updated.data.updatedAt });
-                    updateCanvas(boardMeta.id, updated.data.updatedAt);
+                    updateCanvas(boardMeta.id, {
+                      updatedAt: updated.data.updatedAt,
+                    });
                     setWebsocketAction(
                       {
                         boardID: boardMeta.id,

diff --git a/client/src/components/lib/CommentsSheetContent.tsx b/client/src/components/lib/CommentsSheetContent.tsx
@@ -308,7 +308,7 @@ const CommentsSheetContent = () => {
                 fields: { serialized: state },
               });
               setBoardMeta({ lastModified: updated.data.updatedAt });
-              updateCanvas(boardMeta.id, updated.data.updatedAt);
+              updateCanvas(boardMeta.id, { updatedAt: updated.data.updatedAt });
               setWebsocketAction(
                 {
                   boardID: boardMeta.id,

diff --git a/client/src/components/lib/EditBoardDataDialog.tsx b/client/src/components/lib/EditBoardDataDialog.tsx
@@ -143,7 +143,9 @@ export default function EditBoardDataDialog({
                 folder: newFolder,
                 lastModified: updatedAt.data.updatedAt,
               });
-              updateCanvas(boardMeta.id, updatedAt.data.updatedAt);
+              updateCanvas(boardMeta.id, {
+                updatedAt: updatedAt.data.updatedAt,
+              });
               updateCanvasInfo(
                 boardMeta.id,
                 newTitle ?? '',
@@ -153,9 +155,12 @@ export default function EditBoardDataDialog({
               setWebsocketAction(
                 {
                   boardID: boardMeta.id,
+                  title: newTitle,
+                  tags: boardMeta.tags,
+                  folder: newFolder,
                   lastModified: updatedAt.data.updatedAt,
                 },
-                'updateUpdatedTime',
+                'changeBoardMeta',
               );
             }}
           >

diff --git a/client/src/components/lib/ShareBoardDialog.tsx b/client/src/components/lib/ShareBoardDialog.tsx
@@ -30,6 +30,7 @@ import { useWebSocketStore } from '@/stores/WebSocketStore';
 import { REST } from '@/constants';
 import { useToast } from '../ui/use-toast';
 import { fetchImageFromFirebaseStorage } from '@/views/SignInPage';
+import { TrashIcon } from '@radix-ui/react-icons';
 
 /**
  * An alert dialog that is controlled by the `open` prop. It displays a list of users
@@ -50,18 +51,26 @@ const ShareBoardDialog = ({
 }) => {
   /* Controls visibility of the addition input. */
   const [isAddUserOpen, setIsAddUserOpen] = useState(false);
-  const { boardMeta, updatePermission, addUser, updateAvatars } =
-    useCanvasBoardStore([
-      'boardMeta',
-      'updatePermission',
-      'addUser',
-      'updateAvatars',
-    ]);
+  const {
+    boardMeta,
+    updatePermission,
+    addUser,
+    updateAvatars,
+    setBoardMeta,
+    removeCanvas,
+  } = useCanvasBoardStore([
+    'boardMeta',
+    'updatePermission',
+    'addUser',
+    'updateAvatars',
+    'setBoardMeta',
+    'removeCanvas',
+  ]);
   const { setSelectedElements, selectedElementIds } = useCanvasElementStore([
     'setSelectedElements',
     'selectedElementIds',
   ]);
-  const { setTool } = useAppStore(['setTool']);
+  const { setTool, setMode } = useAppStore(['setTool', 'setMode']);
   const { socket, setWebsocketAction } = useWebSocketStore([
     'socket',
     'setWebsocketAction',
@@ -79,6 +88,38 @@ const ShareBoardDialog = ({
       if (isOwnPerm) setSelectedElements([]);
       updatePermission(collabID, permission, isOwnPerm);
     });
+
+    socket?.on('removeCollab', async (msg) => {
+      const collabID = (msg as { payload: string }).payload;
+
+      if (collabID === boardMeta.collabID) {
+        setMode('dashboard');
+        toast({
+          variant: 'destructive',
+          title: `You have been removed from: ${boardMeta.title}`,
+          description: 'Ask another collaborator to add you again',
+        });
+        removeCanvas(boardMeta.id);
+        setBoardMeta({
+          title: '',
+          id: '',
+          lastModified: '',
+          roomID: '',
+          shareUrl: '',
+          folder: '',
+          tags: [],
+          collabID: '',
+          users: [],
+          permission: '',
+        });
+        return;
+      }
+      setBoardMeta({
+        users: boardMeta.users.filter(
+          (metaUser) => collabID !== metaUser.collabID,
+        ),
+      });
+    });
   }, [socket, boardMeta.collabID, updatePermission]);
 
   return (
@@ -206,46 +247,73 @@ const ShareBoardDialog = ({
                   </p>
                   <p className="text-xs text-muted-foreground">{user.email}</p>
                 </div>
-                <Select
-                  value={user.permission}
-                  disabled={
-                    user.permission === 'owner' ||
-                    boardMeta.permission === 'view'
-                  }
-                  onValueChange={(value) => {
-                    if (boardMeta.collabID === user.collabID) {
-                      updatePermission(user.collabID, value, true);
-                      setTool('pan');
-                      setSelectedElements([]);
-                      setCursor('');
-                    } else {
-                      updatePermission(user.collabID, value, false);
+                <div className="flex flex-row">
+                  <Select
+                    value={user.permission}
+                    disabled={
+                      user.permission === 'owner' ||
+                      boardMeta.permission === 'view'
                     }
-                    console.log(selectedElementIds);
-                    setWebsocketAction(
-                      { collabID: user.collabID, permission: value },
-                      'changePermission',
-                    );
-                    axios.put(REST.collaborator.update, {
-                      id: user.collabID,
-                      fields: {
-                        permissionLevel: value,
-                      },
-                    });
-                  }}
-                >
-                  <SelectTrigger className="w-[6rem]">
-                    <SelectValue placeholder={user.permission} />
-                  </SelectTrigger>
+                    onValueChange={(value) => {
+                      if (boardMeta.collabID === user.collabID) {
+                        updatePermission(user.collabID, value, true);
+                        setTool('pan');
+                        setSelectedElements([]);
+                        setCursor('');
+                      } else {
+                        updatePermission(user.collabID, value, false);
+                      }
+                      console.log(selectedElementIds);
+                      setWebsocketAction(
+                        { collabID: user.collabID, permission: value },
+                        'changePermission',
+                      );
+                      axios.put(REST.collaborator.update, {
+                        id: user.collabID,
+                        fields: {
+                          permissionLevel: value,
+                        },
+                      });
+                    }}
+                  >
+                    <SelectTrigger className="w-[6rem]">
+                      <SelectValue placeholder={user.permission} />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectItem value="view">View</SelectItem>
+                      <SelectItem value="edit">Edit</SelectItem>
+                      {user.permission === 'owner' && (
+                        <SelectItem value="owner">Owner</SelectItem>
+                      )}
+                    </SelectContent>
+                  </Select>
+                  <Button
+                    className="ml-2 p-0 bg-[#ffffff] text-black hover:text-red-600 hover:bg-[#ffffff]"
+                    disabled={
+                      user.permission === 'owner' ||
+                      user.collabID === boardMeta.collabID
+                    }
+                    onClick={() => {
+                      const newCollabs = boardMeta.users.filter(
+                        (shareUser) => user.collabID !== shareUser.collabID,
+                      );
+                      setBoardMeta({
+                        users: newCollabs,
+                      });
+                      setWebsocketAction(user.collabID, 'removeCollab');
 
-                  <SelectContent>
-                    <SelectItem value="view">View</SelectItem>
-                    <SelectItem value="edit">Edit</SelectItem>
-                    {user.permission === 'owner' && (
-                      <SelectItem value="owner">Owner</SelectItem>
-                    )}
-                  </SelectContent>
-                </Select>
+                      axios.put(REST.board.removeCollab, {
+                        boardId: boardMeta.id,
+                        newCollabs: newCollabs.map(
+                          (shareUser) => shareUser.collabID,
+                        ),
+                      });
+                    }}
+                  >
+                    <TrashIcon className="h-5 w-5" />
+                  </Button>
+                </div>
               </div>
             </div>
           ))}

diff --git a/client/src/constants.ts b/client/src/constants.ts
@@ -35,6 +35,7 @@ export const REST = {
     deleteBoard: `${REST_ROOT}/board/deleteBoard`,
     updateBoard: `${REST_ROOT}/board/updateBoard`,
     addUser: `${REST_ROOT}/board/addUser`,
+    removeCollab: `${REST_ROOT}/board/updateCollabs`,
   },
   collaborators: {
     getAvatar: `${REST_ROOT}/collaborator/getCollaboratorAvatars`,

diff --git a/client/src/hooks/useSocket.tsx b/client/src/hooks/useSocket.tsx
@@ -1,5 +1,9 @@
 import WebsocketClient from '@/WebsocketClient';
-import { UpdatedTimeMessage, useWebSocketStore } from '@/stores/WebSocketStore';
+import {
+  BoardMetaData,
+  UpdatedTimeMessage,
+  useWebSocketStore,
+} from '@/stores/WebSocketStore';
 import {
   CanvasElement,
   useCanvasElementStore,
@@ -233,7 +237,7 @@ export const useSocket = () => {
     },
     updateUpdatedTime: async (fields: UpdatedTimeMessage) => {
       setBoardMeta({ lastModified: fields.lastModified });
-      updateCanvas(fields.boardID, fields.lastModified);
+      updateCanvas(fields.boardID, { updatedAt: fields.lastModified });
 
       const boardState = await axios.get(REST.board.getBoard, {
         params: { id: fields.boardID },
@@ -267,6 +271,10 @@ export const useSocket = () => {
     removeAttachedFileUrl: (ids: string[]) => {
       removeAttachedFileUrl(ids);
     },
+    changeBoardMeta: (boardMetaData: BoardMetaData) => {
+      setBoardMeta(boardMetaData);
+      updateCanvas(boardMetaData.boardID, boardMetaData);
+    },
   };
 
   // Intialize socket
@@ -348,7 +356,11 @@ export const useSocket = () => {
     }
 
     //Check if the actionElementID is string[] (collection of ids)
-    if (typeof actionElementID === 'object' || action === 'addCollab') {
+    if (
+      typeof actionElementID === 'object' ||
+      action === 'addCollab' ||
+      action === 'removeCollab'
+    ) {
       socket.current?.sendMsgRoom(action, actionElementID);
       setWebsocketAction('', '');
       return;

diff --git a/client/src/stores/CanavasBoardStore.ts b/client/src/stores/CanavasBoardStore.ts
@@ -62,7 +62,7 @@ interface CanvasBoardActions {
   setCanvases: (canvases: Canvas[]) => void;
   addCanvas: (canvas: Canvas) => void;
   removeCanvas: (id: string) => void;
-  updateCanvas: (id: string, meta: string) => void;
+  updateCanvas: (id: string, meta: Partial<Canvas>) => void;
   updateCanvasInfo: (
     id: string,
     title: string,
@@ -126,10 +126,10 @@ const removeCanvas = (set: SetState<CanvasBoardStore>) => (id: string) =>
   });
 
 const updateCanvas =
-  (set: SetState<CanvasBoardStore>) => (id: string, updatedAt: string) =>
+  (set: SetState<CanvasBoardStore>) => (id: string, meta: Partial<Canvas>) =>
     set((state) => {
       const canvases = state.canvases.map((canvas) =>
-        canvas.id === id ? { ...canvas, updatedAt } : canvas,
+        canvas.id === id ? { ...canvas, ...meta } : canvas,
       );
 
       return { ...state, canvases };

diff --git a/client/src/stores/WebSocketStore.ts b/client/src/stores/WebSocketStore.ts
@@ -26,6 +26,8 @@ export const Actions = [
   'addNewCollab',
   'addAttachedFileUrl',
   'removeAttachedFileUrl',
+  'removeCollab',
+  'changeBoardMeta',
 ] as const;
 export type ActionsType = typeof Actions;
 
@@ -46,6 +48,14 @@ export interface UpdatedTimeMessage {
   lastModified: string;
 }
 
+export interface BoardMetaData {
+  boardID: string;
+  title: string;
+  tags: string[];
+  folder: string;
+  lastModified: string;
+}
+
 /** Definitions */
 interface WebSocketState {
   // Reference for sending non-stateful messages (WebRTC signalling)
@@ -59,6 +69,7 @@ interface WebSocketState {
     | string
     | string[]
     | UpdatedTimeMessage
+    | BoardMetaData
     | { elemID: string; comment: Partial<Comment> }
     | { collabID: string; permission: string }
     | { selectedElementIds: string[]; downloadURL: string };
@@ -79,6 +90,7 @@ interface WebSocketActions {
       | string
       | string[]
       | UpdatedTimeMessage
+      | BoardMetaData
       | { elemID: string; comment: Partial<Comment> }
       | { collabID: string; permission: string }
       | { selectedElementIds: string[]; downloadURL: string },
@@ -122,6 +134,7 @@ const setWebsocketAction =
       | string
       | string[]
       | UpdatedTimeMessage
+      | BoardMetaData
       | { elemID: string; comment: Partial<Comment> }
       | { collabID: string; permission: string }
       | { selectedElementIds: string[]; downloadURL: string },