enable add/remove homie

client/src/homies/Homies.js

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+import { withRouter } from 'react-router-dom';
+import axios from 'axios';
+import { errorToast } from "../common/errorHelpers";
+import NewHomieForm from './NewHomieForm';
+import { Button } from 'react-materialize';
+import M from 'materialize-css';
+import YesNoModal from "../common/YesNoModal";
+
+const Homies = (props) => {
+  const [homies, setHomies] = useState([]);
+
+  useEffect(() => {
+    (async() => {
+      try {
+        const response = await axios.get(`/api/homies`);
+        if (response.status === 200 && response.data){
+          setHomies(response.data);
+        }else{
+          errorToast();
+        }
+      } catch (e) {
+        errorToast();
+      }
+    })();
+  }, []);
+
+  const deleteHomie = async (id) => {
+    try {
+      const response = await axios.delete(`/api/homies/${id}`);
+      if (response.status === 200 && response.data){
+        setHomies(response.data);
+        M.toast({ html: "See y'a on the other side Homie" });
+      }else{
+        errorToast();
+      }
+    }catch (e) {
+      console.log(e);
+      errorToast();
+    }
+  }
+
+  const homiesData = homies.map((homie, index) => {
+    return (
+      <li key={index}>
+        <div className="collapsible-header">
+          <div className="flex-row opposite-sides-content">
+            <div className="flex-col">
+              <div>{ homie.name }</div>
+              <div className="grey-text">{ homie.about }</div>
+            </div>
+
+            <YesNoModal
+              body={"Maan, y'a sure about this?"}
+              yesAction={() => deleteHomie(homie.id)}
+              triggerNode={<Button flat node="button" icon="delete" />} />
+          </div>
+        </div>
+      </li>
+    )
+  });
+
+  return (
+    <div className="container">
+      <NewHomieForm newHomiesSetter={setHomies} />
+
+      <ul className="collapsible">
+        { homiesData }
+      </ul>
+    </div>
+  )
+}
+
+export default withRouter(Homies);