enable add/remove homie

2020-09-12 01:17:52 +03:00
parent 3acb5fedf4
commit 2a5ffac5b9
6 changed files with 213 additions and 9 deletions
--- a/client/src/homies/NewHomieForm.js
+++ b/client/src/homies/NewHomieForm.js
@@ -0,0 +1,122 @@
+import React, { useState, useEffect } 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 [homieDefaultChip, setHomieDefaultChip] = useState("");
+  const [chips, setChips] = useState([]);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const response = await axios.get('/api/chips');
+        if (response.status === 200 && response.data) {
+          setChips(response.data);
+        }else {
+          errorToast();
+        }
+      }catch (e) {
+        errorToast();
+      }
+    })();
+  }, []);
+
+  const chipOptions = chips.map((chip, index) => <option key={index} value={chip.id}>{ chip.name }</option>);
+
+  const disableAddButton = () => {
+    return homieName.length === 0 ||
+      homieImportance === "" ||
+      homieDefaultChip === "" ||
+      busy;
+  }
+
+  const clearForm = () => {
+    setHomieName("");
+    setAboutHomie("");
+    setHomieImportance("");
+    setHomieDefaultChip("");
+
+    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),
+        chip_id: parseInt(homieDefaultChip)
+      }
+    }
+
+    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 Hood</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>
+
+          <label className="required">Homie default chip: </label>
+          <Select value={homieDefaultChip} onChange={(e) => setHomieDefaultChip(e.target.value)} name="defaultChip">
+            <option disabled value="">Set default chip</option>
+            { chipOptions }
+          </Select>
+
+          <br/>
+
+          <Button disabled={disableAddButton()} onClick={addNewHomie}>Add to the hood</Button>
+
+        </CollapsibleItem>
+      </Collapsible>
+    </div>
+  )
+}
+
+export default NewHomieForm;