add gang details page with rename function

client/src/App.js

@@ -13,13 +13,15 @@ import {
   HOMIE_FLOW,
   HOMIES,
   HOMIE_MOVE_MONEY,
-  HOMIE_PUT_IN_WORK
+  HOMIE_PUT_IN_WORK,
+  GANG_DETAILS
 } from './RouteNames';
 import PutInWork from "./cash/PutInWork";
 import GangOnboarding from "./gangOnboarding/GangOnboarding";
 import Gangs from './gangs/Gangs';
 import {errorToast} from "./common/errorHelpers";
 import MoveMoney from "./homies/MoveMoney";
+import GangDetails from "./gangs/GangDetails";
 
 
 const App = (props) => {
@@ -27,23 +29,23 @@ const App = (props) => {
   const [gangs, setGangs] = useState([]);
   const [selectedGang, setSelectedGang] = useState({});
 
-  useEffect(() => {
-    (async() => {
-      try {
-        setLoading(true);
-        const response = await axios.get(`/api/gangs`);
-        if (response.status === 200 && response.data){
-          setGangs(response.data);
-          setSelectedGang(response.data[0]);
-        }else{
-          errorToast();
-        }
-      } catch (e) {
+  const updateGangsEffect = async () => {
+    try {
+      setLoading(true);
+      const response = await axios.get(`/api/gangs`);
+      if (response.status === 200 && response.data){
+        setGangs(response.data);
+        setSelectedGang(response.data[0]);
+      }else{
         errorToast();
       }
-      setLoading(false);
-    })();
-  }, []);
+    } catch (e) {
+      errorToast();
+    }
+    setLoading(false);
+  }
+
+  useEffect(updateGangsEffect, []);
 
   const routes = ([
       <Route key='1' exact path={CRIB} component={() => <Cash gang={selectedGang} />} />,
@@ -51,7 +53,16 @@ const App = (props) => {
       <Route key='3' exact path={HOMIES} component={() => <Homies gang={selectedGang} />} />,
       <Route key='4' path={HOMIE_FLOW} component={() => <Flow gang={selectedGang} />} />,
       <Route key='5' path={HOMIE_MOVE_MONEY} component={() => <MoveMoney gang={selectedGang} />} />,
-      <Route key='6' path={HOMIE_PUT_IN_WORK} component={() => <PutInWork gang={selectedGang} />} />
+      <Route key='6' path={HOMIE_PUT_IN_WORK} component={() => <PutInWork gang={selectedGang} />} />,
+      <Route key='7' path={GANG_DETAILS} component={(props) => {
+        const gang_id = props.match.params['gang_id'];
+        const gang = gangs.find(gang => gang.id === parseInt(gang_id));
+        if (gang){
+          return <GangDetails gang={gang} updateGangs={updateGangsEffect} />
+        }else{
+          return null;
+        }
+      }} />
     ]
   );
 

client/src/RouteNames.js

@@ -4,3 +4,4 @@ export const HOMIE_MOVE_MONEY = '/homie/:homie_id/move-money';
 export const HOMIE_PUT_IN_WORK = '/homie/:homie_id/put-in-work';
 export const HOMIE_FLOW = '/homie/:homie_id/flow';
 export const GANGS = '/gangs';
+export const GANG_DETAILS = '/gangs/:gang_id';

client/src/gangs/GangDetails.js

@@ -0,0 +1,54 @@
+import React, {useState} from 'react';
+import {Button} from "react-materialize";
+import axios from 'axios';
+import {errorToast} from "../common/errorHelpers";
+import {withRouter} from 'react-router-dom';
+import {GANGS} from "../RouteNames";
+import M from 'materialize-css';
+
+const GangDetails = (props) => {
+  const gang = props.gang;
+
+  const [gangName, setGangName] = useState(gang.name);
+
+  const disableSubmit = () => gangName.length === 0;
+
+  const updateGang = async () => {
+    const updatedGang = {
+      name: gangName
+    }
+
+    try{
+      const response = await axios.put(`/api/gangs/${gang.id}`, { 'gang': updatedGang });
+      if (response.status === 200 && response.data) {
+        props.updateGangs();
+        props.history.push(GANGS);
+        M.toast({html: 'Done!'});
+      }else{
+        errorToast();
+      }
+    }catch (e) {
+      errorToast();
+    }
+  }
+
+  return (
+    <div className="container">
+      <br />
+
+      <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 active" htmlFor="gang-name">Gang name</label>
+        <span className="helper-text" data-error="Yo! Name the gang" />
+      </div>
+
+      <div>
+        <Button disabled={disableSubmit()} waves="light" onClick={updateGang}>
+          Make it done
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default withRouter(GangDetails);

client/src/gangs/Gangs.js

@@ -5,6 +5,7 @@ import {errorToast} from "../common/errorHelpers";
 import YesNoModal from "../common/YesNoModal";
 import {Button} from "react-materialize";
 import M from "materialize-css";
+import {withRouter} from 'react-router-dom';
 
 const Gangs = (props) => {
   const gangs = props.gangs;
@@ -35,6 +36,8 @@ const Gangs = (props) => {
               <div className="grey-text">{ `${gang.about || '[no about]'} • ${gang.chip_name} (${gang.chip_code})`}</div>
             </div>
 
+            <Button flat className="push" icon="edit" onClick={() => props.history.push(`/gangs/${gang.id}`)} />
+
             <YesNoModal
               body={"Maan, y'a sure about this?"}
               yesAction={() => deleteGang(gang.id)}
@@ -56,4 +59,4 @@ const Gangs = (props) => {
   )
 }
 
-export default Gangs;
+export default withRouter(Gangs);