diff --git a/src/Pages/index.tsx b/src/Pages/index.tsx
index 50458392..a5763238 100644
--- a/src/Pages/index.tsx
+++ b/src/Pages/index.tsx
@@ -5,6 +5,10 @@ import { useAuth } from "react-oidc-context";
import { PageFooter } from "~/Components/Layout/PageFooter";
import { TopNavBar } from "~/Components/Layout/TopNavBar";
import { useRouter } from "~/Components/Router";
+import { ErrorBanner } from "~/Components/StateViews";
+import { useAppToast } from "~/Helpers/useAppToast";
+import { useNetworkStatus } from "~/Helpers/useNetworkStatus";
+import { useStatus } from "~/Services/Status";
import { NotFound } from "./404";
import { Availability } from "./Availability";
import { Event } from "./Event";
@@ -21,6 +25,14 @@ export function Layout() {
const { Paths } = useRouter();
const path = Paths.at(0);
const auth = useAuth();
+ const { Error: ctxError, Refresh } = useStatus();
+ const toast = useAppToast();
+
+ const { isOnline } = useNetworkStatus(() => {
+ Refresh()
+ .then(() => toast.showSuccess("Back online, data refreshed."))
+ .catch(() => { /* Refresh will retry on next interval */ });
+ });
const match = useMemo(() => {
switch (path) {
@@ -59,6 +71,22 @@ export function Layout() {
+ {!isOnline && (
+
+ You are offline. Some features may be unavailable.
+
+ )}
+
+ {ctxError && (
+
+ Refresh()}
+ onDismiss={() => { /* Error clears on next successful load */ }}
+ />
+
+ )}
+
}>
{match}
diff --git a/src/Services/Availability.tsx b/src/Services/Availability.tsx
index be8fa5d8..c59eedb0 100644
--- a/src/Services/Availability.tsx
+++ b/src/Services/Availability.tsx
@@ -2,7 +2,9 @@ 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 { ApiError } from "~/Helpers/ApiError";
import { Station } from "~/Helpers/Entities";
+import { fetchPlus } from "~/Helpers/fetchPlus";
import { Logger } from "~/Helpers/Logger";
import { DB } from "./DB";
import { useStatus } from "./Status";
@@ -28,7 +30,8 @@ interface IAvailability {
interface IContext {
Availa: IAvailability[];
- Region: Models.IRegion
+ Region: Models.IRegion;
+ Error?: ApiError;
}
const db = new DB(() => []);
@@ -43,15 +46,15 @@ const log = new Logger("Service", key);
/**
* @author Aloento
* @since 1.0.0
- * @version 0.1.0
+ * @version 0.2.0
*/
export function useAvailability() {
const ctx = useContext(CTX);
- if (db.Ins.length < 1) {
+ if (db.Ins.length < 1 && !ctx.Error) {
throw new Promise((res) => {
const i = setInterval(() => {
- if (db.Ins.length > 0) {
+ if (db.Ins.length > 0 || ctx.Error) {
clearInterval(i);
res(ctx);
}
@@ -71,6 +74,7 @@ export function AvailaContext({ children }: { children: JSX.Element }) {
const { DB } = useStatus();
const [region, setRegion] = useState(DB.Regions[0]);
const [ins, setDB] = useState(db.Ins);
+ const [error, setError] = useState();
const regionSub = useCreation(
() => Station.get(key, () => {
@@ -86,8 +90,10 @@ export function AvailaContext({ children }: { children: JSX.Element }) {
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 res = await fetchPlus.getJson<{ data: ServiceAvaEntity[] }>(
+ `${url}/v2/availability`
+ );
+ const data = res.data;
const raw = [] as IAvailability[];
@@ -117,13 +123,19 @@ export function AvailaContext({ children }: { children: JSX.Element }) {
}, {
cacheKey: key,
onSuccess: (res) => {
+ setError(undefined);
setDB(res);
db.save(key, res);
- }
+ },
+ onError: (err) => {
+ const apiError = err instanceof ApiError ? err : ApiError.fromNetwork(err);
+ log.error("Availability data load failed", apiError);
+ setError(apiError);
+ },
});
return (
-
+
}>
{children}
diff --git a/src/Services/Status.tsx b/src/Services/Status.tsx
index 0962de9b..0cc1aaf5 100644
--- a/src/Services/Status.tsx
+++ b/src/Services/Status.tsx
@@ -2,7 +2,9 @@ import { useMount, useRequest } from "ahooks";
import { createContext, JSX, useContext, useRef, useState } from "react";
import { useAuth } from "react-oidc-context";
import { Subject } from "rxjs";
+import { ApiError } from "~/Helpers/ApiError";
import { Station } from "~/Helpers/Entities";
+import { fetchPlus } from "~/Helpers/fetchPlus";
import { Logger } from "~/Helpers/Logger";
import { DB } from "./DB";
import { EventEntityV2, StatusEntityV2 } from "./Status.Entities";
@@ -38,6 +40,7 @@ interface IContext {
DB: IStatusContext;
Update: (data?: IStatusContext) => void;
Refresh: () => Promise;
+ Error?: ApiError;
}
const CTX = createContext({} as IContext);
@@ -92,6 +95,7 @@ export function useStatus() {
*/
export function StatusContext({ children }: { children: JSX.Element }) {
const [ins, setDB] = useState(db.Ins);
+ const [error, setError] = useState();
const auth = useAuth();
const authRef = useRef(auth);
@@ -106,25 +110,25 @@ export function StatusContext({ children }: { children: JSX.Element }) {
}
log.info(`Loading status data from v2...`);
- const token = authRef.current?.user?.access_token ?
- { headers: { Authorization: `Bearer ${authRef.current.user.access_token}` } } : {};
+ const token = authRef.current?.user?.access_token;
const compLink = `${url}/v2/components`;
- const compRes = await fetch(compLink, token);
- const compData = await compRes.json();
+ const compData = await fetchPlus.getJson(compLink, { token });
log.debug("Components Status loaded.", compData);
- const first = await fetch(`${url}/v2/events?page=1&limit=50`, token);
- const firstData = await first.json();
+ const first = await fetchPlus.getJson<{
+ data?: EventEntityV2[];
+ pagination?: { totalPages?: number };
+ }>(`${url}/v2/events?page=1&limit=50`, { token });
const allEvents: EventEntityV2[] = [];
- if (firstData.data && Array.isArray(firstData.data)) {
- allEvents.push(...firstData.data);
+ if (first.data && Array.isArray(first.data)) {
+ allEvents.push(...first.data);
}
- const totalPages = firstData.pagination?.totalPages || 1;
+ const totalPages = first.pagination?.totalPages || 1;
log.debug(`Total pages: ${totalPages}`);
if (totalPages > 1) {
@@ -134,11 +138,10 @@ export function StatusContext({ children }: { children: JSX.Element }) {
const eventLink = `${url}/v2/events?page=${page}&limit=50`;
pagePromises.push(
- fetch(eventLink, token)
- .then(res => res.json())
- .then(data => {
- log.debug(`Loaded page ${page}/${totalPages}, events: ${data.data?.length || 0}`);
- return data.data || [];
+ fetchPlus.getJson<{ data?: EventEntityV2[] }>(eventLink, { token })
+ .then(res => {
+ log.debug(`Loaded page ${page}/${totalPages}, events: ${res.data?.length || 0}`);
+ return res.data || [];
})
);
}
@@ -154,13 +157,22 @@ export function StatusContext({ children }: { children: JSX.Element }) {
log.debug("Events loaded.", { total: allEvents.length });
return {
- Components: compData as StatusEntityV2[],
+ Components: compData,
Events: allEvents as EventEntityV2[]
};
},
{
cacheKey: key,
- onSuccess: (res) => update(TransformerV2(res)),
+ onSuccess: (res) => {
+ setError(undefined);
+ update(TransformerV2(res));
+ },
+ onError: (err) => {
+ const apiError = err instanceof ApiError ? err : ApiError.fromNetwork(err);
+ log.error("Status data load failed", apiError);
+ setError(apiError);
+ loading = undefined; // Allow retry via ErrorBoundary
+ },
}
);
@@ -182,6 +194,6 @@ export function StatusContext({ children }: { children: JSX.Element }) {
}
return (
- {children}
+ {children}
);
}
diff --git a/test/app.test.tsx b/test/app.test.tsx
deleted file mode 100644
index 1b7ad1cd..00000000
--- a/test/app.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { App } from "~/App";
-
-describe("App", () => {
- it("should render skeleton", () => {
- const { getByText } = render();
- expect(getByText("Imprint")).toBeInTheDocument();
- });
-});
diff --git a/test/home.test.tsx b/test/home.test.tsx
deleted file mode 100644
index 2efc07cf..00000000
--- a/test/home.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { render, waitFor } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { App } from "~/App";
-
-describe("Home", () => {
- it("should render Home with data", async () => {
- const { getByText } = render();
-
- await waitFor(() => {
- expect(getByText("Application Services")).toBeInTheDocument();
- }, { timeout: 6000 });
- }, 6000);
-});
diff --git a/test/vitest.setup.ts b/test/vitest.setup.ts
deleted file mode 100644
index 86429ff5..00000000
--- a/test/vitest.setup.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import "fake-indexeddb/auto";
-import { vi } from "vitest";
-
-const mutationObserverMock = vi
- .fn()
- .mockImplementation(() => {
- return {
- observe: vi.fn(),
- disconnect: vi.fn(),
- takeRecords: vi.fn(),
- };
- });
-
-global.MutationObserver = mutationObserverMock;