adapting and shit

frontend/src/pages/Dashboard/index.tsx

@@ -0,0 +1,19 @@
+import { FundBar } from '../../widgets/FundBar'
+import { useStacks } from '../../hooks/getMany/useStacks'
+
+export const Dashboard = () => {
+  const stacks = useStacks('')
+
+  if (!stacks.data) return <div>loading...</div>
+
+  return (
+    <>
+      <h1>Remaining Balances</h1>
+      <div className="funds">
+        {stacks.data.map((stack, i) => (
+          <FundBar key={stack.id} stack={stack} col={i + 1} />
+        ))}
+      </div>
+    </>
+  )
+}

frontend/src/pages/ForgotPassword/index.tsx

@@ -0,0 +1,22 @@
+import { Button, Input, Layout } from 'antd'
+import { useState } from 'react'
+
+export const ForgotPassword = () => {
+  const [email, setEmail] = useState('')
+
+  const handleClick = () => {
+    console.log(email)
+  }
+
+  return (
+    <Layout>
+      <h1>Forgot Password</h1>
+      <Input
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        type="email"
+      />
+      <Button onClick={handleClick}>Submit</Button>
+    </Layout>
+  )
+}

frontend/src/pages/Login/index.tsx

@@ -0,0 +1,40 @@
+import { Button, Form, Input } from 'antd'
+import FormItem from 'antd/lib/form/FormItem'
+import { Link } from 'react-router-dom'
+import { User } from '../../types'
+
+import './style.scss'
+import { useUserContext } from '../../contexts/UserContext'
+
+type FormValues = Pick<User, 'name'> & { password: string }
+
+export const Login = () => {
+  const userContext = useUserContext()
+
+  const [form] = Form.useForm<FormValues>()
+
+  const handleFinish = ({ name, password }: FormValues) => {
+    userContext.handleLogin(name, password)
+  }
+
+  return (
+    <div className="login">
+      <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/pages/Login/index.tsx.old

@@ -0,0 +1,32 @@
+import { Button, Form, Input } from 'antd'
+import { useForm } from 'antd/lib/form/Form'
+import { useUserContext } from '../../contexts/UserContext'
+import './style.scss'
+
+type Credentials = {
+  username: string
+  password: string
+}
+
+export const Login = () => {
+  const { handleLogin } = useUserContext()
+  const [form] = useForm<Credentials>()
+
+  const handleSubmit = ({ username, password }: Credentials) => {
+    handleLogin(username, password)
+  }
+
+  return (
+    <Form form={form} onFinish={handleSubmit}>
+      <Form.Item label="username" name="username">
+        <Input />
+      </Form.Item>
+      <Form.Item label="password" name="password">
+        <Input type="password" />
+      </Form.Item>
+      <Button type="primary" htmlType="submit">
+        Login!
+      </Button>
+    </Form>
+  )
+}

frontend/src/pages/Login/style.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;
+      }
+    }
+  }
+}

frontend/src/pages/NewTransaction/index.tsx

@@ -0,0 +1,61 @@
+import { InputNumber } from 'antd'
+import { useState } from 'react'
+
+import '../../scss/transaction-modal.scss'
+type Props = {
+  stackId: string
+}
+
+export const TransactionForm = ({ stackId }: Props) => {
+  const [amount, setAmount] = useState(0)
+  const [stack, setStack] = useState(stackId)
+  const [details, setDetails] = useState('')
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (!amount) return
+
+    const body = {
+      stack,
+      details,
+      amount: amount,
+      created_at: new Date().toISOString(),
+    }
+
+    console.log('creating tx', body)
+  }
+
+  return (
+    <div className="transaction-modal">
+      <form onSubmit={handleSubmit} className="form">
+        <div className="cancel-button">X</div>
+        <h3>Expense for {stack} account</h3>
+        <label>
+          Amount:
+          <InputNumber
+            autoFocus
+            value={amount}
+            onChange={(v) => setAmount(v)}
+          />
+        </label>
+        <label>
+          Details:
+          <input
+            value={details}
+            onChange={(e) => setDetails(e.currentTarget.value)}
+          ></input>
+        </label>
+        <label>
+          <select value={stack} onChange={(e) => setStack(e.target.value)}>
+            <option value={-1} disabled>
+              Select Account
+            </option>
+          </select>
+          <button type="button">cancel</button>
+          <button type="submit">Submit</button>
+        </label>
+      </form>
+    </div>
+  )
+}

frontend/src/pages/NewTransaction/style.scss

@@ -0,0 +1,50 @@
+.transaction-modal {
+  color: #fff;
+  z-index: 100;
+  position: absolute;
+  width: 95vw;
+  height: 95vh;
+  border-radius: 1ch;
+  border: 1ch solid #000;
+  background: #000c;
+  display: flex;
+  pointer-events: visible;
+
+  h3 {
+    margin: 0;
+    text-align: center;
+    color: #fff;
+    text-shadow: 2px 2px #000, -1px -1px #444;
+  }
+
+  .cancel-button {
+    cursor: pointer;
+    background: #000a;
+    border: 1px solid #ccc;
+    width: 4ch;
+    padding: 1ch 1ch;
+    border-radius: 1.5ch;
+    text-align: center;
+    position: relative;
+    top: -9ch;
+    left: -2ch;
+  }
+
+  .form {
+    pointer-events: all;
+    box-sizing: content-box;
+    padding: 3ch 2ch;
+    background: #000a;
+    border: 1px solid #ccc;
+    border-radius: 1ch;
+    width: 50%;
+    margin: auto;
+
+    label {
+      display: flex;
+      margin: 1ch;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+}

frontend/src/pages/NewUser/index.tsx

@@ -0,0 +1,48 @@
+import { Button, Form, Input, Layout, message } from 'antd'
+import axios from 'axios'
+import { User } from '../../types'
+
+type NewUserForm = Omit<User, 'id'> & {
+  password1: string
+  password2: string
+}
+
+export const NewUser = () => {
+  const [form] = Form.useForm<NewUserForm>()
+
+  const handleFinish = (user: NewUserForm) => {
+    console.log('Asdfdas')
+    if (user.password1 !== user.password2) {
+      message.error('passwords do not match')
+      return
+    }
+
+    axios.post(`/dj-rest-auth/registration/`, user)
+  }
+
+  console.log('ASDFUASDJF')
+
+  return (
+    <Layout>
+      <Layout.Content>
+        <Form form={form} onFinish={handleFinish}>
+          <Form.Item label="username" name="username">
+            <Input></Input>
+          </Form.Item>
+          <Form.Item label="email" name="email">
+            <Input type="email"></Input>
+          </Form.Item>
+          <Form.Item label="password" name="password1">
+            <Input minLength={8}></Input>
+          </Form.Item>
+          <Form.Item label="confirm" name="password2">
+            <Input></Input>
+          </Form.Item>
+          <Button type="primary" htmlType="submit">
+            Create
+          </Button>
+        </Form>
+      </Layout.Content>
+    </Layout>
+  )
+}

frontend/src/pages/TransactionList/index.tsx

@@ -0,0 +1,18 @@
+import './style.scss'
+
+export const TransactionList = () => {
+  return (
+    <>
+      <h1>Transactions</h1>
+      <div className="transactions">
+        {[].map((account, i) => {
+          return (
+            <div className="column" key={`${account}-txs-${i}`}>
+              <h3>{account}</h3>
+            </div>
+          )
+        })}
+      </div>
+    </>
+  )
+}

frontend/src/pages/TransactionList/style.scss

@@ -0,0 +1,22 @@
+.transactions {
+  .column {
+    h3 {
+      text-align: center;
+      text-decoration: underline;
+    }
+    font-size: 14pt;
+    margin: 2ch;
+    background: #fff1;
+    padding: 0 2ch 1ch;
+    border-radius: 1ch;
+  }
+
+  .transaction-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .details {
+      padding-left: 1ch;
+    }
+  }
+}