Adding of generic appointments to calendar.

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

@@ -1,13 +1,46 @@
 import React from "react";
 //import "react-big-calendar/lib/css/react-big-calendar.css";
 import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
+import { Button, Icon } from "antd";
+import { useTranslation } from "react-i18next";
+import ScheduleAppointmentModalContainer from "../schedule-appointment-modal/schedule-appointment-modal.container";
+
+export default function ScheduleCalendarComponent({
+  data,
+  refetch,
+  scheduleModalState
+}) {
+  const { t } = useTranslation();
 
-export default function ScheduleCalendarComponent({ data, refetch }) {
   return (
-    <ScheduleCalendarWrapperComponent
-      data={data}
-      defaultView="week"
-      refetch={refetch}
-    />
+    <div>
+      <Button
+        onClick={() => {
+          refetch();
+        }}
+      >
+        <Icon type="sync" />
+      </Button>
+
+      <Button
+        onClick={() => {
+          scheduleModalState[1](true);
+        }}
+      >
+        {t("appointments.actions.new")}
+      </Button>
+
+      <ScheduleAppointmentModalContainer
+        scheduleModalState={scheduleModalState}
+        jobId={null}
+        refetch={refetch}
+      />
+
+      <ScheduleCalendarWrapperComponent
+        data={data}
+        defaultView="week"
+        refetch={refetch}
+      />
+    </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useQuery } from "react-apollo";
 import ScheduleCalendarComponent from "./schedule-calendar.component";
 import { QUERY_ALL_ACTIVE_APPOINTMENTS } from "../../graphql/appointments.queries";
@@ -12,6 +12,7 @@ export default function ScheduleCalendarContainer() {
       fetchPolicy: "network-only"
     }
   );
+  const scheduleModalState = useState(false);
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
@@ -27,6 +28,7 @@ export default function ScheduleCalendarContainer() {
 
   return (
     <ScheduleCalendarComponent
+      scheduleModalState={scheduleModalState}
       refetch={refetch}
       data={data ? normalizedData : null}
     />