Start plumbing in non-location votable items

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

client/src/Dashboard.js

@@ -47,7 +47,7 @@ function Dashboard() {
   }, [user, setGroups, csrfToken, setError ]);
 
   const upcomingEvents = groups
-    .filter(group => group.nextEvent.date > Date.now());
+    .filter(group => group.nextEvent && group.nextEvent.date > Date.now());
   
   return (
     <div className="Dashboard"

client/src/Event.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useContext } from "react";
 import MomentUtils from '@date-io/moment'
 import { Calendar, MuiPickersUtilsProvider } from '@material-ui/pickers';
 import Moment from 'react-moment';
-import moment from 'moment';
+import moment from 'moment-timezone';
 
 import {
   useParams
@@ -85,7 +85,7 @@ function Event({ groupId }) {
             fontSize: '2em',
             fontWeight: 'bold'
           }}>
-            <Moment value={event.date} format='LT' />
+            <Moment local date={event.date} format='LT' />
           </div>
         </div>
         
@@ -93,7 +93,9 @@ function Event({ groupId }) {
       <div>
         <div className='what'>{event.description}</div>
         <div className='when'>
-          Next event is occurring <Moment fromNow date={event.date} /> on <Moment format={'MMMM Do YYYY, h: mm: ss a'} date={event.date} />.
+          Next event is occurring <Moment fromNow 
+            date={moment(event.date).tz('Etc/GMT')} /> on <Moment 
+            local format={'MMMM Do YYYY, h: mm: ss a'} date={moment(event.date).tz('Etc/GMT')} />.
         </div>
         { event.votingBegins === 'day-of' && 
           <div>Voting for location begins the day of the event.</div>

client/src/Group.js

@@ -16,8 +16,9 @@ function Group() {
   const { csrfToken, user, setError } = useContext(GlobalContext);
   const groupId = useParams().group;
   const [ group, setGroup ] = useState(undefined);
+  // eslint-disable-next-line no-unused-vars
   const [ events, setEvents ] = useState(null);
-  const [ locations, setLocations ] = useState([]);
+  const [ voteItems, setVoteItems ] = useState([]);
 
   useEffect(() => {
     if (!user) {
@@ -43,7 +44,7 @@ function Group() {
       if (!data) {
         return;
       }
-      setLocations(data);
+      setVoteItems(data);
     };
     effect();
   }, [user, setGroup, groupId, csrfToken, setError]);
@@ -120,9 +121,15 @@ function Group() {
       <Routes>
         <Route path="/:event" element={<Event groupId={groupId}/>} />
         <Route path="/" element={ group && <>
-          <div>Locations</div>
+          <div>Voting</div>
-          { locations.map(location =>
+          { voteItems.map(item =>
-            <Location location={location} key={location.id}/>) }
+            group.votingType === 'locations'
+              ? <Location location={item} key={item.id}/>
+              : <Paper key={item.id}>
+                <div>{item.name}</div>
+                { item.note ? <div>{item.note}</div> : <></> }
+                { item.url ? <div><a href={item.url}>URL</a></div> : <></> }
+                </Paper>) }
         </> }/>
       </Routes>
     </Paper>

client/src/Location.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useContext } from "react";
 import Paper from '@mui/material/Paper';
-
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
 
 import './Location.css';
 import { GlobalContext } from "./GlobalContext.js";
@@ -17,8 +18,30 @@ Creating a location:
 */
 
 const CreateLocation = () => {
-  return <Paper className="CreateLocation">
+  const [ latitude, setLatitude ] = useState('Not set');
+  const [ longitude, setLongitude ] = useState('Not set');
 
+  return <Paper className="CreateLocation" style={{ 
+    textAlign: 'left', 
+    alignItems: 'flex-start' 
+  }}>
+    <div>Go to <a href='https://maps.google.com'>maps.google.com</a> and
+    find the location you want, selecting the desintation on the map. This
+    updates the URL to include the longitude and latitude.</div>
+    <div>Copy the full URL (CTRL-L, CTRL-A, CTRL-C). Paste the URL here (CTRL-V): 
+      <TextField
+        margin="normal"
+        required
+        fullWidth
+        id="url"
+        label="Google Map URL"
+        name="url"
+        autoComplete="url"
+        autoFocus
+      />
+    </div>
+    <div>Longitude: {longitude}, Latitude: {latitude}</div>
+    <Button>ok</Button>
   </Paper>;
 }
 
@@ -123,6 +146,7 @@ function Location(props) {
       marginTop: '0.25rem',
       marginBottom: '0.25rem'
     }}>
+      { <CreateLocation/> }
       { showLocation(location) }
     </Paper>
   );

client/src/SignIn.js

@@ -85,15 +85,15 @@ export default function SignIn() {
           }}
         >
           <Typography>
-            <p>While those familiar with the original Beer App may recall
+            While those familiar with the original Beer App may recall
-              an account was not needed to particpate, now that
+            an account was not needed to particpate, now that
-              the audience is larger, events and contact information for
+            the audience is larger, events and contact information for
-              those participating are now restricted to only those that
+            those participating are now restricted to only those that
-              have verified an email address and created an account
+            have verified an email address and created an account
-              on Goodtimes.</p>
+            on Goodtimes.
 
-            <p>Contact information is only shared with those that are in
+            Contact information is only shared with those that are in
-              groups that you join.</p>
+            groups that you join.
           </Typography>
         </div>
       </div>

server/event-data.js

@@ -1,3 +1,24 @@
+const moment = require('moment-timezone');
+
+moment.tz.setDefault(process.env.TZ);
+
+const getDayWeeksOut = (day, weeks, time) => {
+  const today = moment().day();
+  if (day >= today) {
+    weeks--;
+  }
+  let date;
+
+  date = moment().day(day);
+  if (weeks) {
+    date = date.add(weeks, 'weeks');
+  }
+  date.set('hours', Math.floor(time));
+  date.set('minutes', Math.round(time * 60 - Math.floor(time) * 60));
+  date.set('seconds', 0);
+  return date.valueOf();
+};
+
 const originalEvents = [ {
   groupId: 1,
   name: 'Thursday Happy Hour',
@@ -5,7 +26,18 @@ const originalEvents = [ {
   votingBegins: 'day-of',
   votingCloses: '3:00 PM',
   description: 'Get together every Thursday with friends for happy hour!',
-  date: Date.now() + 86400 * 14 * 1000 /* 2 weeks from now */
+  date: getDayWeeksOut(4, 2, 17.5),
+  votingType: 'locations'
+}, {
+  groupId: 2,
+  name: 'Wednesday Virtual Gaming',
+  event: 'wednesday-virtual-gaming',
+  votingBegins: 'day-of',
+  votingCloses: undefined,
+  description: 'Let\'s play some online games!',
+  date: getDayWeeksOut(3, 1, 19),
+  votingType: 'text'
 } ];
+
 originalEvents.forEach((item, index) => item.id = index + 1);
 module.exports = originalEvents;

server/group-data.js

@@ -3,10 +3,15 @@ const originalGroups = [ {
   ownerId: 1,
   name: 'Beer Thirstday',
   group: 'beer-thirstday',
+  public: true
+}, {
+  ownerId: 1,
+  name: 'Game Night',
+  group: 'game-night',
+  public: false
 } ];
 
 originalGroups[0].nextEvent = originalEvents[0];
-originalEvents.forEach(item => item.groupId = 1);
 originalGroups.forEach((item, index) => item.id = index + 1);
 
 module.exports = originalGroups;

server/package-lock.json

@@ -24,6 +24,7 @@
         "handlebars": "^4.7.7",
         "method-override": "^3.0.0",
         "moment": "^2.24.0",
+        "moment-timezone": "^0.5.34",
         "morgan": "^1.9.1",
         "node-fetch": "^2.6.0",
         "node-gzip": "^1.1.2",

server/package.json

@@ -24,6 +24,7 @@
     "handlebars": "^4.7.7",
     "method-override": "^3.0.0",
     "moment": "^2.24.0",
+    "moment-timezone": "^0.5.34",
     "morgan": "^1.9.1",
     "node-fetch": "^2.6.0",
     "node-gzip": "^1.1.2",