wip

frontend/src/App.tsx

@@ -7,7 +7,7 @@ import { Api } from './api'
 import './scss/app.scss'
 
 const App = () => {
-  const api = new Api({ mock: true, baseURL: '/api' })
+  const api = new Api({ baseURL: '/api' })
 
   return (
     <BrowserRouter>

frontend/src/api/index.ts

@@ -39,7 +39,7 @@ export class Api {
       return jwt
     }
 
-    const { data } = await this.axios.post<JWT>(`/api/dj-rest-auth/login/`, {
+    const { data } = await this.axios.post<JWT>(`/dj-rest-auth/login/`, {
       name,
       password,
     })

frontend/src/app/CoreLayout.tsx

@@ -6,6 +6,8 @@ import { UserForm } from './components/UserForm'
 import { TransactionList } from './components/TransactionList'
 import { AccountForm } from './components/AccountForm'
 import { Login } from './components/Login'
+import { AppHeader } from './layout/AppHeader'
+import { AppFooter } from './layout/AppFooter'
 
 export const CoreLayout = () => {
   const { user, selectedAccount } = useUserContext()
@@ -14,13 +16,13 @@ export const CoreLayout = () => {
 
   return (
     <div className="app">
-      <nav>
+      <AppHeader>
         <Link to="/">Home</Link>
         <Link to="/select">Select Budget</Link>
         <Link to="/account">Budget Details</Link>
         <Link to="/details">Transactions</Link>
         <Link to="/user">Profile</Link>
-      </nav>
+      </AppHeader>
 
       <Switch>
         <Route path="/user" component={UserForm} />
@@ -30,14 +32,8 @@ export const CoreLayout = () => {
         <Route path="/" component={Dashboard} />
       </Switch>
 
+      <AppFooter />
       {/* {showingModal && <TransactionModal account={account} />} */}
-
-      <footer>
-        <p>User: {user?.name}</p>
-        <p>|</p>
-        <p>Budget: {selectedAccount?.name}</p>
-        <p>|</p>
-      </footer>
     </div>
   )
 }

frontend/src/app/layout/AppFooter/index.tsx

@@ -0,0 +1,16 @@
+import { useUserContext } from '../../../contexts/UserContext'
+
+import './style.scss'
+
+export const AppFooter = () => {
+  const { user, selectedAccount } = useUserContext()
+
+  return (
+    <div className="stax-footer">
+      <p>User: {user?.name}</p>
+      <p>|</p>
+      <p>Budget: {selectedAccount?.name}</p>
+      <p>|</p>
+    </div>
+  )
+}

frontend/src/app/layout/AppFooter/style.scss

@@ -0,0 +1,16 @@
+.stax-footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background: #111a;
+  padding: 0 2ch;
+  font-size: 10pt;
+
+  display: flex;
+  flex-direction: row;
+
+  p {
+    margin: 1ch;
+  }
+}

frontend/src/app/layout/AppHeader/index.tsx

@@ -1,41 +1,38 @@
+import { ReactNode } from 'react'
 import { Avatar, Button, Dropdown, Menu } from 'antd'
 import { Header } from 'antd/lib/layout/layout'
-import { User } from '../../types'
 import { Link, useHistory } from 'react-router-dom'
-import { useUserContext } from '../../contexts/UserContext'
+import { useUserContext } from '../../../contexts/UserContext'
 
-export type NavRoute = {
-  path: string
-  component: any
-  label: string
-  exact?: boolean
-}
+import './style.scss'
 
 type Props = {
-  user: User | null
+  children: ReactNode
 }
 
-export const AppHeader = ({ user }: Props) => {
-  const { handleLogout } = useUserContext()
+export const AppHeader = ({ children }: Props) => {
+  const { user, handleLogout } = useUserContext()
   const history = useHistory()
+
   // Unauthed Header
   if (!user)
     return (
-      <Header className="app-header">
-        <h3>MVP Django React! 🤠</h3>
+      <Header className="stax-header">
+        <h3>CashStacks! 💵</h3>
       </Header>
     )
 
   // Authed Header
   return (
-    <Header className="app-header">
+    <div className="stax-header">
       <div className="header-left">
         <Link to="/">
-          <h1>MVP Django React! 🤠</h1>
+          <h3>MVP Django React! 🤠</h3>
         </Link>
+        {children}
       </div>
       <div>
-        <Button onClick={() => history.push('/new/user')}>New User</Button>
+        {/* <Button onClick={() => history.push('/new/user')}>New User</Button> */}
       </div>
       <div className="header-right">
         <p>Welcome, {user.name}!!</p>
@@ -54,6 +51,6 @@ export const AppHeader = ({ user }: Props) => {
           <Avatar>{user.name[0]}</Avatar>
         </Dropdown>
       </div>
-    </Header>
+    </div>
   )
 }

frontend/src/app/layout/AppHeader/style.scss

@@ -0,0 +1,11 @@
+.stax-header {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-around;
+  background: #111a;
+
+  h1 {
+    margin: 0;
+  }
+}

frontend/src/index.css

@@ -14,10 +14,12 @@
   grid-column: 1/1;
   grid-row: 1/1;
 }
+
 .col2 {
   grid-column: 2/2;
   grid-row: 1/1;
 }
+
 .col3 {
   grid-column: 3/3;
   grid-row: 1/1;

frontend/src/scss/app.scss

@@ -14,30 +14,6 @@
 
 button {
   cursor: pointer;
-  padding: 2ch;
-  background: #aaa;
-  border: 0;
-  border-radius: 1ch;
-
-  &:hover {
-    background: #fff;
-  }
-
-  &:active {
-    background: #222;
-  }
-  transition: all 0.1s ease-out;
-}
-
-a {
-  color: #61dafb;
-}
-
-.error {
-  font-size: 1ch;
-  color: red;
-  padding: 0;
-  margin: 0;
 }
 
 .funds,
@@ -47,15 +23,6 @@ a {
   // height: 50vh;
 }
 
-nav {
-  padding-top: 2ch;
-  padding-bottom: 2ch;
-  width: 100%;
-  display: flex;
-  justify-content: space-around;
-  background: #111a;
-}
-
 .totals {
   z-index: 9;
   .above {
@@ -65,51 +32,3 @@ nav {
     margin-bottom: 5ch;
   }
 }
-
-.todo {
-  color: #111a;
-}
-
-.dank-form {
-  display: flex;
-  flex-direction: column;
-  background: #1115;
-  border: 1ch #1117 solid;
-  padding: 3ch;
-  border-radius: 1ch;
-  label {
-    margin: 0.5ch;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    input {
-      margin-left: 2ch;
-    }
-  }
-
-  h3 {
-    color: #666;
-  }
-
-  button {
-    margin: 4ch 1ch;
-  }
-}
-
-footer {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  background: #111a;
-  padding: 0 2ch;
-  font-size: 10pt;
-
-  display: flex;
-  flex-direction: row;
-
-  p {
-    margin: 1ch;
-  }
-}