feat: useExpiredDataCheck hook

Author: EATSTEAK

src/components/Layout.tsx

@@ -4,12 +4,14 @@ import { Toaster } from "@/components/ui/sonner";
 import { MODE } from "@/env";
 import { useAnalytics } from "@/hooks/useAnalytics";
 import { useAuth } from "@/hooks/useAuth";
+import { useExpiredDataCheck } from "@/hooks/useExpiredDataCheck";
 import React from "react";
 import { Outlet } from "react-router";
 
 const Layout: React.FC = () => {
   useAnalytics();
   useAuth();
+  useExpiredDataCheck();
   return (
     <div className="h-dvh min-h-dvh overflow-hidden tracking-tight">
       <Background />

src/hooks/useExpiredDataCheck.ts

@@ -0,0 +1,25 @@
+import { cleanDataAtom, lastEntranceAtom } from "@/atoms/user";
+import { DATA_EXPIRY } from "@/env";
+import { useAtom, useSetAtom } from "jotai";
+import { useEffect, useRef } from "react";
+
+export const useExpiredDataCheck = (): void => {
+  const [lastEntranceTime, setLastEntranceTime] = useAtom(lastEntranceAtom);
+  const clearDataAtom = useSetAtom(cleanDataAtom);
+  const checked = useRef(false);
+  useEffect(() => {
+    if (
+      !checked.current &&
+      (lastEntranceTime === null ||
+        lastEntranceTime < new Date(DATA_EXPIRY).getTime())
+    ) {
+      clearDataAtom();
+      checked.current = true;
+    } else if (!checked.current) {
+      setLastEntranceTime(Date.now());
+      checked.current = true;
+    }
+    // This hook runs only once on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

src/hooks/useUser.ts

@@ -1,5 +1,4 @@
 import {
-  cleanDataAtom,
   isFirstProfileViewAtom,
   lastEntranceAtom,
   userGenderAtom,
@@ -15,12 +14,11 @@ import { usePurchasedProfiles, useSelfProfile } from "@/hooks/queries/profiles";
 import { useViewerSelf } from "@/hooks/queries/viewers";
 import { Gender } from "@/types/profile";
 import { useQueryClient } from "@tanstack/react-query";
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect, useState } from "react";
 import { UserData } from "@/types/user";
 import { useAuth } from "@/hooks/useAuth";
 import { useUserInfo } from "@/hooks/queries/users";
-import { DATA_EXPIRY } from "@/env";
 
 export const useUser = (): UserData & {
   setIsFirstProfileView: (value: boolean) => void;
@@ -43,15 +41,13 @@ export const useUser = (): UserData & {
   const [isFirstProfileView, setIsFirstProfileView] = useAtom(
     isFirstProfileViewAtom,
   );
+  const lastEntranceTime = useAtomValue(lastEntranceAtom);
   const [viewer, setViewer] = useAtom(viewerAtom);
   const [purchasedProfiles, setPurchasedProfiles] = useAtom(
     purchasedProfilesAtom,
   );
-  const [lastEntranceTime, setLastEntranceTime] = useAtom(lastEntranceAtom);
   const savedProfiles = useAtomValue(savedProfilesAtom);
   const recentlyViewedProfileIds = useAtomValue(recentlyViewedProfilesAtom);
-  const clearDataAtom = useSetAtom(cleanDataAtom);
-
   const queryClient = useQueryClient();
 
   const { data: profileRes, isPending: isProfilePending } = useSelfProfile({
@@ -72,19 +68,6 @@ export const useUser = (): UserData & {
     setRefreshInitiated(true);
   }, [queryClient]);
 
-  useEffect(() => {
-    if (
-      lastEntranceTime === null ||
-      lastEntranceTime < new Date(DATA_EXPIRY).getTime()
-    ) {
-      clearDataAtom();
-    } else {
-      setLastEntranceTime(Date.now());
-    }
-    // This hook runs only once on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   useEffect(() => {
     if (isAuthenticated) {
       refreshUser();