Show gang switch

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='2' exact path={HOMIES} component={() => <Homies />} />,
-      <Route key='3' path={HOMIE_FLOW} component={() => <Flow gang={gang} />} />,
+      <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 />} />
     ]
   );
 
-  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>