refactor: socket File Upload Update Delete

Services/client/src/stores/storage.ts

@@ -118,7 +118,6 @@ const useStorage = defineStore('storageStore', () => {
       }
     })
 
-    console.log(structure, folder.value, file.value)
     return structure
   })
   const currentInfo = reactive<{
@@ -190,20 +189,28 @@ const useStorage = defineStore('storageStore', () => {
 
   socket.on('connect', () => console.info('Socket.io connected.'))
   socket.on('disconnect', () => console.info('Socket.io disconnected.'))
-  socket.on('CreateFolder', (data: { pathname: string }) => {
+  socket.on(
-    const arr = data.pathname.split('/').filter(Boolean)
+    'CreateFolder',
-    const path = consistantPath(arr.slice(0, -1))
+    (data: {
+      pathname: string
+      name: string
+      createdAt: string
+      createdBy: string
+    }) => {
+      const arr = data.pathname.split('/').filter(Boolean)
+      const path = consistantPath(arr.slice(0, -1))
 
-    if (folder.value[path]) {
+      if (folder.value[path]) {
-      folder.value[path].push({
+        folder.value[path].push({
-        pathname: data.pathname,
+          pathname: data.pathname,
-        name: arr[arr.length - 1],
+          name: data.name,
-        createdAt: 'n/a',
+          createdAt: data.createdAt,
-        createdBy: 'n/a',
+          createdBy: data.createdBy,
-      })
+        })
-      folder.value[path].sort((a, b) => a.pathname.localeCompare(b.pathname))
+        folder.value[path].sort((a, b) => a.pathname.localeCompare(b.pathname))
-    }
+      }
-  })
+    },
+  )
   // NOTE:
   // API planned to make new endpoint that can move and rename in one go.
   // Need to change if api handle move and rename file instead of just edit.
@@ -250,6 +257,11 @@ const useStorage = defineStore('storageStore', () => {
         delete folder.value[key]
       }
     }
+    for (let key in file.value) {
+      if (key.startsWith(data.pathname)) {
+        delete file.value[key]
+      }
+    }
 
     const arr = data.pathname.split('/').filter(Boolean)
     const path = consistantPath(arr.slice(0, -1))
@@ -260,6 +272,70 @@ const useStorage = defineStore('storageStore', () => {
       )
     }
   })
+  socket.on('FileUpload', (data: StorageFile) => {
+    const arr = data.pathname.split('/').filter(Boolean)
+    const path = consistantPath(arr.slice(0, -1))
+
+    if (file.value[path]) {
+      const idx = file.value[path].findIndex(
+        (v) => v.pathname === data.pathname,
+      )
+      if (idx !== -1) file.value[path][idx] = data
+      else file.value[path].push(data)
+
+      file.value[path].sort((a, b) => a.pathname.localeCompare(b.pathname))
+    }
+  })
+  socket.on('FileDelete', (data: { pathname: string }) => {
+    const arr = data.pathname.split('/').filter(Boolean)
+    const path = consistantPath(arr.slice(0, -1))
+
+    if (file.value[path]) {
+      file.value[path] = file.value[path].filter(
+        (v) => v.pathname !== data.pathname,
+      )
+    }
+  })
+  socket.on(
+    'FileUpdateMove',
+    (data: { from: StorageFile; to: StorageFile }) => {
+      const arr = data.from.pathname.split('/').filter(Boolean)
+      const path = consistantPath(arr.slice(0, -1))
+
+      if (file.value[path]) {
+        const idx = file.value[path].findIndex(
+          (v) => v.pathname === data.from.pathname,
+        )
+        if (idx !== -1) file.value[path][idx] = data.to
+      }
+    },
+  )
+  socket.on('FileUpdate', (data: StorageFile) => {
+    const arr = data.pathname.split('/').filter(Boolean)
+    const path = consistantPath(arr.slice(0, -1))
+
+    if (file.value[path]) {
+      const idx = file.value[path].findIndex(
+        (v) => v.pathname === data.pathname,
+      )
+      if (idx !== -1) file.value[path][idx] = data
+    }
+  })
+  socket.on('FileUploadRequest', (data: StorageFile) => {
+    const arr = data.pathname.split('/').filter(Boolean)
+    const path = consistantPath(arr.slice(0, -1))
+
+    if (file.value[path]) {
+      const idx = file.value[path].findIndex(
+        (v) => v.pathname === data.pathname,
+      )
+
+      if (idx !== -1) file.value[path][idx] = data
+      else file.value[path].push(data)
+
+      file.value[path].sort((a, b) => a.pathname.localeCompare(b.pathname))
+    }
+  })
 
   async function createFolder(name: string, path: string = currentInfo.path) {
     loader.show()