Resolve DOO-113 (#79)

* added live collab for file upload

* fix linting problems

client/src/components/lib/UploadFilesToFirebase.tsx

@@ -1,24 +1,24 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { getDownloadURL, getStorage, ref, uploadBytes } from 'firebase/storage';
 import { firebaseApp } from '../../firebaseDB/firebase';
 import { useCanvasElementStore } from '@/stores/CanvasElementsStore';
+import { useWebSocketStore } from '@/stores/WebSocketStore';
 
 /**
  * Defines a context menu option that allows users to attatch a file to a
  * canvas element by uploading it to firebase
  * @author Dana El Sherif
  */
 const FileUpload = () => {
-  const [, setFile] = useState<File | null>(null);
   const { selectedElementIds, updateAttachedFileUrl } = useCanvasElementStore([
     'selectedElementIds',
     'updateAttachedFileUrl',
   ]);
+  const { setWebsocketAction } = useWebSocketStore(['setWebsocketAction']);
 
   const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const files = event.target.files;
     const fileToUpload = files ? files[0] : null;
-    setFile(fileToUpload);
 
     if (fileToUpload !== null && selectedElementIds.length > 0) {
       const storage = getStorage(firebaseApp);
@@ -30,6 +30,10 @@ const FileUpload = () => {
         })
         .then((downloadURL) => {
           updateAttachedFileUrl(selectedElementIds[0], downloadURL);
+          setWebsocketAction(
+            { selectedElementIds, downloadURL },
+            'addAttachedFileUrl',
+          );
         })
         .catch(() => {
           alert('Error uploading');

client/src/hooks/useSocket.tsx

@@ -40,6 +40,8 @@ export const useSocket = () => {
   ]);
 
   const {
+    removeAttachedFileUrl,
+    updateAttachedFileUrl,
     setCanvasElementState,
     addCanvasShape,
     addCanvasFreehand,
@@ -67,6 +69,8 @@ export const useSocket = () => {
     textStrings,
     fileIds,
   } = useCanvasElementStore([
+    'removeAttachedFileUrl',
+    'updateAttachedFileUrl',
     'setCanvasElementState',
     'addCanvasShape',
     'addCanvasFreehand',
@@ -246,6 +250,15 @@ export const useSocket = () => {
     addNewCollab: (newUser: SharedUser) => {
       addUser(newUser);
     },
+    addAttachedFileUrl: (params: {
+      selectedElementIds: string;
+      downloadURL: string;
+    }) => {
+      updateAttachedFileUrl(params.selectedElementIds[0], params.downloadURL);
+    },
+    removeAttachedFileUrl: (ids: string[]) => {
+      removeAttachedFileUrl(ids);
+    },
   };
 
   // Intialize socket

client/src/stores/WebSocketStore.ts

@@ -24,6 +24,8 @@ export const Actions = [
   'removeComment',
   'changePermission',
   'addNewCollab',
+  'addAttachedFileUrl',
+  'removeAttachedFileUrl',
 ] as const;
 export type ActionsType = typeof Actions;
 
@@ -58,7 +60,8 @@ interface WebSocketState {
     | string[]
     | UpdatedTimeMessage
     | { elemID: string; comment: Partial<Comment> }
-    | { collabID: string; permission: string };
+    | { collabID: string; permission: string }
+    | { selectedElementIds: string[]; downloadURL: string };
   // The current active tenants
   activeTenants: Record<string, User>;
   // The current cursor positions keyed by user ID
@@ -77,7 +80,8 @@ interface WebSocketActions {
       | string[]
       | UpdatedTimeMessage
       | { elemID: string; comment: Partial<Comment> }
-      | { collabID: string; permission: string },
+      | { collabID: string; permission: string }
+      | { selectedElementIds: string[]; downloadURL: string },
     action: string,
   ) => void;
   // Set the socket reference
@@ -119,7 +123,8 @@ const setWebsocketAction =
       | string[]
       | UpdatedTimeMessage
       | { elemID: string; comment: Partial<Comment> }
-      | { collabID: string; permission: string },
+      | { collabID: string; permission: string }
+      | { selectedElementIds: string[]; downloadURL: string },
     action: string,
   ) =>
     set(() => {