implement adding new gang, show only homies for selected gang

client/src/gangs/Gangs.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import NewGangForm from "./NewGangForm";
+import axios from "axios";
+import {errorToast} from "../common/errorHelpers";
+import YesNoModal from "../common/YesNoModal";
+import {Button} from "react-materialize";
+import M from "materialize-css";
+
+const Gangs = (props) => {
+  const gangs = props.gangs;
+  const setGangs = props.gangsSetter;
+
+  const deleteGang = async (id) => {
+    try {
+      const response = await axios.delete(`/api/gangs/${id}`);
+      if (response.status === 200 && response.data){
+        setGangs(response.data);
+        M.toast({ html: "See y'a on the other side" });
+      }else{
+        errorToast();
+      }
+    }catch (e) {
+      console.log(e);
+      errorToast();
+    }
+  }
+
+  const gangsData = gangs.map((gang, index) => {
+    return (
+      <li key={index}>
+        <div className="collapsible-header">
+          <div className="flex-row opposite-sides-content">
+            <div className="flex-col">
+              <div>{ gang.name }</div>
+              <div className="grey-text">{ `${gang.about || '[no about]'} • ${gang.chip_name} (${gang.chip_code})`}</div>
+            </div>
+
+            <YesNoModal
+              body={"Maan, y'a sure about this?"}
+              yesAction={() => deleteGang(gang.id)}
+              triggerNode={<Button disabled flat node="button" icon="delete" />} />
+          </div>
+        </div>
+      </li>
+    )
+  });
+
+  return (
+    <div className="container">
+      <NewGangForm newGangsSetter={setGangs} />
+
+      <ul className="collapsible">
+        { gangsData }
+      </ul>
+    </div>
+  )
+}
+
+export default Gangs;

client/src/gangs/NewGangForm.js

@@ -0,0 +1,110 @@
+import React, { useEffect, 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 NewGangForm = (props) => {
+  const [gangName, setGangName] = useState("");
+  const [aboutGang, setAboutGang] = useState("");
+  const [chips, setChips] = useState([]);
+  const [selectedChip, setSelectedChip] = useState('1');
+  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 chipsToOptions = chips.map( (chip, index) => <option key={index} value={chip.id}>{`${chip.code} • ${chip.name}`}</option>);
+
+  const disableAddButton = () => {
+    return gangName.length === 0 || busy;
+  }
+
+  const clearForm = () => {
+    setGangName("");
+    setAboutGang("");
+
+    const collapsible = document.getElementById('new-gang-form-container');
+    const collapsibleInstance = M.Collapsible.getInstance(collapsible);
+
+    collapsibleInstance.close(0);
+  }
+
+  const addNewGang = async () => {
+    const chipData = chips.find(chip => chip.id === parseInt(selectedChip));
+    if (chipData) {
+      setBusy(true);
+      const newGang = {
+        chip_name: chipData.name,
+        chip_code: chipData.code,
+        chip_symbol: chipData.symbol,
+        chip_prefixed: chipData.prefixed,
+        chip_scale: chipData.scale,
+        name: gangName,
+        about: aboutGang
+      }
+
+      try {
+        const response = await axios.post('/api/gangs', {gang: newGang});
+        if (response.status === 200 && response.data) {
+          props.newGangsSetter(response.data);
+          M.toast({html: 'Welcome to the Hood'});
+          clearForm();
+        } else {
+          errorToast();
+        }
+      } catch (e) {
+        console.log(e.message);
+        errorToast();
+      }
+
+      setBusy(false);
+    }else{
+      errorToast();
+    }
+  }
+
+  return (
+    <div>
+      <Collapsible id="new-gang-form-container">
+        <CollapsibleItem header={<strong>{`Introduce new gang to the Hood`}</strong>}>
+          <div className="input-field col s12">
+            <input id="gang-name" type="text" className="validate" required="required" value={gangName} onChange={(e) => setGangName(e.target.value)} />
+            <label className="required" htmlFor="gang-name">Gang name</label>
+            <span className="helper-text" data-error="Yo! Introduce us the new Gang" />
+          </div>
+
+          <TextInput
+            id="about-gang"
+            label="About"
+            value={aboutGang}
+            onChange={(e) => setAboutGang(e.target.value)}
+          />
+
+          <Select value={selectedChip} onChange={(e) => setSelectedChip(e.target.value)} name="selected-chip">
+            { chipsToOptions }
+          </Select>
+
+          <br/>
+
+          <Button disabled={disableAddButton()} onClick={addNewGang}>Add to the hood</Button>
+
+        </CollapsibleItem>
+      </Collapsible>
+    </div>
+  )
+}
+
+export default NewGangForm;