feat: Implement hit tracking and update user streak in AuthStore

Author: medyo

src/components/Layout/AppLayout.tsx

@@ -1,14 +1,23 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import 'react-contexify/dist/ReactContexify.css'
 import { Outlet } from 'react-router-dom'
 import { BeatLoader } from 'react-spinners'
 import 'src/assets/App.css'
-import { AuthModal, useAuth } from 'src/features/auth'
+import { AuthModal, AuthStore, useAuth } from 'src/features/auth'
+import { usePostHit } from 'src/features/hits'
 import { MarketingBanner } from 'src/features/MarketingBanner'
 import { Header } from './Header'
 
 export const AppLayout = () => {
-  const { isAuthModalOpen, closeAuthModal } = useAuth()
+  const { isAuthModalOpen } = useAuth()
+  const { setStreak } = AuthStore()
+  const postHitMutation = usePostHit()
+
+  useEffect(() => {
+    postHitMutation.mutateAsync({ data: { type: 'visit' } }).then((data) => {
+      setStreak(data.streak)
+    })
+  }, [])
 
   return (
     <>

src/features/auth/index.ts

@@ -3,3 +3,4 @@ export * from './hooks/useAuth'
 export * from './stores/authModalStore'
 export * from './stores/authStore'
 export * from './types'
+export * from './utils/auth'

src/features/auth/stores/authStore.ts

@@ -9,6 +9,7 @@ type AuthState = {
 
 type AuthActions = {
   initState: (state: AuthState) => void
+  setStreak: (streak: number) => void
   clear: () => void
 }
 
@@ -17,11 +18,19 @@ export const AuthStore = create(
     (set) => ({
       idToken: null,
       user: null,
+
       initState: (newState: AuthState) =>
         set({
           idToken: newState.idToken,
           user: newState.user,
         }),
+      setStreak: (streak: number) =>
+        set((state) => ({
+          user: {
+            ...state.user!,
+            streak,
+          },
+        })),
       clear: () => set({ user: null }),
     }),
     {

src/features/auth/types/index.ts

@@ -2,4 +2,5 @@ export type User = {
   name: string
   email: string
   imageURL?: string
+  streak?: number
 }

src/features/auth/utils/auth.ts

@@ -0,0 +1,16 @@
+import { firebaseAuth } from 'src/lib/firebase'
+
+export const getUserToken = async () => {
+  return new Promise((resolve, _) => {
+    const unsub = firebaseAuth.onAuthStateChanged(async (user) => {
+      if (user) {
+        const token = await user.getIdToken()
+        resolve(token)
+      } else {
+        console.log('User not logged in')
+        resolve(null)
+      }
+      unsub()
+    })
+  })
+}

src/features/hits/api/postHit.ts

@@ -0,0 +1,25 @@
+import { useMutation } from '@tanstack/react-query'
+import { axios } from 'src/lib/axios'
+import { MutationConfig } from 'src/lib/react-query'
+import { Hit } from '../types'
+
+type DTOProps = {
+  data: {
+    type: 'visit'
+  }
+}
+const postHit = async ({ data }: DTOProps): Promise<Hit> => {
+  return axios.post('/engine/hit', data)
+}
+
+type QueryFnType = typeof postHit
+
+type UsePostHitOptions = {
+  config?: MutationConfig<QueryFnType>
+}
+export const usePostHit = ({ config }: UsePostHitOptions = {}) => {
+  return useMutation({
+    ...config,
+    mutationFn: postHit,
+  })
+}

src/features/hits/index.ts

@@ -0,0 +1,2 @@
+export * from './api/postHit'
+export * from './types'

src/features/hits/types/index.ts

@@ -0,0 +1,3 @@
+export type Hit = {
+  streak: number
+}

src/lib/interceptors/DefaultRequestInterceptor.ts

@@ -1,7 +1,7 @@
 import { AxiosRequestConfig } from 'axios'
 import { API_ENDPOINT } from 'src/config'
+import { getUserToken } from 'src/features/auth'
 import { isProduction } from 'src/utils/Environment'
-import { firebaseAuth } from '../firebase'
 
 export async function DefaultRequestInterceptor(config: AxiosRequestConfig) {
   if (config) {
@@ -10,10 +10,9 @@ export async function DefaultRequestInterceptor(config: AxiosRequestConfig) {
       config.headers.Accept = 'application/json'
     }
 
-    const user = firebaseAuth.currentUser
-    if (user) {
-      const token = await user.getIdToken()
-      config.headers.Authorization = `Bearer ${token}`
+    const token = await getUserToken()
+    if (token) {
+      config.headers.authorization = `Bearer ${token}`
     }
   }