Table updates for new appointments fields. Schedule modal baseline functionality. Refactor schedule components to be more reusable.

client/src/components/schedule-day-view/schedule-day-view.component.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import "react-big-calendar/lib/css/react-big-calendar.css";
+import { useTranslation } from "react-i18next";
+import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
+
+export default function ScheduleDayViewComponent({ data, day }) {
+  const { t } = useTranslation();
+  if (data)
+    //TODO Remove addtional calendar elements from day view.
+    return (
+      <ScheduleCalendarWrapperComponent
+        events={data}
+        defaultView="day"
+        style={{ height: "40vh" }}
+        defaultDate={new Date(day)}
+        //onNavigate={e => console.log("e", e)}
+      />
+    );
+  else return <div>{t("appointments.labels.nodateselected")}</div>;
+}

client/src/components/schedule-day-view/schedule-day-view.container.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import ScheduleDayViewComponent from "./schedule-day-view.component";
+import { useQuery } from "react-apollo";
+import { QUERY_APPOINTMENT_BY_DATE } from "../../graphql/appointments.queries";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import moment from "moment";
+
+export default function ScheduleDayViewContainer({ day }) {
+  const { loading, error, data } = useQuery(QUERY_APPOINTMENT_BY_DATE, {
+    variables: {
+      start: moment(day).startOf("day"),
+      end: moment(day).endOf("day")
+    },
+    skip: !day,
+    fetchPolicy: "network-only"
+  });
+
+  if (loading) return <LoadingSkeleton paragraph={{ rows: 4 }} />;
+  if (error) return <div>{error.message}</div>;
+  let normalizedData;
+  if (data) {
+    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 (
+    <ScheduleDayViewComponent data={data ? normalizedData : null} day={day} />
+  );
+}