chore: add react use (#2157)

* chore: add react use

* chore: update

web/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/joy": "5.0.0-beta.0",
+    "@mui/joy": "5.0.0-beta.2",
     "@reduxjs/toolkit": "^1.8.1",
     "axios": "^0.27.2",
     "classnames": "^2.3.2",
@@ -46,7 +46,7 @@
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
-    "@vitejs/plugin-react-swc": "^3.3.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.2",
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^8.6.0",
@@ -56,7 +56,7 @@
     "postcss": "^8.4.21",
     "prettier": "2.6.2",
     "terser": "^5.16.1",
-    "typescript": "^5.0.4",
-    "vite": "^4.2.1"
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9"
   }
 }

web/src/components/MemoList.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
 import { getTimeStampByDate } from "@/helpers/datetime";
-import { LINK_REG, PLAIN_LINK_REG, TAG_REG } from "@/labs/marked/parser";
+import { TAG_REG } from "@/labs/marked/parser";
 import { useFilterStore, useMemoStore, useUserStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import Empty from "./Empty";
@@ -24,8 +24,8 @@ const MemoList: React.FC<Props> = (props: Props) => {
   const [isComplete, setIsComplete] = useState<boolean>(false);
 
   const currentUsername = userStore.getCurrentUsername();
-  const { tag: tagQuery, duration, type: memoType, text: textQuery, visibility } = filter;
-  const showMemoFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || memoType || textQuery || visibility);
+  const { tag: tagQuery, duration, text: textQuery, visibility } = filter;
+  const showMemoFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || textQuery || visibility);
 
   const shownMemos = (
     showMemoFilter
@@ -55,13 +55,6 @@ const MemoList: React.FC<Props> = (props: Props) => {
           ) {
             shouldShow = false;
           }
-          if (memoType) {
-            if (memoType === "NOT_TAGGED" && memo.content.match(TAG_REG) !== null) {
-              shouldShow = false;
-            } else if (memoType === "LINKED" && (memo.content.match(LINK_REG) === null || memo.content.match(PLAIN_LINK_REG) === null)) {
-              shouldShow = false;
-            }
-          }
           if (textQuery && !memo.content.toLowerCase().includes(textQuery.toLowerCase())) {
             shouldShow = false;
           }

web/src/components/ResourceSearchBar.tsx

 import { useRef, useState } from "react";
-import useDebounce from "@/hooks/useDebounce";
+import useDebounce from "react-use/lib/useDebounce";
 import { useTranslate } from "@/utils/i18n";
 import Icon from "./Icon";
 

web/src/components/SearchBar.tsx

 import { useEffect, useRef, useState } from "react";
-import useDebounce from "@/hooks/useDebounce";
+import useDebounce from "react-use/lib/useDebounce";
 import { useFilterStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import Icon from "./Icon";

web/src/components/TagList.tsx

 import { useEffect, useState } from "react";
-import useToggle from "@/hooks/useToggle";
+import useToggle from "react-use/lib/useToggle";
 import { useFilterStore, useTagStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import showCreateTagDialog from "./CreateTagDialog";

web/src/components/kit/Dropdown.tsx

 import { ReactNode, useEffect, useRef } from "react";
-import useToggle from "@/hooks/useToggle";
+import useToggle from "react-use/lib/useToggle";
 import Icon from "../Icon";
 
 interface Props {

web/src/components/kit/Selector.tsx

 import { Tooltip } from "@mui/joy";
 import { memo, useEffect, useRef } from "react";
-import useToggle from "@/hooks/useToggle";
+import useToggle from "react-use/lib/useToggle";
 import { useTranslate } from "@/utils/i18n";
 import Icon from "../Icon";
 import "@/less/common/selector.less";

web/src/hooks/index.ts

-export * from "./useDebounce";
 export * from "./useLoading";
-export * from "./useTimeoutFn";
-export * from "./useToggle";

web/src/hooks/useDebounce.ts

-import { DependencyList, useEffect } from "react";
-import useTimeoutFn from "./useTimeoutFn";
-
-export type UseDebounceReturn = [() => boolean | null, () => void];
-
-export default function useDebounce(fn: () => any, ms = 0, deps: DependencyList = []): UseDebounceReturn {
-  const [isReady, cancel, reset] = useTimeoutFn(fn, ms);
-
-  useEffect(reset, deps);
-
-  return [isReady, cancel];
-}

web/src/hooks/useTimeoutFn.ts

-import { useCallback, useEffect, useRef } from "react";
-
-export type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void];
-
-export default function useTimeoutFn(fn: () => any, ms = 0): UseTimeoutFnReturn {
-  const ready = useRef<boolean | null>(false);
-  const timeout = useRef<ReturnType<typeof setTimeout>>();
-  const callback = useRef(fn);
-
-  const isReady = useCallback(() => ready.current, []);
-
-  const set = useCallback(() => {
-    ready.current = false;
-    timeout.current && clearTimeout(timeout.current);
-
-    timeout.current = setTimeout(() => {
-      ready.current = true;
-      callback.current();
-    }, ms);
-  }, [ms]);
-
-  const clear = useCallback(() => {
-    ready.current = null;
-    timeout.current && clearTimeout(timeout.current);
-  }, []);
-
-  // update ref when function changes
-  useEffect(() => {
-    callback.current = fn;
-  }, [fn]);
-
-  // set on mount, clear on unmount
-  useEffect(() => {
-    set();
-
-    return clear;
-  }, [ms]);
-
-  return [isReady, clear, set];
-}

web/src/hooks/useToggle.ts

-import { useCallback, useState } from "react";
-
-// Parameter is the boolean, with default "false" value
-const useToggle = (initialState = false): [boolean, (nextState?: boolean) => void] => {
-  // Initialize the state
-  const [state, setState] = useState(initialState);
-
-  // Define and memorize toggler function in case we pass down the component,
-  // This function change the boolean value to it's opposite value
-  const toggle = useCallback((nextState?: boolean) => {
-    if (nextState !== undefined) {
-      setState(nextState);
-    } else {
-      setState((state) => !state);
-    }
-  }, []);
-
-  return [state, toggle];
-};
-
-export default useToggle;

web/src/pages/DailyReview.tsx

@@ -2,6 +2,7 @@ import classNames from "classnames";
 import { last } from "lodash-es";
 import { useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
+import useToggle from "react-use/lib/useToggle";
 import DailyMemo from "@/components/DailyMemo";
 import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
@@ -10,7 +11,6 @@ import showPreviewImageDialog from "@/components/PreviewImageDialog";
 import DatePicker from "@/components/kit/DatePicker";
 import { DAILY_TIMESTAMP, DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
 import { convertToMillis, getDateStampByDate, getNormalizedDateString, getTimeStampByDate, isFutureDate } from "@/helpers/datetime";
-import useToggle from "@/hooks/useToggle";
 import i18n from "@/i18n";
 import toImage from "@/labs/html2image";
 import { useMemoStore, useUserStore } from "@/store/module";

web/src/store/module/filter.ts

@@ -16,20 +16,12 @@ export const useFilterStore = () => {
       store.dispatch(
         setFilter({
           tag: undefined,
-          type: undefined,
           duration: undefined,
           text: undefined,
           visibility: undefined,
         })
       );
     },
-    setMemoTypeFilter: (type?: MemoSpecType) => {
-      store.dispatch(
-        setFilter({
-          type: type,
-        })
-      );
-    },
     setTextFilter: (text?: string) => {
       store.dispatch(
         setFilter({

web/src/store/reducer/filter.ts

@@ -8,7 +8,6 @@ interface Duration {
 interface State {
   tag?: string;
   duration?: Duration;
-  type?: MemoSpecType;
   text?: string;
   visibility?: Visibility;
 }

web/src/types/filter.d.ts

-type MemoFilterRelation = "AND" | "OR";
-
-interface BaseFilter {
-  type: FilterType;
-  value: {
-    operator: string;
-    value: string;
-  };
-  relation: MemoFilterRelation;
-}
-
-interface TagFilter extends BaseFilter {
-  type: "TAG";
-  value: {
-    operator: "CONTAIN" | "NOT_CONTAIN";
-    value: string;
-  };
-}
-
-interface TypeFilter extends BaseFilter {
-  type: "TYPE";
-  value: {
-    operator: "IS" | "IS_NOT";
-    value: MemoSpecType;
-  };
-}
-
-interface TextFilter extends BaseFilter {
-  type: "TEXT";
-  value: {
-    operator: "CONTAIN" | "NOT_CONTAIN";
-    value: string;
-  };
-}
-
-interface DisplayTimeFilter extends BaseFilter {
-  type: "DISPLAY_TIME";
-  value: {
-    operator: "BEFORE" | "AFTER";
-    value: string;
-  };
-}
-
-interface VisibilityFilter extends BaseFilter {
-  type: "VISIBILITY";
-  value: {
-    operator: "IS" | "IS_NOT";
-    value: string;
-  };
-}
-
-type FilterType = "TEXT" | "TYPE" | "TAG" | "DISPLAY_TIME" | "VISIBILITY";
-
-type Filter = BaseFilter | TagFilter | TypeFilter | TextFilter | DisplayTimeFilter | VisibilityFilter;