From 9853cf40cf75376b3a3e889b21a5f7bb77570714 Mon Sep 17 00:00:00 2001
From: JimmyLv <jimmy.jinglv@gmail.com>
Date: Sat, 11 Mar 2023 22:52:31 +0800
Subject: [PATCH] fix: replace the useLocalStorage

---
 components/ActionsAfterResult.tsx | 2 +-
 hooks/useLocalStorage.ts          | 2 +-
 pages/[...slug].tsx               | 7 ++-----
 pages/user/integration.tsx        | 7 ++-----
 4 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/components/ActionsAfterResult.tsx b/components/ActionsAfterResult.tsx
index 43384b69..a77e3e3a 100644
--- a/components/ActionsAfterResult.tsx
+++ b/components/ActionsAfterResult.tsx
@@ -1,8 +1,8 @@
 import Image from "next/image";
 import Link from "next/link";
 import React from "react";
-import { useLocalStorage } from "react-use";
 import { useSaveToFlomo } from "~/hooks/notes/flomo";
+import { useLocalStorage } from "~/hooks/useLocalStorage";
 
 export function ActionsAfterResult({
   curVideo,
diff --git a/hooks/useLocalStorage.ts b/hooks/useLocalStorage.ts
index 19022693..cb6f824f 100644
--- a/hooks/useLocalStorage.ts
+++ b/hooks/useLocalStorage.ts
@@ -1,6 +1,6 @@
 import React from 'react'
 
-export function useLocalStorage<T>(key: string, initialValue: T) {
+export function useLocalStorage<T>(key: string, initialValue?: T) {
   // State to store our value
   // Pass initial state function to useState so logic is only executed once
   const [storedValue, setStoredValue] = React.useState<T>(() => {
diff --git a/pages/[...slug].tsx b/pages/[...slug].tsx
index 355c48fe..77024459 100644
--- a/pages/[...slug].tsx
+++ b/pages/[...slug].tsx
@@ -2,7 +2,6 @@ import type { NextPage } from "next";
 import { useSearchParams } from "next/navigation";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
-import { useLocalStorage } from "react-use";
 import { useAnalytics } from "~/components/context/analytics";
 import { SubmitButton } from "~/components/SubmitButton";
 import { SummaryResult } from "~/components/SummaryResult";
@@ -17,6 +16,7 @@ import { VideoService } from "~/lib/types";
 import { extractUrl } from "~/utils/extractUrl";
 import { getVideoIdFromUrl } from "~/utils/getVideoIdFromUrl";
 import getVideoId from "get-video-id";
+import { useLocalStorage } from "~/hooks/useLocalStorage";
 
 export const Home: NextPage<{
   showSingIn: (show: boolean) => void;
@@ -31,7 +31,7 @@ export const Home: NextPage<{
   const [currentVideoUrl, setCurrentVideoUrl] = useState<string>("");
   const [shouldShowTimestamp, setShouldShowTimestamp] =
     useLocalStorage<boolean>("should-show-timestamp");
-  const [userKey, setUserKey, remove] =
+  const [userKey, setUserKey] =
     useLocalStorage<string>("user-openai-apikey");
   const { loading, summary, resetSummary, summarize } =
     useSummarize(showSingIn);
@@ -115,9 +115,6 @@ export const Home: NextPage<{
     analytics.track("GenerateButton Clicked");
   };
   const handleApiKeyChange = (e: any) => {
-    if (!e.target.value) {
-      remove();
-    }
     setUserKey(e.target.value);
   };
 
diff --git a/pages/user/integration.tsx b/pages/user/integration.tsx
index 6f935971..e4327d79 100644
--- a/pages/user/integration.tsx
+++ b/pages/user/integration.tsx
@@ -1,15 +1,12 @@
 import React from "react";
-import { useLocalStorage } from "react-use";
 import { Sidebar } from "~/components/sidebar";
+import { useLocalStorage } from "~/hooks/useLocalStorage";
 
 export default () => {
-  const [flomoWebhook, setFlomoWebhook, remove] =
+  const [flomoWebhook, setFlomoWebhook] =
     useLocalStorage<string>("user-flomo-webhook");
 
   const handleFlomoWebhook = (e: any) => {
-    if (!e.target.value) {
-      remove();
-    }
     setFlomoWebhook(e.target.value);
   };