🐱‍😒💋

frontend/package.json

@@ -14,7 +14,7 @@
     "@types/react-dom": "^17.0.0",
     "antd": "^4.14.0",
     "axios": "^0.21.1",
-    "node-sass": "^5.0.0",
+    "node-sass": "^4.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",

frontend/src/App.tsx

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

frontend/src/api/data/index.ts

@@ -0,0 +1,49 @@
+import { DataBuddy } from '@dank-inc/data-buddy'
+import { Account, Stack, Transaction, User } from '../../types'
+
+export const users = new DataBuddy<User>([
+  {
+    id: 'mock-user',
+    name: 'TestUser42',
+    email: 'testuser@email.com',
+  },
+])
+
+export const accounts = new DataBuddy<Account>([
+  {
+    id: 'home',
+    name: 'Home Expenses',
+    details: 'ya',
+    users: ['42'],
+    income: 1000,
+    expenses: 500,
+  },
+])
+export const stacks = new DataBuddy<Stack>([
+  {
+    id: 'ccrap',
+    name: 'crap',
+    account: 'asdf',
+    amount: 200,
+    details: 'for all my crap!',
+    transactions: [],
+  },
+  {
+    id: 'shit',
+    name: 'shit',
+    account: 'home',
+    amount: 500,
+    details: 'for all my shit!',
+    transactions: [],
+  },
+  {
+    id: 'poo',
+    name: 'poo',
+    account: 'home',
+    amount: 800,
+    details: 'for all my poo!',
+    transactions: [],
+  },
+])
+
+export const transactions = new DataBuddy<Transaction>([])

frontend/src/api/data/users.ts

@@ -1,14 +0,0 @@
-import { DataBuddy } from '@dank-inc/data-buddy'
-import { Account, Stack, Transaction, User } from '../../types'
-
-export const users = new DataBuddy<User>([
-  {
-    id: '42',
-    name: 'TestUser42',
-    email: 'testuser@email.com',
-  },
-])
-
-export const accounts = new DataBuddy<Account>([])
-export const stacks = new DataBuddy<Stack>([])
-export const transactions = new DataBuddy<Transaction>([])

frontend/src/api/index.ts

@@ -2,7 +2,7 @@ import Axios, { AxiosInstance } from 'axios'
 import { Account, Password, Stack, Transaction, User, uuid } from '../types'
 import { JWT, setJWT, wipeJWT } from '../utils/jwt'
 import { DataBuddy } from '@dank-inc/data-buddy'
-import { users } from './data/users'
+import { users, accounts, stacks, transactions } from './data'
 
 export type ApiParams = {
   baseURL?: string
@@ -14,7 +14,7 @@ export interface Api {
   users: DataBuddy<User>
   accounts: DataBuddy<Account>
   stacks: DataBuddy<Stack>
-  Transactions: DataBuddy<Transaction>
+  transactions: DataBuddy<Transaction>
   axios: AxiosInstance
 }
 
@@ -22,19 +22,25 @@ export class Api {
   constructor({ mock, baseURL }: ApiParams) {
     this.mock = mock
     this.users = users
+    this.accounts = accounts
+    this.stacks = stacks
+    this.transactions = transactions
     this.axios = Axios.create({ baseURL })
   }
 
-  login = async (username: string, password: string): Promise<JWT> => {
-    if (this.mock)
-      return {
-        id: 'mock-id',
+  login = async (name: string, password: string): Promise<JWT> => {
+    if (this.mock) {
+      const jwt = {
+        id: 'mock-user',
         token: 'token-token-token',
         exp: +new Date(),
       }
+      setJWT(jwt)
+      return jwt
+    }
 
     const { data } = await this.axios.post<JWT>(`/api/dj-rest-auth/login/`, {
-      username,
+      name,
       password,
     })
 
@@ -65,11 +71,13 @@ export class Api {
   }
 
   getAccounts = async () => {
+    if (this.mock) return this.accounts.get()
     const { data } = await this.axios.get<Account[]>('accounts')
     return data
   }
 
   getAccount = async (id: uuid) => {
+    if (this.mock) return this.accounts.getOne(id)
     const data = await this.axios.get<Account>(`accounts/${id}`)
     return data
   }
@@ -84,20 +92,25 @@ export class Api {
   deleteAccount = async () => {}
 
   getStacks = async (): Promise<Stack[]> => {
+    if (this.mock) return this.stacks.get()
     const { data } = await this.axios.get('stacks')
     return data
   }
+
   updateStack = async (id: uuid, body: Partial<Stack>) => {
     const { data } = await this.axios.patch<Stack>(`stacks/${id}`, body)
     return data
   }
+
   createStack = async () => {}
   deleteStack = async () => {}
 
   getTransactions = async () => {
+    if (this.mock) return this.transactions.get()
     const { data } = await this.axios.get('transactions')
     return data
   }
+
   updateTransaction = async (id: uuid, body: Partial<Transaction>) => {
     const { data } = await this.axios.patch<Transaction>(
       `transactions/${id}`,
@@ -105,6 +118,7 @@ export class Api {
     )
     return data
   }
+
   createTransaction = async (body: Omit<Transaction, 'id'>) => {
     const { data } = await this.axios.post<Transaction>('transactions', body)
     return data

frontend/src/app/CoreLayout.tsx

@@ -1,18 +1,19 @@
 import { useUserContext } from '../contexts/UserContext'
-import { Redirect, Route, Switch } from 'react-router'
+import { Route, Switch } from 'react-router'
 import { Link } from 'react-router-dom'
 import { Dashboard } from './pages/Dashboard'
 import { UserForm } from './components/UserForm'
 import { TransactionList } from './components/TransactionList'
 import { AccountForm } from './components/AccountForm'
+import { Login } from './components/Login'
 
 export const CoreLayout = () => {
-  const { user, accounts, selectedAccount } = useUserContext()
+  const { user, selectedAccount } = useUserContext()
 
-  if (!accounts?.length) <Redirect to="/account/new" />
+  if (!user) return <Login />
 
   return (
-    <div className="app" id="appElement">
+    <div className="app">
       <nav>
         <Link to="/">Home</Link>
         <Link to="/select">Select Budget</Link>

frontend/src/app/components/AccountForm.tsx

@@ -72,7 +72,7 @@ export const AccountForm = ({ account }: Props) => {
         </label>
         <h3>Budgets</h3>
         {stacks.data?.map((stack) => (
-          <div className="form-item">
+          <div key={stack.details} className="form-item">
             <label>{stack.name}</label>
             <input
               type="number"

frontend/src/app/components/Login.tsx

@@ -1,71 +1,40 @@
-import React, { useState, useEffect } from 'react'
-import Axios from 'axios'
+import { Button, Form, Input } from 'antd'
+import FormItem from 'antd/lib/form/FormItem'
 import { Link } from 'react-router-dom'
+import { User } from '../../types'
 
-type Props = {
-  handleLogin: (v: string) => void
-}
+import '../../scss/login.scss'
+import { useUserContext } from '../../contexts/UserContext'
 
-export const Login = ({ handleLogin }: Props) => {
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [valid, setValid] = useState(false)
-  const [error, setError] = useState('')
+type FormValues = Pick<User, 'name'> & { password: string }
 
-  useEffect(() => {
-    if (window.localStorage.userId) handleLogin(window.localStorage.userId)
-  }, [handleLogin])
+export const Login = () => {
+  const userContext = useUserContext()
 
-  useEffect(() => {
-    email && password ? setValid(true) : setValid(false)
-  }, [email, password])
+  const [form] = Form.useForm<FormValues>()
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (process.env.NODE_ENV === 'development') {
-      handleLogin(email)
-      return
-    }
-    if (!email || !password) {
-      setError('please fill out both fields')
-      return
-    }
-    try {
-      const { data } = await Axios.post('/api/login', { email, password })
-      handleLogin(data.id)
-      window.localStorage.userId = data.id
-    } catch (err) {
-      setError(err.message)
-    }
+  const handleFinish = ({ name, password }: FormValues) => {
+    userContext.handleLogin(name, password)
   }
 
   return (
     <div className="login">
-      <form onSubmit={handleSubmit}>
-        <label>
-          Type Yo Email:
-          <input
-            autoFocus
-            onChange={e => setEmail(e.target.value)}
-            value={email}
-          ></input>
-        </label>
-        <label>
-          Type Yo Password:
-          <input
-            type="password"
-            onChange={e => setPassword(e.target.value)}
-            value={password}
-          ></input>
-        </label>
-        <label>
-          <button disabled={!valid} type="submit">
-            Submit
-          </button>
-        </label>
-        {error && <p>{error}</p>}
-        <Link to="/sign-up">No Account? Sign Up!</Link>
-      </form>
+      <h1>Log In</h1>
+      <Form onFinish={handleFinish} form={form}>
+        <FormItem label="Username" name="username">
+          <Input />
+        </FormItem>
+        <FormItem label="Password" name="password">
+          <Input type="password" />
+        </FormItem>
+
+        <div className="form-footer">
+          <Link to="/sign-up">No Account? Sign Up!</Link>
+          <Button type="primary" htmlType="submit">
+            Log In!
+          </Button>
+        </div>
+      </Form>
     </div>
   )
 }

frontend/src/app/components/UserForm.tsx

@@ -12,6 +12,8 @@ export const UserForm = () => {
   const { api } = useAppContext()
   const { user } = useUserContext()
 
+  console.log(user)
+
   const [name, setName] = useState(user?.name)
   const [email, setEmail] = useState(user?.email)
   const [password, setPassword] = useState('')

frontend/src/app/pages/Dashboard.tsx

@@ -13,7 +13,7 @@ export const Dashboard = () => {
       <h1>Remaining Balances</h1>
       <div className="funds">
         {stacks.data.map((stack, i) => (
-          <FundBar stack={stack} col={i + 1} />
+          <FundBar key={stack.id} stack={stack} col={i + 1} />
         ))}
       </div>
     </>

frontend/src/app/pages/Login.tsx

@@ -9,7 +9,6 @@ type Credentials = {
 
 export const Login = () => {
   const { handleLogin } = useUserContext()
-
   const [form] = useForm<Credentials>()
 
   const handleSubmit = ({ username, password }: Credentials) => {

frontend/src/app/pages/Profile.tsx

@@ -1,3 +0,0 @@
-export const Profile = () => {
-  return <p>Look, A user profile!</p>
-}

frontend/src/contexts/UserContext.tsx

@@ -13,7 +13,7 @@ type Context = {
   user: User | null
   accounts: Account[] | null
   selectedAccount: Account | null
-  handleLogin: (username: string, password: string) => void
+  handleLogin: (name: string, password: string) => void
   handleLogout: () => void
   handleSelectAccount: (id: uuid) => void
 }
@@ -28,11 +28,14 @@ export const UserContextProvider = ({ children }: Props) => {
   const [accounts, setAccounts] = useState<Account[] | null>(null)
   const [selectedAccount, setSelectedAccount] = useState<Account | null>(null)
 
-  const handleLogin = async (username: string, password: string) => {
+  const handleLogin = async (name: string, password: string) => {
     try {
-      const { id } = await api.login(username, password)
+      const { id } = await api.login(name, password)
       if (!id) throw new Error('Problem logging in!')
-      setUser(await api.getUser(id))
+      const user = await api.getUser(id)
+
+      if (!user) message.error(`Couldn't find user`)
+      setUser(user)
 
       const accounts = await api.getAccounts()
       setAccounts(accounts)

frontend/src/index.css

@@ -4,6 +4,35 @@
   box-sizing: border-box;
 }
 
+#root {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.col1 {
+  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;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  color: #222;
+  text-shadow: -1px -1px #444;
+  font-weight: 900;
+}
+
 body {
   margin: 0;
   -webkit-font-smoothing: antialiased;

frontend/src/scss/app.scss

@@ -1,26 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  color: #222;
-  text-shadow: -1px -1px #444;
-  font-weight: 900;
-}
-
-.col1 {
-  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;
-}
-
 .app {
   display: flex;
   flex-direction: column;
@@ -89,29 +66,6 @@ nav {
   }
 }
 
-.login {
-  color: #ccc;
-  form {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    height: 100%;
-    text-align: center;
-
-    label {
-      input {
-        margin-left: 2ch;
-      }
-    }
-  }
-  display: flex;
-  flex-direction: column;
-  width: 70vmin;
-  height: 70vmin;
-  margin: auto;
-  background: #222;
-}
-
 .todo {
   color: #111a;
 }

frontend/src/scss/login.scss

@@ -0,0 +1,33 @@
+.login {
+  display: flex;
+  box-shadow: 5px 5px #111, 2px 2px #111;
+  flex-direction: column;
+  margin: auto;
+  background: #222;
+  border-radius: 0.2rem;
+  padding: 2rem 2rem;
+
+  h1 {
+    margin: 0 auto;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    text-align: center;
+
+    .ant-row {
+      margin: 1rem 2rem;
+    }
+
+    .form-footer {
+      margin-top: 1rem;
+
+      button {
+        width: 50%;
+        margin: auto 0 auto 1rem;
+      }
+    }
+  }
+}