handle Chips and Chip Values

client/src/chips/AddChip.js

@@ -0,0 +1,86 @@
+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('/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;