Implementation of a new react app for displaying opening hours from CMS with FullCalendar integration - Ddfform 414

.docker/wiremock/cms/mappings/dummy-479e26d6-5197-4d8f-a2dd-fefe64aabc14.json

@@ -0,0 +1,18 @@
+{
+  "id" : "479e26d6-5197-4d8f-a2dd-fefe64aabc14",
+  "name" : "Opening hours",
+  "request" : {
+    "url" : "/dpl_opening_hours",
+    "method" : "GET"
+  },
+  "response" : {
+    "status" : 200,
+    "body" : "[\n  {\n    \"category\": {\n      \"title\": \"Open\"\n    },\n    \"date\": \"2024-03-14\",\n    \"start_time\": \"09:00\",\n    \"end_time\": \"17:00\"\n  },\n    {\n    \"category\": {\n      \"title\": \"Open\"\n    },\n    \"date\": \"2024-03-15\",\n    \"start_time\": \"09:00\",\n    \"end_time\": \"17:00\"\n  }\n]",
+    "headers" : { }
+  },
+  "uuid" : "479e26d6-5197-4d8f-a2dd-fefe64aabc14",
+  "persistent" : true,
+  "priority" : 5,
+  "insertionIndex" : 0,
+  "postServeActions" : [ ]
+}

.docker/wiremock/services.json

@@ -9,5 +9,10 @@
     "name" : "publizon",
     "port" : 8110,
     "rootDir" : "publizon"
+  }, {
+    "id" : "9d646",
+    "name" : "cms",
+    "port" : 8120,
+    "rootDir" : "cms"
   } ]
 }

.env.example

@@ -2,3 +2,4 @@ STORYBOOK_CLIENT_ID=bdc1d425-9117-4867-acb9-c7307ddc2e0f
 STORYBOOK_LIBRARY_TOKEN=e26e4ca8934475e6a9aytefb028b2e9fa846b5b8
 PUBLIZON_BASEURL=http://publizon-mock.docker
 FBS_BASEURL=http://fbs-mock.docker
+CMS_BASEURL=http://cms-mock.docker

docker-compose.yml

@@ -1,4 +1,4 @@
-version: '3.7'
+version: "3.7"
 
 services:
   wiremock:
@@ -9,6 +9,8 @@ services:
       - "8100"
       # Publizon
       - "8110"
+      # CMS
+      - "8120"
     volumes:
       - wiremock_data:/home/wiremock
     environment:
@@ -37,6 +39,17 @@ services:
       VIRTUAL_HOST: publizon-mock.docker
       VIRTUAL_PORT: 8080
 
+  wiremock-cms:
+    image: wiremock/wiremock:2.32.0
+    command: "--enable-stub-cors  --global-response-templating" # Enable automatic sending of cross-origin (CORS) response headers.
+    ports:
+      - "8080"
+    volumes:
+      - wiremock_cms_data:/home/wiremock
+    environment:
+      VIRTUAL_HOST: cms-mock.docker
+      VIRTUAL_PORT: 8080
+
 volumes:
   root:
     driver_opts:
@@ -58,3 +71,8 @@ volumes:
       type: none
       device: $PWD/.docker/wiremock/publizon
       o: bind
+  wiremock_cms_data:
+    driver_opts:
+      type: none
+      device: $PWD/.docker/wiremock/cms
+      o: bind

orval.config.ts

@@ -139,7 +139,7 @@ export default defineConfig({
     },
     input: {
       target:
-        "https://raw.githubusercontent.com/danskernesdigitalebibliotek/dpl-cms/develop/openapi.json",
+        "https://raw.githubusercontent.com/danskernesdigitalebibliotek/dpl-cms/e1edb7e35beacb93e78eef0541c8ccebad68d6f1/openapi.json",
       converterOptions: {
         indent: 2
       }

package.json

@@ -145,6 +145,11 @@
   },
   "dependencies": {
     "@danskernesdigitalebibliotek/dpl-design-system": "^0.0.0-b807dae9a38d9b7811b36f4b3f3063eec78f4f1f",
+    "@fullcalendar/core": "^6.1.11",
+    "@fullcalendar/daygrid": "^6.1.11",
+    "@fullcalendar/interaction": "^6.1.11",
+    "@fullcalendar/react": "^6.1.11",
+    "@fullcalendar/timegrid": "^6.1.11",
     "@reach/alert": "^0.17.0",
     "@reach/dialog": "^0.18.0",
     "@reduxjs/toolkit": "^1.9.7",

src/apps/opening-hours-editor/OpeningHoursEditor.dev.tsx

@@ -0,0 +1,16 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import serviceUrlArgs from "../../core/storybook/serviceUrlArgs";
+import OpeningHoursEditor from "./OpeningHoursEditor.entry";
+
+export default {
+  title: "Apps / OpeningHoursEditor",
+  component: OpeningHoursEditor,
+  argTypes: {
+    ...serviceUrlArgs
+  }
+} as ComponentMeta<typeof OpeningHoursEditor>;
+
+export const App: ComponentStory<typeof OpeningHoursEditor> = (args) => (
+  <OpeningHoursEditor {...args} />
+);

src/apps/opening-hours-editor/OpeningHoursEditor.entry.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import GuardedApp from "../../components/guarded-app";
+import { withText } from "../../core/utils/text";
+import { withUrls } from "../../core/utils/url";
+import OpeningHoursEditor from "./OpeningHoursEditor";
+
+const CalendarEntry: React.FC = () => (
+  <GuardedApp app="opening-hours-editor">
+    <OpeningHoursEditor />
+  </GuardedApp>
+);
+
+export default withUrls(withText(CalendarEntry));

src/apps/opening-hours-editor/OpeningHoursEditor.mount.ts

@@ -0,0 +1,4 @@
+import addMount from "../../core/addMount";
+import OpeningHoursEditor from "./OpeningHoursEditor.entry";
+
+addMount({ appName: "opening-hours-editor", app: OpeningHoursEditor });

src/apps/opening-hours-editor/OpeningHoursEditor.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import FullCalendar from "@fullcalendar/react";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import da from "@fullcalendar/core/locales/da";
+import OpeningHoursEditorEventContent from "./OpeningHoursEditorEventContent";
+import useOpeningHours from "./useOpeningHours";
+
+const OpeningHoursEditor: React.FC = () => {
+  const { events, handleEventSelect, handleEventClick, handleEventRemove } =
+    useOpeningHours();
+
+  return (
+    <FullCalendar
+      plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
+      headerToolbar={{
+        left: "title",
+        center: "prev,next today",
+        right: "dayGridMonth,timeGridWeek"
+      }}
+      initialView="timeGridWeek"
+      locale={da}
+      selectable
+      select={handleEventSelect}
+      eventClick={handleEventClick}
+      eventContent={(eventInput) =>
+        OpeningHoursEditorEventContent({
+          eventInput,
+          handleEventRemove
+        })
+      }
+      events={events}
+      stickyHeaderDates
+      height="auto"
+      selectMirror
+    />
+  );
+};
+
+export default OpeningHoursEditor;

src/apps/opening-hours-editor/OpeningHoursEditorEventContent.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { EventInput } from "@fullcalendar/core";
+
+type OpeningHoursEditorEventContentProps = {
+  eventInput: EventInput;
+  handleEventRemove: (event: EventInput) => void;
+};
+
+const OpeningHoursEditorEventContent: React.FC<
+  OpeningHoursEditorEventContentProps
+> = ({ eventInput, handleEventRemove }) => {
+  const { event } = eventInput;
+  return (
+    <div
+      style={{
+        padding: "5px 10px",
+        cursor: "pointer",
+        width: "100%"
+      }}
+    >
+      <b>{event.title}</b>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between"
+        }}
+      >
+        <span>
+          {event.start?.toLocaleTimeString()} -{" "}
+          {event.end?.toLocaleTimeString()}
+        </span>
+
+        <span
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") handleEventRemove(event);
+          }}
+          onClick={() => handleEventRemove(event)}
+        >
+          ❌
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default OpeningHoursEditorEventContent;

src/apps/opening-hours-editor/helper.ts

@@ -0,0 +1,29 @@
+import { DplOpeningHoursListGET200Item } from "../../core/dpl-cms/model";
+
+const formatDateTimeString = (date: string, time: string): string => {
+  return `${date}T${time}:00`;
+};
+
+export const createCmsEventId = (title: string, startDay: Date) => {
+  return `${title}-${startDay.toISOString()}`;
+};
+
+export const formatCmsEventsToFullCalendar = (
+  data: DplOpeningHoursListGET200Item[]
+) => {
+  return data.map(({ category, date, start_time, end_time }) => {
+    const startDateTime = new Date(formatDateTimeString(date, start_time));
+    return {
+      id: createCmsEventId(category.title, startDateTime),
+      title: category.title,
+      start: formatDateTimeString(date, start_time),
+      end: formatDateTimeString(date, end_time),
+      allDay: false,
+      color: "blue"
+    };
+  });
+};
+
+export const isSameDay = (startDay: Date, endDay: Date) => {
+  return startDay.toDateString() === endDay.toDateString();
+};

src/apps/opening-hours-editor/useOpeningHours.tsx

@@ -0,0 +1,80 @@
+import { useState, useEffect } from "react";
+import { EventInput, DateSelectArg, EventClickArg } from "@fullcalendar/core";
+import {
+  createCmsEventId,
+  formatCmsEventsToFullCalendar,
+  isSameDay
+} from "./helper";
+import { useDplOpeningHoursListGET } from "../../core/dpl-cms/dpl-cms";
+
+const useOpeningHours = () => {
+  const { data: openingHoursData } = useDplOpeningHoursListGET();
+  const [events, setEvents] = useState<EventInput[]>([]);
+
+  useEffect(() => {
+    if (openingHoursData) {
+      const formattedEvents = formatCmsEventsToFullCalendar(openingHoursData);
+      setEvents(formattedEvents);
+    }
+  }, [openingHoursData]);
+
+  const handleEventSelect = (selectInfo: DateSelectArg) => {
+    // Todo: Replace prompt with a modal
+    // eslint-disable-next-line no-alert
+    const title = prompt("Please enter a new title for your event");
+    const calendarApi = selectInfo.view.calendar;
+
+    if (title) {
+      // Checks if the selected end date is different from the start day; if so, sets the end date to be the same as the start day and the end time to 00:00:00
+      const startDay = new Date(selectInfo.startStr);
+      let endDay = new Date(selectInfo.endStr);
+
+      if (!isSameDay(startDay, endDay)) {
+        endDay = new Date(startDay);
+        // Adds one day to the end day and sets the time to 00:00:00ß
+        endDay.setDate(endDay.getDate() + 1);
+        endDay.setHours(0, 0, 0);
+      }
+
+      setEvents([
+        ...events,
+        {
+          title,
+          start: startDay.toISOString(),
+          end: endDay.toISOString(),
+          allDay: selectInfo.allDay,
+          color: "green",
+          id: createCmsEventId(title, startDay)
+        }
+      ]);
+    }
+
+    // clear date selection
+    calendarApi.unselect();
+  };
+
+  const handleEventClick = (clickInfo: EventClickArg) => {
+    // eslint-disable-next-line no-alert
+    const newTitle = prompt(
+      "Enter a new title for this event",
+      clickInfo.event.title
+    );
+
+    if (newTitle) {
+      clickInfo.event.setProp("title", newTitle);
+    }
+  };
+
+  const handleEventRemove = (eventToRemove: EventInput) => {
+    setEvents(events.filter((event) => event.id !== eventToRemove.id));
+  };
+
+  return {
+    events,
+    handleEventSelect,
+    handleEventClick,
+    handleEventRemove
+  };
+};
+
+export default useOpeningHours;