feat: Create AuthModalStore without persist.

Author: zouhir96

src/App.tsx

@@ -22,7 +22,7 @@ export const App = () => {
   const [showOnboarding, setShowOnboarding] = useState(true)
   const { onboardingCompleted, maxVisibleCards, isDNDModeActive, DNDDuration, setDNDDuration } =
     useUserPreferences()
-  const { isAuthShowing, setIsAuthShowing, isConnected } = useAuth()
+  const { isAuthModalOpen, closeAuthModal } = useAuth()
 
   useLayoutEffect(() => {
     document.documentElement.style.setProperty('--max-visible-cards', maxVisibleCards.toString())
@@ -64,7 +64,7 @@ export const App = () => {
         <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
       )}
 
-      {!isConnected() && <AuthModal showAuth={isAuthShowing} setShowAuth={setIsAuthShowing} />}
+      {<AuthModal showAuth={isAuthModalOpen} closeModal={closeAuthModal} />}
 
       <div className="layoutLayers hideScrollBar">
         {isDNDModeActive() && <DNDLayout />}

src/components/Layout/Header.tsx

@@ -16,7 +16,7 @@ import { useBookmarks } from 'src/stores/bookmarks'
 import { useUserPreferences } from 'src/stores/preferences'
 
 export const Header = () => {
-  const { setIsAuthShowing, user, isConnected } = useAuth()
+  const { openAuthModal, user, isConnected } = useAuth()
 
   const [themeIcon, setThemeIcon] = useState(<BsMoonFill />)
   const { theme, setTheme, setDNDDuration, isDNDModeActive } = useUserPreferences()
@@ -105,12 +105,7 @@ export const Header = () => {
               <img className="profileImage" src={user?.imageURL} />
             </Link>
           ) : (
-            <button
-              aria-label="open login"
-              className="extraBtn"
-              onClick={() => {
-                setIsAuthShowing(true)
-              }}>
+            <button aria-label="open login" className="extraBtn" onClick={openAuthModal}>
               <FaUserLarge />
             </button>
           )}

src/features/auth/components/AuthModal.tsx

@@ -7,11 +7,11 @@ import { auth, githubProvider, googleProvider } from '../api/Config'
 
 type AuthModalProps = {
   showAuth: boolean
-  setShowAuth: (show: boolean) => void
+  closeModal: () => void
 }
 
-export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
-  const { initState } = useAuth()
+export const AuthModal = ({ showAuth, closeModal }: AuthModalProps) => {
+  const { closeAuthModal, initState } = useAuth()
 
   const signIn = (provider: AuthProvider, providerName: string) => {
     signInWithPopup(auth, provider)
@@ -22,6 +22,7 @@ export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
         const name = result.user.displayName
         const imageURL = result.user.photoURL
         if (accessToken && name && email && imageURL) {
+          closeAuthModal()
           initState({
             accessToken: accessToken,
             user: {
@@ -45,7 +46,7 @@ export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
       shouldCloseOnEsc={true}
       shouldCloseOnOverlayClick={true}
       shouldFocusAfterRender={false}
-      onRequestClose={() => setShowAuth(false)}
+      onRequestClose={closeModal}
       contentLabel="Auth"
       className="Modal scrollable"
       style={{

src/features/auth/hooks/useAuth.ts

@@ -1,15 +1,25 @@
-import { AuthStore } from 'src/features/auth'
+import { AuthModalStore, AuthStore } from 'src/features/auth'
 import { useBookmarks } from 'src/stores/bookmarks'
 
 export const useAuth = () => {
+  const { isAuthModalOpen, openAuthModal, closeAuthModal } = AuthModalStore()
   const authStore = AuthStore()
   const bookmarksStore = useBookmarks()
-  const { isAuthShowing, accessToken, user, setIsAuthShowing, initState } = authStore
+  const { accessToken, user, initState } = authStore
   const isConnected = () => user != null
   const logout = () => {
     bookmarksStore.clear()
     authStore.clear()
   }
 
-  return { setIsAuthShowing, initState, isConnected, logout, isAuthShowing, accessToken, user }
+  return {
+    openAuthModal,
+    closeAuthModal,
+    initState,
+    isConnected,
+    logout,
+    isAuthModalOpen,
+    accessToken,
+    user,
+  }
 }

src/features/auth/stores/authStore.ts

@@ -2,25 +2,33 @@ import { User } from 'src/features/auth/types'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
+interface AuthModalState {
+  isAuthModalOpen: boolean
+  openAuthModal: () => void
+  closeAuthModal: () => void
+}
+
 type AuthState = {
-  isAuthShowing: boolean
   accessToken: string | null
   user: User | null
 }
 
 type AuthActions = {
-  setIsAuthShowing: (showing: boolean) => void
   initState: (state: AuthState) => void
   clear: () => void
 }
 
+export const AuthModalStore = create<AuthModalState>((set) => ({
+  isAuthModalOpen: false,
+  openAuthModal: () => set({ isAuthModalOpen: true }),
+  closeAuthModal: () => set({ isAuthModalOpen: false }),
+}))
+
 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,