refactor as setup

frontend/src/stores/upload.ts

@@ -3,6 +3,7 @@ import { useFileStore } from "./file";
 import { files as api } from "@/api";
 import { throttle } from "lodash-es";
 import buttons from "@/utils/buttons";
+import { computed, ref } from "vue";
 
 // TODO: make this into a user setting
 const UPLOADS_LIMIT = 5;
@@ -25,125 +26,135 @@ function formatSize(bytes: number): string {
   return (bytes / k ** i).toFixed(2) + " " + sizes[i];
 }
 
-export const useUploadStore = defineStore("upload", {
+export const useUploadStore = defineStore("upload", () => {
-  // convert to a function
+  //
-  state: (): {
+  // STATE
-    id: number;
+  //
-    sizes: number[];
+
-    progress: number[];
+  const id = ref<number>(0);
-    queue: UploadItem[];
+  const sizes = ref<number[]>([]);
-    uploads: Uploads;
+  const progress = ref<number[]>([]);
-    error: Error | null;
+  const queue = ref<UploadItem[]>([]);
-  } => ({
+  const uploads = ref<Uploads>({});
-    id: 0,
+  const error = ref<Error | null>(null);
-    sizes: [],
+
-    progress: [],
+  //
-    queue: [],
+  // GETTERS
-    uploads: {},
+  //
-    error: null,
+
-  }),
+  const getProgress = computed(() => {
-  getters: {
+    if (progress.value.length === 0) {
-    // user and jwt getter removed, no longer needed
-    getProgress: (state) => {
-      if (state.progress.length === 0) {
       return 0;
     }
 
-      const totalSize = state.sizes.reduce((a, b) => a + b, 0);
+    const totalSize = sizes.value.reduce((a, b) => a + b, 0);
-      const sum = state.progress.reduce((a, b) => a + b, 0);
+    const sum = progress.value.reduce((a, b) => a + b, 0);
     return Math.ceil((sum / totalSize) * 100);
-    },
+  });
-    getProgressDecimal: (state) => {
+
-      if (state.progress.length === 0) {
+  const getProgressDecimal = computed(() => {
+    if (progress.value.length === 0) {
       return 0;
     }
 
-      const totalSize = state.sizes.reduce((a, b) => a + b, 0);
+    const totalSize = sizes.value.reduce((a, b) => a + b, 0);
-      const sum = state.progress.reduce((a, b) => a + b, 0);
+    const sum = progress.value.reduce((a, b) => a + b, 0);
     return ((sum / totalSize) * 100).toFixed(2);
-    },
+  });
-    getTotalProgressBytes: (state) => {
+
-      if (state.progress.length === 0 || state.sizes.length === 0) {
+  const getTotalProgressBytes = computed(() => {
+    if (progress.value.length === 0 || sizes.value.length === 0) {
       return "0 Bytes";
     }
-      const sum = state.progress.reduce((a, b) => a + b, 0);
+    const sum = progress.value.reduce((a, b) => a + b, 0);
     return formatSize(sum);
-    },
+  });
-    getTotalProgress: (state) => {
+
-      return state.progress.reduce((a, b) => a + b, 0);
+  const getTotalProgress = computed(() => {
-    },
+    return progress.value.reduce((a, b) => a + b, 0);
-    getTotalSize: (state) => {
+  });
-      if (state.sizes.length === 0) {
+
+  const getTotalSize = computed(() => {
+    if (sizes.value.length === 0) {
       return "0 Bytes";
     }
-      const totalSize = state.sizes.reduce((a, b) => a + b, 0);
+    const totalSize = sizes.value.reduce((a, b) => a + b, 0);
     return formatSize(totalSize);
-    },
+  });
-    getTotalBytes: (state) => {
+
-      return state.sizes.reduce((a, b) => a + b, 0);
+  const getTotalBytes = computed(() => {
-    },
+    return sizes.value.reduce((a, b) => a + b, 0);
-    filesInUploadCount: (state) => {
+  });
-      return Object.keys(state.uploads).length + state.queue.length;
+
-    },
+  const filesInUploadCount = computed(() => {
-    filesInUpload: (state) => {
+    return Object.keys(uploads.value).length + queue.value.length;
+  });
+
+  const filesInUpload = computed(() => {
     const files = [];
 
-      for (const index in state.uploads) {
+    for (const index in uploads.value) {
-        const upload = state.uploads[index];
+      const upload = uploads.value[index];
       const id = upload.id;
       const type = upload.type;
       const name = upload.file.name;
-        const size = state.sizes[id];
+      const size = sizes.value[id];
       const isDir = upload.file.isDir;
-        const progress = isDir
+      const p = isDir ? 100 : Math.ceil((progress.value[id] / size) * 100);
-          ? 100
-          : Math.ceil((state.progress[id] / size) * 100);
 
       files.push({
         id,
         name,
-          progress,
+        progress: p,
         type,
         isDir,
       });
     }
 
     return files.sort((a, b) => a.progress - b.progress);
-    },
+  });
-  },
-  actions: {
-    // no context as first argument, use `this` instead
-    setProgress({ id, loaded }: { id: number; loaded: number }) {
-      this.progress[id] = loaded;
-    },
-    setError(error: Error) {
-      this.error = error;
-    },
-    reset() {
-      this.id = 0;
-      this.sizes = [];
-      this.progress = [];
-      this.queue = [];
-      this.uploads = {};
-      this.error = null;
-    },
-    addJob(item: UploadItem) {
-      this.queue.push(item);
-      this.sizes[this.id] = item.file.size;
-      this.id++;
-    },
-    moveJob() {
-      const item = this.queue[0];
-      this.queue.shift();
-      this.uploads[item.id] = item;
-    },
-    removeJob(id: number) {
-      delete this.uploads[id];
-    },
-    upload(item: UploadItem) {
-      const uploadsCount = Object.keys(this.uploads).length;
 
-      const isQueueEmpty = this.queue.length == 0;
+  //
+  // ACTIONS
+  //
+
+  const setProgress = ({ id, loaded }: { id: number; loaded: number }) => {
+    progress.value[id] = loaded;
+  };
+
+  const setError = (err: Error) => {
+    error.value = err;
+  };
+
+  const reset = () => {
+    id.value = 0;
+    sizes.value = [];
+    progress.value = [];
+    queue.value = [];
+    uploads.value = {};
+    error.value = null;
+  };
+
+  const addJob = (item: UploadItem) => {
+    queue.value.push(item);
+    sizes.value[id.value] = item.file.size;
+    id.value++;
+  };
+
+  const moveJob = () => {
+    const item = queue.value[0];
+    queue.value.shift();
+    uploads.value[item.id] = item;
+  };
+
+  const removeJob = (id: number) => {
+    delete uploads.value[id];
+  };
+
+  const upload = (item: UploadItem) => {
+    const uploadsCount = Object.keys(uploads.value).length;
+
+    const isQueueEmpty = queue.value.length == 0;
     const isUploadsEmpty = uploadsCount == 0;
 
     if (isQueueEmpty && isUploadsEmpty) {
@@ -151,19 +162,21 @@ export const useUploadStore = defineStore("upload", {
       buttons.loading("upload");
     }
 
-      this.addJob(item);
+    addJob(item);
-      this.processUploads();
+    processUploads();
-    },
+  };
-    finishUpload(item: UploadItem) {
+
-      this.setProgress({ id: item.id, loaded: item.file.size });
+  const finishUpload = (item: UploadItem) => {
-      this.removeJob(item.id);
+    setProgress({ id: item.id, loaded: item.file.size });
-      this.processUploads();
+    removeJob(item.id);
-    },
+    processUploads();
-    async processUploads() {
+  };
-      const uploadsCount = Object.keys(this.uploads).length;
+
+  const processUploads = async () => {
+    const uploadsCount = Object.keys(uploads.value).length;
 
     const isBelowLimit = uploadsCount < UPLOADS_LIMIT;
-      const isQueueEmpty = this.queue.length == 0;
+    const isQueueEmpty = queue.value.length == 0;
     const isUploadsEmpty = uploadsCount == 0;
 
     const isFinished = isQueueEmpty && isUploadsEmpty;
@@ -173,20 +186,20 @@ export const useUploadStore = defineStore("upload", {
       const fileStore = useFileStore();
       window.removeEventListener("beforeunload", beforeUnload);
       buttons.success("upload");
-        this.reset();
+      reset();
       fileStore.reload = true;
     }
 
     if (canProcess) {
-        const item = this.queue[0];
+      const item = queue.value[0];
-        this.moveJob();
+      moveJob();
 
       if (item.file.isDir) {
-          await api.post(item.path).catch(this.setError);
+        await api.post(item.path).catch(setError);
       } else {
         const onUpload = throttle(
           (event: ProgressEvent) =>
-              this.setProgress({
+            setProgress({
               id: item.id,
               loaded: event.loaded,
             }),
@@ -196,15 +209,41 @@ export const useUploadStore = defineStore("upload", {
 
         await api
           .post(item.path, item.file.file as File, item.overwrite, onUpload)
-            .catch(this.setError);
+          .catch(setError);
       }
 
-        this.finishUpload(item);
+      finishUpload(item);
     }
-    },
+  };
-    // easily reset state using `$reset`
+
-    clearUpload() {
+  return {
-      this.$reset();
+    // STATE
-    },
+    id,
-  },
+    sizes,
+    progress,
+    queue,
+    uploads,
+    error,
+
+    // GETTERS
+    getProgress,
+    getProgressDecimal,
+    getTotalProgressBytes,
+    getTotalProgress,
+    getTotalSize,
+    getTotalBytes,
+    filesInUploadCount,
+    filesInUpload,
+
+    // ACTIONS
+    setProgress,
+    setError,
+    reset,
+    addJob,
+    moveJob,
+    removeJob,
+    upload,
+    finishUpload,
+    processUploads,
+  };
 });