Table updates for appointments. Initial appointments screen + fetching.

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

@@ -0,0 +1,27 @@
+import moment from "moment";
+import React from "react";
+import { Calendar, momentLocalizer } from "react-big-calendar";
+import "react-big-calendar/lib/css/react-big-calendar.css";
+import DateCellWrapper from "../schedule-datecellwrapper/schedule-datecellwrapper.component";
+import Event from "../schedule-event/schedule-event.component";
+const localizer = momentLocalizer(moment);
+
+export default function ScheduleCalendarComponent({ data }) {
+  return (
+    <Calendar
+      events={data}
+      defaultView="week"
+      //views={allViews}
+      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")}
+      //onSelectEvent={event => console.log("event", event)}
+      components={{
+        event: Event,
+        dateCellWrapper: DateCellWrapper
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { useQuery } from "react-apollo";
+import ScheduleCalendarComponent from "./schedule-calendar.component";
+import { QUERY_ALL_APPOINTMENTS } from "../../graphql/appointments.queries";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import AlertComponent from "../alert/alert.component";
+
+export default function ScheduleCalendarContainer() {
+  const { loading, error, data, refetch } = useQuery(QUERY_ALL_APPOINTMENTS, {
+    fetchPolicy: "network-only"
+  });
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  let normalizedData = data.appointments.map(e => {
+    //Required becuase Hasura returns a string instead of a date object.
+    return Object.assign(
+      {},
+      e,
+      { start: new Date(e.start) },
+      { end: new Date(e.end) }
+    );
+  });
+
+  return (
+    <ScheduleCalendarComponent
+      refetch={refetch}
+      data={data ? normalizedData : null}
+    />
+  );
+}