cash-stacks/frontend/src/MainLayout.tsx

import { useUserContext } from './contexts/UserContext'
import { Route, Switch } from 'react-router'
import { Link, Redirect, useHistory } from 'react-router-dom'
import { Dashboard } from './pages/Dashboard'
import { NewUser } from './pages/NewUser'
import { TransactionList } from './pages/TransactionList'
import { AccountForm } from './forms/AccountForm'
import { Login } from './pages/Login'
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 MainLayout = () => {
  const { user } = useUserContext()
  const history = useHistory()

  return (
    <div className="app">
      <AppHeader>
        <Link to="/accounts">Accounts</Link>
        <Button onClick={() => history.push('?new=account')}>New</Button>
        <Link to="/transactions">Transactions</Link>
        <Button onClick={() => history.push('?new=transaction')}>New</Button>
      </AppHeader>

      <main>
        {!user ? (
          <Switch>
            <Route path="/sign-up" component={NewUser} />
            <Route path="/login" component={Login} />
            <div>loading...</div>
          </Switch>
        ) : (
          <Switch>
            <Route path="/transactions/new" component={TransactionForm} />
            <Route path="/transactions" component={TransactionList} />
            <Route path="/accounts/new" component={AccountForm} />
            <Route path="/accounts" component={AccountList} />
            <Route path="/dashboard" component={Dashboard} />
            <Redirect to="/dashboard" />
          </Switch>
        )}
      </main>

      <AppFooter />
    </div>
  )
}