Feature: Added agenda view for calendar, calendar improvements (#2216)

* Feature: Added agenda view for calendar, calendar improvements

* Fix duplicate event keys

* Additional hover on title, not date

* Show date once in list

* Rename monthly view for consistency

* Remove unneeded key props

* CSS cleanup, dont slice title to arbitrary 42 chars which can break column layouts

* Simplify agenda components

* Fix show date once in list

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src/widgets/calendar/component.jsx

@@ -1,15 +1,51 @@
-import { useContext, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import dynamic from "next/dynamic";
+import { DateTime } from "luxon";
+import { useTranslation } from "next-i18next";
 
-import { ShowDateContext } from "../../utils/contexts/calendar";
-
-import MonthlyView from "./monthly-view";
+import Monthly from "./monthly";
+import Agenda from "./agenda";
 
 import Container from "components/services/widget/container";
 
+const colorVariants = {
+  // https://tailwindcss.com/docs/content-configuration#dynamic-class-names
+  amber: "bg-amber-500",
+  blue: "bg-blue-500",
+  cyan: "bg-cyan-500",
+  emerald: "bg-emerald-500",
+  fuchsia: "bg-fuchsia-500",
+  gray: "bg-gray-500",
+  green: "bg-green-500",
+  indigo: "bg-indigo-500",
+  lime: "bg-lime-500",
+  neutral: "bg-neutral-500",
+  orange: "bg-orange-500",
+  pink: "bg-pink-500",
+  purple: "bg-purple-500",
+  red: "bg-red-500",
+  rose: "bg-rose-500",
+  sky: "bg-sky-500",
+  slate: "bg-slate-500",
+  stone: "bg-stone-500",
+  teal: "bg-teal-500",
+  violet: "bg-violet-500",
+  white: "bg-white-500",
+  yellow: "bg-yellow-500",
+  zinc: "bg-zinc-500",
+};
+
 export default function Component({ service }) {
   const { widget } = service;
-  const { showDate } = useContext(ShowDateContext);
+  const { i18n } = useTranslation();
+  const [showDate, setShowDate] = useState(null);
+  const currentDate = DateTime.now().setLocale(i18n.language).startOf("day");
+
+  useEffect(() => {
+    if (!showDate) {
+      setShowDate(currentDate);
+    }
+  }, [showDate, currentDate]);
 
   // params for API fetch
   const params = useMemo(() => {
@@ -27,10 +63,12 @@ export default function Component({ service }) {
   // Load active integrations
   const integrations = useMemo(
     () =>
-      widget.integrations?.map((integration) => ({
-        service: dynamic(() => import(`./integrations/${integration?.type}`)),
-        widget: integration,
-      })) ?? [],
+      widget.integrations
+        ?.filter((integration) => integration?.type)
+        .map((integration) => ({
+          service: dynamic(() => import(`./integrations/${integration.type}`)),
+          widget: integration,
+        })) ?? [],
     [widget.integrations],
   );
 
@@ -52,7 +90,24 @@ export default function Component({ service }) {
             );
           })}
         </div>
-        <MonthlyView service={service} className="flex" />
+        {(!widget?.view || widget?.view === "monthly") && (
+          <Monthly
+            service={service}
+            colorVariants={colorVariants}
+            showDate={showDate}
+            setShowDate={setShowDate}
+            className="flex"
+          />
+        )}
+        {widget?.view === "agenda" && (
+          <Agenda
+            service={service}
+            colorVariants={colorVariants}
+            showDate={showDate}
+            setShowDate={setShowDate}
+            className="flex"
+          />
+        )}
       </div>
     </Container>
   );