add group conf to redux

admin-frontend/src/component/subscribeCard.tsx

@@ -2,9 +2,10 @@ import {CopyOutlined, DeleteOutlined, EditOutlined} from '@ant-design/icons';
 import {Card, Col, Form, message, Popconfirm, Select, Tag, Tooltip} from 'antd';
 import Modal from 'antd/lib/modal/Modal';
 import React, {useState} from "react";
-import {useSelector} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 import {addSubscribe, delSubscribe} from 'src/api/config';
 import {platformConfSelector} from 'src/store/globalConfSlice';
+import {groupConfigSelector, updateGroupSubs} from 'src/store/groupConfigSlice';
 import {PlatformConfig, SubscribeConfig, SubscribeResp} from 'src/utils/type';
 import {AddModal} from './addSubsModal';
 
@@ -54,15 +55,15 @@ function CopyModal({setShowModal,config,
 interface SubscribeCardProp {
   groupNumber: string
   config: SubscribeConfig
-  groupSubscribes: SubscribeResp
-  reload: () => void
 }
-export function SubscribeCard({groupNumber, config, reload, groupSubscribes}: SubscribeCardProp) {
+export function SubscribeCard({groupNumber, config}: SubscribeCardProp) {
-  // const globalConf = useSelector()
   const platformConfs = useSelector(platformConfSelector)
   const [showModal, setShowModal] = useState(false)
   const [showEditModal, setShowEditModal] = useState(false)
   const platformConf = platformConfs[config.platformName] as PlatformConfig;
+  const dispatcher = useDispatch();
+  const groupSubscribes = useSelector(groupConfigSelector);
+  const reload = () => dispatcher(updateGroupSubs())
   const handleDelete = (groupNumber: string, platformName: string, target: string) => () => {
     delSubscribe(groupNumber, platformName, target).then(() => {
       reload() 

admin-frontend/src/pages/admin/configPage/index.tsx

@@ -1,26 +1,21 @@
 import {Button, Collapse, Empty, Row} from 'antd';
 import React, {ReactElement, useEffect, useState} from "react";
-import {getSubscribe} from 'src/api/config';
+import {useDispatch, useSelector} from 'react-redux';
-import {SubscribeCard} from 'src/component/subscribeCard';
-import {SubscribeResp} from 'src/utils/type';
 import {AddModal} from 'src/component/addSubsModal';
+import {SubscribeCard} from 'src/component/subscribeCard';
+import {groupConfigSelector, updateGroupSubs} from 'src/store/groupConfigSlice';
 
 interface ConfigPageProp {
   tab: string
 }
 export function ConfigPage(prop: ConfigPageProp) {
-  const [ configData, setConfigData ] = useState<SubscribeResp>({});
   const [ showModal, setShowModal ] = useState<boolean>(false);
   const [ currentAddingGroupNumber, setCurrentAddingGroupNumber ] = useState('');
-  const loadData = () => {
+  const configData = useSelector(groupConfigSelector);
-    getSubscribe()
+  const dispatcher = useDispatch();
-      .then(res => {
-          setConfigData(_ => res);
-        });
-  }
   useEffect(() => {
-    loadData()
+    dispatcher(updateGroupSubs())
-  }, [prop.tab]);
+  }, [prop.tab, dispatcher]);
   const clickNew = (groupNumber: string) => (e: React.MouseEvent<HTMLButtonElement>) => {
     setShowModal(_ => true);
     setCurrentAddingGroupNumber(groupNumber);
@@ -40,8 +35,7 @@ export function ConfigPage(prop: ConfigPageProp) {
             <Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 32},
               { xs: 8, sm: 16, md: 24, lg: 32}]} align="middle">
             {value.subscribes.map((subs, idx) => <SubscribeCard key={idx}
-              groupNumber={key} config={subs} groupSubscribes={configData} reload={loadData}
+              groupNumber={key} config={subs} />)}
-              />)}
           </Row>
         </Collapse.Panel>
         )
@@ -52,7 +46,8 @@ export function ConfigPage(prop: ConfigPageProp) {
         {groups}
       </Collapse>
       <AddModal groupNumber={currentAddingGroupNumber} showModal={showModal} 
-        refresh={loadData} setShowModal={(s: boolean) => setShowModal(_ => s)} />
+        refresh={() => dispatcher(updateGroupSubs())}
+        setShowModal={(s: boolean) => setShowModal(_ => s)} />
     </div>
     )
   }

admin-frontend/src/store/groupConfigSlice.ts

@@ -0,0 +1,27 @@
+import {CaseReducer, createAsyncThunk, createSlice, PayloadAction} from '@reduxjs/toolkit';
+import {SubscribeResp} from 'src/utils/type';
+import {getSubscribe} from 'src/api/config';
+import {RootState} from '.';
+const initialState: SubscribeResp = {}
+
+const setSubs: CaseReducer<SubscribeResp, PayloadAction<SubscribeResp>> = (_, action) => {
+  return action.payload
+}
+
+export const updateGroupSubs = createAsyncThunk(
+  "groupConfig/update", getSubscribe
+)
+
+export const groupConfigSlice = createSlice({
+  name: "groupConfig",
+  initialState,
+  reducers: {
+    setSubs
+  },
+  extraReducers: (reducer) => {
+    reducer.addCase(updateGroupSubs.fulfilled, setSubs)
+  }
+})
+
+export const groupConfigSelector = (state: RootState) => state.groupConfig;
+export default groupConfigSlice.reducer;

admin-frontend/src/store/index.ts

@@ -1,11 +1,13 @@
 import {configureStore} from "@reduxjs/toolkit";
 import loginSlice from "./loginSlice";
 import globalConfSlice from "./globalConfSlice";
+import groupConfigSlice from './groupConfigSlice';
 
 const store = configureStore({
   reducer: {
     login: loginSlice,
     globalConf: globalConfSlice,
+    groupConfig: groupConfigSlice,
   }
 })