rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 19:29:51 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

make pool creation work

Browse Source
This commit is contained in:
Michael Fatemi 2021-04-10 21:17:50 -04:00
parent 8ea818a39a
commit 6cd56843b4
2 changed files with 115 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

237
src/components/CreatePool.tsx
View File

@ -1,6 +1,5 @@
import { FormEventHandler } from 'react';
import { makeAPIPostCall } from '../api/utils'; import { makeAPIPostCall } from '../api/utils';
import React, { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
const CreatePool = () => { const CreatePool = () => {
const [title, setTitle] = useState('No Title'); const [title, setTitle] = useState('No Title');
@ -10,34 +9,18 @@ const CreatePool = () => {
const [direction, setDirection] = useState('pickup'); const [direction, setDirection] = useState('pickup');
const [type, setType] = useState('offer'); const [type, setType] = useState('offer');
const [description, setDescription] = useState(''); const [description, setDescription] = useState('');
const [group, setGroup] = useState('');
const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
e.preventDefault();
fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`)
.then((response) => response.json())
.then((data) => {
console.log(data);
});
};
const onClick = () => { const onClick = () => {
console.log({
title: title,
description: description,
start_time: start,
end_time: end,
capacity,
direction,
type,
});
makeAPIPostCall('/pool', { makeAPIPostCall('/pool', {
title: title, title,
description: description, description,
start_time: start, start_time: start,
end_time: end, end_time: end,
capacity, capacity,
direction, direction,
type, type,
group_id: group,
}); });
}; };
useEffect(() => {}, []); useEffect(() => {}, []);
@ -50,107 +33,115 @@ const CreatePool = () => {
className="container card card-body text-left " className="container card card-body text-left "
style={{ backgroundColor: '#F1EAE8' }} style={{ backgroundColor: '#F1EAE8' }}
> >
<form onSubmit={onSubmit}> <div className="form-group">
<div className="form-group"> <h1 className="form-title" style={{ fontFamily: 'Impact' }}>
<h1 className="form-title" style={{ fontFamily: 'Impact' }}> Create Pool
Create Pool </h1>
</h1> <label className="" htmlFor="title">
<label className="" htmlFor="title"> Pool Title:{' '}
Pool Title:{' '} </label>
</label> <input
<input type="text"
type="text" id="title"
id="title" name="title"
name="title" className="form-control d-flex"
className="form-control d-flex" placeholder="Enter title here..."
placeholder="Enter title here..." onChange={(event) => setTitle(event.target.value)}
onChange={(event) => setTitle(event.target.value)} ></input>
></input> </div>
</div> <div className="form-group">
<div className="form-group"> <label className="" htmlFor="capacity">
<label className="" htmlFor="capacity"> Pool Capacity:
Pool Capacity: </label>
</label> <input
<input type="number"
type="number" id="capacity"
id="capacity" name="capacity"
name="capacity" className="form-control d-flex"
className="form-control d-flex" placeholder="0"
placeholder="0" onChange={(event) => setCapacity(parseInt(event.target.value))}
onChange={(event) => setCapacity(parseInt(event.target.value))} ></input>
></input> </div>
</div> <div className="form-group">
<div className="form-group"> <label className="" htmlFor="pool_start">
<label className="" htmlFor="pool_start"> Start Time:
Start Time: </label>
</label> <input
<input type="datetime-local"
type="datetime-local" id="pool_start"
id="pool_start" name="pool_start"
name="pool_start" className="form-control"
className="form-control" placeholder=""
placeholder="" onChange={(event) => setStart(event.target.value)}
onChange={(event) => setStart(event.target.value)} ></input>
></input> </div>
</div> <div className="form-group">
<div className="form-group"> <label className="" htmlFor="pool_end">
<label className="" htmlFor="pool_end"> End Time:
End Time: </label>
</label> <input
<input type="datetime-local"
type="datetime-local" id="pool_end"
id="pool_end" name="pool_end"
name="pool_end" className="form-control"
className="form-control" placeholder="Enter text here..."
placeholder="Enter text here..." onChange={(event) => setEnd(event.target.value)}
onChange={(event) => setEnd(event.target.value)} ></input>
></input> </div>
</div> <div className="form-group">
<div className="form-group"> <label className="" htmlFor="pool_direction">
<label className="" htmlFor="pool_direction"> Direction:
Direction: </label>
</label> <select
<select id="direction"
id="direction" name="direction"
name="direction" onChange={(event) => setDirection(event.target.value)}
onChange={(event) => setDirection(event.target.value)} >
> <option value="pickup">Picking Up</option>
<option value="pickup">Picking Up</option> <option value="dropoff">Dropping Off</option>
<option value="dropoff">Dropping Off</option> </select>
</select> </div>
</div> <div className="form-group">
<div className="form-group"> <label className="" htmlFor="pool_type">
<label className="" htmlFor="pool_type"> Type:
Type: </label>
</label> <select
<select id="type"
id="type" name="type"
name="type" onChange={(event) => setType(event.target.value)}
onChange={(event) => setType(event.target.value)} >
> <option value="offer">Offering carpool</option>
<option value="offer">Offering carpool</option> <option value="request">Requesting carpooll</option>
<option value="request">Requesting carpooll</option> </select>
</select> </div>
</div> <div className="form-group">
<div className="form-group"> <label className="" htmlFor="title">
<label className="" htmlFor="title"> Pool Description:
Pool Description: </label>
</label> <textarea
<textarea onChange={(event) => setDescription(event.target.value)}
onChange={(event) => setDescription(event.target.value)} id="Pool-text"
id="Pool-text" name="Pool-text"
name="Pool-text" style={{ height: '200px' }}
style={{ height: '200px' }} className="form-control"
className="form-control" placeholder="Enter text here..."
placeholder="Enter text here..." />
/> </div>
</div> <div className="form-group">
<label className="" htmlFor="pool_start">
<button className="btn btn-success text-left" onClick={onClick}> Group:
Submit </label>
</button> <input
<br /> type="text"
</form> className="form-control"
placeholder=""
onChange={(event) => setGroup(event.target.value)}
></input>
</div>
<button className="btn btn-success text-left" onClick={onClick}>
Submit
</button>
<br />
</div> </div>
</div> </div>
); );

2
src/components/Group.tsx
View File

@ -74,7 +74,7 @@ export default function Group() {
}} }}
> >
<Typography variant="h1" align="center"> <Typography variant="h1" align="center">
Group {group.id} {group.name}
</Typography> </Typography>
<Typography variant="h3" align="center"> <Typography variant="h3" align="center">