86 lines
1.9 KiB
JavaScript
86 lines
1.9 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { TextInput, Button } from "react-materialize";
|
|
import axios from "axios";
|
|
import M from "materialize-css";
|
|
|
|
const AddChip = (props) => {
|
|
const [chipName, setChipName] = useState('');
|
|
const [chipSymbol, setChipSymbol] = useState('');
|
|
const [submitInProgress, setSubmitInProgress] = useState(false);
|
|
|
|
const handleInputChange = (e) => {
|
|
const newValue = e.target.value;
|
|
switch (e.target.id){
|
|
case 'chipName':
|
|
setChipName(newValue);
|
|
break;
|
|
case 'chipSymbol':
|
|
setChipSymbol(newValue);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
const disableSubmit = () => {
|
|
return submitInProgress || chipName.length === 0 || chipSymbol.length === 0;
|
|
}
|
|
|
|
const clearForm = () => {
|
|
setChipName('');
|
|
setChipSymbol('');
|
|
}
|
|
|
|
const errorToast = () => M.toast({ html: "Yo! It ain't workin'" });
|
|
|
|
const handleSubmit = async () => {
|
|
setSubmitInProgress(true);
|
|
const chipRequest = {
|
|
chip: {
|
|
name: chipName,
|
|
symbol: chipSymbol,
|
|
}
|
|
}
|
|
|
|
try{
|
|
const submitResponse = await axios.post('/api/chips', chipRequest);
|
|
|
|
if (submitResponse && submitResponse.status === 200 && submitResponse.data) {
|
|
M.toast({ html: "Chipped In" });
|
|
clearForm();
|
|
} else {
|
|
errorToast();
|
|
}
|
|
}catch (e) {
|
|
errorToast();
|
|
}
|
|
|
|
setSubmitInProgress(false);
|
|
}
|
|
|
|
return (
|
|
<div className='section'>
|
|
<h5>Add New Chip</h5>
|
|
|
|
<TextInput
|
|
id='chipName'
|
|
label="Chip Name"
|
|
value={chipName}
|
|
onChange={handleInputChange}
|
|
/>
|
|
|
|
<TextInput
|
|
id='chipSymbol'
|
|
label="Chip Symbol"
|
|
value={chipSymbol}
|
|
onChange={handleInputChange}
|
|
/>
|
|
|
|
<Button disabled={disableSubmit()} waves="light" onClick={handleSubmit}>
|
|
Do It
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AddChip; |