From 84fb8b2288541cdc3a6b79ad4377fc7b344aea1a Mon Sep 17 00:00:00 2001 From: boojack Date: Thu, 23 Feb 2023 23:22:34 +0800 Subject: [PATCH] feat: update storage setting section (#1140) --- server/system.go | 2 +- .../CreateIdentityProviderDialog.tsx | 3 +- .../components/CreateStorageServiceDialog.tsx | 45 ++----- .../components/Settings/StorageSection.tsx | 116 +++++++++++++----- web/src/store/index.ts | 2 - web/src/store/module/index.ts | 1 - web/src/store/module/storage.ts | 31 ----- web/src/store/reducer/storage.ts | 53 -------- 8 files changed, 98 insertions(+), 155 deletions(-) delete mode 100644 web/src/store/module/storage.ts delete mode 100644 web/src/store/reducer/storage.ts diff --git a/server/system.go b/server/system.go index f837f587..b5942028 100644 --- a/server/system.go +++ b/server/system.go @@ -99,7 +99,7 @@ func (s *Server) registerSystemRoutes(g *echo.Group) { systemStatus.CustomizedProfile.ExternalURL = v.(string) } } else if systemSetting.Name == api.SystemSettingStorageServiceIDName { - systemStatus.StorageServiceID = value.(int) + systemStatus.StorageServiceID = int(value.(float64)) } } diff --git a/web/src/components/CreateIdentityProviderDialog.tsx b/web/src/components/CreateIdentityProviderDialog.tsx index 360c664f..d1cbcd29 100644 --- a/web/src/components/CreateIdentityProviderDialog.tsx +++ b/web/src/components/CreateIdentityProviderDialog.tsx @@ -191,11 +191,10 @@ const CreateIdentityProviderDialog: React.FC = (props: Props) => { console.error(error); toastHelper.error(error.response.data.message); } - destroy(); - if (confirmCallback) { confirmCallback(); } + destroy(); }; const setPartialOAuth2Config = (state: Partial) => { diff --git a/web/src/components/CreateStorageServiceDialog.tsx b/web/src/components/CreateStorageServiceDialog.tsx index 958c6078..7a0a0c01 100644 --- a/web/src/components/CreateStorageServiceDialog.tsx +++ b/web/src/components/CreateStorageServiceDialog.tsx @@ -1,20 +1,19 @@ import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { Button, Input, Typography } from "@mui/joy"; -import { useStorageStore } from "../store/module"; +import * as api from "../helpers/api"; import { generateDialog } from "./Dialog"; import Icon from "./Icon"; import toastHelper from "./Toast"; -import { showCommonDialog } from "./Dialog/CommonDialog"; interface Props extends DialogProps { storage?: Storage; + confirmCallback?: () => void; } const CreateStorageServiceDialog: React.FC = (props: Props) => { - const { destroy, storage } = props; + const { destroy, storage, confirmCallback } = props; const { t } = useTranslation(); - const storageStore = useStorageStore(); const [storageCreate, setStorageCreate] = useState({ name: "", endPoint: "", @@ -53,9 +52,9 @@ const CreateStorageServiceDialog: React.FC = (props: Props) => { const handleConfirmBtnClick = async () => { try { if (isCreating) { - await storageStore.createStorage(storageCreate); + await api.createStorage(storageCreate); } else { - await storageStore.patchStorage({ + await api.patchStorage({ id: storage.id, ...storageCreate, }); @@ -64,29 +63,10 @@ const CreateStorageServiceDialog: React.FC = (props: Props) => { console.error(error); toastHelper.error(error.response.data.message); } - destroy(); - }; - - const handleDeleteBtnClick = async () => { - if (isCreating) { - return; + if (confirmCallback) { + confirmCallback(); } - - showCommonDialog({ - title: t("setting.storage-section.delete-storage"), - content: t("setting.storage-section.warning-text"), - style: "warning", - dialogName: "delete-storage-dialog", - onConfirm: async () => { - try { - await storageStore.deleteStorageById(storage.id); - } catch (error: any) { - console.error(error); - toastHelper.error(error.response.data.message); - } - destroy(); - }, - }); + destroy(); }; const handleNameChange = (event: React.ChangeEvent) => { @@ -195,11 +175,6 @@ const CreateStorageServiceDialog: React.FC = (props: Props) => { - {!isCreating && ( - - )} @@ -209,14 +184,14 @@ const CreateStorageServiceDialog: React.FC = (props: Props) => { ); }; -function showCreateStorageServiceDialog(storage?: Storage) { +function showCreateStorageServiceDialog(storage?: Storage, confirmCallback?: () => void) { generateDialog( { className: "create-storage-service-dialog", dialogName: "create-storage-service-dialog", }, CreateStorageServiceDialog, - { storage } + { storage, confirmCallback } ); } diff --git a/web/src/components/Settings/StorageSection.tsx b/web/src/components/Settings/StorageSection.tsx index 20ce07d7..d4d101a7 100644 --- a/web/src/components/Settings/StorageSection.tsx +++ b/web/src/components/Settings/StorageSection.tsx @@ -1,61 +1,117 @@ -import { Radio } from "@mui/joy"; -import React, { useEffect, useState } from "react"; +import { Divider, Select, Option } from "@mui/joy"; +import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; -import { useGlobalStore, useStorageStore } from "../../store/module"; +import { useGlobalStore } from "../../store/module"; import * as api from "../../helpers/api"; import showCreateStorageServiceDialog from "../CreateStorageServiceDialog"; +import Dropdown from "../common/Dropdown"; +import { showCommonDialog } from "../Dialog/CommonDialog"; +import toastHelper from "../Toast"; const StorageSection = () => { const { t } = useTranslation(); - const storageStore = useStorageStore(); - const storages = storageStore.state.storages; const globalStore = useGlobalStore(); const systemStatus = globalStore.state.systemStatus; const [storageServiceId, setStorageServiceId] = useState(systemStatus.storageServiceId); + const [storageList, setStorageList] = useState([]); useEffect(() => { - storageStore.fetchStorages(); - globalStore.fetchSystemStatus(); + fetchStorageList(); }, []); useEffect(() => { setStorageServiceId(systemStatus.storageServiceId); }, [systemStatus]); - const handleActiveStorageServiceChanged = async (event: React.ChangeEvent) => { - const value = parseInt(event.target.value); - setStorageServiceId(value); - await api.upsertSystemSetting({ - name: "storageServiceId", - value: JSON.stringify(value), - }); + const fetchStorageList = async () => { + const { + data: { data: storageList }, + } = await api.getStorageList(); + setStorageList(storageList); }; - const handleStorageServiceUpdate = async (event: React.MouseEvent, storage: Storage) => { - event.preventDefault(); - showCreateStorageServiceDialog(storage); + const handleActiveStorageServiceChanged = async (storageId: StorageId) => { + await api.upsertSystemSetting({ + name: "storageServiceId", + value: JSON.stringify(storageId), + }); + setStorageServiceId(storageId); + }; + + const handleDeleteStorage = (storage: Storage) => { + showCommonDialog({ + title: t("setting.storage-section.delete-storage"), + content: t("setting.storage-section.warning-text"), + style: "warning", + dialogName: "delete-storage-dialog", + onConfirm: async () => { + try { + await api.deleteStorage(storage.id); + } catch (error: any) { + console.error(error); + toastHelper.error(error.response.data.message); + } + await fetchStorageList(); + }, + }); }; return (
+
+ Current storage +
+ +
{t("setting.storage-section.storage-services-list")} -
- {storages.map((storage) => ( - - ))} - +
+ {storageList.map((storage) => ( +
+
+

{storage.name}

+
+
+ + + + + } + /> +
+
+ ))} +
); }; diff --git a/web/src/store/index.ts b/web/src/store/index.ts index 9d5e8bb6..f19af158 100644 --- a/web/src/store/index.ts +++ b/web/src/store/index.ts @@ -9,7 +9,6 @@ import locationReducer from "./reducer/location"; import resourceReducer from "./reducer/resource"; import dialogReducer from "./reducer/dialog"; import tagReducer from "./reducer/tag"; -import storageReducer from "./reducer/storage"; const store = configureStore({ reducer: { @@ -22,7 +21,6 @@ const store = configureStore({ location: locationReducer, resource: resourceReducer, dialog: dialogReducer, - storage: storageReducer, }, }); diff --git a/web/src/store/module/index.ts b/web/src/store/module/index.ts index 8c23d20b..803eb374 100644 --- a/web/src/store/module/index.ts +++ b/web/src/store/module/index.ts @@ -7,4 +7,3 @@ export * from "./resource"; export * from "./shortcut"; export * from "./user"; export * from "./dialog"; -export * from "./storage"; diff --git a/web/src/store/module/storage.ts b/web/src/store/module/storage.ts deleted file mode 100644 index 27c8263b..00000000 --- a/web/src/store/module/storage.ts +++ /dev/null @@ -1,31 +0,0 @@ -import store, { useAppSelector } from ".."; -import * as api from "../../helpers/api"; -import { setStorages, createStorage, patchStorage, deleteStorage } from "../reducer/storage"; - -export const useStorageStore = () => { - const state = useAppSelector((state) => state.storage); - return { - state, - getState: () => { - return store.getState().storage; - }, - fetchStorages: async () => { - const { data } = (await api.getStorageList()).data; - store.dispatch(setStorages(data)); - }, - createStorage: async (storageCreate: StorageCreate) => { - const { data: storage } = (await api.createStorage(storageCreate)).data; - store.dispatch(createStorage(storage)); - return storage; - }, - patchStorage: async (storagePatch: StoragePatch) => { - const { data: storage } = (await api.patchStorage(storagePatch)).data; - store.dispatch(patchStorage(storage)); - return storage; - }, - deleteStorageById: async (storageId: StorageId) => { - await api.deleteStorage(storageId); - store.dispatch(deleteStorage(storageId)); - }, - }; -}; diff --git a/web/src/store/reducer/storage.ts b/web/src/store/reducer/storage.ts deleted file mode 100644 index b0eaefac..00000000 --- a/web/src/store/reducer/storage.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { createSlice, PayloadAction } from "@reduxjs/toolkit"; - -interface State { - storages: Storage[]; -} - -const storageSlice = createSlice({ - name: "storage", - initialState: { - storages: [], - } as State, - reducers: { - setStorages: (state, action: PayloadAction) => { - return { - ...state, - storages: action.payload, - }; - }, - createStorage: (state, action: PayloadAction) => { - return { - ...state, - storages: [action.payload].concat(state.storages), - }; - }, - patchStorage: (state, action: PayloadAction>) => { - return { - ...state, - storages: state.storages.map((storage) => { - if (storage.id === action.payload.id) { - return { - ...storage, - ...action.payload, - }; - } else { - return storage; - } - }), - }; - }, - deleteStorage: (state, action: PayloadAction) => { - return { - ...state, - storages: state.storages.filter((storage) => { - return storage.id !== action.payload; - }), - }; - }, - }, -}); - -export const { setStorages, createStorage, patchStorage, deleteStorage } = storageSlice.actions; - -export default storageSlice.reducer;