From 8b56046632da7192ba69f91f89f690a9dfe2cf4d Mon Sep 17 00:00:00 2001
From: theLAZYmd <lazymeep+github@gmail.com>
Date: Thu, 6 May 2021 18:10:57 +0100
Subject: [PATCH] Fixed a hooks bug that would cause events not to show

---
 package.json           |  2 +-
 src/Frame.tsx          |  8 ++++----
 src/hooks/useEvents.ts | 39 ++++++++++++++++++---------------------
 3 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 411d85f..21f1fdc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactjs-google-calendar",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "A functional calendar renderer for events from a google calendar",
   "main": "./lib/index.js",
   "module": "build/index.es.js",
diff --git a/src/Frame.tsx b/src/Frame.tsx
index 7e432e7..173da38 100644
--- a/src/Frame.tsx
+++ b/src/Frame.tsx
@@ -36,7 +36,7 @@ export interface CalendarFrameProps {
 export function CalendarFrame(props: CalendarFrameProps) {
 
   const days = props.dayLabels || defaultDayLabels;
-  const startIndex = new Date(props.start).getDay();
+  const startIndex = useMemo(() => (new Date(props.start).getDay() + 6) % 7, [props.start]);
   const maxEvents = props.maxEvents || 5;
     
   const styles = useMemo(() => {
@@ -51,11 +51,11 @@ export function CalendarFrame(props: CalendarFrameProps) {
     let w = [] as Date[];
     for (let i = 0; i < (props.weeks || defaultWeeks); i++) {
       let curr = new Date(props.start);
-      curr.setDate(curr.getDate() + days.length * i);
+      curr.setDate(curr.getDate() - startIndex + days.length * i);
       w.push(curr);
     }
     return w;
-  }, [props.start, props.weeks]);
+  }, [props.start, props.weeks, startIndex]);
   const colorStatuses = props.colorStatuses || {};
   
   return (
@@ -73,7 +73,7 @@ export function CalendarFrame(props: CalendarFrameProps) {
         {weeks.map((week, i) => {
           let days = [];
           for (let i = 0; i < 7; i++) {
-            let date = new Date(new Date(week).setDate(week.getDate() + i - startIndex));
+            let date = new Date(new Date(week).setDate(week.getDate() + i));
             let timestamp = getEventDate(date);
             let today = getEventDate(Date.now()) === timestamp;
             let day = (
diff --git a/src/hooks/useEvents.ts b/src/hooks/useEvents.ts
index 0dfd81d..458afaa 100644
--- a/src/hooks/useEvents.ts
+++ b/src/hooks/useEvents.ts
@@ -1,7 +1,7 @@
 import axios, { AxiosError, AxiosResponse } from 'axios';
 import { CalendarSettingsContext } from '../contexts';
 import { CalendarEvent } from '../Event';
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useReducer, useState } from 'react';
 import { getEventDate } from '../utils';
 import { GoogleCalendar } from '../interfaces';
 
@@ -22,13 +22,25 @@ interface EventHookProps {
 
 export default function useEvents(props: EventHookProps) {
 
-  const [events, setEvents] = useState(props.events || {});
-  const [colors, setColors] = useState({} as {[color: string]: string}); /* calendarName */
+  const [events, setEvents] = useReducer((state: typeof props.events, action: typeof props.events) => {
+	  return Object.assign({}, state, action);
+  }, props.events || {});
+
+  const [colors, updateColors] = useReducer((state: {[color: string]: string}, action: {[key: string]: CalendarEvent[]}) => {
+	let c = Object.assign({}, state);
+    for (let eventArr of Object.values(action)) {
+      for (let e of eventArr) {
+        if (!c[e.color]) c[e.color] = e.calendarName;
+      }
+    }
+    props.setColorStatuses(Object.keys(c));
+    return c;
+  }, {}); /* calendarName */
 
   const settings = useContext(CalendarSettingsContext);
 
   const handleId = useCallback(async (calendarId: string) => {
-    let eventDict = events;
+    let eventDict = Object.assign({}, events);
     
     let res = await axios({
       baseURL: settings.baseURL || baseURL,
@@ -63,17 +75,6 @@ export default function useEvents(props: EventHookProps) {
     setEvents(eventDict);
   }, [events, colors, settings, setEvents, props]);
 
-  const parseColorsFromEvents = useCallback((eventDict: {[key: string]: CalendarEvent[]}) => {
-    let c = colors;
-    for (let eventArr of Object.values(eventDict)) {
-      for (let e of eventArr) {
-        if (!c[e.color]) c[e.color] = e.calendarName;
-      }
-    }
-    setColors(c);
-    props.setColorStatuses(Object.keys(c));
-  }, [setColors, props.setColorStatuses]);
-
   useEffect(() => {
     Object.entries(props.calendars).forEach(([k, v]) => {
       if (k === v) return;
@@ -81,14 +82,10 @@ export default function useEvents(props: EventHookProps) {
     });
   }, [props.calendars]);
 
-  useEffect(() => {
-    if (props.events) setEvents(props.events);
-  }, [setEvents, props.events]);
-
   useEffect(() => {
     if (!Object.keys(events).length) return;
-    parseColorsFromEvents(events);
-  }, [events, parseColorsFromEvents]);
+    updateColors(events);
+  }, [events, updateColors]);
 
   return { colors, events };