feat: Separate useAuth and AuthStore.

Author: zouhir96

src/components/Layout/Header.tsx

@@ -9,12 +9,11 @@ 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 } from 'src/features/auth'
+import { AuthModal, 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'
-import { useAuth } from 'src/stores/user'
 
 export const Header = () => {
   const { user } = useAuth()

src/features/auth/components/AuthModal.tsx

@@ -2,7 +2,7 @@ import { AuthProvider, OAuthProvider, signInWithPopup } from 'firebase/auth'
 import { FaGithub, FaGoogle } from 'react-icons/fa'
 import ReactModal from 'react-modal'
 import toast from 'react-simple-toasts'
-import { useAuth } from 'src/stores/user'
+import { useAuth } from 'src/features/auth'
 import { auth, githubProvider, googleProvider } from '../api/Config'
 
 type AuthModalProps = {

src/features/auth/hooks/useAuth.ts

@@ -0,0 +1,14 @@
+import { AuthStore } from 'src/features/auth'
+import { useBookmarks } from 'src/stores/bookmarks'
+
+export const useAuth = () => {
+  const authStore = AuthStore()
+  const bookmarksStore = useBookmarks()
+  const { initState, accessToken, user } = authStore
+  const logout = () => {
+    bookmarksStore.clear()
+    authStore.clear()
+  }
+
+  return { initState, logout, accessToken, user }
+}

src/features/auth/index.ts

@@ -1,3 +1,5 @@
 export * from './api/Config'
 export * from './components/AuthModal'
+export * from './hooks/useAuth'
+export * from './stores/authStore'
 export * from './types'

src/stores/user.ts src/features/auth/stores/authStore.tssrc/stores/user.ts renamed to src/features/auth/stores/authStore.ts

@@ -9,10 +9,10 @@ type AuthState = {
 
 type AuthActions = {
   initState: (state: AuthState) => void
-  logout: () => void
+  clear: () => void
 }
 
-export const useAuth = create(
+export const AuthStore = create(
   persist<AuthState & AuthActions>(
     (set) => ({
       accessToken: null,
@@ -22,7 +22,7 @@ export const useAuth = create(
           accessToken: newState.accessToken,
           user: newState.user,
         }),
-      logout: () => set({ user: null }),
+      clear: () => set({ user: null }),
     }),
     {
       name: 'auth-storage', // key in localStorage

src/features/settings/components/ProfileSettings.tsx

@@ -2,10 +2,9 @@ import { useRef } from 'react'
 import { RiFileDownloadFill, RiFileUploadFill } from 'react-icons/ri'
 import toast from 'react-simple-toasts'
 import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout'
-import { User } from 'src/features/auth'
+import { useAuth, User } from 'src/features/auth'
 import { BookmarkedPost } from 'src/features/bookmarks'
 import { useBookmarks } from 'src/stores/bookmarks'
-import { useAuth } from 'src/stores/user'
 import { BookmarkItem } from './BookmarkSettings'
 import './bookmarkSettings/bookmarkSettings.css'
 

src/stores/bookmarks.ts

@@ -1,24 +1,37 @@
-import { create } from 'zustand';
+import { create } from 'zustand'
 
-import { BookmarkedPost } from "src/features/bookmarks";
-import { persist } from 'zustand/middleware';
+import { BookmarkedPost } from 'src/features/bookmarks'
+import { persist } from 'zustand/middleware'
 
 type BookmarksState = {
   userBookmarks: BookmarkedPost[]
-};
+}
 
 type BookmarksActions = {
-  bookmarkPost: (post: BookmarkedPost) => void;
-  unbookmarkPost: (post: BookmarkedPost) => void;
-  initState: (state: BookmarksState) => void;
+  bookmarkPost: (post: BookmarkedPost) => void
+  unbookmarkPost: (post: BookmarkedPost) => void
+  initState: (state: BookmarksState) => void
+  clear: () => void
 }
 
-
-export const useBookmarks = create(persist<BookmarksState & BookmarksActions>((set) => ({
-  userBookmarks: [],
-  bookmarkPost: (post: BookmarkedPost) => set((state) => ({ userBookmarks: [post, ...state.userBookmarks] })),
-  unbookmarkPost: (post: BookmarkedPost) => set((state) => ({ userBookmarks: state.userBookmarks.filter((bookmarkedPost) => bookmarkedPost.url !== post.url), })),
-  initState: (newState: BookmarksState) => set(() => ({ userBookmarks: newState.userBookmarks }))
-}), {
-  name: 'bookmarks_storage'
-}));
+export const useBookmarks = create(
+  persist<BookmarksState & BookmarksActions>(
+    (set) => ({
+      userBookmarks: [],
+      bookmarkPost: (post: BookmarkedPost) =>
+        set((state) => ({ userBookmarks: [post, ...state.userBookmarks] })),
+      unbookmarkPost: (post: BookmarkedPost) =>
+        set((state) => ({
+          userBookmarks: state.userBookmarks.filter(
+            (bookmarkedPost) => bookmarkedPost.url !== post.url
+          ),
+        })),
+      initState: (newState: BookmarksState) =>
+        set(() => ({ userBookmarks: newState.userBookmarks })),
+      clear: () => set({ userBookmarks: [] }),
+    }),
+    {
+      name: 'bookmarks_storage',
+    }
+  )
+)