Show gang switch

client/src/App.css

@@ -55,3 +55,7 @@
   height: 90%;
   margin-left: 40%;
 }
+
+.bump {
+  margin-left: 2em;
+}

client/src/App.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import './App.css';
-import { Navbar } from 'react-materialize';
+import { Navbar, Dropdown, Icon } from 'react-materialize';
 import MakeMoneyMove from './cash/MakeMoneyMove';
 import Flow from "./homies/Flow";
 import Cash from './cash/Cash';
@@ -16,21 +16,23 @@ import {
   PUT_IN_WORK
 } from './RouteNames';
 import PutInWork from "./cash/PutInWork";
-import ChipSelection from "./gangOnboarding/ChipSelection";
+import GangOnboarding from "./gangOnboarding/GangOnboarding";
 import {errorToast} from "./common/errorHelpers";
 
 
 const App = (props) => {
   const [loading, setLoading] = useState(true);
-  const [gang, setGang] = useState({});
+  const [gangs, setGangs] = useState([]);
+  const [selectedGang, setSelectedGang] = useState({});
 
   useEffect(() => {
     (async() => {
       try {
         setLoading(true);
-        const response = await axios.get(`/api/gangs/0`);
+        const response = await axios.get(`/api/gangs`);
         if (response.status === 200 && response.data){
-          setGang(response.data);
+          setGangs(response.data);
+          setSelectedGang(response.data[0]);
         }else{
           errorToast();
         }
@@ -42,15 +44,15 @@ const App = (props) => {
   }, []);
 
   const routes = ([
-      <Route key='1' exact path={CRIB} component={() => <Cash gang={gang} />} />,
+      <Route key='1' exact path={CRIB} component={() => <Cash gang={selectedGang} />} />,
-      <Route key='2' exact path={HOMIES} component={() => <Homies />} />,
+      <Route key='2' exact path={HOMIES} component={() => <Homies gang={selectedGang} />} />,
-      <Route key='3' path={HOMIE_FLOW} component={() => <Flow gang={gang} />} />,
+      <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 />} />
     ]
   );
 
-  const onboarded = () => gang.chip_name && gang.chip_name.length > 0;
+  const onboarded = () => selectedGang.chip_name && selectedGang.chip_name.length > 0;
 
   const preloaderCircle = (
     <div className="container">
@@ -72,11 +74,34 @@ const App = (props) => {
     </div>
   );
 
+  const navbarLogoWithGang = (
+    <div>
+      <a href='/'>GKS</a>
+
+      <Dropdown
+        id="gang_dropdown"
+        options={{
+          alignment: 'left',
+          autoTrigger: true,
+          closeOnClick: true,
+          constrainWidth: true,
+          coverTrigger: true,
+          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>)}
+      </Dropdown>
+    </div>
+  );
+
 
   return (
     <Router>
       <div className="navbar-fixed">
-        <Navbar brand={<a href='/'>GKS</a>} alignLinks="right">
+        <Navbar brand={navbarLogoWithGang} alignLinks="right">
           <RoutableNavItem href={CRIB}>
             Crib
           </RoutableNavItem>
@@ -97,7 +122,7 @@ const App = (props) => {
 
       <div className="autoscrolling">
         { loading && preloaderCircle }
-        { !loading && !onboarded() && <ChipSelection /> }
+        { !loading && !onboarded() && <GangOnboarding gang={selectedGang} /> }
         { !loading && onboarded() && routes }
       </div>
     </Router>

client/src/gangOnboarding/GangOnboarding.js

@@ -1,11 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import axios from "axios";
 import { errorToast } from "../common/errorHelpers";
-import {Button, Select, TextInput} from "react-materialize";
+import {Button, Select} from "react-materialize";
 
-const ChipSelection = (props) => {
+const GangOnboarding = (props) => {
   const [chips, setChips] = useState([]);
   const [selectedChip, setSelectedChip] = useState('1');
+  const [gangName, setGangName] = useState('');
+
+  const gang = props.gang;
 
   useEffect(() => {
     (async() => {
@@ -25,22 +28,23 @@ const ChipSelection = (props) => {
   const chipsToOptions = chips.map( (chip, index) => <option key={index} value={chip.id}>{`${chip.code} • ${chip.name}`}</option>);
 
   const disableSubmit = () => {
-    return !(parseInt(selectedChip) > 0);
+    return parseInt(selectedChip) === 0 || gangName.length === 0 ;
   }
 
   const handleSubmit = async () => {
     const chipData = chips.find(chip => chip.id === parseInt(selectedChip));
     if (chipData){
-      const gang = {
+      const updatedGang = {
         chip_name: chipData.name,
         chip_code: chipData.code,
         chip_symbol: chipData.symbol,
         chip_prefixed: chipData.prefixed,
-        chip_scale: chipData.scale
+        chip_scale: chipData.scale,
+        name: gangName
       }
 
       try{
-        const response = await axios.put('/api/gangs/0', { 'gang': gang });
+        const response = await axios.put(`/api/gangs/${gang.id}`, { 'gang': updatedGang });
         if (response.status === 200 && response.data && response.data.onboarded) {
           window.location.reload();
         }else{
@@ -56,6 +60,12 @@ const ChipSelection = (props) => {
 
   return (
     <div className='container'>
+
+      <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>
+      </div>
+
       <Select value={selectedChip} onChange={(e) => setSelectedChip(e.target.value)} name="selected-chip">
         { chipsToOptions }
       </Select>
@@ -67,4 +77,4 @@ const ChipSelection = (props) => {
   )
 }
 
-export default ChipSelection;
+export default GangOnboarding;

client/src/homies/Homies.js

@@ -62,7 +62,7 @@ const Homies = (props) => {
 
   return (
     <div className="container">
-      <NewHomieForm newHomiesSetter={setHomies} />
+      <NewHomieForm newHomiesSetter={setHomies} gang={props.gang} />
 
       <ul className="collapsible">
         { homiesData }

client/src/homies/NewHomieForm.js

@@ -10,6 +10,8 @@ const NewHomieForm = (props) => {
   const [homieImportance, setHomieImportance] = useState("");
   const [busy, setBusy] = useState(false);
 
+  const gang = props.gang;
+
   const disableAddButton = () => {
     return homieName.length === 0 ||
       homieImportance === "" ||
@@ -33,7 +35,8 @@ const NewHomieForm = (props) => {
       homie: {
         name: homieName,
         about: aboutHomie,
-        importance: parseInt(homieImportance)
+        importance: parseInt(homieImportance),
+        gang_id: gang.id
       }
     }
 
@@ -57,7 +60,7 @@ const NewHomieForm = (props) => {
   return (
     <div>
       <Collapsible id="new-homie-form-container">
-        <CollapsibleItem header={<strong>Introduce new homie to the Hood</strong>}>
+        <CollapsibleItem header={<strong>{`Introduce new homie to the ${gang.name} gang`}</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>