[enhance] Refactor Availability Handling & IndexedDB

src/Components/Auth/UserMgr.ts

@@ -51,6 +51,8 @@ export class UserMgr extends UserManager {
     const state = btoa(stateObj).replace(/=+$/, '');
 
     const loginUrl = `${process.env.SD_BACKEND_URL}/auth/login?state=${state}`;
+    const current = window.location.href;
+    await this.settings.userStore.set("current", current);
     window.location.href = loginUrl;
   }
 
@@ -89,6 +91,9 @@ export class UserMgr extends UserManager {
     });
 
     await this.storeUser(user);
+    this.settings.userStore.get("current").then((current) => {
+      window.location.href = current || "/";
+    });
     return user;
   }
 }

src/Components/Availability/AvailaMatrix.tsx

@@ -1,11 +1,7 @@
 import { ScaleTable } from "@telekom/scale-components-react";
-import { useCreation } from "ahooks";
 import dayjs from "dayjs";
 import { chain } from "lodash";
-import { useEffect, useState } from "react";
-import { BehaviorSubject } from "rxjs";
-import { Station } from "~/Helpers/Entities";
-import { useStatus } from "~/Services/Status";
+import { useAvailability } from "~/Services/Availability";
 import { CategoryGroup } from "./CategoryGroup";
 
 /**
@@ -14,20 +10,7 @@ import { CategoryGroup } from "./CategoryGroup";
  * @version 0.1.0
  */
 export function AvailaMatrix() {
-  const { DB } = useStatus();
-  const [region, setRegion] = useState(DB.Regions[0]);
-
-  const topic = "Availability";
-  const regionSub = useCreation(
-    () => Station.get(topic, () => {
-      const first = DB.Regions[0];
-      return new BehaviorSubject(first);
-    }), []);
-
-  useEffect(() => {
-    const sub = regionSub.subscribe(setRegion);
-    return () => sub.unsubscribe();
-  }, []);
+  const { Region } = useAvailability();
 
   return (
     <ScaleTable className="relative">
@@ -63,11 +46,11 @@ export function AvailaMatrix() {
         </thead>
 
         <tbody>
-          {chain(Array.from(region.Services))
+          {chain(Array.from(Region.Services))
             .map(x => x.Category)
             .uniqBy(x => x.Id)
             .orderBy(x => x.Name)
-            .map((x, i) => <CategoryGroup key={i} Category={x} Topic={topic} />)
+            .map((x, i) => <CategoryGroup key={i} Category={x} />)
             .value()}
         </tbody>
       </table>

src/Components/Availability/CategoryGroup.tsx

@@ -1,18 +1,22 @@
+import { useMemo } from "react";
+import { useAvailability } from "~/Services/Availability";
 import { Models } from "~/Services/Status.Models";
-import { useAvailability } from "./useAvailability";
-
-interface ICategoryGroup {
-  Category: Models.ICategory;
-  Topic: string;
-}
 
 /**
  * @author Aloento
  * @since 1.0.0
  * @version 0.1.0
  */
-export function CategoryGroup({ Category, Topic }: ICategoryGroup) {
-  const avas = useAvailability(Category, Topic);
+export function CategoryGroup({ Category }: { Category: Models.ICategory }) {
+  const { Availa, Region } = useAvailability();
+
+  const avas = useMemo(() => {
+    const res = Availa
+      .filter(x => x.RS.Region.Id === Region.Id)
+      .filter(x => x.RS.Service.Category.Id === Category.Id);
+
+    return res;
+  }, [Availa, Region]);
 
   function getColor(val: number): string {
     const color = val >= 99.95

src/Components/New/useNewForm.ts

@@ -179,7 +179,7 @@ export function useNewForm() {
       start_date: start.toISOString()
     }
 
-    if (type === EventType.Maintenance) {
+    if (type === EventType.Maintenance && end) {
       body.end_date = end
     }
 

src/Pages/Availability.tsx

@@ -1,6 +1,7 @@
 import { Helmet } from "react-helmet";
 import { AvailaMatrix } from "~/Components/Availability/AvailaMatrix";
 import { RegionSelector } from "~/Components/Home/RegionSelector";
+import { AvailaContext } from "~/Services/Availability";
 
 /**
  * @author Aloento
@@ -18,6 +19,8 @@ export function Availability() {
       Topic="Availability"
     />
 
-    <AvailaMatrix />
+    <AvailaContext>
+      <AvailaMatrix />
+    </AvailaContext>
   </>;
 }

src/Services/Availability.tsx

@@ -0,0 +1,135 @@
+import { ScaleLoadingSpinner } from "@telekom/scale-components-react";
+import { useCreation, useRequest } from "ahooks";
+import { createContext, JSX, Suspense, useContext, useEffect, useState } from "react";
+import { BehaviorSubject } from "rxjs";
+import { Station } from "~/Helpers/Entities";
+import { Logger } from "~/Helpers/Logger";
+import { DB } from "./DB";
+import { useStatus } from "./Status";
+import { Models } from "./Status.Models";
+
+interface AvailEntity {
+  year: number
+  month: number
+  percentage: number
+}
+
+interface ServiceAvaEntity {
+  id: number
+  name: string
+  availability: AvailEntity[]
+  region: string
+}
+
+interface IAvailability {
+  RS: Models.IRegionService,
+  Percentages: number[]
+}
+
+interface IContext {
+  Availa: IAvailability[];
+  Region: Models.IRegion
+}
+
+const db = new DB<IAvailability[]>(() => []);
+
+const CTX = createContext<IContext>({} as IContext);
+const key = "Availability";
+
+await db.load(key);
+
+const log = new Logger("Service", key);
+
+/**
+ * @author Aloento
+ * @since 1.0.0
+ * @version 0.1.0
+ */
+export function useAvailability() {
+  const ctx = useContext(CTX);
+
+  if (db.Ins.length < 1) {
+    throw new Promise((res) => {
+      const i = setInterval(() => {
+        if (db.Ins.length > 0) {
+          clearInterval(i);
+          res(ctx);
+        }
+      }, 100);
+    });
+  }
+
+  return ctx;
+}
+
+/**
+ * @author Aloento
+ * @since 1.0.0
+ * @version 0.1.0
+ */
+export function AvailaContext({ children }: { children: JSX.Element }) {
+  const { DB } = useStatus();
+  const [region, setRegion] = useState(DB.Regions[0]);
+  const [ins, setDB] = useState(db.Ins);
+
+  const regionSub = useCreation(
+    () => Station.get(key, () => {
+      const first = DB.Regions[0];
+      return new BehaviorSubject(first);
+    }), []);
+
+  useEffect(() => {
+    const sub = regionSub.subscribe(setRegion);
+    return () => sub.unsubscribe();
+  }, []);
+
+  const url = process.env.SD_BACKEND_URL;
+
+  useRequest(async () => {
+    const res = await fetch(`${url}/v2/availability`);
+    const data = (await res.json()).data as ServiceAvaEntity[];
+
+    const raw = [] as IAvailability[];
+
+    for (const service of data) {
+      const rs = DB.RegionService.find(x => x.Id === service.id);
+
+      if (!rs) {
+        log.info("Service not found.", service);
+        continue;
+      }
+
+      if (!service.availability || service.availability.length < 6) {
+        log.info(`Skipped ${key}.`, service);
+        continue;
+      }
+
+      const ava = service.availability
+        .map(x => x.percentage)
+        .slice(0, 6)
+        .reverse();
+
+      raw.push({
+        RS: rs,
+        Percentages: ava
+      });
+    }
+
+    log.debug(`${key} data processed.`, raw);
+    return raw;
+  }, {
+    cacheKey: key,
+    onSuccess: (res) => {
+      setDB(res);
+      db.save(key, res);
+    }
+  });
+
+  return (
+    <CTX.Provider value={{ Availa: ins, Region: region }}>
+      <Suspense fallback={<ScaleLoadingSpinner size="large" text={`Loading ${key}...`} />}>
+        {children}
+      </Suspense>
+    </CTX.Provider>
+  );
+}