add gang details page with rename function

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);