Group and Location fetching hooked into Groups / Locations

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/Group.js

@@ -11,9 +11,10 @@ import { base } from "./Common.js";
 import { Location } from "./Location.js";
 
 function Group() {
-  const { csrfToken, user, setUser } = useContext(GlobalContext);
+  const { csrfToken, user } = useContext(GlobalContext);
   const groupId = useParams().group;
-  const [ group, setGroup ] = useState(null);
+  const [ group, setGroup ] = useState(undefined);
+  const [ events, setEvents ] = useState(null);
   const [ error, setError ] = useState(null);
   const [ locations, setLocations ] = useState([]);
 
@@ -46,7 +47,6 @@ function Group() {
     effect();
   }, [user, setGroup, groupId, csrfToken]);
 
-
   useEffect(() => {
     if (!user || !groupId || !csrfToken) {
       return;
@@ -71,7 +71,36 @@ function Group() {
       if (!data) {
         return;
       }
-      setGroup(data);
+      setEvents(data);
+    };
+    effect();
+  }, [user, setEvents, groupId, csrfToken]);
+
+  useEffect(() => {
+    if (!user || !groupId || !csrfToken) {
+      return;
+    }
+
+    const effect = async () => {
+      const res = await window.fetch(
+        `${base}/api/v1/groups/${groupId}`, {
+        method: 'GET',
+        cache: 'no-cache',
+        credentials: 'same-origin',
+        headers: {
+          'Content-Type': 'application/json',
+          'CSRF-Token': csrfToken
+        }
+      });
+      const data = await res.json();
+      if (res.status >= 400) {
+        setError(data.message ? data.message : res.statusText);
+        return;
+      }
+      if (!data) {
+        return;
+      }
+      setGroup(data[0]);
     };
     effect();
   }, [user, setGroup, groupId, csrfToken]);
@@ -79,11 +108,12 @@ function Group() {
   return (
     <Paper className="Group" style={{
       display: 'flex',
-      flexDirection: 'column'
+      flexDirection: 'column',
+      textAlign: 'left',
     }}>
       { error && <div>{error}</div>}
-      { !error && <>
-        <div>Group: {groupId}</div>
+      { !error && group && <>
+        <div style={{fontWeight: 'bold'}}>{group.name}</div>
         <div>Locations</div>
         { locations.map(location =>
           <Location location={location} key={location.id}/>) }

client/src/Location.js

@@ -104,6 +104,7 @@ function Location(props) {
             { typeof location[field] === 'string'
             && !location[field].match(/^http.*/) 
             && location[field] }
+            { typeof location[field] === 'number' && location[field]}
           </div>
         </div>
       } );
@@ -133,7 +134,10 @@ function Location(props) {
   return (
     <Paper className="Location" style={{
       display: 'flex',
-      flexDirection: 'column'
+      flexDirection: 'column',
+      padding: '0.5rem',
+      marginTop: '0.25rem',
+      marginBottom: '0.25rem'
     }}>
       { error && <div>{error}</div>}
       { !error && <>

server/app.js

@@ -39,6 +39,8 @@ app.use(session({
 }));
 
 const csrfDebug = (req) => {
+  return;
+  // eslint-disable-next-line no-unreachable
   console.log('CSRF debug: ', {
     method: req.method,
     path: req.path,

server/routes/groups.js

@@ -1,20 +1,35 @@
 const express = require('express'),
   router = express.Router();
 
-router.get('/', async (req, res/*, next*/) => {
-  return res.status(200).send(
-    [ {
-      id: 1,
-      ownerId: 1,
-      name: 'Beer Tuesday',
-      group: 'beer-tuesday',
-      nextEvent: Date.now() + 86400 * 14 * 1000 /* 2 weeks from now */
-    } ]
-  );
+const originalGroups = [ {
+  id: 1,
+  ownerId: 1,
+  name: 'Beer Tuesday',
+  group: 'beer-tuesday',
+  nextEvent: Date.now() + 86400 * 14 * 1000 /* 2 weeks from now */
+} ];
+
+router.get('/:group?', async (req, res/*, next*/) => {
+  const { group } = req.params;
+  if (!group) {
+    return res.status(200).send(originalGroups);
+  }
+  const found = originalGroups.find((item) => {
+    if (typeof group === 'number') {
+      return item.id === group;
+    }
+    if (typeof group === 'string') {
+      return item.group === group;
+    }
+    return false;
+  });
+  if (!found) {
+    return res.status(404).send({ message: `Unable to find ${group}.`});
+  }
+  return res.status(200).send([ found ]);
 });
 
-
-router.get('/:groupId/events', async (req, res/*, next*/) => {
+router.get('/:group/events', async (req, res/*, next*/) => {
   return res.status(200).send(
     [{
       id: 1,
@@ -24,17 +39,13 @@ router.get('/:groupId/events', async (req, res/*, next*/) => {
   );
 });
 
-router.post('/:groupId', async (req, res) => {
-  const { groupId } = req.params;
-  if (!groupId) {
+router.post('/:group', async (req, res) => {
+  const { group } = req.params;
+  if (!group) {
     return res.status(400).send({ message: `Invalid group.`});
   }
   
-  const group = {
-    id: groupId
-  };
-  
-  return res.status(200).send({ id: group.id });
+  return res.status(200).send({ id: group });
 });
 
 

server/routes/locations.js

@@ -5,6 +5,7 @@ const express = require('express');
 const router = express.Router();
 
 const originalLocations = require('../location-data.js');
+originalLocations.forEach((item, index) => item.id = index + 1);
 
 router.put('/', (req, res) => {
   const location = req.body;