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;
-  }
-}

node_modules/.package-lock.json

@@ -1,13 +1,6 @@
 {
-  "name": "mvp-django-react",
+  "name": "cash-stacks",
   "lockfileVersion": 2,
   "requires": true,
-  "packages": {
-    "node_modules/@dank-inc/data-buddy": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@dank-inc/data-buddy/-/data-buddy-0.1.3.tgz",
-      "integrity": "sha512-GreH0gs1Wf/8thCt53FrzX0ngMuIhrTBZJWa6tlqLIST4EgKgJN6IPei1o7bOqKPFmLIMS/DG6o1b/QAC57oXw==",
-      "license": "MIT"
-    }
-  }
+  "packages": {}
 }

node_modules/@dank-inc/data-buddy/README.md

@@ -1,7 +0,0 @@
-# Data Buddy
-
-Need a little mock data thingy?
-
-# Look no further!
-
-I will document this someday

node_modules/@dank-inc/data-buddy/lib/index.d.ts

@@ -1,13 +0,0 @@
-declare type DataRecord = {
-    id: string;
-};
-export declare type DataBuddyParams<T extends DataRecord> = T[];
-export declare class DataBuddy<T extends DataRecord> {
-    data: T[];
-    constructor(records: T[]);
-    get: () => T[];
-    getOne: (id: string) => T | null;
-    update: (id: string, params: Partial<T>) => T | false;
-    delete: (id: string) => boolean;
-}
-export {};

node_modules/@dank-inc/data-buddy/lib/index.js

@@ -1,43 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataBuddy = void 0;
-var DataBuddy = (function () {
-    function DataBuddy(records) {
-        var _this = this;
-        this.get = function () {
-            return _this.data;
-        };
-        this.getOne = function (id) {
-            return _this.data.find(function (record) { return record.id === id; }) || null;
-        };
-        this.update = function (id, params) {
-            var index = _this.data.findIndex(function (record) { return record.id === id; });
-            if (!index)
-                return false;
-            var record = _this.data[index];
-            _this.data[index] = __assign(__assign({}, record), params);
-            return _this.data[index];
-        };
-        this.delete = function (id) {
-            var index = _this.data.findIndex(function (record) { return record.id === id; });
-            if (!index)
-                return false;
-            _this.data.splice(index, 1);
-            return true;
-        };
-        this.data = records;
-    }
-    return DataBuddy;
-}());
-exports.DataBuddy = DataBuddy;

node_modules/@dank-inc/data-buddy/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "@dank-inc/data-buddy",
-  "version": "0.1.3",
-  "author": "Elijah Lucian",
-  "license": "MIT",
-  "description": "Need a little mock api data state buddy?",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/dank-inc/data-buddy"
-  },
-  "files": [
-    "lib"
-  ],
-  "main": "index.js",
-  "scripts": {
-    "lint": "tsc --noEmit",
-    "compile": "rm -rf lib && tsc",
-    "deploy": "npm run compile && npm publish",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "devDependencies": {
-    "typescript": "^4.2.4"
-  }
-}