implement adding new gang, show only homies for selected gang

client/src/App.js

@@ -10,6 +10,7 @@ import RoutableNavItem from './common/RoutableNavItem';
 import axios from 'axios';
 import {
   CRIB,
+  GANGS,
   MAKE_MONEY_MOVE,
   HOMIE_FLOW,
   HOMIES,
@@ -17,6 +18,7 @@ import {
 } from './RouteNames';
 import PutInWork from "./cash/PutInWork";
 import GangOnboarding from "./gangOnboarding/GangOnboarding";
+import Gangs from './gangs/Gangs';
 import {errorToast} from "./common/errorHelpers";
 
 
@@ -45,10 +47,11 @@ const App = (props) => {
 
   const routes = ([
       <Route key='1' exact path={CRIB} component={() => <Cash gang={selectedGang} />} />,
-      <Route key='2' exact path={HOMIES} component={() => <Homies gang={selectedGang} />} />,
-      <Route key='3' path={HOMIE_FLOW} component={() => <Flow gang={selectedGang} />} />,
-      <Route key='4' path={MAKE_MONEY_MOVE} component={() => <MakeMoneyMove />} />,
-      <Route key='5' path={PUT_IN_WORK} component={() => <PutInWork />} />
+      <Route key='2' exact path={GANGS} component={() => <Gangs gangs={gangs} gangsSetter={setGangs} />} />,
+      <Route key='3' exact path={HOMIES} component={() => <Homies gang={selectedGang} />} />,
+      <Route key='4' path={HOMIE_FLOW} component={() => <Flow gang={selectedGang} />} />,
+      <Route key='5' path={MAKE_MONEY_MOVE} component={() => <MakeMoneyMove gang={selectedGang} />} />,
+      <Route key='6' path={PUT_IN_WORK} component={() => <PutInWork gang={selectedGang} />} />
     ]
   );
 
@@ -85,14 +88,14 @@ const App = (props) => {
           autoTrigger: true,
           closeOnClick: true,
           constrainWidth: true,
-          coverTrigger: true,
+          coverTrigger: false,
           hover: false,
           inDuration: 150,
           outDuration: 250
         }}
         trigger={<a className="bump">{selectedGang && selectedGang.name && selectedGang.name.length > 0 ? `${selectedGang.name} gang` : '[No name gang]'}<Icon right>arrow_drop_down</Icon></a>}
       >
-        {gangs.map(gang => <a key={`gang-${gang.id}`}>{`${gang.name} gang`}</a>)}
+        {gangs.map(gang => <a key={`gang-${gang.id}`} onClick={() => setSelectedGang(gang)}>{gang.name}</a>)}
       </Dropdown>
     </div>
   );
@@ -106,6 +109,10 @@ const App = (props) => {
             Crib
           </RoutableNavItem>
 
+          <RoutableNavItem href={GANGS}>
+            Gangs
+          </RoutableNavItem>
+
           <RoutableNavItem href={HOMIES}>
             Homies
           </RoutableNavItem>

client/src/RouteNames.js

@@ -3,3 +3,4 @@ export const HOMIES = '/homies';
 export const MAKE_MONEY_MOVE = '/make-money-move';
 export const PUT_IN_WORK = '/put-in-work';
 export const HOMIE_FLOW = '/homie/:homie_id/flow';
+export const GANGS = '/gangs';

client/src/cash/Cash.js

@@ -16,7 +16,7 @@ const Cash = (props) => {
   useEffect( () => { 
     const getCashForHomies = async () => {
       try { 
-        const cash = await axios.get(`/api/homies/info`);
+        const cash = await axios.get(`/api/gangs/${gang.id}/homies/info`);
         setHomiesCash(cash.data);
       } catch (e) {
         console.log("Error fetching", e); 
@@ -27,7 +27,7 @@ const Cash = (props) => {
 
   const settleFlowForHomie = async (id, amountToSettle) => {
     try {
-      const response = await axios.post(`/api/homies/${id}/settle`, { amount: amountToSettle });
+      const response = await axios.post(`/api/gangs/${gang.id}/homies/${id}/settle`, { amount: amountToSettle });
       if (response.status === 200 && response.data) {
         M.toast({ html: 'Settled' });
         setHomiesCash(response.data);

client/src/cash/MakeMoneyMove.js

@@ -5,7 +5,6 @@ import './Cash.css';
 import axios from 'axios';
 
 const MakeMoneyMove = (props) => {
-
     const [selectedFrom, setSelectedFrom] = useState("");
     const [selectedTo, setSelectedTo] = useState("-1");
     const [homiesCash, setHomiesCash] = useState([]);
@@ -13,10 +12,12 @@ const MakeMoneyMove = (props) => {
     const [moveDescription, setMoveDescription] = useState("");
     const [submitInProgress, setSubmitInProgress] = useState(false);
 
+    const gang = props.gang;
+
     useEffect(() => {
         const getCashForHomies = async () => {
             try {
-                const cash = await axios.get(`/api/homies/info`);
+                const cash = await axios.get(`/api/gangs/${gang.id}/homies/info`);
                 setHomiesCash(cash.data);
             } catch (e) {
                 console.log("Error fetching", e);

client/src/cash/PutInWork.js

@@ -12,10 +12,12 @@ const PutInWork = (props) => {
     const [workDescription, setWorkDescription] = useState('');
     const [submitInProgress, setSubmitInProgress] = useState(false);
 
+    const gang = props.gang;
+
     useEffect(() => {
         (async () => {
             try {
-                const response = await axios.get('/api/homies');
+                const response = await axios.get(`/api/gangs/${gang.id}/homies`);
                 if (response.status === 200 && response.data){
                     setHomies(response.data);
                 }

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;

client/src/homies/Homies.js

@@ -10,10 +10,12 @@ import YesNoModal from "../common/YesNoModal";
 const Homies = (props) => {
   const [homies, setHomies] = useState([]);
 
+  const gang = props.gang;
+
   useEffect(() => {
     (async() => {
       try {
-        const response = await axios.get(`/api/homies`);
+        const response = await axios.get(`/api/gangs/${gang.id}/homies`);
         if (response.status === 200 && response.data){
           setHomies(response.data);
         }else{
@@ -27,7 +29,7 @@ const Homies = (props) => {
 
   const deleteHomie = async (id) => {
     try {
-      const response = await axios.delete(`/api/homies/${id}`);
+      const response = await axios.delete(`/api/gangs/${gang.id}/homies/${id}`);
       if (response.status === 200 && response.data){
         setHomies(response.data);
         M.toast({ html: "See y'a on the other side Homie" });

client/src/homies/NewHomieForm.js

@@ -41,10 +41,10 @@ const NewHomieForm = (props) => {
     }
 
     try{
-      const response = await axios.post('/api/homies', newHomie);
+      const response = await axios.post(`/api/gangs/${gang.id}/homies`, newHomie);
       if (response.status === 200 && response.data) {
         props.newHomiesSetter(response.data);
-        M.toast({ html: 'Welcome to the hood' });
+        M.toast({ html: 'Welcome to the Gang' });
         clearForm();
       }else{
         errorToast();
@@ -86,7 +86,7 @@ const NewHomieForm = (props) => {
 
           <br/>
 
-          <Button disabled={disableAddButton()} onClick={addNewHomie}>Add to the hood</Button>
+          <Button disabled={disableAddButton()} onClick={addNewHomie}>Add to the Gang</Button>
 
         </CollapsibleItem>
       </Collapsible>