feat: Move auth modal state handle to AuthStore.

Author: zouhir96

src/App.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useLayoutEffect, useState } from 'react'
 import { DNDLayout } from 'src/components/Layout'
+import { AuthModal, useAuth } from 'src/features/auth'
 import { setupAnalytics, setupIdentification, trackPageView } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { AppContentLayout } from './components/Layout'
@@ -21,6 +22,7 @@ export const App = () => {
   const [showOnboarding, setShowOnboarding] = useState(true)
   const { onboardingCompleted, maxVisibleCards, isDNDModeActive, DNDDuration, setDNDDuration } =
     useUserPreferences()
+  const { isAuthShowing, setIsAuthShowing, isConnected } = useAuth()
 
   useLayoutEffect(() => {
     document.documentElement.style.setProperty('--max-visible-cards', maxVisibleCards.toString())
@@ -62,6 +64,8 @@ export const App = () => {
         <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
       )}
 
+      {!isConnected() && <AuthModal showAuth={isAuthShowing} setShowAuth={setIsAuthShowing} />}
+
       <div className="layoutLayers hideScrollBar">
         {isDNDModeActive() && <DNDLayout />}
         <AppContentLayout />

src/assets/App.css

@@ -183,6 +183,7 @@ a {
 .profileImage {
   height: 40px;
   width: 40px;
+  margin-left: 8px;
   border-radius: 20px;
 }
 

src/components/Layout/Header.tsx

@@ -9,20 +9,14 @@ import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg'
 import { SearchBar } from 'src/components/Elements/SearchBar'
 import { UserTags } from 'src/components/Elements/UserTags'
-import { AuthModal, useAuth } from 'src/features/auth'
+import { useAuth } from 'src/features/auth'
 import { Changelog } from 'src/features/changelog'
 import { identifyUserTheme, trackDNDDisable, trackThemeSelect } from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
 import { useUserPreferences } from 'src/stores/preferences'
 
 export const Header = () => {
-  const { user } = useAuth()
-  const [showAuth, setshowAuth] = useState(false)
-  useEffect(() => {
-    if (user != null) {
-      setshowAuth(false)
-    }
-  })
+  const { setIsAuthShowing, user, isConnected } = useAuth()
 
   const [themeIcon, setThemeIcon] = useState(<BsMoonFill />)
   const { theme, setTheme, setDNDDuration, isDNDModeActive } = useUserPreferences()
@@ -73,8 +67,6 @@ export const Header = () => {
 
   return (
     <>
-      {<AuthModal showAuth={showAuth} setShowAuth={setshowAuth} />}
-
       <header className="AppHeader">
         <span className="AppName">
           <i className="logo">
@@ -108,16 +100,16 @@ export const Header = () => {
               <BookmarksBadgeCount />
             </>
           </Link>
-          {user != null ? (
-            <Link to="/settings/profile" className="extraBtn" aria-label="Open profile">
-              <img className="profileImage" src={user.imageURL} />
+          {isConnected() ? (
+            <Link to="/settings/profile" aria-label="Open profile">
+              <img className="profileImage" src={user?.imageURL} />
             </Link>
           ) : (
             <button
               aria-label="open login"
               className="extraBtn"
               onClick={() => {
-                setshowAuth(true)
+                setIsAuthShowing(true)
               }}>
               <FaUserLarge />
             </button>

src/features/auth/hooks/useAuth.ts

@@ -4,11 +4,12 @@ import { useBookmarks } from 'src/stores/bookmarks'
 export const useAuth = () => {
   const authStore = AuthStore()
   const bookmarksStore = useBookmarks()
-  const { initState, accessToken, user } = authStore
+  const { isAuthShowing, accessToken, user, setIsAuthShowing, initState } = authStore
+  const isConnected = () => user != null
   const logout = () => {
     bookmarksStore.clear()
     authStore.clear()
   }
 
-  return { initState, logout, accessToken, user }
+  return { setIsAuthShowing, initState, isConnected, logout, isAuthShowing, accessToken, user }
 }

src/features/auth/stores/authStore.ts

@@ -3,20 +3,24 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
 type AuthState = {
+  isAuthShowing: boolean
   accessToken: string | null
   user: User | null
 }
 
 type AuthActions = {
+  setIsAuthShowing: (showing: boolean) => void
   initState: (state: AuthState) => void
   clear: () => void
 }
 
 export const AuthStore = create(
   persist<AuthState & AuthActions>(
     (set) => ({
+      isAuthShowing: true,
       accessToken: null,
       user: null,
+      setIsAuthShowing: (showing: boolean) => set({ isAuthShowing: showing }),
       initState: (newState: AuthState) =>
         set({
           accessToken: newState.accessToken,