feat: add pending review count to MobileMenu, TopNavBar, and Home components; update notification messages accordingly

Author: Aloento

src/Components/Layout/MobileMenu.tsx

@@ -1,14 +1,23 @@
 import { ScaleIconActionMenu, ScaleTelekomMobileFlyoutCanvas, ScaleTelekomMobileMenu, ScaleTelekomMobileMenuItem, ScaleTelekomNavFlyout, ScaleTelekomNavItem } from "@telekom/scale-components-react";
+import { chain } from "lodash";
+import { useMemo } from "react";
 import { useAuth } from "react-oidc-context";
+import { EventStatus } from "~/Components/Event/Enums";
+import { useStatus } from "~/Services/Status";
 import { Authorized } from "../Auth/With";
 
 /**
  * @author Aloento
  * @since 1.0.0
- * @version 0.2.0
+ * @version 0.3.0
  */
 export function MobileMenu() {
   const auth = useAuth();
+  const { DB } = useStatus();
+
+  const pendingCount = useMemo(() => chain(DB.Events)
+    .filter(e => e.Status === EventStatus.PendingReview)
+    .value().length, [DB]);
 
   return (
     <ScaleTelekomNavItem hideOnDesktop>
@@ -39,9 +48,11 @@ export function MobileMenu() {
                 <a href="/NewEvent">New Event</a>
               </ScaleTelekomMobileMenuItem>
 
-              <ScaleTelekomMobileMenuItem>
-                <a href="/Reviews">Reviews: 6</a>
-              </ScaleTelekomMobileMenuItem>
+              {pendingCount > 0 && (
+                <ScaleTelekomMobileMenuItem>
+                  <a href="/Reviews">Reviews: {pendingCount}</a>
+                </ScaleTelekomMobileMenuItem>
+              )}
 
               <ScaleTelekomMobileMenuItem>
                 You're {((auth.user?.profile as any)?.groups as string[])?.filter(x => x.includes("sd"))}

src/Components/Layout/TopNavBar.tsx

@@ -1,5 +1,9 @@
 import { ScaleTelekomHeader, ScaleTelekomNavItem, ScaleTelekomNavList } from "@telekom/scale-components-react";
+import { chain } from "lodash";
+import { useMemo } from "react";
+import { EventStatus } from "~/Components/Event/Enums";
 import { Dic } from "~/Helpers/Entities";
+import { useStatus } from "~/Services/Status";
 import { Authorized } from "../Auth/With";
 import { MobileMenu } from "./MobileMenu";
 import { NavItem } from "./NavItem";
@@ -8,9 +12,15 @@ import { ProfileMenu } from "./ProfileMenu";
 /**
  * @author Aloento
  * @since 1.0.0
- * @version 0.2.0
+ * @version 0.3.0
  */
 export function TopNavBar() {
+  const { DB } = useStatus();
+
+  const pendingCount = useMemo(() => chain(DB.Events)
+    .filter(e => e.Status === EventStatus.PendingReview)
+    .value().length, [DB]);
+
   return (
     <ScaleTelekomHeader
       appName={Dic.Name}
@@ -33,7 +43,7 @@ export function TopNavBar() {
         <Authorized>
           <NavItem Href="/NewEvent" Label="New Event" />
 
-          <NavItem Href="/Reviews" Label="Reviews" />
+          {pendingCount > 0 && <NavItem Href="/Reviews" Label={`Reviews: ${pendingCount}`} />}
         </Authorized>
       </ScaleTelekomNavList>
 

src/Pages/Home.tsx

@@ -6,7 +6,7 @@ import { chain } from "lodash";
 import { useEffect, useMemo, useState } from "react";
 import { Helmet } from "react-helmet";
 import { BehaviorSubject, Subject } from "rxjs";
-import { EventType, IsIncident, IsOpenStatus } from "~/Components/Event/Enums";
+import { EventStatus, EventType, IsIncident, IsOpenStatus } from "~/Components/Event/Enums";
 import { EventGrid } from "~/Components/Home/EventGrid";
 import "~/Components/Home/Home.css";
 import { Indicator } from "~/Components/Home/Indicator";
@@ -34,7 +34,7 @@ const log = new Logger("Home");
  * @component
  * @author Aloento
  * @since 1.0.0
- * @version 0.2.0
+ * @version 0.3.0
  */
 export function Home() {
   const { DB } = useStatus();
@@ -90,17 +90,28 @@ export function Home() {
       : `${abnormalCount} components have issues, but don't worry, we are working on it.`
     : "All Systems Operational";
 
+  const pendingCount = useMemo(() => {
+    const events = chain(DB.Events)
+      .filter(e => e.Status === EventStatus.PendingReview)
+      .value();
+
+    log.debug("Pending Maintenance", events);
+    return events.length;
+  }, [DB]);
+
   return (
     <>
       <Helmet>
         <title>{Dic.Name} {Dic.Prod}</title>
       </Helmet>
 
-      <ScaleNotification
-        heading="You have 6 maintenance events for the review."
-        opened
-        variant="informational"
-      />
+      {pendingCount > 0 && (
+        <ScaleNotification
+          heading={`You have ${pendingCount} maintenance events pending for review.`}
+          opened
+          variant="informational"
+        />
+      )}
 
       <ScaleNotification
         heading={heading}