Elijah Lucian
3 years ago
parent
8ff02f6149
commit
01a1876b3d
23 changed files with 236 additions and 250 deletions
@ -0,0 +1,8 @@ |
||||
import { FormItemProps } from 'antd' |
||||
import AntFormItem from 'antd/lib/form/FormItem' |
||||
|
||||
type Props = FormItemProps |
||||
|
||||
export const FormItem = (props: Props) => { |
||||
return <AntFormItem className="dank-form-item" {...props}></AntFormItem> |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
import { Input as AntInput, InputProps } from 'antd' |
||||
|
||||
type Props = InputProps |
||||
|
||||
export const Input = (props: Props) => { |
||||
return <AntInput className="dank-input" {...props}></AntInput> |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
import { InputNumber as AntInputNumber, InputNumberProps } from 'antd' |
||||
|
||||
type Props = InputNumberProps |
||||
|
||||
export const InputNumber = (props: Props) => { |
||||
return <AntInputNumber {...props} /> |
||||
} |
||||
@ -1,88 +1,39 @@ |
||||
import { useState, useEffect } from 'react' |
||||
|
||||
import { Password, User } from '../types' |
||||
import { User } from '../types' |
||||
import { useUserContext } from '../contexts/UserContext' |
||||
import { message } from 'antd' |
||||
import { Button } from '../elements/Button' |
||||
import { Form } from '../elements/Form' |
||||
import { useForm } from 'antd/lib/form/Form' |
||||
import { FormItem } from '../elements/FormItem' |
||||
import { Input } from '../elements/Input' |
||||
|
||||
export const UserForm = () => { |
||||
const { user } = useUserContext() |
||||
if (!user) throw new Error('User should be gotten by this point') |
||||
|
||||
console.log(user) |
||||
|
||||
const [name, setName] = useState(user?.name) |
||||
const [email, setEmail] = useState(user?.email) |
||||
const [password, setPassword] = useState('') |
||||
const [passwordConfirm, setPasswordConfirm] = useState('') |
||||
const [valid, setValid] = useState(false) |
||||
|
||||
useEffect(() => { |
||||
passwordConfirm.length > 4 && password === passwordConfirm && name && email |
||||
? setValid(true) |
||||
: setValid(false) |
||||
}, [password, passwordConfirm, name, email]) |
||||
|
||||
// @ts-ignore
|
||||
const handleSubmit = async (e) => { |
||||
e.preventDefault() |
||||
|
||||
if (!name || !email) { |
||||
message.error('Name and email required!') |
||||
return |
||||
} |
||||
|
||||
const body: Omit<User, 'id'> & Password = { |
||||
name, |
||||
email, |
||||
password, |
||||
passwordConfirm, |
||||
} |
||||
const [form] = useForm<User>() |
||||
|
||||
try { |
||||
// user?.id
|
||||
// ? await api.updateUser(user.id, body)
|
||||
// : await api.createUser(body)
|
||||
console.log('User form wtf') |
||||
// if (!user?.id) history.push('/login')
|
||||
} catch (err) { |
||||
message.error('Something went wrong') |
||||
} |
||||
const handleFinish = (values: User) => { |
||||
console.log(values) |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<h1>{user?.id ? 'Edit' : 'Create'} Profile</h1> |
||||
<form className="dank-form" onSubmit={handleSubmit}> |
||||
<label> |
||||
Name: <input value={name} onChange={(e) => setName(e.target.value)} /> |
||||
</label> |
||||
<label> |
||||
Email: |
||||
<input |
||||
value={email} |
||||
type="email" |
||||
onChange={(e) => setEmail(e.target.value)} |
||||
/> |
||||
</label> |
||||
<label> |
||||
Password: |
||||
<input |
||||
value={password} |
||||
type="password" |
||||
onChange={(e) => setPassword(e.target.value)} |
||||
/> |
||||
</label> |
||||
<label> |
||||
Confirm Password: |
||||
<input |
||||
type="password" |
||||
onChange={(e) => setPasswordConfirm(e.target.value)} |
||||
/> |
||||
</label> |
||||
<Button htmlType="submit" disabled={!valid}> |
||||
Save |
||||
</Button> |
||||
</form> |
||||
<Form form={form} onFinish={handleFinish} initialValues={user}> |
||||
<h1>User Profile</h1> |
||||
<FormItem label="Username" name="username"> |
||||
<Input /> |
||||
</FormItem> |
||||
<FormItem label="First Name" name="first_name"> |
||||
<Input /> |
||||
</FormItem> |
||||
<FormItem label="Last Name" name="last_name"> |
||||
<Input /> |
||||
</FormItem> |
||||
<FormItem label="E-Mail" name="email"> |
||||
<Input type="email" /> |
||||
</FormItem> |
||||
<Button htmlType="submit">Save</Button> |
||||
</Form> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
@ -1,4 +1,4 @@ |
||||
import { Account } from '../../types' |
||||
import { useGet } from '../util/useGet' |
||||
|
||||
export const useAccounts = () => useGet<Account[]>(`/accounts`) |
||||
export const useAccounts = () => useGet<Account[]>(`/accounts/`) |
||||
|
||||
@ -1,4 +1,4 @@ |
||||
import { Stack } from '../../types' |
||||
import { useGet } from '../util/useGet' |
||||
|
||||
export const useStacks = (accountId: string) => useGet<Stack[]>(`/stacks`) |
||||
export const useStacks = () => useGet<Stack[]>(`/stacks/`) |
||||
|
||||
@ -0,0 +1,9 @@ |
||||
import { ModalProps } from 'antd' |
||||
import { ReactNode } from 'react' |
||||
import './style.scss' |
||||
|
||||
type Props = ModalProps & { children: ReactNode } |
||||
|
||||
export const Modal = ({ children, ...props }: Props) => { |
||||
return <div className="dank-modal">{children}</div> |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
@import '../../scss/variables.scss'; |
||||
|
||||
.dank-modal { |
||||
display: flex; |
||||
border: 1px solid $color-grey; |
||||
|
||||
h3 { |
||||
text-align: center; |
||||
color: $color-light; |
||||
} |
||||
|
||||
.cancel-button { |
||||
cursor: pointer; |
||||
text-align: center; |
||||
} |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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; |
||||
} |
||||
} |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue