account count not doing the count

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import { BrowserRouter } from 'react-router-dom'
 import { UserContextProvider } from './contexts/UserContext'
-import { CoreLayout } from './CoreLayout'
+import { MainLayout } from './MainLayout'
 import { AppContextProvider } from './contexts/AppContext'
 
 import './app.scss'
@@ -15,7 +15,7 @@ const App = () => {
     <BrowserRouter>
       <AppContextProvider baseURL={baseURL}>
         <UserContextProvider>
-          <CoreLayout />
+          <MainLayout />
         </UserContextProvider>
       </AppContextProvider>
     </BrowserRouter>

frontend/src/MainLayout.tsx

@@ -10,8 +10,9 @@ import { AppHeader } from './layout/AppHeader'
 import { AppFooter } from './layout/AppFooter'
 import { TransactionForm } from './pages/TransactionForm'
 import { Button } from 'antd'
+import { AccountList } from './pages/AccountList'
 
-export const CoreLayout = () => {
+export const MainLayout = () => {
   const { user } = useUserContext()
   const history = useHistory()
 
@@ -36,7 +37,7 @@ export const CoreLayout = () => {
             <Route path="/transactions/new" component={TransactionForm} />
             <Route path="/transactions" component={TransactionList} />
             <Route path="/accounts/new" component={AccountForm} />
-            <Route path="/accounts" component={AccountForm} />
+            <Route path="/accounts" component={AccountList} />
             <Route path="/" component={Dashboard} />
           </Switch>
         )}

frontend/src/forms/AccountForm.tsx

@@ -20,17 +20,6 @@ export const AccountForm = ({ account }: Props) => {
     e.preventDefault()
     if (!name || !income || !expenses) message.error(`fill out all the fields!`)
 
-    const body = {
-      name,
-      income,
-      expenses,
-      details,
-    }
-
-    // account?.id
-    //   ? await api.updateAccount(account.id, body)
-    //   : await api.createAccount(body)
-
     message.success('Yaaa')
   }
 

frontend/src/layout/AppHeader/index.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react'
-import { Avatar, Dropdown, Menu } from 'antd'
+import { Link } from 'react-router-dom'
-import { Link, useHistory } from 'react-router-dom'
 import { useUserContext } from '../../contexts/UserContext'
-import { Button } from '../../elements/Button'
+// import { Avatar, Dropdown, Menu } from 'antd'
+// import { Button } from '../../elements/Button'
 
 import './style.scss'
 
@@ -11,8 +11,7 @@ type Props = {
 }
 
 export const AppHeader = ({ children }: Props) => {
-  const { user, handleLogout } = useUserContext()
+  const { user } = useUserContext()
-  const history = useHistory()
 
   // Unauthed Header
   if (!user)

frontend/src/pages/AccountList/index.tsx

@@ -0,0 +1,7 @@
+import { useAccounts } from '../../hooks/getMany/useAccounts'
+
+export const AccountList = () => {
+  const accounts = useAccounts()
+
+  return <div>Account Count: {accounts.data?.length}</div>
+}