Format event dates in Item class

There was a redux state mutation in the Event List that was violating data integrity. Close #27
Nigh7Sh4de · Jul 11, 2019 · 29adcc8 · 29adcc8
1 parent 57c79ac
commit 29adcc8
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 23 deletions.
diff --git a/src/components/events/item.js b/src/components/events/item.js
@@ -22,10 +22,10 @@ export class Item extends PureComponent {
   }
 
   render() {
-    const { item, colors } = this.props
+    const { date, item, colors } = this.props
     const { summary, id, start, end, colorId, blank } = item
+
     const { selected } = this.state
-    const color = colors[colorId] || {}
     if (selected) {
       return (
         <Redirect
@@ -37,9 +37,19 @@ export class Item extends PureComponent {
       )
     }
 
-    const _start = moment(start.dateTime)
-    const _end = moment(end.dateTime)
+    const _start = moment.max(moment(start.dateTime), moment(date).startOf('day'))
+    const _end = moment.min(
+      moment(end.dateTime),
+      moment(date)
+        .startOf('day')
+        .add(1, 'day')
+    )
     const minutes = _end.diff(_start, 'minutes')
+    if (minutes <= 0) {
+      return null
+    }
+
+    const color = colors[colorId] || {}
     const paddingVertical = Math.min(~~(minutes / 60) * 10, 30)
     let backgroundColor = 'lightgray'
     if (blank) {

diff --git a/src/components/events/list.js b/src/components/events/list.js
@@ -82,22 +82,7 @@ export class ListEvents extends Component {
       })
     }
 
-    const f = 0
-    const l = result.length - 1
-    result[f].start.dateTime = moment.max(
-      result[f].start.dateTime,
-      moment(date).startOf('day')
-    )
-    result[l].end.dateTime = moment.min(
-      result[l].end.dateTime,
-      moment(date)
-        .startOf('day')
-        .add(1, 'day')
-    )
-
-    return result.filter(event =>
-      moment(event.end.dateTime).diff(event.start.dateTime)
-    )
+    return result
   }
 
   render() {
@@ -109,7 +94,7 @@ export class ListEvents extends Component {
 
     const filteredEvents = this.filterEvents(events, date)
     const renderedEvents = filteredEvents.map(event => (
-      <AgendaItem key={event.id || event.start.dateTime} item={event} />
+      <AgendaItem key={event.id || event.start.dateTime} date={date} item={event} />
     ))
 
     return (

diff --git a/src/redux/events.js b/src/redux/events.js
@@ -9,6 +9,7 @@ export const DELETE_EVENT = 'DELETE_EVENT'
 export const FETCH_DELAY = 60
 
 export function saveEvents(events, timeMin, timeMax) {
+  console.log({ saveEvents: events })
   return {
     type: SAVE_EVENTS,
     events,
@@ -43,7 +44,9 @@ export function deleteEvent({ event, calendar }) {
 
 export function getGoogleCalendarEvents({ start, end, force }) {
   return async (dispatch, getState) => {
+    console.group('getGoogleCalendarEvents')
     await dispatch(processQueue())
+    console.log('Queue processed.')
 
     const { settings } = getState().calendars
     const { lastFetch } = getState().events
@@ -53,19 +56,25 @@ export function getGoogleCalendarEvents({ start, end, force }) {
       .add(1, 'day')
     const delay = moment().subtract(FETCH_DELAY, 's')
 
+    console.log('Use settings', { settings, start, end, lastFetch, force })
+
     if (
       !force &&
       lastFetch.timeCalled &&
       moment(lastFetch.timeCalled) >= delay &&
       moment(lastFetch.timeMin) <= timeMin &&
       moment(lastFetch.timeMax) >= timeMax
     ) {
+      console.log('Skip data fetch.')
+      console.groupEnd()
       return
     }
 
     for (let calendar of settings.incoming) {
+      console.log({ calendar })
       try {
         const newEvents = await getEvents({ calendar, timeMin, timeMax })
+        console.log({ newEvents })
         dispatch(
           saveEvents(
             newEvents.map(event => ({
@@ -80,6 +89,7 @@ export function getGoogleCalendarEvents({ start, end, force }) {
         console.log({ error })
       }
     }
+    console.groupEnd()
   }
 }
 
@@ -159,12 +169,15 @@ export default function reducer(state = initialState, action) {
 
 function massageEventsResponse(state, { events, timeMin, timeMax }) {
   let { data, lastFetch } = state
-
+  
   const start = moment(timeMin).toISOString()
   const end = moment(timeMax).toISOString()
+  const ids = {}
+
+  events.forEach(event => ids[event.id] = true)
   data = [
     ...data.filter(
-      event => event.end.dateTime <= start || event.start.dateTime >= end
+      event => !ids[event.id] && (event.start.dateTime <= start || event.end.dateTime >= end)
     ),
     ...events.filter(event => event.start.dateTime),
   ]