chore: update resource service (#364)

web/src/components/ResourcesDialog.tsx

@@ -1,18 +1,18 @@
 import copy from "copy-to-clipboard";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import * as utils from "../helpers/utils";
 import useLoading from "../hooks/useLoading";
 import { resourceService } from "../services";
+import { useAppSelector } from "../store";
+import Icon from "./Icon";
+import toastHelper from "./Toast";
 import Dropdown from "./common/Dropdown";
 import { generateDialog } from "./Dialog";
 import { showCommonDialog } from "./Dialog/CommonDialog";
 import showPreviewImageDialog from "./PreviewImageDialog";
-import Icon from "./Icon";
-import toastHelper from "./Toast";
-import "../less/resources-dialog.less";
-import * as utils from "../helpers/utils";
 import showChangeResourceFilenameDialog from "./ChangeResourceFilenameDialog";
-import { useAppSelector } from "../store";
+import "../less/resources-dialog.less";
 
 type Props = DialogProps;
 
@@ -28,8 +28,10 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
   const [state, setState] = useState<State>({
     isUploadingResource: false,
   });
+
   useEffect(() => {
-    fetchResources()
+    resourceService
+      .fetchResourceList()
       .catch((error) => {
         console.error(error);
         toastHelper.error(error.response.data.message);
@@ -39,10 +41,6 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
       });
   }, []);
 
-  const fetchResources = async () => {
-    const data = await resourceService.getResourceList();
-  };
-
   const handleUploadFileBtnClick = async () => {
     if (state.isUploadingResource) {
       return;
@@ -81,7 +79,6 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
       }
 
       document.body.removeChild(inputEl);
-      await fetchResources();
     };
     inputEl.click();
   };
@@ -116,7 +113,6 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
       style: "warning",
       onConfirm: async () => {
         await resourceService.deleteResourceById(resource.id);
-        await fetchResources();
       },
     });
   };

web/src/services/resourceService.ts

@@ -1,6 +1,6 @@
 import * as api from "../helpers/api";
 import store from "../store";
-import { patchResource, setResources } from "../store/modules/resource";
+import { patchResource, setResources, deleteResource } from "../store/modules/resource";
 
 const convertResponseModelResource = (resource: Resource): Resource => {
   return {
@@ -11,12 +11,17 @@ const convertResponseModelResource = (resource: Resource): Resource => {
 };
 
 const resourceService = {
-  async getResourceList(): Promise<Resource[]> {
+  getState: () => {
+    return store.getState().resource;
+  },
+
+  async fetchResourceList(): Promise<Resource[]> {
     const { data } = (await api.getResourceList()).data;
     const resourceList = data.map((m) => convertResponseModelResource(m));
     store.dispatch(setResources(resourceList));
     return resourceList;
   },
+
   async upload(file: File): Promise<Resource> {
     const { name: filename, size } = file;
 
@@ -27,11 +32,15 @@ const resourceService = {
     const formData = new FormData();
     formData.append("file", file, filename);
     const { data } = (await api.uploadFile(formData)).data;
-
-    return data;
+    const resource = convertResponseModelResource(data);
+    const resourceList = resourceService.getState().resources;
+    store.dispatch(setResources(resourceList.concat(resource)));
+    return resource;
   },
+
   async deleteResourceById(id: ResourceId) {
-    return api.deleteResourceById(id);
+    await api.deleteResourceById(id);
+    store.dispatch(deleteResource(id));
   },
 
   async patchResource(resourcePatch: ResourcePatch): Promise<Resource> {

web/src/store/modules/resource.ts

@@ -31,9 +31,17 @@ const resourceSlice = createSlice({
         }),
       };
     },
+    deleteResource: (state, action: PayloadAction<ResourceId>) => {
+      return {
+        ...state,
+        resources: state.resources.filter((resource) => {
+          return resource.id !== action.payload;
+        }),
+      };
+    },
   },
 });
 
-export const { setResources, patchResource } = resourceSlice.actions;
+export const { setResources, patchResource, deleteResource } = resourceSlice.actions;
 
 export default resourceSlice.reducer;