chore: update store selector

web/src/components/MemoEditor.tsx

@@ -43,10 +43,8 @@ const getCursorPostion = (input: HTMLTextAreaElement) => {
 interface Props {}
 
 const MemoEditor: React.FC<Props> = () => {
-  const {
-    editor: editorState,
-    memo: { tags },
-  } = useAppSelector((state) => state);
+  const editorState = useAppSelector((state) => state.editor);
+  const tags = useAppSelector((state) => state.memo.tags);
   const [isTagSeletorShown, toggleTagSeletor] = useToggle(false);
   const editorRef = useRef<EditorRefActions>(null);
   const prevGlobalStateRef = useRef(editorState);

web/src/components/MemoFilter.tsx

@@ -7,9 +7,7 @@ import "../less/memo-filter.less";
 interface FilterProps {}
 
 const MemoFilter: React.FC<FilterProps> = () => {
-  const {
-    location: { query },
-  } = useAppSelector((state) => state);
+  const query = useAppSelector((state) => state.location.query);
   const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId } = query ?? {};
   const shortcut = shortcutId ? shortcutService.getShortcutById(shortcutId) : null;
   const showFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || memoType || textQuery || shortcut);

web/src/components/MemoList.tsx

@@ -11,10 +11,8 @@ import "../less/memo-list.less";
 interface Props {}
 
 const MemoList: React.FC<Props> = () => {
-  const {
-    location: { query },
-    memo: { memos },
-  } = useAppSelector((state) => state);
+  const query = useAppSelector((state) => state.location.query);
+  const memos = useAppSelector((state) => state.memo.memos);
   const [isFetching, setFetchStatus] = useState(true);
   const wrapperElement = useRef<HTMLDivElement>(null);
 
@@ -79,7 +77,6 @@ const MemoList: React.FC<Props> = () => {
   const pinnedMemos = shownMemos.filter((m) => m.pinned);
   const unpinnedMemos = shownMemos.filter((m) => !m.pinned);
   const sortedMemos = pinnedMemos.concat(unpinnedMemos).filter((m) => m.rowStatus === "NORMAL");
-  console.log(memos.length, sortedMemos.length);
 
   useEffect(() => {
     memoService

web/src/components/MemosHeader.tsx

@@ -9,11 +9,8 @@ let prevRequestTimestamp = Date.now();
 interface Props {}
 
 const MemosHeader: React.FC<Props> = () => {
-  const {
-    location: { query },
-    shortcut: { shortcuts },
-  } = useAppSelector((state) => state);
-
+  const query = useAppSelector((state) => state.location.query);
+  const shortcuts = useAppSelector((state) => state.shortcut.shortcuts);
   const [titleText, setTitleText] = useState("MEMOS");
 
   useEffect(() => {

web/src/components/SettingDialog.tsx

@@ -15,10 +15,8 @@ interface State {
 }
 
 const SettingDialog: React.FC<Props> = (props: Props) => {
-  const {
-    user: { user },
-  } = useAppSelector((state) => state);
   const { destroy } = props;
+  const user = useAppSelector((state) => state.user.user);
   const [state, setState] = useState<State>({
     selectedSection: "my-account",
   });

web/src/components/Settings/MyAccountSection.tsx

@@ -17,8 +17,7 @@ const validateConfig: ValidatorConfig = {
 interface Props {}
 
 const MyAccountSection: React.FC<Props> = () => {
-  const { user: userState } = useAppSelector((state) => state);
-  const user = userState.user as User;
+  const user = useAppSelector((state) => state.user.user as User);
   const [username, setUsername] = useState<string>(user.name);
   const openAPIRoute = `${window.location.origin}/h/${user.openId}/memo`;
 

web/src/components/ShortcutList.tsx

@@ -12,11 +12,10 @@ import "../less/shortcut-list.less";
 interface Props {}
 
 const ShortcutList: React.FC<Props> = () => {
-  const {
-    location: { query },
-    shortcut: { shortcuts },
-  } = useAppSelector((state) => state);
+  const query = useAppSelector((state) => state.location.query);
+  const shortcuts = useAppSelector((state) => state.shortcut.shortcuts);
   const loadingState = useLoading();
+
   const pinnedShortcuts = shortcuts
     .filter((s) => s.rowStatus === "ARCHIVED")
     .sort((a, b) => utils.getTimeStampByDate(b.createdTs) - utils.getTimeStampByDate(a.createdTs));

web/src/components/Sidebar.tsx

@@ -12,10 +12,9 @@ import "../less/siderbar.less";
 interface Props {}
 
 const Sidebar: React.FC<Props> = () => {
-  const {
-    memo: { memos, tags },
-    user: { user },
-  } = useAppSelector((state) => state);
+  const { memos, tags } = useAppSelector((state) => state.memo);
+  const user = useAppSelector((state) => state.user.user);
+
   const createdDays = user ? Math.ceil((Date.now() - utils.getTimeStampByDate(user.createdTs)) / 1000 / 3600 / 24) : 0;
 
   const handleMyAccountBtnClick = () => {

web/src/components/TagList.tsx

@@ -15,10 +15,8 @@ interface Tag {
 interface Props {}
 
 const TagList: React.FC<Props> = () => {
-  const {
-    location: { query },
-    memo: { memos, tags: tagsText },
-  } = useAppSelector((state) => state);
+  const { memos, tags: tagsText } = useAppSelector((state) => state.memo);
+  const query = useAppSelector((state) => state.location.query);
   const [tags, setTags] = useState<Tag[]>([]);
 
   useEffect(() => {

web/src/components/UsageHeatMap.tsx

@@ -35,9 +35,7 @@ const UsageHeatMap: React.FC<Props> = () => {
   const usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay;
   const beginDayTimestemp = todayTimeStamp - usedDaysAmount * DAILY_TIMESTAMP;
 
-  const {
-    memo: { memos },
-  } = useAppSelector((state) => state);
+  const { memos } = useAppSelector((state) => state.memo);
   const [allStat, setAllStat] = useState<DailyUsageStat[]>(getInitialUsageStat(usedDaysAmount, beginDayTimestemp));
   const [popupStat, setPopupStat] = useState<DailyUsageStat | null>(null);
   const [currentStat, setCurrentStat] = useState<DailyUsageStat | null>(null);

web/src/components/UserBanner.tsx

@@ -7,13 +7,11 @@ import "../less/user-banner.less";
 interface Props {}
 
 const UserBanner: React.FC<Props> = () => {
-  const {
-    user: { user },
-  } = useAppSelector((state) => state);
-  const username = user ? user.name : "Memos";
-
+  const user = useAppSelector((state) => state.user.user);
   const [shouldShowPopupBtns, setShouldShowPopupBtns] = useState(false);
 
+  const username = user ? user.name : "Memos";
+
   const handleUsernameClick = useCallback(() => {
     locationService.pushHistory("/");
     locationService.clearQuery();

web/src/pages/Home.tsx

@@ -7,9 +7,7 @@ import useLoading from "../hooks/useLoading";
 import "../less/home.less";
 
 function Home() {
-  const {
-    location: { pathname },
-  } = useAppSelector((state) => state);
+  const pathname = useAppSelector((state) => state.location.pathname);
   const loadingState = useLoading();
 
   useEffect(() => {

web/src/store/modules/memo.ts

@@ -13,25 +13,37 @@ const memoSlice = createSlice({
   } as State,
   reducers: {
     setMemos: (state, action: PayloadAction<Memo[]>) => {
-      state.memos = action.payload;
+      return {
+        ...state,
+        memos: action.payload,
+      };
     },
     setTags: (state, action: PayloadAction<string[]>) => {
-      state.tags = action.payload;
+      return {
+        ...state,
+        tags: action.payload,
+      };
     },
     createMemo: (state, action: PayloadAction<Memo>) => {
-      state.memos = state.memos.concat(action.payload);
+      return {
+        ...state,
+        memos: state.memos.concat(action.payload).sort((a, b) => b.createdTs - a.createdTs),
+      };
     },
     patchMemo: (state, action: PayloadAction<Partial<Memo>>) => {
-      state.memos = state.memos.map((m) => {
-        if (m.id === action.payload.id) {
-          return {
-            ...m,
-            ...action.payload,
-          };
-        } else {
-          return m;
-        }
-      });
+      return {
+        ...state,
+        memos: state.memos.map((m) => {
+          if (m.id === action.payload.id) {
+            return {
+              ...m,
+              ...action.payload,
+            };
+          } else {
+            return m;
+          }
+        }),
+      };
     },
   },
 });

web/src/store/modules/shortcut.ts

@@ -11,25 +11,37 @@ const shortcutSlice = createSlice({
   } as State,
   reducers: {
     setShortcuts: (state, action: PayloadAction<Shortcut[]>) => {
-      state.shortcuts = action.payload;
+      return {
+        ...state,
+        shortcuts: action.payload,
+      };
     },
     createShortcut: (state, action: PayloadAction<Shortcut>) => {
-      state.shortcuts = state.shortcuts.concat(action.payload);
+      return {
+        ...state,
+        shortcuts: state.shortcuts.concat(action.payload).sort((a, b) => b.createdTs - a.createdTs),
+      };
     },
     patchShortcut: (state, action: PayloadAction<Partial<Shortcut>>) => {
-      state.shortcuts = state.shortcuts.map((s) => {
-        if (s.id === action.payload.id) {
-          return {
-            ...s,
-            ...action.payload,
-          };
-        } else {
-          return s;
-        }
-      });
+      return {
+        ...state,
+        shortcuts: state.shortcuts.map((s) => {
+          if (s.id === action.payload.id) {
+            return {
+              ...s,
+              ...action.payload,
+            };
+          } else {
+            return s;
+          }
+        }),
+      };
     },
     deleteShortcut: (state, action: PayloadAction<ShortcutId>) => {
-      state.shortcuts = [...state.shortcuts].filter((shortcut) => shortcut.id !== action.payload);
+      return {
+        ...state,
+        shortcuts: [...state.shortcuts].filter((shortcut) => shortcut.id !== action.payload),
+      };
     },
   },
 });

web/src/store/modules/user.ts

@@ -15,10 +15,13 @@ const userSlice = createSlice({
       };
     },
     patchUser: (state, action: PayloadAction<Partial<User>>) => {
-      state.user = {
-        ...state.user,
-        ...action.payload,
-      } as User;
+      return {
+        ...state,
+        user: {
+          ...state.user,
+          ...action.payload,
+        } as User,
+      };
     },
   },
 });