From 643aea4340ceee89aae4d08b49e193a0d7015d34 Mon Sep 17 00:00:00 2001 From: Joshua Hsueh Date: Sat, 10 Apr 2021 21:18:17 -0400 Subject: [PATCH] better form ui --- src/components/CreateGroup.tsx | 101 ++++++++----- src/components/CreatePool.tsx | 256 ++++++++++++++++++--------------- 2 files changed, 204 insertions(+), 153 deletions(-) diff --git a/src/components/CreateGroup.tsx b/src/components/CreateGroup.tsx index ef6ef1c..6b35574 100644 --- a/src/components/CreateGroup.tsx +++ b/src/components/CreateGroup.tsx @@ -1,43 +1,76 @@ import { useCallback } from 'react'; +import { makeAPIPostCall } from '../api/utils'; +import Card from '@material-ui/core/Card'; +import CardContent from '@material-ui/core/CardContent'; +import { makeStyles } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; +import Typography from '@material-ui/core/Typography'; +import { useState, useEffect } from 'react'; +import CloudUploadIcon from '@material-ui/icons/CloudUpload'; +const useStyles = makeStyles((theme) => ({ + root: { + maxWidth: 345, + }, + media: { + height: 140, + }, + button: { + margin: theme.spacing(1), + }, +})); const CreateGroup = () => { - const onSubmit = useCallback>((e) => { - e.preventDefault(); - - fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`) - .then((response) => response.json()) - .then((data) => { - console.log(data); - }); - }, []); + const [title, setTitle] = useState('No Title'); + const classes = useStyles(); + useEffect(() => {}, []); + const onClick = () => { + console.log({ + title: title, + }); + makeAPIPostCall('/group', { + title, + }); + }; return ( -
-
+ -
-
-

- Create Group -

- - -
-
-
+ + + +
+
+

+ Create Group +

+ + setTitle(event.target.value)} + /> +
+ +
+
+
+
); }; diff --git a/src/components/CreatePool.tsx b/src/components/CreatePool.tsx index d1c9aca..6668610 100644 --- a/src/components/CreatePool.tsx +++ b/src/components/CreatePool.tsx @@ -1,7 +1,23 @@ import { FormEventHandler } from 'react'; import { makeAPIPostCall } from '../api/utils'; -import React, { useState, useEffect } from 'react'; - +import Card from '@material-ui/core/Card'; +import CardContent from '@material-ui/core/CardContent'; +import { makeStyles } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; +import Typography from '@material-ui/core/Typography'; +import CloudUploadIcon from '@material-ui/icons/CloudUpload'; +import { useState, useEffect } from 'react'; +const useStyles = makeStyles((theme) => ({ + root: { + maxWidth: 345, + }, + media: { + height: 140, + }, + button: { + margin: theme.spacing(1), + }, +})); const CreatePool = () => { const [title, setTitle] = useState('No Title'); const [capacity, setCapacity] = useState(0); @@ -10,16 +26,8 @@ const CreatePool = () => { const [direction, setDirection] = useState('pickup'); const [type, setType] = useState('offer'); const [description, setDescription] = useState(''); + const classes = useStyles(); - const onSubmit: FormEventHandler = (e) => { - e.preventDefault(); - - fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`) - .then((response) => response.json()) - .then((data) => { - console.log(data); - }); - }; const onClick = () => { console.log({ title: title, @@ -42,116 +50,126 @@ const CreatePool = () => { }; useEffect(() => {}, []); return ( -
-
+ -
-
-

- Create Pool -

- - setTitle(event.target.value)} - > -
-
- - setCapacity(parseInt(event.target.value))} - > -
-
- - setStart(event.target.value)} - > -
-
- - setEnd(event.target.value)} - > -
-
- - -
-
- - -
-
- -