refactor: update streak handling in AppLayout and useAuth for improved logic and state management

Author: medyo

src/components/Layout/AppLayout.tsx

@@ -11,17 +11,17 @@ import { AuthProvider } from 'src/providers/AuthProvider'
 import { Header } from './Header'
 
 export const AppLayout = () => {
-  const { isAuthModalOpen, setStreak, isConnected } = useAuth()
+  const { isAuthModalOpen, setStreak, shouldCountStreak } = useAuth()
   const postStreakMutation = usePostStreak()
 
   useEffect(() => {
-    if (isConnected) {
+    if (shouldCountStreak()) {
       postStreakMutation.mutateAsync(undefined).then((data) => {
         setStreak(data.streak)
         identifyUserStreak(data.streak)
       })
     }
-  }, [isConnected])
+  }, [shouldCountStreak])
 
   return (
     <AuthProvider>

src/features/auth/hooks/useAuth.ts

@@ -1,4 +1,5 @@
 import { signOut } from 'firebase/auth/web-extension'
+import { useCallback } from 'react'
 import { AuthModalStore, AuthStore } from 'src/features/auth'
 import { trackUserDisconnect } from 'src/lib/analytics'
 import { firebaseAuth } from 'src/lib/firebase'
@@ -9,17 +10,30 @@ export const useAuth = () => {
 
   const isConnected = authStore.user != null
 
-  const logout = async () => {
+  const shouldCountStreak = useCallback(() => {
+    if (!isConnected) return false
+
+    const last = authStore.lastStreakUpdate
+    if (!last) return true
+
+    const today = new Date().toDateString()
+    const lastDay = new Date(last).toDateString()
+
+    return today !== lastDay
+  }, [isConnected, authStore.lastStreakUpdate])
+
+  const logout = useCallback(async () => {
     trackUserDisconnect()
     signOut(firebaseAuth)
     authStore.clear()
     return await firebaseAuth.signOut()
-  }
+  }, [authStore])
 
   return {
     ...authModalStore,
     ...authStore,
     isConnected,
+    shouldCountStreak,
     logout,
   }
 }

src/features/auth/stores/authStore.ts

@@ -4,36 +4,53 @@ import { persist } from 'zustand/middleware'
 
 type AuthState = {
   user: User | null
+  lastStreakUpdate?: number
   providerId: string | null
 }
 
 type AuthActions = {
   initState: (state: AuthState) => void
   setStreak: (streak: number) => void
+  setLastStreakUpdate: (timestamp: number) => void
   clear: () => void
 }
 
+type AuthStoreType = AuthState & AuthActions
 export const AuthStore = create(
-  persist<AuthState & AuthActions>(
+  persist<AuthStoreType>(
     (set) => ({
       user: null,
       providerId: null,
+      lastStreakUpdate: undefined,
+      setLastStreakUpdate: (timestamp: number) => set({ lastStreakUpdate: timestamp }),
       initState: (newState: AuthState) =>
         set({
           user: newState.user,
           providerId: newState.providerId,
         }),
       setStreak: (streak: number) =>
         set((state) => ({
+          lastStreakUpdate: Date.now(),
           user: {
             ...state.user!,
             streak,
           },
         })),
-      clear: () => set({ user: null }),
+      clear: () => set({ user: null, lastStreakUpdate: undefined }),
     }),
     {
-      name: 'auth-storage', // key in localStorage
+      version: 1,
+      name: 'auth-storage',
+      migrate: (persistedState, version) => {
+        const typedPersistedState = persistedState as unknown as AuthStoreType
+        if (version === 0) {
+          return {
+            ...typedPersistedState,
+            lastStreakUpdate: undefined,
+          }
+        }
+        return typedPersistedState
+      },
     }
   )
 )