Refactor based on code review. Improved typing of useCookie hook. Added duration/delay to control length of toast.

src/core/hooks/useKeyBackupReminder.tsx

@@ -1,14 +1,14 @@
-import { useEffect, useCallback } from 'react';
-import { useToast } from './useToast';
-import useCookie from './useCookie';
-import type { CookieAttributes } from 'js-cookie';
-import { Button } from '@app/components/UI/Button';
+import { Button } from "@app/components/UI/Button";
+import type { CookieAttributes } from "js-cookie";
+import { useCallback, useEffect, useRef } from "react";
+import useCookie from "./useCookie";
+import { useToast } from "./useToast";
 
 interface UseBackupReminderOptions {
-  suppressDays?: number;
-  message?: string;
+  reminderInDays?: number;
+  message: string;
   onAccept?: () => void | Promise<void>;
-  cookieName?: string;
+  enabled: boolean;
   cookieOptions?: CookieAttributes;
 }
 
@@ -17,73 +17,104 @@ interface ReminderState {
   lastShown: string;
 }
 
-const TOAST_DELAY = 10000;
+const TOAST_APPEAR_DELAY = 10_000 // 10 seconds;
+const TOAST_DURATION = 30_000 // 30 seconds;:
+
+// remind user in 1 year to backup keys again, if they accept the reminder;
+const ON_ACCEPT_REMINDER_DAYS = 365
+
+function isReminderExpired(lastShown: string): boolean {
+  const lastShownDate = new Date(lastShown);
+  const now = new Date();
+  const daysSinceLastShown =
+    (now.getTime() - lastShownDate.getTime()) / (1000 * 60 * 60 * 24);
+  return daysSinceLastShown >= 7;
+}
 
 export function useBackupReminder({
-  suppressDays = 365,
-  message = "It's time to back up your key data. Would you like to do this now?",
+  reminderInDays = 7,
+  enabled,
+  message,
   onAccept = () => { },
-  cookieName = "backup_reminder_state",
-  cookieOptions = {},
-}: UseBackupReminderOptions = {}) {
+  cookieOptions,
+}: UseBackupReminderOptions) {
   const { toast } = useToast();
+  const toastShownRef = useRef(false);
+  const { value: reminderCookie, setCookie } =
+    useCookie<ReminderState>("key_backup_reminder");
 
-  const [reminderState, setReminderState, resetReminderState] = useCookie<ReminderState>(cookieName);
+  const suppressReminder = useCallback(
+    (days: number) => {
+      const expiryDate = new Date();
+      expiryDate.setDate(expiryDate.getDate() + days);
 
-  const suppressReminder = useCallback(() => {
-    const expiryDate = new Date();
-    expiryDate.setDate(expiryDate.getDate() + suppressDays);
-
-    setReminderState(
-      {
-        suppressed: true,
-        lastShown: new Date().toISOString(),
-      },
-      {
-        ...cookieOptions,
-        expires: expiryDate,
-      }
-    );
-
-  }, [setReminderState, suppressDays, cookieOptions]);
+      setCookie(
+        {
+          suppressed: true,
+          lastShown: new Date().toISOString(),
+        },
+        { ...cookieOptions, expires: expiryDate },
+      );
+    },
+    [setCookie, cookieOptions],
+  );
 
   useEffect(() => {
-    if (!reminderState) {
-      setTimeout(() => {
-        const { dismiss: dimissToast } = toast({
-          title: "Backup Reminder",
-          description: message,
-          action: (
-            <div className="flex gap-2">
-              <Button
-                type="button"
-                variant={"default"}
-                onClick={async () => {
-                  await onAccept();
-                  dimissToast()
-                  suppressReminder();
-                }}
-              >
-                Back up now
-              </Button>
-              <Button
-                type="button"
-                variant={"outline"}
-                onClick={() => {
-                  dimissToast();
-                  suppressReminder();
-                }}
-              >
-                Remind me later
-              </Button>
-            </div>
-          ),
-        });
-      }, TOAST_DELAY);
-    }
-  }, [reminderState]);
+    if (!enabled || toastShownRef.current) return;
 
-  return {
-    resetReminder: resetReminderState
-  };
-}
+    const shouldShowReminder =
+      !reminderCookie?.suppressed ||
+      isReminderExpired(reminderCookie.lastShown);
+    if (!shouldShowReminder) return;
+
+    toastShownRef.current = true;
+
+    const { dismiss } = toast(
+      {
+        title: "Backup Reminder",
+        duration: TOAST_DURATION,
+        delay: TOAST_APPEAR_DELAY,
+        description: message,
+        action: (
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              variant="default"
+              onClick={() => {
+                onAccept();
+                dismiss();
+                suppressReminder(ON_ACCEPT_REMINDER_DAYS);
+              }}
+            >
+              Back up now
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                dismiss();
+                suppressReminder(reminderInDays);
+              }}
+            >
+              Remind me in {reminderInDays} days
+            </Button>
+          </div>
+        ),
+      },
+    );
+
+    return () => {
+      if (!toastShownRef.current) {
+        dismiss();
+      }
+    };
+  }, [
+    enabled,
+    message,
+    onAccept,
+    reminderInDays,
+    suppressReminder,
+    toast,
+    reminderCookie,
+  ]);
+}