From 935befcb96094680cc755314f9ccb11a29ff95bc Mon Sep 17 00:00:00 2001
From: Abdalla Abdelhadi <97321669+AbdallaAbdelhadi@users.noreply.github.com>
Date: Sun, 3 Mar 2024 18:47:09 -0500
Subject: [PATCH] Resolve DOO-113 (#79)

* added live collab for file upload

* fix linting problems
---
 client/src/components/lib/UploadFilesToFirebase.tsx | 10 +++++++---
 client/src/hooks/useSocket.tsx                      | 13 +++++++++++++
 client/src/stores/WebSocketStore.ts                 | 11 ++++++++---
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/client/src/components/lib/UploadFilesToFirebase.tsx b/client/src/components/lib/UploadFilesToFirebase.tsx
index 337af70..9004b0e 100644
--- a/client/src/components/lib/UploadFilesToFirebase.tsx
+++ b/client/src/components/lib/UploadFilesToFirebase.tsx
@@ -1,7 +1,8 @@
-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
@@ -9,16 +10,15 @@ import { useCanvasElementStore } from '@/stores/CanvasElementsStore';
  * @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');
diff --git a/client/src/hooks/useSocket.tsx b/client/src/hooks/useSocket.tsx
index ef07b36..1b0e2ac 100644
--- a/client/src/hooks/useSocket.tsx
+++ b/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
diff --git a/client/src/stores/WebSocketStore.ts b/client/src/stores/WebSocketStore.ts
index 8e097b4..9b74fde 100644
--- a/client/src/stores/WebSocketStore.ts
+++ b/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(() => {