motorin along

frontend/src/pages/Dashboard/index.tsx

@@ -2,7 +2,7 @@ import { FundBar } from '../../widgets/FundBar'
 import { useStacks } from '../../hooks/getMany/useStacks'
 
 export const Dashboard = () => {
-  const stacks = useStacks('42')
+  const stacks = useStacks()
 
   if (!stacks.data) return <div>loading...</div>
 

frontend/src/pages/NewTransaction/index.tsx

@@ -1,62 +0,0 @@
-import { InputNumber } from 'antd'
-import { useState } from 'react'
-import { Button } from '../../elements/Button'
-
-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 htmlType="button">cancel</Button>
-          <Button htmlType="submit">Submit</Button>
-        </label>
-      </form>
-    </div>
-  )
-}

frontend/src/pages/NewTransaction/style.scss

@@ -1,50 +0,0 @@
-.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

@@ -1,18 +1,20 @@
 import { Input, message } from 'antd'
 import { useForm } from 'antd/lib/form/Form'
 import FormItem from 'antd/lib/form/FormItem'
+import axios from 'axios'
 import { useAppContext } from '../../contexts/AppContext'
 import { Button } from '../../elements/Button'
 import { Form } from '../../elements/Form'
-import { User } from '../../types'
 
-type NewUserForm = Omit<User, 'id'> & {
+type NewUserForm = {
+  username: string
+  email: string
   password1: string
   password2: string
 }
 
 export const NewUser = () => {
-  const api = useAppContext()
+  const { baseURL } = useAppContext()
   const [form] = useForm<NewUserForm>()
 
   const handleFinish = (user: NewUserForm) => {
@@ -21,7 +23,7 @@ export const NewUser = () => {
       return
     }
 
-    api.post(`/dj-rest-auth/registration`, user)
+    axios.post(`${baseURL}/dj-rest-auth/registration/`, user)
   }
 
   return (
@@ -29,11 +31,11 @@ export const NewUser = () => {
       <FormItem label="username" name="username">
         <Input></Input>
       </FormItem>
-      <FormItem label="email" name="email">
+      {/* <FormItem label="email" name="email">
         <Input type="email"></Input>
-      </FormItem>
+      </FormItem> */}
       <FormItem label="password" name="password1">
-        <Input minLength={8}></Input>
+        <Input minLength={6}></Input>
       </FormItem>
       <FormItem label="confirm" name="password2">
         <Input></Input>

frontend/src/pages/TransactionForm/index.tsx

@@ -0,0 +1,55 @@
+import { useForm } from 'antd/lib/form/Form'
+import { useState } from 'react'
+import { Button } from '../../elements/Button'
+import { Form } from '../../elements/Form'
+import { FormItem } from '../../elements/FormItem'
+import { Input } from '../../elements/Input'
+import { InputNumber } from '../../elements/InputNumber'
+import { useStacks } from '../../hooks/getMany/useStacks'
+import { Modal } from '../../layout/Modal'
+
+import { Transaction } from '../../types'
+
+type Props = {
+  stackId: string
+}
+
+export const TransactionForm = ({ stackId }: Props) => {
+  const [form] = useForm<Transaction>()
+  const [visible, setVisible] = useState(true)
+  const stacks = useStacks()
+
+  const handleFinish = (tx: Transaction) => {
+    console.log('creating tx ', tx)
+  }
+
+  const handleClose = () => {
+    setVisible(false)
+  }
+
+  return (
+    <Modal onCancel={handleClose} visible={visible}>
+      <Form onFinish={handleFinish} form={form} className="form">
+        <h3>Expense for {form.getFieldValue('stack')} account</h3>
+        <FormItem label="Amount" name="amount">
+          <InputNumber autoFocus />
+        </FormItem>
+        <FormItem label="Details" name="details">
+          <Input />
+        </FormItem>
+        <FormItem name="Stack" label="Stack">
+          <select>
+            {stacks.data?.map((stack) => (
+              <option value={stack.id}>{stack.name}</option>
+            ))}
+            <option value={-1} disabled>
+              Select Account
+            </option>
+          </select>
+        </FormItem>
+
+        <Button htmlType="submit">Submit</Button>
+      </Form>
+    </Modal>
+  )
+}