replace useContext and useReducer with redux

riskers · Apr 1, 2022 · 7b1a852 · 7b1a852
1 parent 966ad78
commit 7b1a852
Show file tree

Hide file tree

Showing 13 changed files with 139 additions and 81 deletions.
diff --git a/src/content_script/pages/stars/Sidebar.tsx b/src/content_script/pages/stars/Sidebar.tsx
@@ -2,7 +2,7 @@ import { IStar } from '@/common/api';
 import { ACTION_SHOW_OPTION_PAGE } from '@/common/constants';
 import { DEFAULT_GROUP, getGroupList, IGroup, resetGroup } from '@/content_script/services/local/group';
 import { resetSettings, setSettings } from '@/content_script/services/local/settings';
-import { getStarsList, resetStars } from '@/content_script/services/local/stars';
+import { getStarsListByGroup, resetStars } from '@/content_script/services/local/stars';
 import { resetTag } from '@/content_script/services/local/tag';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -31,7 +31,7 @@ const Sidebar = () => {
 
   useEffect(() => {
     (async () => {
-      const starList = await getStarsList({ groupId: DEFAULT_GROUP.id });
+      const starList = await getStarsListByGroup(DEFAULT_GROUP.id);
       setStarsList(starList);
     })();
   }, []);
@@ -81,7 +81,7 @@ const Sidebar = () => {
 
       <button
         onClick={async () => {
-          const x = await getStarsList({ groupId: DEFAULT_GROUP.id });
+          const x = await getStarsListByGroup(DEFAULT_GROUP.id);
         }}
       >
         all

diff --git a/src/content_script/services/local/group.ts b/src/content_script/services/local/group.ts
@@ -1,5 +1,5 @@
 import ChromeStorage from '@/common/ChromeStorage';
-import { getStarsList } from '@/content_script/services/local/stars';
+import { getStarsListByGroup } from '@/content_script/services/local/stars';
 import { remove } from 'lodash';
 import uuid from 'lodash-uuid';
 
@@ -40,7 +40,7 @@ export const getGroupList = async (): Promise<IGroup[]> => {
   if (!groupList) return groupList;
 
   for (const group of groupList) {
-    const starsList = await getStarsList({ groupId: group.id });
+    const starsList = await getStarsListByGroup(group.id);
     group.totalStars = starsList.length;
   }
 

diff --git a/src/content_script/services/local/stars.ts b/src/content_script/services/local/stars.ts
@@ -12,22 +12,23 @@ export const resetStars = async (username: string): Promise<void> => {
   await cs.set(CHROME_STORAGE_KEY, res);
 };
 
-interface P {
-  readonly groupId?: string;
-  readonly tagId?: string;
-}
-export const getStarsList = async (params?: P): Promise<IStar[]> => {
+const getAllStars = async (): Promise<IStar[]> => {
   const cs = new ChromeStorage();
   const starList = (await cs.get(CHROME_STORAGE_KEY)) as IStar[];
+  return starList;
+};
 
-  if (!params) return starList;
+export const getStarsListByGroup = async (groupId: string): Promise<IStar[]> => {
+  const starList = await getAllStars();
 
   return starList.filter((star) => {
-    if (params.groupId) {
-      return star.groupId === params.groupId;
-    }
-
-    return star.tagsId.includes(params.tagId);
+    return star.groupId === groupId;
+  });
+};
+export const getStarsListByTag = async (tagId: string): Promise<IStar[]> => {
+  const starList = await getAllStars();
+  return starList.filter((star) => {
+    return star.tagsId.includes(tagId);
   });
 };
 
@@ -42,7 +43,7 @@ export const addStar = async (star: IStar): Promise<void> => {
 export const updateStar = async (pstar: IStar): Promise<void> => {
   const cs = new ChromeStorage();
 
-  const starList = await getStarsList();
+  const starList = await getStarsListByGroup(pstar.groupId);
   const newStarsList = starList.map((star) => {
     if (star.id === pstar.id) {
       return pstar;
@@ -70,7 +71,7 @@ export const delStar = async (fullName: string): Promise<void> => {
 export const clearStarByTagId = async (tagId: string): Promise<void> => {
   const cs = new ChromeStorage();
 
-  let starList = await getStarsList();
+  let starList = await getStarsListByTag(tagId);
   starList = starList.map((star) => {
     if (star.tagsId.includes(tagId)) {
       const l = star.tagsId;

diff --git a/src/content_script/services/local/tag.ts b/src/content_script/services/local/tag.ts
@@ -1,5 +1,5 @@
 import ChromeStorage from '@/common/ChromeStorage';
-import { clearStarByTagId, getStarsList } from '@/content_script/services/local/stars';
+import { clearStarByTagId, getStarsListByGroup, getStarsListByTag } from '@/content_script/services/local/stars';
 import { remove } from 'lodash';
 import uuid from 'lodash-uuid';
 
@@ -39,7 +39,7 @@ export const getTagsList = async (): Promise<ITag[]> => {
   if (!tagsList) return tagsList;
 
   for (const tag of tagsList) {
-    const stars = await getStarsList({ tagId: tag.id });
+    const stars = await getStarsListByTag(tag.id);
     tag.totalStars = stars.length;
   }
 

diff --git a/src/options/components/edit-repo/index.tsx b/src/options/components/edit-repo/index.tsx
@@ -1,6 +1,6 @@
 import { IStar } from '@/common/api';
 import { getGroup, getGroupList, IGroup } from '@/content_script/services/local/group';
-import { getStarsList, updateStar } from '@/content_script/services/local/stars';
+import { getStarsListByGroup, updateStar } from '@/content_script/services/local/stars';
 import { addTag, getTag, getTagsList, ITag } from '@/content_script/services/local/tag';
 import { AppContext } from '@/options';
 import EditIcon from '@mui/icons-material/Edit';
@@ -40,7 +40,7 @@ const EditRepo = (props: IProps) => {
   };
 
   const updateStarList = async () => {
-    const list = await getStarsList({ groupId: selectGroup.id });
+    const list = await getStarsListByGroup(selectGroup.id);
     const ll = list.filter((star) => star.groupId === selectGroup.id);
     setStarsList(ll);
   };

diff --git a/src/options/components/sidebar/index.tsx b/src/options/components/sidebar/index.tsx
@@ -5,7 +5,8 @@ import Accordion from '@/options/components/accordion';
 import EditGroup from '@/options/components/edit-group';
 import EditTag from '@/options/components/edit-tag';
 import { fetchGroups } from '@/options/pages/Home/slices/groupSlice';
-import { selectedSlice, selectorGroup } from '@/options/pages/Home/slices/selectedSlice';
+import { selectedSlice, selectorItem } from '@/options/pages/Home/slices/selectedSlice';
+import { fetchTags } from '@/options/pages/Home/slices/tagSlice';
 import { RootState } from '@/options/store';
 import AddIcon from '@mui/icons-material/Add';
 import AllInboxIcon from '@mui/icons-material/AllInbox';
@@ -24,16 +25,14 @@ const SideBar = () => {
   const ref = React.useRef(null);
 
   const dispatch = useDispatch();
-  const selectedGroup = useSelector(selectorGroup);
-
+  const selectedItem = useSelector(selectorItem);
   const groups = useSelector((state: RootState) => state.groups);
+  const tags = useSelector((state: RootState) => state.tags);
 
   const fetchData = React.useCallback(() => {
     (async () => {
       dispatch(fetchGroups());
-
-      let tlist = await getTagsList();
-      // setTagsList(tlist);
+      dispatch(fetchTags());
     })();
   }, []);
 
@@ -77,10 +76,10 @@ const SideBar = () => {
                 style={{ flex: 1 }}
                 className={classNames({
                   group: true,
-                  selected: group.id === selectedGroup?.id,
+                  selected: group.id === selectedItem.group.id,
                 })}
                 onClick={() => {
-                  dispatch(selectedSlice.actions.selectGroup(group));
+                  dispatch(selectedSlice.actions.selectGroup({ group }));
                 }}
               >
                 <AllInboxIcon fontSize="small" />
@@ -163,7 +162,7 @@ const SideBar = () => {
       <Divider />
 
       <Accordion title="TAGS" open>
-        {tagsList?.map((tag) => {
+        {tags.data?.map((tag) => {
           return (
             <Stack
               key={tag.id}
@@ -180,10 +179,10 @@ const SideBar = () => {
                 style={{ flex: 1 }}
                 className={classNames({
                   group: true,
-                  selected: tag.id === selectTag?.id,
+                  selected: tag.id === selectedItem.tag?.id,
                 })}
                 onClick={() => {
-                  setSelectTag(tag);
+                  dispatch(selectedSlice.actions.selectTag({ tag }));
                 }}
               >
                 <SellIcon fontSize="small" />

diff --git a/src/options/components/star-list/index.tsx b/src/options/components/star-list/index.tsx
@@ -1,10 +1,9 @@
 import { IStar } from '@/common/api';
-import { getStarsList } from '@/content_script/services/local/stars';
 import { addTag } from '@/content_script/services/local/tag';
 import { AppContext } from '@/options';
 import EditRepo from '@/options/components/edit-repo';
-import { fetchStarsListByGroup } from '@/options/pages/Home/actions';
-import { selectorGroup } from '@/options/pages/Home/slices/selectedSlice';
+import { selectorItem } from '@/options/pages/Home/slices/selectedSlice';
+import { fetchStarsByGroup, fetchStarsByTag } from '@/options/pages/Home/slices/starsSlice';
 import { AppDispatch, RootState } from '@/options/store';
 import { Button, Dialog, DialogContent, DialogTitle, Stack } from '@mui/material';
 import classNames from 'classnames';
@@ -13,35 +12,29 @@ import { useDispatch, useSelector } from 'react-redux';
 
 const StarList: React.FC = () => {
   const [currentStarId, setCurrentStarId] = React.useState<number>();
-  const { selectGroup, setSelectFullName, starsList, setStarsList, selectTag } = React.useContext(AppContext);
+  const { setSelectFullName } = React.useContext(AppContext);
 
   const dispatch: AppDispatch = useDispatch();
   const stars = useSelector((state: RootState) => state.stars);
-  const selectedGroup = useSelector(selectorGroup);
+  const selectedItem = useSelector(selectorItem);
 
   React.useEffect(() => {
     (async () => {
-      if (!selectGroup) return;
-      dispatch(fetchStarsListByGroup(selectedGroup.id));
+      dispatch(fetchStarsByGroup(selectedItem.group.id));
     })();
-  }, [selectedGroup, dispatch]);
-
-  const { data } = stars;
+  }, [selectedItem.group.id, dispatch]);
 
   React.useEffect(() => {
     (async () => {
-      if (!selectTag) return;
-
-      const list = await getStarsList({ tagId: selectTag.id });
-      // setStarsList(list);
+      dispatch(fetchStarsByTag(selectedItem.tag.id));
     })();
-  }, [selectTag]);
+  }, [selectedItem.tag.id, dispatch]);
 
   return (
     <>
       <div className="star-list">
-        {data.length !== 0 ? (
-          data.map((star: IStar) => {
+        {stars.data.length !== 0 ? (
+          stars.data?.map((star: IStar) => {
             return (
               <div
                 key={star.id}

diff --git a/src/options/index.tsx b/src/options/index.tsx
@@ -64,37 +64,13 @@ const theme = createTheme({
 });
 
 const App: React.FC = () => {
-  const [groupList, setGroupList] = React.useState<IGroup[]>([]);
-  const [tagsList, setTagsList] = React.useState<ITag[]>([]);
-  const [selectFullName, setSelectFullName] = React.useState<string>();
-  const [selectGroup, setSelectGroup] = React.useState<IGroup>();
-  const [selectTag, setSelectTag] = React.useState<ITag>();
-  const [starsList, setStarsList] = React.useState<IStar[]>([]);
-
   return (
     <ThemeProvider theme={theme}>
-      {/* <AppContext.Provider
-        value={{
-          selectFullName,
-          setSelectFullName,
-          selectGroup,
-          setSelectGroup,
-          selectTag,
-          setSelectTag,
-          groupList,
-          setGroupList,
-          tagsList,
-          setTagsList,
-          starsList,
-          setStarsList,
-        }}
-      > */}
       <Provider store={store}>
         <div className="github-plus-app">
           <Home />
         </div>
       </Provider>
-      {/* </AppContext.Provider> */}
     </ThemeProvider>
   );
 };

diff --git a/src/options/pages/Home/actions.ts b/src/options/pages/Home/actions.ts
@@ -26,7 +26,7 @@ export const fetchStarsListByGroup = (groupId: string) => {
     });
 
     try {
-      const list = await STAR_API.getStarsList({ groupId });
+      const list = await STAR_API.getStarsListByGroup(groupId);
 
       const ll = list.filter((star) => star.groupId === groupId);
 

diff --git a/src/options/pages/Home/slices/selectedSlice.ts b/src/options/pages/Home/slices/selectedSlice.ts
@@ -1,20 +1,28 @@
 import { RootState } from '@/options/store';
 import { createSlice } from '@reduxjs/toolkit';
 
+const DEFAULT_GROUP = { name: '', id: '-1' };
+const DEFAULT_TAG = { id: '-1', name: '' };
+
 export const selectedSlice = createSlice({
   name: 'selected',
   initialState: {
-    name: '',
-    id: '-1',
+    group: DEFAULT_GROUP,
+    tag: DEFAULT_TAG,
   },
   reducers: {
     selectGroup: (state, action) => {
       // https://github.com/reduxjs/redux-toolkit/issues/521#issuecomment-624796711
-      return action.payload;
+      state.group = action.payload.group;
+      state.tag = DEFAULT_TAG;
+    },
+    selectTag: (state, action) => {
+      state.group = DEFAULT_GROUP;
+      state.tag = action.payload.tag;
     },
   },
 });
 
-export const { selectGroup } = selectedSlice.actions;
-export const selectorGroup = (state: RootState) => state.selectedGroup;
+export const { selectGroup, selectTag } = selectedSlice.actions;
+export const selectorItem = (state: RootState) => state.selectedGroup;
 export default selectedSlice.reducer;
diff --git a/src/options/pages/Home/slices/starsSlice.ts b/src/options/pages/Home/slices/starsSlice.ts
@@ -0,0 +1,47 @@
+import { getStarsListByGroup, getStarsListByTag } from '@/content_script/services/local/stars';
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+
+export const fetchStarsByGroup = createAsyncThunk('stars/fetchStarsByGroup', async (groupId: string) => {
+  const stars = await getStarsListByGroup(groupId);
+  return stars;
+});
+
+export const fetchStarsByTag = createAsyncThunk('stars/fetchStarsByTag', async (tagId: string) => {
+  const stars = await getStarsListByTag(tagId);
+  return stars;
+});
+
+export const starsSlice = createSlice({
+  name: 'stars',
+  initialState: {
+    loading: false,
+    data: [],
+  },
+  reducers: {},
+  extraReducers: (builder) => {
+    // TODO ugly
+    builder
+      .addCase(fetchStarsByGroup.pending, (state) => {
+        state.loading = true;
+      })
+      .addCase(fetchStarsByGroup.fulfilled, (state, action) => {
+        state.data = action.payload;
+        state.loading = false;
+      })
+      .addCase(fetchStarsByGroup.rejected, (state) => {
+        state.loading = false;
+      })
+      .addCase(fetchStarsByTag.pending, (state) => {
+        state.loading = true;
+      })
+      .addCase(fetchStarsByTag.fulfilled, (state, action) => {
+        state.data = action.payload;
+        state.loading = false;
+      })
+      .addCase(fetchStarsByTag.rejected, (state) => {
+        state.loading = false;
+      });
+  },
+});
+
+export default starsSlice.reducer;