refactor(deps): use @react-hookz/web instead of react-use

azu · Oct 14, 2023 · b919585 · b919585
1 parent e6f67ce
commit b919585
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 471 deletions.
diff --git a/app/dropbox/useDropbox.tsx b/app/dropbox/useDropbox.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from "next/navigation";
-import { useLocalStorage } from "react-use";
+import { useLocalStorageValue as useLocalStorage } from "@react-hookz/web";
 import { useEffect, useMemo, useState } from "react";
 import { Dropbox, DropboxAuth } from "dropbox";
 
@@ -12,7 +12,11 @@ const DROPBOX_AUTH_REDIRECT_URI =
     process.env.NODE_ENV === "production" ? "https://mubook-hon.vercel.app/" : "http://localhost:3000/";
 export const useDropbox = (props: { code?: string } = {}) => {
     const router = useRouter();
-    const [tokens, setTokens] = useLocalStorage<DropboxTokens>("mubook-hon-dropbox-tokens");
+    const {
+        value: tokens,
+        set: setTokens,
+        remove: removeTokens
+    } = useLocalStorage<DropboxTokens>("mubook-hon-dropbox-tokens");
     const [accessTokenStatus, setAccessTokenStatus] = useState<"none" | "valid" | "invalid">("none");
     const dropboxAuth = useMemo(() => {
         console.debug("create dropbox auth");
@@ -52,9 +56,9 @@ export const useDropbox = (props: { code?: string } = {}) => {
             })
             .catch((e: Error) => {
                 console.error(e);
-                setTokens(undefined);
+                removeTokens();
             });
-    }, [dropboxAuth, setTokens]);
+    }, [dropboxAuth, removeTokens, setTokens]);
     useEffect(() => {
         if (!props.code) return;
         const codeVerifier = window.sessionStorage.getItem("codeVerifier");

diff --git a/app/notion/useNotion.ts b/app/notion/useNotion.ts
@@ -1,4 +1,4 @@
-import { useLocalStorage } from "react-use";
+import { useLocalStorageValue as useLocalStorage } from "@react-hookz/web";
 import { useCallback, useMemo } from "react";
 import { Client } from "@notionhq/client";
 import useSWR from "swr";
@@ -18,7 +18,8 @@ const NOTION_API_BASE_URL = USER_DEFINED_NOTION_BASE_URL
     : "http://localhost:3000/api/notion-proxy";
 
 export const useNotionSetting = () => {
-    const [notionSetting, setNotionSettings] = useLocalStorage<Partial<NotionSetting>>("mubook-hon-notion");
+    const { value: notionSetting, set: setNotionSettings } =
+        useLocalStorage<Partial<NotionSetting>>("mubook-hon-notion");
     const updateNotionSettings = useCallback(
         (notionSetting: Partial<NotionSetting>) => {
             setNotionSettings((prev) => {

diff --git a/app/settings/useUserSettings.ts b/app/settings/useUserSettings.ts
@@ -1,4 +1,4 @@
-import { useLocalStorage } from "react-use";
+import { useLocalStorageValue as useLocalStorage } from "@react-hookz/web";
 
 type UserSettings = {
     openNewTab: boolean;
@@ -7,7 +7,9 @@ const DEFAULT_SETTINGS: UserSettings = {
     openNewTab: true
 };
 export const useUserSettings = () => {
-    const [userSettings, setUserSettings] = useLocalStorage<UserSettings>("mubook-hon-user-settings", DEFAULT_SETTINGS);
+    const { value: userSettings, set: setUserSettings } = useLocalStorage<UserSettings>("mubook-hon-user-settings", {
+        defaultValue: DEFAULT_SETTINGS
+    });
     return {
         userSettings: userSettings,
         updateUserSettings: setUserSettings

diff --git a/app/viewer/pdf/PdfReader.tsx b/app/viewer/pdf/PdfReader.tsx
@@ -214,6 +214,7 @@ export const PdfReader: FC<PdfReaderProps> = (props) => {
                 setIsAddingMemo(false);
             });
     }, [addMemo, currentDoc, currentPage, getSelectedText, getVisibleText]);
+
     const defaultLayoutPluginInstance = defaultLayoutPlugin({
         sidebarTabs: (defaultTabs) => (window.matchMedia("(min-width: 768px)").matches ? defaultTabs : [])
     });