feat: filter events by PendingReview status in History and Reviews components

Author: Aloento

src/Pages/History.tsx

@@ -3,6 +3,7 @@ import dayjs from "dayjs";
 import { chain } from "lodash";
 import { useEffect, useRef, useState } from "react";
 import { Helmet } from "react-helmet";
+import { EventStatus } from "~/Components/Event/Enums";
 import { EventFilters } from "~/Components/History/EventFilters";
 import { getEventTag } from "~/Components/History/EventTag";
 import { useEventFilters } from "~/Components/History/useEventFilters";
@@ -26,14 +27,18 @@ export function History() {
     return stored ? parseInt(stored, 10) : 20;
   });
 
+  const events = DB.Events.filter(
+    (x) => x.Status !== EventStatus.PendingReview
+  );
+
   const {
     filters,
     validation,
     filteredEvents,
     setFilters,
     setValidation,
     clearFilters,
-  } = useEventFilters(DB.Events);
+  } = useEventFilters(events);
 
   useEffect(() => {
     if (!gridRef.current) {
@@ -102,7 +107,7 @@ export function History() {
       filters={filters}
       validation={validation}
       regions={DB.Regions}
-      totalEvents={DB.Events.length}
+      totalEvents={events.length}
       filteredCount={filteredEvents.length}
       onFiltersChange={setFilters}
       onValidationChange={setValidation}

src/Pages/Reviews.tsx

@@ -1,8 +1,11 @@
 import { ScaleDataGrid, ScaleIconActionCheckmark, ScaleIconActionMenu, ScaleMenuFlyoutItem, ScaleMenuFlyoutList } from "@telekom/scale-components-react";
+import dayjs from "dayjs";
+import { chain } from "lodash";
 import { useEffect, useRef, useState } from "react";
 import { Helmet } from "react-helmet";
+import { EventStatus } from "~/Components/Event/Enums";
 import { Dic } from "~/Helpers/Entities";
-import reviewsHistoryMock from "./reviewsHistoryMock.json";
+import { useStatus } from "~/Services/Status";
 
 const PAGE_SIZE_KEY = "reviewsPageSize";
 const PAGE_SIZE_OPTIONS = [10, 20, 50];
@@ -13,22 +16,15 @@ const PAGE_SIZE_OPTIONS = [10, 20, 50];
  * @version 0.3.0
  */
 export function Reviews() {
+  const { DB } = useStatus();
   const gridRef = useRef<HTMLScaleDataGridElement>(null);
 
   const [pageSize, setPageSize] = useState<number>(() => {
     const stored = localStorage.getItem(PAGE_SIZE_KEY);
     return stored ? parseInt(stored, 10) : 10;
   });
 
-  interface ReviewItem {
-    id: number;
-    planStartCET: string;
-    planEndCET: string;
-    region: string;
-    service: string;
-  }
-
-  const historyItems = reviewsHistoryMock as ReviewItem[];
+  const pendingEvents = DB.Events.filter((x) => x.Status === EventStatus.PendingReview);
 
   useEffect(() => {
     if (!gridRef.current) {
@@ -46,23 +42,41 @@ export function Reviews() {
       { type: "actions", label: "Detail" },
     ];
 
-    const events = historyItems.map((item) => [
-      item.id,
-      item.planStartCET,
-      item.planEndCET,
-      item.region,
-      item.service,
-      [
-        {
-          label: "↗",
-          variant: "secondary",
-          href: `/Event/${item.id}`
-        }
-      ]
-    ]);
+    const events = chain(pendingEvents)
+      .map((x) => {
+        const rs = Array.from(x.RegionServices);
+
+        const services = chain(rs)
+          .map(s => s.Service.Name)
+          .uniq()
+          .value();
+
+        const regions = chain(rs)
+          .map(r => r.Region.Name)
+          .uniq()
+          .value();
+
+        return [
+          x.Id,
+          dayjs(x.Start).tz(Dic.TZ).format(Dic.Time),
+          x.End ? dayjs(x.End).tz(Dic.TZ).format(Dic.Time) : "-",
+          regions.join(", "),
+          services.length > 2
+            ? `${services.slice(0, 2).join(", ")} +${services.length - 2}`
+            : services.join(", "),
+          [
+            {
+              label: "↗",
+              variant: "secondary",
+              href: `/Event/${x.Id}`
+            }
+          ]
+        ];
+      })
+      .value();
 
     grid.rows = events;
-  }, [gridRef.current, historyItems]);
+  }, [gridRef.current, pendingEvents]);
 
   return (
     <>