From c88c0b11ea36e4301918e27efbd788a34a8bff60 Mon Sep 17 00:00:00 2001 From: chenbolin Date: Thu, 20 May 2021 08:51:57 +0800 Subject: [PATCH] fix globalSaga --- .../src/modules/monitor/Monitor.tsx | 16 ++--- .../src/store/actions/globalAction.ts | 4 +- .../src/store/reducer/rootReducer.ts | 7 +- .../src/store/sagas/globalSaga.ts | 70 ++++++++++++++----- 4 files changed, 66 insertions(+), 31 deletions(-) diff --git a/packages/autonews-client/src/modules/monitor/Monitor.tsx b/packages/autonews-client/src/modules/monitor/Monitor.tsx index 2d37093..25c4c31 100644 --- a/packages/autonews-client/src/modules/monitor/Monitor.tsx +++ b/packages/autonews-client/src/modules/monitor/Monitor.tsx @@ -3,21 +3,21 @@ import cls from "./Monitor.module.scss"; import "react-resizable/css/styles.css"; import { Responsive, WidthProvider } from "react-grid-layout"; import { setLayouts, setFilteredList } from "src/store/actions/globalAction"; +import { fetchMonitor } from "src/store/actions/monitorAction"; import MonitorCard from "./MonitorCard/MonitorCard"; +import { useEffect } from "react"; const ResponsiveReactGridLayout = WidthProvider(Responsive); -type Props = { - monitor: any; - global: any; - newsList: object; -}; +type Props = {}; -const MonitorComponent = ({ monitor, global, newsList }: Props) => { - // const gridLayoutConfig = global.gridLayoutConfig; +const MonitorComponent = (props: Props) => { const dispatch = useDispatch(); const store = useSelector((state: any) => state.root); - console.log("🚀 ~ file: Monitor.tsx ~ line 26 ~ store", store); + + useEffect(() => { + dispatch(fetchMonitor()); + }, [dispatch]); return (
diff --git a/packages/autonews-client/src/store/actions/globalAction.ts b/packages/autonews-client/src/store/actions/globalAction.ts index 0e46437..3c499e5 100644 --- a/packages/autonews-client/src/store/actions/globalAction.ts +++ b/packages/autonews-client/src/store/actions/globalAction.ts @@ -8,8 +8,8 @@ export const fetchGlobalOrigin = (): Action => { return { type: actionTypes.GLOBAL_FETCH_origin_REQUESTED }; }; export const fetchGlobalUserSetting = ( - origin: any, - selectedOriginKeys: any, + origin: any[], + selectedOriginKeys: any[], showSentimentInspector: boolean = true ): Action => { return { diff --git a/packages/autonews-client/src/store/reducer/rootReducer.ts b/packages/autonews-client/src/store/reducer/rootReducer.ts index d471fc8..2b8387b 100644 --- a/packages/autonews-client/src/store/reducer/rootReducer.ts +++ b/packages/autonews-client/src/store/reducer/rootReducer.ts @@ -78,8 +78,8 @@ const rootReducer: Reducer = ( case actionTypes.GLOBAL_FETCH_userSetting_SUCCESSED: const origin = state.origin; let tempNewsList = {}; - action.userSetting.originKeys.length && - action.userSetting.originKeys.forEach((item: any, index: number) => { + action.payload.originKeys.length && + action.payload.originKeys.forEach((item: any, index: number) => { const currentOriginItem = origin.find( (originItem: any) => originItem.key === item ); @@ -92,7 +92,7 @@ const rootReducer: Reducer = ( return { ...state, - userSetting: action.payload.userSetting, + userSetting: action.payload, newsList: tempNewsList, }; case actionTypes.GLOBAL_FETCH_origin_SUCCESSED: @@ -148,7 +148,6 @@ const rootReducer: Reducer = ( ...state, fakeDataList: action.payload, }; - // case actionTypes.POST_API_DATA: return updateObject(state, action); case actionTypes.POST_API_DATA: return { ...state, diff --git a/packages/autonews-client/src/store/sagas/globalSaga.ts b/packages/autonews-client/src/store/sagas/globalSaga.ts index 2958556..96db423 100644 --- a/packages/autonews-client/src/store/sagas/globalSaga.ts +++ b/packages/autonews-client/src/store/sagas/globalSaga.ts @@ -1,4 +1,4 @@ -import { take, put } from "redux-saga/effects"; +import { take, put, select } from "redux-saga/effects"; import { API_SERVER } from "src/shared/constants/urls"; import { fetchPostApiDataExample } from "../actions/rootAction"; import FetchSendRequest from "src/shared/services/fetchSendRequestService"; @@ -32,41 +32,78 @@ function* watchFetchGlobalOrigin(): any { }); yield put({ type: actionTypes.GLOBAL_FETCH_userSetting_REQUESTED, - payload: originList.data, + payload: { origin: originList.data }, }); } } } function* watchFetchGlobalUserSetting(): any { while (true) { - const { origin, selectedOriginKeys, showSentimentInspector } = yield take( - actionTypes.GLOBAL_FETCH_userSetting_REQUESTED - ); - console.log( - "🚀 ~ file: apiCallSaga.ts ~ line 44 ~ function*watchFetchGlobalUserSetting ~ origin, selectedOriginKeys, showSentimentInspector", - origin, - selectedOriginKeys, - showSentimentInspector - ); + const { + payload: { origin, selectedOriginKeys, showSentimentInspector }, + } = yield take(actionTypes.GLOBAL_FETCH_userSetting_REQUESTED); // get user setting let userSetting = { originKeys: JSON.parse( - localStorage.getItem("userSetting.originKeys") || "{}" + localStorage.getItem("userSetting.originKeys") || "[]" ), layouts: JSON.parse(localStorage.getItem("userSetting.layouts") || "{}"), showSentimentInspector: JSON.parse( localStorage.getItem("userSetting.showSentimentInspector") || "{}" ), }; + if (!userSetting.originKeys.length) { + // no localStorage data, save default to it + const { root } = yield select(); + const { gridCols, monitorWidth, monitorHeight } = root.gridLayoutConfig; + userSetting = { + originKeys: selectedOriginKeys + ? selectedOriginKeys + : origin.slice(0, 8).map((item: any) => item.key), + layouts: { lg: [], md: [], sm: [], xs: [] }, + showSentimentInspector: showSentimentInspector, + }; + for (let i in userSetting.layouts) { + let currentX = 0; + let currentY = 0; + for (let j = 0; j < userSetting.originKeys.length; j++) { + let colsPerRow = gridCols[i] / monitorWidth[i]; + userSetting.layouts[i].push({ + i: userSetting.originKeys[j], + x: currentX * monitorWidth[i], + y: currentY * monitorHeight[i], + w: monitorWidth[i], + h: monitorHeight[i], + minW: monitorWidth[i], + minH: 2, + }); + if (currentX >= colsPerRow - 1) { + currentX = 0; + currentY += 1; + } else { + currentX += 1; + } + } + } + localStorage.setItem( + "userSetting.originKeys", + JSON.stringify(userSetting.originKeys) + ); + localStorage.setItem( + "userSetting.layouts", + JSON.stringify(userSetting.layouts) + ); + localStorage.setItem("userSetting.showSentimentInspector", "true"); + } yield put({ type: actionTypes.GLOBAL_FETCH_userSetting_SUCCESSED, - userSetting, + payload: userSetting, }); yield put({ type: actionTypes.GLOBAL_FETCH_newsList_REQUESTED, - originKeys: userSetting.originKeys, + payload: userSetting.originKeys, }); } } @@ -87,8 +124,7 @@ function* watchFetchGlobalNewsList(): any { yield listResults.map((item: any, index: number) => { return put({ type: actionTypes.GLOBAL_FETCH_newsList_SUCCESSED, - origin: originKeys[index], - data: item.data, + payload: { origin: originKeys[index], data: item.data }, }); }); } @@ -97,7 +133,7 @@ function* watchFetchGlobalNewsList(): any { } function* watchSetLayouts(): any { while (true) { - const { layouts } = yield take(actionTypes.GLOBAL_SET_layouts); + const { payload: layouts } = yield take(actionTypes.GLOBAL_SET_layouts); if (layouts.md.length) localStorage.setItem("userSetting.layouts", JSON.stringify(layouts));