97 lines
3.0 KiB
JavaScript
97 lines
3.0 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Button, Collapsible, CollapsibleItem, Select, TextInput } from 'react-materialize';
|
|
import axios from 'axios';
|
|
import { errorToast } from "../common/errorHelpers";
|
|
import M from 'materialize-css';
|
|
|
|
const NewHomieForm = (props) => {
|
|
const [homieName, setHomieName] = useState("");
|
|
const [aboutHomie, setAboutHomie] = useState("");
|
|
const [homieImportance, setHomieImportance] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
const gang = props.gang;
|
|
|
|
const disableAddButton = () => {
|
|
return homieName.length === 0 ||
|
|
homieImportance === "" ||
|
|
busy;
|
|
}
|
|
|
|
const clearForm = () => {
|
|
setHomieName("");
|
|
setAboutHomie("");
|
|
setHomieImportance("");
|
|
|
|
const collapsible = document.getElementById('new-homie-form-container');
|
|
const collapsibleInstance = M.Collapsible.getInstance(collapsible);
|
|
|
|
collapsibleInstance.close(0);
|
|
}
|
|
|
|
const addNewHomie = async () => {
|
|
setBusy(true);
|
|
const newHomie = {
|
|
homie: {
|
|
name: homieName,
|
|
about: aboutHomie,
|
|
importance: parseInt(homieImportance),
|
|
gang_id: gang.id
|
|
}
|
|
}
|
|
|
|
try{
|
|
const response = await axios.post('/api/homies', newHomie);
|
|
if (response.status === 200 && response.data) {
|
|
props.newHomiesSetter(response.data);
|
|
M.toast({ html: 'Welcome to the hood' });
|
|
clearForm();
|
|
}else{
|
|
errorToast();
|
|
}
|
|
}catch (e) {
|
|
console.log(e.message);
|
|
errorToast();
|
|
}
|
|
|
|
setBusy(false);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Collapsible id="new-homie-form-container">
|
|
<CollapsibleItem header={<strong>{`Introduce new homie to the ${gang.name} gang`}</strong>}>
|
|
<div className="input-field col s12">
|
|
<input id="homie-name" type="text" className="validate" required="required" value={homieName} onChange={(e) => setHomieName(e.target.value)} />
|
|
<label className="required" htmlFor="homie-name">Homie name</label>
|
|
<span className="helper-text" data-error="Yo! Introduce us the new homie" />
|
|
</div>
|
|
|
|
<TextInput
|
|
id="aboutHomie"
|
|
label="About"
|
|
value={aboutHomie}
|
|
onChange={(e) => setAboutHomie(e.target.value)}
|
|
/>
|
|
|
|
<label className="required">Homie importance: </label>
|
|
<Select value={homieImportance} onChange={(e) => setHomieImportance(e.target.value)} name="homieImportance">
|
|
<option disabled value="">Set homie importance</option>
|
|
<option value={100}>Homie for life</option>
|
|
<option value={75}>Real homie</option>
|
|
<option value={50}>Alright</option>
|
|
<option value={25}>Foo homie</option>
|
|
<option value={0}>Guy from the hood</option>
|
|
</Select>
|
|
|
|
<br/>
|
|
|
|
<Button disabled={disableAddButton()} onClick={addNewHomie}>Add to the hood</Button>
|
|
|
|
</CollapsibleItem>
|
|
</Collapsible>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default NewHomieForm; |