BOD-70 refactor schedule to use query string

client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx

@@ -1,10 +1,13 @@
 import moment from "moment";
+import queryString from "query-string";
 import React from "react";
 import { Calendar, momentLocalizer } from "react-big-calendar";
-//import "react-big-calendar/lib/css/react-big-calendar.css";
-import "./schedule-calendar.styles.scss";
+import { useHistory, useLocation } from "react-router-dom";
 import DateCellWrapper from "../schedule-datecellwrapper/schedule-datecellwrapper.component";
 import Event from "../schedule-event/schedule-event.container";
+//import "react-big-calendar/lib/css/react-big-calendar.css";
+import "./schedule-calendar.styles.scss";
+
 const localizer = momentLocalizer(moment);
 
 export default function ScheduleCalendarWrapperComponent({
@@ -13,20 +16,26 @@ export default function ScheduleCalendarWrapperComponent({
   defaultView,
   ...otherProps
 }) {
+  const search = queryString.parse(useLocation().search);
+  const history = useHistory();
+
   return (
     <Calendar
       events={data}
       defaultView={defaultView}
+      date={new Date(search.date || Date.now())}
+      onNavigate={(date, view, action) => {
+        search.date = date.toISOString().substr(0, 10);
+        history.push({ search: queryString.stringify(search) });
+      }}
       step={30}
       showMultiDayTimes
       localizer={localizer}
       min={new Date("2020-01-01T06:00:00")} //TODO Read from business settings.
       max={new Date("2020-01-01T20:00:00")}
       components={{
-        event: e => {
-          return Event({ event: e.event, refetch: refetch });
-        },
-        dateCellWrapper: DateCellWrapper
+        event: (e) => Event({ event: e.event, refetch: refetch }),
+        dateCellWrapper: DateCellWrapper,
       }}
       {...otherProps}
     />

client/src/components/schedule-calendar/schedule-calendar.container.jsx

@@ -12,7 +12,7 @@ export default function ScheduleCalendarContainer() {
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
-  let normalizedData = data.appointments.map(e => {
+  let normalizedData = data.appointments.map((e) => {
     //Required becuase Hasura returns a string instead of a date object.
     return Object.assign(
       {},