More navication working

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

client/package.json

@@ -4,10 +4,12 @@
   "private": true,
   "proxy": "http://localhost:11141",
   "dependencies": {
+    "@date-io/moment": "^1.3.13",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
+    "@material-ui/pickers": "^3.3.10",
     "@mui/icons-material": "^5.4.4",
     "@mui/material": "^5.6.0",
     "@mui/utils": "^5.4.4",
@@ -17,7 +19,7 @@
     "fast-deep-equal": "^3.1.3",
     "file-loader": "^6.2.0",
     "http-proxy-middleware": "^2.0.3",
-    "moment": "^2.29.1",
+    "moment": "^2.29.2",
     "moment-timezone": "^0.5.34",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

client/src/App.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import {
   Routes,
   Route,
+  useLocation
 } from "react-router-dom";
 
 import Container from '@mui/material/Container';
@@ -27,6 +28,11 @@ const App = () => {
   const [ loading, setLoading ] = useState(true);
   const [ googleApiKey, setGoogleApiKey ] = useState(undefined);
   const [ error, setError] = useState(undefined);
+  const location = useLocation();
+
+  useEffect(() => {
+    console.log(`app - path - `, location.pathname);
+  }, [location]);
 
   useEffect(() => {
     const effect = async () => {
@@ -72,7 +78,6 @@ const App = () => {
     effect();
   }, [csrfToken, setUser]);
 
-
   useEffect(() => {
     if (!csrfToken || googleApiKey) {
       return;
@@ -106,7 +111,7 @@ const App = () => {
       <GlobalContext.Provider value={{
         user, setUser, csrfToken, googleApiKey, 
         setError 
-        }}>
+      }}>
         <GoodTimesBar />
         <Container className="Content">
           { error && <Paper style={{padding: "0.5rem"}}>{error}</Paper> }
@@ -123,13 +128,15 @@ const App = () => {
             }
             { user && !user.mailVerified &&
               <Route path="/" element={
-              <Paper style={{padding: "0.5rem"}}>You need to verify your email via the link sent to {user.email}.</Paper>}/>
+              <Paper style={{padding: "0.5rem"}}>
+                You need to verify your email via the link sent to {user.email}.
+              </Paper>}/>
             }
             { !user && !loading &&
               <Route path="/" element={<SignIn />} />
             }
             { !user && loading &&
-              <Route path="/" element={<div>Loading...</div>} />
+              <Route path="/" element={<Paper>Loading...</Paper>} />
             }
           </Routes>
         </Container>

client/src/Dashboard.js

@@ -14,9 +14,8 @@ import { base } from "./Common.js";
 
 function Dashboard() {
   const navigate = useNavigate();
-  const { csrfToken, user, setUser } = useContext(GlobalContext);
+  const { csrfToken, user, setUser, setError } = useContext(GlobalContext);
   const [ groups, setGroups ] = useState([]);
-  const [ error, setError ] = useState(null);
 
   useEffect(() => {
     if (!user || !csrfToken) {
@@ -45,7 +44,7 @@ function Dashboard() {
     }
     
     effect();
-  }, [user, setGroups, csrfToken ]);
+  }, [user, setGroups, csrfToken, setError ]);
 
   const upcomingEvents = groups
     .filter(group => group.nextEvent.date > Date.now());
@@ -57,41 +56,9 @@ function Dashboard() {
         flexDirection: 'column',
         textAlign: 'left'
       }}>
-      <GlobalContext.Provider value={{user, setUser}}>
-        {upcomingEvents && upcomingEvents.length && 
-          <Paper style={{
-            flexDirection: 'column',
-            display: 'flex',
-            width: '100%',
-            marginTop: '0.5rem'
-          }}> 
-          <div style={{ fontWeight: 'bold', padding: '0.5rem' }}>
-            Upcoming events
-          </div>
       
-          { upcomingEvents
+      <GlobalContext.Provider value={{user, setUser}}>
-            .map((group) => {
+        { upcomingEvents && upcomingEvents.length !== 0 && 
-            return <Button key={group.id} 
-                onClick={() => navigate(`/${group.group}/${group.nextEvent.event}`)}
-                style={{
-                  flexDirection: 'column',
-                  display: 'flex',
-                  alignItems: 'flex-start',
-                  padding: '0 0.5rem 0.5rem 0.5rem'
-                }
-              }>
-              <div key={group.id} style={{
-                fontWeight: 'bold'
-              }}>{group.name}</div>
-              { group.nextEvent.date &&
-                <div>Next event <Moment fromNow date={group.nextEvent.date} /> on <Moment format={'MMMM Do YYYY, h: mm: ss a'} date={group.nextEvent.date}/>.</div>
-              }
-              </Button>;
-            })
-          }
-          </Paper>
-        }
-        { groups && groups.length && 
           <Paper style={{
             flexDirection: 'column',
             display: 'flex',
@@ -99,25 +66,67 @@ function Dashboard() {
             marginTop: '0.5rem'
           }}> 
             <div style={{ fontWeight: 'bold', padding: '0.5rem' }}>
-            Groups
+              Upcoming events
-          </div>
+            </div>
-          { groups
+
-            .map((group) => {
+            { upcomingEvents
+              .map((group) => {
               return <Button key={group.id} 
-                onClick={() => navigate(`/${group.group}`)}
+                  onClick={() => navigate(`/${group.group}/${group.nextEvent.event}`)}
-                style={{
+                  style={{
-                  flexDirection: 'column',
+                    flexDirection: 'row',
-                  display: 'flex',
+                    display: 'flex',
-                  alignItems: 'flex-start',
+                    justifyContent: 'flex-start',
-                  padding: '0 0.5rem 0.5rem 0.5rem'
+                    alignItems: 'center',
-                }
+                    textAlign: 'left',
+                    padding: '0 0.5rem 0.5rem 0.5rem'
+                  }
                 }>
-                <div key={group.id} style={{
+                <div style={{
-                  fontWeight: 'bold'
+                  fontWeight: 'bold',
+                  marginRight: '0.5rem',
+                  maxWidth: '10rem',
+                  minWidth: '10rem',
+                  whiteSpace: 'nowrap',
+                  textOverflow: 'ellipsis',
+                  overflow: 'hidden'
                 }}>{group.name}</div>
-              </Button>;
+                { group.nextEvent.date &&
-            })
+                  <div>Next event <Moment fromNow date={group.nextEvent.date} /> on <Moment format={'MMMM Do YYYY, h: mm: ss a'} date={group.nextEvent.date}/>.</div>
-          }
+                }
+                </Button>;
+              })
+            }
+          </Paper>
+        }
+
+        { groups && groups.length !== 0 && 
+          <Paper style={{
+            flexDirection: 'column',
+            display: 'flex',
+            width: '100%',
+            marginTop: '0.5rem'
+          }}> 
+            <div style={{ fontWeight: 'bold', padding: '0.5rem' }}>
+              Groups
+            </div>
+            { groups
+              .map((group) => {
+                return <Button key={group.id}
+                  onClick={() => navigate(`/${group.group}`)}
+                  style={{
+                    flexDirection: 'column',
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    padding: '0 0.5rem 0.5rem 0.5rem'
+                  }
+                  }>
+                  <div key={group.id} style={{
+                    fontWeight: 'bold'
+                  }}>{group.name}</div>
+                </Button>;
+              })
+            }
           </Paper>
         }
       </GlobalContext.Provider>

client/src/Event.js

@@ -1,8 +1,12 @@
 import React, { useState, useEffect, useContext } from "react";
 import Paper from '@mui/material/Paper';
+import MomentUtils from '@date-io/moment'
+import { Calendar, MuiPickersUtilsProvider, ClockView } from '@material-ui/pickers';
+import Moment from 'react-moment';
+import moment from 'moment';
+
 import {
-  useParams,
+  useParams
-  useNavigate
 } from "react-router-dom";
 
 import './Event.css';
@@ -41,68 +45,77 @@ function Event({ groupId }) {
       setEvent(data[0]);
     }
     effect();
-  }, [eventId, csrfToken, event, setError]);
+  }, [eventId, groupId, csrfToken, event, setError]);
 
-  const showEvent = (event) => {
+  const showEvent = (event) => <div className="Event">
-    const fields = Object.getOwnPropertyNames(event)
+    <div style={{display: 'flex', flexDirection: 'row'}}>
-      .filter(field => event[field])
+      <div>Event: </div>
-      .map(field => {
+      <div style={{ fontWeight: 'bold' }}>{event.name}</div>
-        return <div key={field}
+    </div>
-          style={{
+    <div style={{
-            display: 'flex',
+      display: 'flex',
-            flexDirection: 'row',
+      flexDirection: 'row'
-            alignItems: 'flex-start',
+    }}>
-            width: '100%'
+
-          }}>
+      <div style={{
+        flexDirection: 'column', 
+        padding: '0.5rem',
+        display: 'flex',
+        alignItems: 'flex-start',
+        textAlign: 'center',
+        height: 'calc(3rem + 146px)',
+        minHeight: 'calc(3rem + 146px)',
+        width: 'calc(162px)',
+        minWidth: 'calc(162px)',
+        boxSizing: 'border-box'
+      }}>
+        <div style={{
+          transformOrigin: '0 0', 
+          transform: 'scale(0.5)',
+          height: 'calc(2rem + 292px)',
+          margin: '0 calc((-50% * (1 - 0.5)) / 2) calc((-50% * (1 - 0.5)) / 2) 0'
+        }}>
+          <Calendar
+            variant='static'
+            date={moment(event.date)}
+            onChange={() => {}}
+            maxDate={moment(event.date)}
+            minDate={moment(event.date)}
+          />
           <div style={{
-            display: 'flex',
+            fontSize: '2em',
-            alignSelf: 'flex-start',
+            fontWeight: 'bold'
-            fontWeight: 'bold',
-            minWidth: '8rem'
-          }}>{field}</div>
-          <div style={{
-            display: 'flex',
-            alignSelf: 'flex-start',
-            textAlign: 'left'
           }}>
-            { typeof event[field] === 'string' 
+            <Moment value={event.date} format='LT' />
-            && event[field].match(/^http.*/) 
-            && <a href={event[field]}>{field.toUpperCase()}</a> }
-            { typeof event[field] === 'string'
-            && !event[field].match(/^http.*/) 
-            && event[field] }
-            { typeof event[field] === 'number' && event[field]}
           </div>
         </div>
-      } );
+        
-    return <div key={event.id} style={{
+      </div>
-        display: 'flex',
+      <div>
-        flexDirection: 'row',
+        <div>{event.description}</div>
-        alignItems: 'center',
+        <div>
-        justifyContent: 'space-between',
+          Next event is occurring <Moment fromNow date={event.date} /> on <Moment format={'MMMM Do YYYY, h: mm: ss a'} date={event.date} />.
-      }}>
+        </div>
-      <div style={{
+      </div>
-        display: 'flex',
+    </div>
-        flexDirection: 'column',
+  </div>;
-        alignItems: 'center'
-      }}>{fields}</div>
-    </div>;
-  };
   
   if (!event) {
     return <>No event</>;
   }
 
   return (
-    <Paper className="Event" style={{
+    <div className="Event" style={{
       display: 'flex',
       flexDirection: 'column',
       padding: '0.5rem',
       marginTop: '0.25rem',
       marginBottom: '0.25rem'
     }}>
-      { showEvent(event) }
+      <MuiPickersUtilsProvider utils={MomentUtils}>
-    </Paper>
+        { showEvent(event) }
+      </MuiPickersUtilsProvider>
+    </div>
   );
 }
 

client/src/GoodTimesBar.css

@@ -0,0 +1,8 @@
+.DashboardMenu {
+  display: flex;
+  flex-direction: column;
+}
+
+.DashboardMenu .MenuItem {
+  padding: 0 0.5rem 0 0.5rem;
+}

client/src/GoodTimesBar.js

@@ -5,23 +5,29 @@ import Toolbar from '@mui/material/Toolbar';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import Menu from '@mui/material/Menu';
+import MenuList from '@mui/material/MenuList';
 import MenuIcon from '@mui/icons-material/Menu';
 import Container from '@mui/material/Container';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
+import Popper from '@mui/material/Popper';
+import Grow from '@mui/material/Grow';
+import Paper from '@mui/material/Paper';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
 import {
   useNavigate,
 } from "react-router-dom";
 
 import Gravatar from 'react-gravatar'
-
+import "./GoodTimesBar.css";
 import { GlobalContext } from "./GlobalContext.js";
 import { base } from "./Common.js";
 
 const GoodTimesBar = () => {
-  const { csrfToken, user, setUser } = useContext(GlobalContext);
+  const { csrfToken, user, setUser, setError } = useContext(GlobalContext);
   const [ settings, setSettings ] = useState([]);
+  const [ menu, setMenu] = useState([]);
   const navigate = useNavigate();
 
   const [anchorElNav, setAnchorElNav] = React.useState(null);
@@ -49,6 +55,7 @@ const GoodTimesBar = () => {
       });
       const data = await res.json();
       if (res.status >= 400) {
+        setError(data.message ? data.message : res.statusText);
         return;
       }
       setUser(null);
@@ -61,9 +68,11 @@ const GoodTimesBar = () => {
       setAnchorElUser(null);
       navigate('/');
       break;
+
+    default: break;
     }
     console.log(event);
-  }, [csrfToken, setUser]);
+  }, [csrfToken, setUser, navigate, setError]);
 
   const handleCloseNavMenu = () => {
     setAnchorElNav(null);
@@ -79,14 +88,23 @@ const GoodTimesBar = () => {
     if (user) {
       setSettings([/*'Profile', 'Account',*/ 'Dashboard', 'Sign Out']
         .map((setting) => (
-          <MenuItem key={setting} onClick={(e) => handleUserMenu(e, setting)}>
+          <MenuItem className='MenuItem'
+            key={`menu-${setting}`} 
+            onClick={(e) => handleUserMenu(e, setting)}>
             <Typography textAlign="center">{setting}</Typography>
           </MenuItem>
         )));
+      setMenu(['Dashboard']
+        .map((menu) => (
+          <MenuItem key={`toolbar-${menu}`} onClick={(e) => handleUserMenu(e, menu)}>
+            <Typography textAlign="center">{menu}</Typography>
+          </MenuItem>
+        )));
     } else {
+      setMenu([]);
       setSettings([]);
     }
-  }, [user, setSettings]);
+  }, [user, setSettings, handleUserMenu]);
 
   return (
     <AppBar position="static">
@@ -141,7 +159,8 @@ const GoodTimesBar = () => {
             GOODTIMES
           </Typography>
 
-          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+          <Box style={{ flexDirection: 'row', marginLeft: '2rem' }} sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+            { menu }
           </Box>
 
           <Box sx={{ flexGrow: 0 }}>
@@ -160,22 +179,18 @@ const GoodTimesBar = () => {
                 </IconButton>
               </Tooltip>
               <Menu
-                sx={{ mt: '45px' }}
+                id="basic-menu"
-                id="menu-appbar"
-                anchorEl={anchorElUser}
-                anchorOrigin={{
-                  vertical: 'top',
-                  horizontal: 'right',
-                }}
-                keepMounted
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'right',
-                }}
                 open={Boolean(anchorElUser)}
+                anchorEl={anchorElUser}
                 onClose={handleCloseUserMenu}
-              >
+                MenuListProps={{
-                {settings}
+                  'aria-labelledby': 'basic-button',
+                }}>
+                <MenuList
+                  className="DashboardMenu"
+                  aria-labelledby="composition-button">
+                  {settings}
+                </MenuList>
               </Menu>
             </>}
           </Box>

client/src/Group.js

@@ -112,10 +112,10 @@ function Group() {
       flexDirection: 'column',
       textAlign: 'left',
     }}>
+      <div style={{ fontWeight: 'bold' }}>{group.name}</div>
       <Routes>
         <Route path="/:event" element={<Event groupId={groupId}/>} />
         <Route path="/" element={ group && <>
-          <div style={{fontWeight: 'bold'}}>{group.name}</div>
           <div>Locations</div>
           { locations.map(location =>
             <Location location={location} key={location.id}/>) }

client/src/Location.js

@@ -8,6 +8,22 @@ import {
 import './Location.css';
 import { GlobalContext } from "./GlobalContext.js";
 import { base } from "./Common.js";
+/*
+Creating a location:
+* Go to Google Maps and find the location you want, selecting the
+  destination on the map. This updates the URL to include the longitude
+  and latitude.
+* Copy the full URL (CTRL-L, CTRL-A, CTRL-C)
+* Paste the URL here: ...
+* Backend scrapes Lat and Lon from URL and uses that with the name of
+  the location to create a marker on the static map view
+*/
+
+const CreateLocation = () => {
+  return <Paper className="CreateLocation">
+
+  </Paper>;
+}
 
 function Location(props) {
   const propLocation = props.location;

server/event-data.js

@@ -2,6 +2,7 @@ const originalEvents = [ {
   groupId: 1,
   name: 'Tuesday',
   event: 'tuesday',
+  description: 'Get together every Tuesday with friends for happy hour!',
   date: Date.now() + 86400 * 14 * 1000 /* 2 weeks from now */
 } ];
 originalEvents.forEach((item, index) => item.id = index + 1);