Merge pull request #988 from xieliuduo/fix-fetch-info

scottsut · web-flow · commit d5b75c14342c · 2022-03-11T16:05:00.000+08:00
refactor: handleServerBoardAction &amp; boardSlice.setBoardState
diff --git a/frontend/src/app/pages/DashBoardPage/pages/Board/AutoDashboard/AutoBoardCore.tsx b/frontend/src/app/pages/DashBoardPage/pages/Board/AutoDashboard/AutoBoardCore.tsx
@@ -28,7 +28,6 @@ import {
 import useAutoBoardRenderItem from 'app/pages/DashBoardPage/hooks/useAutoBoardRenderItem';
 import useBoardWidthHeight from 'app/pages/DashBoardPage/hooks/useBoardWidthHeight';
 import useGridLayoutMap from 'app/pages/DashBoardPage/hooks/useGridLayoutMap';
-import { useVisibleHidden } from 'app/pages/DashBoardPage/hooks/useVisibleHidden';
 import {
   selectLayoutWidgetInfoMapById,
   selectLayoutWidgetMapById,
@@ -49,7 +48,7 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
 const mobilePoints = Object.keys(BREAK_POINT_MAP).slice(3);
 export const AutoBoardCore: React.FC<{ boardId: string }> = memo(
   ({ boardId }) => {
-    const visible = useVisibleHidden();
+    // const visible = useVisibleHidden(0);
     const {
       margin,
       containerPadding,
@@ -143,11 +142,7 @@ export const AutoBoardCore: React.FC<{ boardId: string }> = memo(
 
     return (
       <Wrap>
-        <StyledContainer
-          bg={background}
-          ref={ref}
-          style={{ visibility: visible }}
-        >
+        <StyledContainer bg={background} ref={ref}>
           {sortedLayoutWidgets.length ? (
             <div className="grid-wrap" ref={gridWrapRef}>
               <div className="grid-wrap" ref={gridRef}>
diff --git a/frontend/src/app/pages/DashBoardPage/pages/Board/slice/asyncActions.ts b/frontend/src/app/pages/DashBoardPage/pages/Board/slice/asyncActions.ts
@@ -42,7 +42,6 @@ export const handleServerBoardAction =
   }) =>
   async (dispatch, getState) => {
     const { data, renderMode, filterSearchMap } = params;
-
     const dashboard = getDashBoardByResBoard(data);
     const { datacharts, views: serverViews, widgets: serverWidgets } = data;
 
@@ -53,30 +52,34 @@ export const handleServerBoardAction =
       dataCharts,
       filterSearchMap,
     );
-
     const widgetIds = Object.values(widgetMap).map(w => w.id);
-    //
     let boardInfo = getInitBoardInfo({
       id: dashboard.id,
       widgetIds,
       controllerWidgets,
     });
-
     if (renderMode === 'schedule') {
       boardInfo = getScheduleBoardInfo(boardInfo, widgetMap);
     }
+    const widgetInfoMap = getWidgetInfoMapByServer(widgetMap);
 
     const allDataCharts: DataChart[] = dataCharts.concat(wrappedDataCharts);
+
     const viewViews = getChartDataView(serverViews, allDataCharts);
-    const widgetInfoMap = getWidgetInfoMapByServer(widgetMap);
-    dispatch(
-      boardActions.setBoardDetailToState({
+
+    await dispatch(
+      boardActions.setBoardState({
         board: dashboard,
         boardInfo: boardInfo,
-        views: viewViews,
+      }),
+    );
+    dispatch(boardActions.setViewMap(viewViews));
+    dispatch(boardActions.setDataChartToMap(allDataCharts));
+    dispatch(
+      boardActions.setWidgetMapState({
+        boardId: dashboard.id,
         widgetMap: widgetMap,
         widgetInfoMap: widgetInfoMap,
-        dataCharts: allDataCharts,
       }),
     );
   };
diff --git a/frontend/src/app/pages/DashBoardPage/pages/Board/slice/index.ts b/frontend/src/app/pages/DashBoardPage/pages/Board/slice/index.ts
@@ -46,39 +46,50 @@ const boardSlice = createSlice({
   name: 'board',
   initialState: boardInit as BoardState,
   reducers: {
-    setBoardDetailToState(
+    setBoardState(
       state,
       action: PayloadAction<{
         board: Dashboard;
         boardInfo: BoardInfo;
-        widgetMap: Record<string, Widget>;
-        widgetInfoMap: Record<string, WidgetInfo>;
-        views: ChartDataView[];
-        dataCharts: DataChart[];
       }>,
     ) {
-      const { board, boardInfo, widgetMap, widgetInfoMap, dataCharts, views } =
-        action.payload;
+      const { board, boardInfo } = action.payload;
       state.boardRecord[board.id] = board;
       state.boardInfoRecord[board.id] = boardInfo;
-      // widgetRecord
-      if (!state.widgetRecord[board.id]) {
-        state.widgetRecord[board.id] = {};
+      // can not del :dataCharts、views
+    },
+    setWidgetMapState(
+      state,
+      action: PayloadAction<{
+        boardId: string;
+        widgetMap: Record<string, Widget>;
+        widgetInfoMap: Record<string, WidgetInfo>;
+      }>,
+    ) {
+      const { boardId, widgetMap, widgetInfoMap } = action.payload;
+      if (!state.widgetRecord[boardId]) {
+        state.widgetRecord[boardId] = {};
       }
-      state.widgetRecord[board.id] = widgetMap;
-      // widgetInfoRecord
-      if (!state.widgetInfoRecord[board.id]) {
-        state.widgetInfoRecord[board.id] = {};
+      state.widgetRecord[boardId] = widgetMap;
+      if (!state.widgetInfoRecord[boardId]) {
+        state.widgetInfoRecord[boardId] = {};
       }
-      state.widgetInfoRecord[board.id] = widgetInfoMap;
-
-      dataCharts.forEach(chart => {
-        state.dataChartMap[chart.id] = chart;
+      state.widgetInfoRecord[boardId] = widgetInfoMap;
+    },
+    setDataChartToMap(state, action: PayloadAction<DataChart[]>) {
+      const dataCharts = action.payload;
+      dataCharts.forEach(dc => {
+        state.dataChartMap[dc.id] = dc;
       });
+    },
+
+    setViewMap(state, action: PayloadAction<ChartDataView[]>) {
+      const views = action.payload;
       views.forEach(view => {
         state.viewMap[view.id] = view;
       });
     },
+
     clearBoardStateById(state, action: PayloadAction<string>) {
       const boardId = action.payload;
       delete state.boardRecord[boardId];
@@ -134,19 +145,7 @@ const boardSlice = createSlice({
       const { recordId, itemId } = action.payload;
       state.boardInfoRecord[recordId].fullScreenItemId = itemId;
     },
-    setDataChartToMap(state, action: PayloadAction<DataChart[]>) {
-      const dataCharts = action.payload;
-      dataCharts.forEach(dc => {
-        state.dataChartMap[dc.id] = dc;
-      });
-    },
 
-    setViewMap(state, action: PayloadAction<ChartDataView[]>) {
-      const views = action.payload;
-      views.forEach(view => {
-        state.viewMap[view.id] = view;
-      });
-    },
     setWidgetData(state, action: PayloadAction<WidgetData>) {
       const widgetData = action.payload;
       state.widgetDataMap[widgetData.id] = widgetData;
diff --git a/frontend/src/app/pages/DashBoardPage/pages/Board/slice/thunk.ts b/frontend/src/app/pages/DashBoardPage/pages/Board/slice/thunk.ts
@@ -83,13 +83,14 @@ export const fetchBoardDetail = createAsyncThunk<
     `/viz/dashboards/${params?.dashboardRelId}`,
   );
 
-  await dispatch(
+  dispatch(
     handleServerBoardAction({
       data,
       renderMode: 'read',
       filterSearchMap: { params: params?.filterSearchParams },
     }),
   );
+
   return null;
 });
 
diff --git a/frontend/src/app/pages/DashBoardPage/pages/Board/slice/types.ts b/frontend/src/app/pages/DashBoardPage/pages/Board/slice/types.ts
@@ -194,7 +194,7 @@ export interface WidgetInfo {
   inLinking: boolean; //是否在触发联动
   selected: boolean;
   pageInfo: Partial<PageInfo>;
-  errInfo?: { [propName: string]: string };
+  errInfo: { [propName: string]: string };
   selectItems?: string[];
   parameters?: any;
 }
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/AutoEditor/AutoBoardEditor.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/AutoEditor/AutoBoardEditor.tsx
@@ -29,7 +29,6 @@ import {
 } from 'app/pages/DashBoardPage/constants';
 import useAutoBoardRenderItem from 'app/pages/DashBoardPage/hooks/useAutoBoardRenderItem';
 import useGridLayoutMap from 'app/pages/DashBoardPage/hooks/useGridLayoutMap';
-import { useVisibleHidden } from 'app/pages/DashBoardPage/hooks/useVisibleHidden';
 import { DeviceType } from 'app/pages/DashBoardPage/pages/Board/slice/types';
 import { dispatchResize } from 'app/utils/dispatchResize';
 import debounce from 'lodash/debounce';
@@ -61,7 +60,7 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
 
 export const AutoBoardEditor: React.FC<{}> = memo(() => {
   const dispatch = useDispatch();
-  const visible = useVisibleHidden();
+  // const visible = useVisibleHidden(100);
   const {
     margin,
     containerPadding,
@@ -180,7 +179,7 @@ export const AutoBoardEditor: React.FC<{}> = memo(() => {
         curWH={curWH}
         className={deviceClassName}
         ref={ref}
-        style={{ visibility: visible }}
+        // style={{ visibility: visible }}
       >
         {sortedLayoutWidgets.length ? (
           <div className="grid-wrap" ref={gridWrapRef}>
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/slice/index.ts b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/slice/index.ts
@@ -250,13 +250,15 @@ const widgetInfoRecordSlice = createSlice({
       }>,
     ) {
       const { widgetId, errInfo, errorType } = action.payload;
-      let errorObj = state[widgetId].errInfo || {};
+      let errorObj = state[widgetId]?.errInfo || {};
       if (errInfo) {
         errorObj[errorType] = errInfo;
       } else {
         delete errorObj[errorType];
       }
-      state[widgetId].errInfo = errorObj;
+      if (state[widgetId]?.errInfo) {
+        state[widgetId].errInfo = errorObj;
+      }
     },
   },
   extraReducers: builder => {
diff --git a/frontend/src/app/pages/DashBoardPage/utils/widget.ts b/frontend/src/app/pages/DashBoardPage/utils/widget.ts
@@ -234,6 +234,7 @@ export const createWidgetInfo = (id: string): WidgetInfo => {
     editing: false,
     inLinking: false,
     selected: false,
+    errInfo: {},
     rendered: false,
     pageInfo: {
       pageNo: 1,

Original file line number	Diff line number	Diff line change
`@@ -194,7 +194,7 @@ export interface WidgetInfo {`
`194`	`194`	`inLinking: boolean; //是否在触发联动`
`195`	`195`	`selected: boolean;`
`196`	`196`	`pageInfo: Partial<PageInfo>;`
`197`		`- errInfo?: { [propName: string]: string };`
	`197`	`+ errInfo: { [propName: string]: string };`
`198`	`198`	`selectItems?: string[];`
`199`	`199`	`parameters?: any;`
`200`	`200`	`}`