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>