From 91f4d30c7eac506bcc283ebed2254faa9d94d282 Mon Sep 17 00:00:00 2001
From: Timothy Armes <tim@timothyarmes.com>
Date: Thu, 3 Oct 2024 15:46:12 +0200
Subject: [PATCH] Lint

---
 src/components/AuthButton.tsx    | 11 ++---
 src/components/LocaleChecker.tsx |  2 +-
 src/hooks/useFormPersist.ts      | 70 ++++++++++++++++----------------
 3 files changed, 39 insertions(+), 44 deletions(-)

diff --git a/src/components/AuthButton.tsx b/src/components/AuthButton.tsx
index ab1fcab..d9fa3a1 100644
--- a/src/components/AuthButton.tsx
+++ b/src/components/AuthButton.tsx
@@ -1,11 +1,8 @@
 "use client";
 
-import { useState } from "react";
-
-import { Button, Menu } from "@headlessui/react";
-import { signIn, signOut, useSession } from "next-auth/react";
+import { MenuButton } from "@headlessui/react";
+import { signIn, useSession } from "next-auth/react";
 import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation";
 import { RxAvatar } from "react-icons/rx";
 
 import { useAuthMenuOptions } from "@/hooks/useAuthMenuOptions";
@@ -27,9 +24,9 @@ const AuthButton = () => {
         items={menuItems}
         containerClassName="flex items-center justify-center"
         buttonComponent={
-          <Menu.Button>
+          <MenuButton>
             <RxAvatar className="h-6 w-6" />
-          </Menu.Button>
+          </MenuButton>
         }
       />
     );
diff --git a/src/components/LocaleChecker.tsx b/src/components/LocaleChecker.tsx
index 721d789..be1cd53 100644
--- a/src/components/LocaleChecker.tsx
+++ b/src/components/LocaleChecker.tsx
@@ -37,7 +37,7 @@ export const LocaleChecker = ({ children }: LocaleCheckerProps) => {
     ) {
       router.push({ pathname, params: params as any }, { locale: userLocale });
     }
-  }, [locale, sessionData, status]);
+  }, [locale, sessionData, status, params, pathname, router, userLocale]);
 
   // To avoid flickering, we don't render the children until we have the user's locale
   if (status === "loading") return null;
diff --git a/src/hooks/useFormPersist.ts b/src/hooks/useFormPersist.ts
index 1c68eac..8677481 100644
--- a/src/hooks/useFormPersist.ts
+++ b/src/hooks/useFormPersist.ts
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 
 import { SetFieldValue } from "react-hook-form";
 
@@ -7,12 +7,9 @@ export interface FormPersistConfig {
   watch: (names?: string | string[]) => any;
   setValue: SetFieldValue<any>;
   exclude?: string[];
-  onDataRestored?: (data: any) => void;
   validate?: boolean;
   dirty?: boolean;
   touch?: boolean;
-  onTimeout?: () => void;
-  timeout?: number;
 }
 
 const useFormPersist = (
@@ -21,39 +18,36 @@ const useFormPersist = (
     storage,
     watch,
     setValue,
-    exclude = [],
-    onDataRestored,
+    exclude,
     validate = false,
     dirty = false,
     touch = false,
-    onTimeout,
-    timeout,
   }: FormPersistConfig,
 ) => {
   const watchedValues = watch();
 
-  const getStorage = () => storage || window.sessionStorage;
+  const getStorage = useCallback(
+    () => storage || window.sessionStorage,
+    [storage],
+  );
 
-  const clearStorage = () => getStorage().removeItem(name);
+  const clearStorage = useCallback(
+    () => getStorage().removeItem(name),
+    [getStorage, name],
+  );
 
   useEffect(() => {
-    const str = getStorage().getItem(name);
+    const storedValuesJSON = getStorage().getItem(name);
 
-    if (str) {
-      const { _timestamp = null, ...values } = JSON.parse(str);
+    if (storedValuesJSON) {
+      const values = JSON.parse(storedValuesJSON);
       const dataRestored: { [key: string]: any } = {};
-      const currTimestamp = Date.now();
-
-      if (timeout && currTimestamp - _timestamp > timeout) {
-        onTimeout && onTimeout();
-        clearStorage();
-        return;
-      }
 
       Object.keys(values).forEach((key) => {
-        const shouldSet = !exclude.includes(key);
+        const shouldSet = !exclude?.includes(key);
         if (shouldSet) {
           dataRestored[key] = values[key];
+
           setValue(key, values[key], {
             shouldValidate: validate,
             shouldDirty: dirty,
@@ -62,28 +56,32 @@ const useFormPersist = (
         }
       });
 
-      if (onDataRestored) {
-        onDataRestored(dataRestored);
-      }
-
       return () => getStorage().setItem(name, JSON.stringify(dataRestored));
     }
-  }, [storage, name, onDataRestored, setValue]);
+  }, [
+    storage,
+    name,
+    setValue,
+    clearStorage,
+    dirty,
+    exclude,
+    touch,
+    validate,
+    getStorage,
+  ]);
 
   useEffect(() => {
-    const values = exclude.length
-      ? Object.entries(watchedValues)
-          .filter(([key]) => !exclude.includes(key))
-          .reduce((obj, [key, val]) => Object.assign(obj, { [key]: val }), {})
-      : Object.assign({}, watchedValues);
+    const values =
+      (exclude?.length ?? 0) > 0
+        ? Object.entries(watchedValues)
+            .filter(([key]) => !exclude!.includes(key))
+            .reduce((obj, [key, val]) => Object.assign(obj, { [key]: val }), {})
+        : { ...watchedValues };
 
-    if (Object.entries(values).length) {
-      if (timeout !== undefined) {
-        values._timestamp = Date.now();
-      }
+    if (Object.entries(values).length > 0) {
       getStorage().setItem(name, JSON.stringify(values));
     }
-  }, [watchedValues, timeout]);
+  }, [watchedValues, exclude, getStorage, name]);
 
   return {
     clear: () => getStorage().removeItem(name),