Move date manipulation out of client

Author: theholla

.eslintrc

@@ -30,7 +30,7 @@
   },
   "settings": {
     "react": {
-      "version": "detect"
+      "version": "16.13.1"
     }
   }
 }

.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+deploy.md
+
 # webserver
 node_modules
 coverage

ROADMAP.md

@@ -2,23 +2,19 @@
 
 ## Next Steps
 
-- [] Run through [Express best practices](http://expressjs.com/en/advanced/best-practice-performance.html) and implement other improvements for production server
-- [] Run through [a11y project checklist](https://a11yproject.com/checklist/) to identify/address gaps in accessibility (Lighthouse audit score is 92 mobile, 98 web)
-- [] BUG: Handle singular labels ("1 rides")
-- [] BUG: Insert ride "day of week" meta in server to avoid browser specific date math
-- [] Show day of week in event list to instill trust in filter
-- [] Improve map performance, it's too slow
-- [] Make navbar fixed at top of page
-- [] Scroll to event in list when click on map marker
-- [] Add "clear/reset" filters
-- [] Add filters to controls: organizer, audience, location name, area (PDX/Vancouver), cancelled, duration, time of day
-- [] Add toggle: sort by distance vs date
-- [x] Add "use my location" toggle instead of asking for location on page load
-- [] Only display distance when location enabled
-- [] Make mapCenter draggable and/or drag map to filter
-- [] Add filter to map: expandable radius
-- [] Add button: report a problem
-- [] Merge duplicates (repeating rides, example: TNR every thursday)
+- Run through [Express best practices](http://expressjs.com/en/advanced/best-practice-performance.html) and implement other improvements for production server
+- Run through [a11y project checklist](https://a11yproject.com/checklist/) to identify/address gaps in accessibility (Lighthouse audit score is 92 mobile, 98 web)
+- Show day of week in event list to instill trust in filter
+- Improve map performance, it's too slow
+- Make navbar fixed at top of page
+- Scroll to event in list when click on map marker
+- Add "clear/reset" filters
+- Add filters to controls: organizer, audience, location name, area (PDX/Vancouver), cancelled, duration, time of day
+- Add toggle: sort by distance vs date
+- Make mapCenter draggable and/or drag map to filter
+- Add filter to map: expandable radius
+- Add button: report a problem
+- Merge duplicates (repeating rides, example: TNR every thursday)
 
 ## Cool ideas for later
 

client/package-lock.json

@@ -15,8 +15,8 @@
     ]
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.29",
-    "@fortawesome/free-solid-svg-icons": "^5.13.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
@@ -28,14 +28,14 @@
     "react-dom": "^16.13.1",
     "react-leaflet": "^2.7.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.0",
-    "typescript": "^3.9.6"
+    "react-scripts": "^3.4.3",
+    "typescript": "^3.9.7"
   },
   "devDependencies": {
     "@types/jest": "^24.9.1",
-    "@types/leaflet": "^1.5.15",
-    "@types/node": "^12.12.48",
-    "@types/react": "^16.9.41",
+    "@types/leaflet": "^1.5.17",
+    "@types/node": "^12.12.54",
+    "@types/react": "^16.9.48",
     "@types/react-dom": "^16.9.8",
     "@types/react-leaflet": "^2.5.2",
     "@types/react-router-dom": "^5.1.5"

client/package.json

@@ -9,7 +9,7 @@ function mockFunc(): void {
 
 test('renders the start input field', () => {
   const { getByLabelText } = render(
-    <Controls data={{ events: [], start: '', end: '' }} handleEventsFiltered={mockFunc} />
+    <Controls data={{ events: [], start: '', end: '' }} updateMapCenter={mockFunc} handleEventsFiltered={mockFunc} />
   );
   const startDatePicker = getByLabelText(/from/i);
   expect(startDatePicker).toBeInTheDocument();
@@ -18,7 +18,7 @@ test('renders the start input field', () => {
 
 test('renders the end input field', () => {
   const { getByLabelText } = render(
-    <Controls data={{ events: [], start: '', end: '' }} handleEventsFiltered={mockFunc} />
+    <Controls data={{ events: [], start: '', end: '' }} updateMapCenter={mockFunc} handleEventsFiltered={mockFunc} />
   );
   const endDatePicker = getByLabelText(/until/i);
   expect(endDatePicker).toBeInTheDocument();
@@ -27,20 +27,13 @@ test('renders the end input field', () => {
 
 test('renders the day of week checkboxes', () => {
   const { getByLabelText } = render(
-    <Controls data={{ events: [], start: '', end: '' }} handleEventsFiltered={mockFunc} />
+    <Controls data={{ events: [], start: '', end: '' }} updateMapCenter={mockFunc} handleEventsFiltered={mockFunc} />
   );
-  const sunday = getByLabelText(Day.Sun);
-  expect(sunday).toBeInTheDocument();
-  const monday = getByLabelText(Day.Mon);
-  expect(monday).toBeInTheDocument();
-  const tuesday = getByLabelText(Day.Tu);
-  expect(tuesday).toBeInTheDocument();
-  const wednesday = getByLabelText(Day.Wed);
-  expect(wednesday).toBeInTheDocument();
-  const thursday = getByLabelText(Day.Thu);
-  expect(thursday).toBeInTheDocument();
-  const friday = getByLabelText(Day.Fri);
-  expect(friday).toBeInTheDocument();
-  const saturday = getByLabelText(Day.Sat);
-  expect(saturday).toBeInTheDocument();
+  expect(getByLabelText(Day.Sun)).toBeInTheDocument();
+  expect(getByLabelText(Day.Mon)).toBeInTheDocument();
+  expect(getByLabelText(Day.Tu)).toBeInTheDocument();
+  expect(getByLabelText(Day.Wed)).toBeInTheDocument();
+  expect(getByLabelText(Day.Thu)).toBeInTheDocument();
+  expect(getByLabelText(Day.Fri)).toBeInTheDocument();
+  expect(getByLabelText(Day.Sat)).toBeInTheDocument();
 });

client/src/components/Controls.test.tsx

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { FormCheckbox, FormDateField, Toggle } from '.';
-import { BikeRide, Day } from '../helpers/format-events';
-import { Coordinate } from '../../../types';
+import { BikeRide, Coordinate, Day } from '../helpers/format-events';
 import './Controls.css';
 
 const allDaysOfWeek = [Day.Sun, Day.Mon, Day.Tu, Day.Wed, Day.Thu, Day.Fri, Day.Sat];
@@ -120,12 +119,17 @@ export class Controls extends Component<ControlsProps, ControlsState> {
 
   handleSelectDay = (e: React.ChangeEvent<any>): void => {
     const { daysOfWeek } = this.state;
-    this.setState({ daysOfWeek: { ...daysOfWeek, [e.target.id]: !!e.target.checked } }, this.applyFilters);
+    this.setState(
+      { daysOfWeek: { ...daysOfWeek, [e.target.id]: !!e.target.checked } },
+      this.applyFilters
+    );
   };
 
   sortEvents = (): void => {
     const { data, handleEventsFiltered } = this.props;
-    const sorted = data.events.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+    const sorted = data.events.sort(
+      (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
+    );
     return handleEventsFiltered(sorted);
   };
 

client/src/components/Controls.tsx

@@ -18,7 +18,7 @@ export function Event(props: EventProps): JSX.Element {
       shareable,
       cancelled,
       title,
-      geoLookupAddress,
+      formattedAddress,
       newsflash,
       venue,
       details,
@@ -38,7 +38,7 @@ export function Event(props: EventProps): JSX.Element {
   return (
     <div onClick={handleListItemClick ? (): void => handleListItemClick(id) : undefined}>
       <div className={eventClassName}>
-        <div className={geoLookupAddress && handleListItemClick ? 'clickable' : ''}>
+        <div className={formattedAddress && handleListItemClick ? 'clickable' : ''}>
           <div className="event-title">
             {title} {cancelled && <AlertBanner message="Cancelled" />}
           </div>
@@ -67,12 +67,12 @@ export function Event(props: EventProps): JSX.Element {
               </div>
               <div className="map-detail">
                 <strong>Displaying location for:</strong>
-                <div>{geoLookupAddress}</div>
+                <div>{formattedAddress}</div>
               </div>
             </div>
             {locationEnabled && distanceTo && (
               <div className="event-distance-to">
-                <DistanceTo distanceTo={distanceTo} geoLookupAddress={geoLookupAddress} address={address} />
+                <DistanceTo distanceTo={distanceTo} formattedAddress={formattedAddress} address={address} />
               </div>
             )}
           </div>
@@ -90,14 +90,14 @@ export function Event(props: EventProps): JSX.Element {
 
 type DistanceToProps = {
   distanceTo: number | null;
-  geoLookupAddress: string | null;
+  formattedAddress: string | null;
   address: string | null;
 };
 function DistanceTo(props: DistanceToProps): JSX.Element {
-  const { distanceTo, geoLookupAddress, address } = props;
+  const { distanceTo, formattedAddress, address } = props;
 
   let message = '';
-  if (geoLookupAddress && distanceTo) {
+  if (formattedAddress && distanceTo) {
     // geocoding service found address, display distance
     message = `${distanceTo} ${distanceTo === 1 ? 'mile' : 'miles'}`;
   } else {

client/src/components/Event.tsx

@@ -2,8 +2,7 @@ import React, { Component } from 'react';
 import { LatLngTuple } from 'leaflet';
 import { Map as LeafletMap, TileLayer, Circle } from 'react-leaflet';
 import { Marker } from '.';
-import { Coordinate } from '../../../types';
-import { BikeRide } from '../helpers/format-events';
+import { BikeRide, Coordinate } from '../helpers/format-events';
 import './Map.css';
 
 const zoom = 13;

client/src/components/Map.tsx

@@ -23,8 +23,8 @@ export class Marker extends React.Component<MarkerProps, {}> {
 
   render(): JSX.Element {
     const { point, locationEnabled } = this.props;
-    const { latLng, geoLookupAddress, key } = point;
-    if (!geoLookupAddress) return <div></div>;
+    const { latLng, formattedAddress, key } = point;
+    if (!formattedAddress) return <div></div>;
     return (
       <LeafletMarker ref={this.markerRef} position={[latLng.latitude, latLng.longitude] as LatLngTuple} key={key}>
         <Popup>

client/src/components/Marker.tsx

@@ -1,4 +1,4 @@
-import { transformTime, getTimeForDesc, getDayOfWeek, getISODate, Day } from './format-events';
+import { transformTime, getTimeForDesc, getISODate } from './format-events';
 
 // duplicated tests and algorithm from https://github.com/theholla/shift-ics-generator
 // TODO: share code using submodule or even better an npm package
@@ -39,18 +39,6 @@ test('getTimeForDesc returns expected duration for PM start, AM end', () => {
   expect(getTimeForDesc('23:59:00', '06:00:00')).toEqual('11:59 PM - 6:00 AM');
 });
 
-test('getDayOfWeek returns expected day for given ride date', () => {
-  expect(getDayOfWeek('2020-04-05', '00:00:01')).toEqual(Day.Sun);
-  expect(getDayOfWeek('2020-04-05')).toEqual(Day.Sun);
-  expect(getDayOfWeek('2020-04-06')).toEqual(Day.Mon);
-  expect(getDayOfWeek('2020-04-07')).toEqual(Day.Tu);
-  expect(getDayOfWeek('2020-04-08')).toEqual(Day.Wed);
-  expect(getDayOfWeek('2020-04-09')).toEqual(Day.Thu);
-  expect(getDayOfWeek('2020-04-10')).toEqual(Day.Fri);
-  expect(getDayOfWeek('2020-04-11')).toEqual(Day.Sat);
-  expect(getDayOfWeek('2020-03-13', '23:59:59')).toEqual(Day.Fri);
-});
-
 test('getISODate returns ISO date with no time', () => {
   expect(getISODate(new Date('4/1/2020'))).toEqual('2020-04-01');
 });

client/src/helpers/format-events.test.ts

@@ -1,9 +1,7 @@
-import { BikeRides4UEvent, RawEventDesc, Coordinate } from '../../../types';
-
-// these date types do not enforce; they just help me recall what the dates (hopefully) look like
-type YYYYMMDD = string; // date already in PST in format yyyy-mm-dd
-type MDYYYY = string; // date in PST in format m/d/yyyy
-type MDYYYYHMMSSSS = string; // date in PST in format m/d/yyyy h:mm:ssss
+export type Coordinate = {
+  readonly latitude: number;
+  readonly longitude: number;
+};
 
 export enum Day {
   Sun = 'Sun',
@@ -15,22 +13,41 @@ export enum Day {
   Sat = 'Sat',
 }
 
-export type FormattedEvent = RawEventDesc & {
+type RawEventDesc = {
+  id: string;
+  title: string;
+  details: string;
+  address: string;
+  venue: string;
+  organizer: string;
+  cancelled: boolean;
+  date: string; // in format YYYY-MM-DD
+  audience: string; // enum
+  shareable: string; // shareable web link
+  newsflash: string | null;
+};
+
+type BikeRides4UEvent = RawEventDesc & {
   key: string;
   dayOfWeek: Day;
-  times: string;
   latLng: Coordinate;
-  geoLookupAddress: string;
-  date: YYYYMMDD;
-  friendlyDate: MDYYYY;
-  freshAsOf: MDYYYYHMMSSSS;
+  formattedAddress: string;
+  startTime: string;
+  endTime: string | null;
+  fetched: number;
+};
+
+export type FormattedEvent = BikeRides4UEvent & {
+  times: string;
+  friendlyDate: string;
+  freshAsOf: string;
 };
 
 export type BikeRide = FormattedEvent & {
   distanceTo?: number;
 };
 
-export function getISODate(date: Date, plusMilliseconds?: number): YYYYMMDD {
+export function getISODate(date: Date, plusMilliseconds?: number): string {
   if (plusMilliseconds) {
     return getISODate(new Date(new Date().getTime() + plusMilliseconds));
   } else {
@@ -42,8 +59,9 @@ function removeLeadingZero(dateString: string): number {
   return Number(dateString);
 }
 
-// for now assume all users are also in PST
-export function getFriendlyDate(date: YYYYMMDD): MDYYYY {
+// for now assume all users want PST
+export function getFriendlyDate(date: string): string {
+  if (!date) return '';
   const [year, month, day] = date.split('-');
   return `${removeLeadingZero(month)}/${removeLeadingZero(day)}/${year}`;
 }
@@ -70,58 +88,13 @@ export function getTimeForDesc(start: string, end: string | null): string {
   return time;
 }
 
-// TODO: compute on backend to avoid browser-specific date math
-export function getDayOfWeek(date: YYYYMMDD, time?: string): Day {
-  const day = new Date(`${date} ${time || '00:00:00'}`).getDay();
-  // FIXME: this is a bummer.. can I get from idx instead?
-  switch (day) {
-    case 0:
-      return Day.Sun;
-    case 1:
-      return Day.Mon;
-    case 2:
-      return Day.Tu;
-    case 3:
-      return Day.Wed;
-    case 4:
-      return Day.Thu;
-    case 5:
-      return Day.Fri;
-    case 6:
-      return Day.Sat;
-  }
-  console.error(`Cannot parse day of week from date; choosing Sun`, { date });
-  return Day.Sun;
-}
-
-function getEventKey(date: YYYYMMDD, id: string): string {
-  // repeating events have the same id so we must store them with additional meta
-  return `${date}-${id}`;
-}
-
 export function formatEvents(events: BikeRides4UEvent[]): FormattedEvent[] {
   return events
-    .map(event => {
-      return {
-        key: getEventKey(event.date, event.id),
-        freshAsOf: new Date(event.updated).toLocaleString(),
-        friendlyDate: getFriendlyDate(event.date),
-        dayOfWeek: getDayOfWeek(event.date, event.time),
-        times: getTimeForDesc(event.time, event.endtime),
-        latLng: event.geoLookup.latLng,
-        geoLookupAddress: event.geoLookup.formattedAddress,
-        id: event.id,
-        title: event.title,
-        details: event.details,
-        venue: event.venue,
-        address: event.address,
-        audience: event.audience,
-        organizer: event.organizer,
-        shareable: event.shareable,
-        cancelled: event.cancelled,
-        newsflash: event.newsflash,
-        date: event.date,
-      };
-    })
+    .map(event => ({
+      ...event,
+      friendlyDate: getFriendlyDate(event.date),
+      times: getTimeForDesc(event.startTime, event.endTime),
+      freshAsOf: new Date(event.fetched).toLocaleString(),
+    }))
     .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
 }