This is a little embarrassing...
diff --git a/src/components/UI/Typography/Link.tsx b/src/components/UI/Typography/Link.tsx
index 076ce63a..f16bb61b 100644
--- a/src/components/UI/Typography/Link.tsx
+++ b/src/components/UI/Typography/Link.tsx
@@ -12,7 +12,7 @@ export const Link = ({ href, children, className }: LinkProps) => (
target="_blank"
rel="noopener noreferrer"
className={cn(
- "font-medium text-slate-900 underline underline-offset-4 dark:text-slate-50",
+ "font-medium text-slate-900 underline underline-offset-4 dark:text-slate-900",
className,
)}
>
diff --git a/src/core/hooks/useLocalStorage.ts b/src/core/hooks/useLocalStorage.ts
new file mode 100644
index 00000000..f7e3c20e
--- /dev/null
+++ b/src/core/hooks/useLocalStorage.ts
@@ -0,0 +1,179 @@
+// taken from https://react-hooked.vercel.app/docs/useLocalStorage/
+
+import { useCallback, useEffect, useState } from "react";
+
+import type { Dispatch, SetStateAction } from "react";
+
+declare global {
+ // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+ interface WindowEventMap {
+ "local-storage": CustomEvent;
+ }
+}
+
+type UseLocalStorageOptions = {
+ serializer?: (value: T) => string;
+ deserializer?: (value: string) => T;
+ initializeWithValue?: boolean;
+};
+
+const IS_SERVER = typeof window === "undefined";
+
+/**
+ * Hook for persisting state to localStorage.
+ *
+ * @param {string} key - The key to use for localStorage.
+ * @param {T | (() => T)} initialValue - The initial value to use, if not found in localStorage.
+ * @param {UseLocalStorageOptions} options - Options for the hook.
+ * @returns A tuple of [storedValue, setValue, removeValue].
+ */
+export default function useLocalStorage(
+ key: string,
+ initialValue: T | (() => T),
+ options: UseLocalStorageOptions = {},
+): [T, Dispatch>, () => void] {
+ const { initializeWithValue = true } = options;
+
+ const serializer = useCallback<(value: T) => string>(
+ (value) => {
+ if (options.serializer) {
+ return options.serializer(value);
+ }
+
+ return JSON.stringify(value);
+ },
+ [options],
+ );
+
+ const deserializer = useCallback<(value: string) => T>(
+ (value) => {
+ if (options.deserializer) {
+ return options.deserializer(value);
+ }
+ // Support 'undefined' as a value
+ if (value === "undefined") {
+ return undefined as unknown as T;
+ }
+
+ const defaultValue =
+ initialValue instanceof Function ? initialValue() : initialValue;
+
+ let parsed: unknown;
+ try {
+ parsed = JSON.parse(value);
+ } catch (error) {
+ console.error("Error parsing JSON:", error);
+ return defaultValue; // Return initialValue if parsing fails
+ }
+
+ return parsed as T;
+ },
+ [options, initialValue],
+ );
+
+ // Get from local storage then
+ // parse stored json or return initialValue
+ const readValue = useCallback((): T => {
+ const initialValueToUse =
+ initialValue instanceof Function ? initialValue() : initialValue;
+
+ // Prevent build error "window is undefined" but keep working
+ if (IS_SERVER) {
+ return initialValueToUse;
+ }
+
+ try {
+ const raw = window.localStorage.getItem(key);
+ return raw ? deserializer(raw) : initialValueToUse;
+ } catch (error) {
+ console.warn(`Error reading localStorage key “${key}”:`, error);
+ return initialValueToUse;
+ }
+ }, [initialValue, key, deserializer]);
+
+ const [storedValue, setStoredValue] = useState(() => {
+ if (initializeWithValue) {
+ return readValue();
+ }
+
+ return initialValue instanceof Function ? initialValue() : initialValue;
+ });
+
+ // Return a wrapped version of useState's setter function that ...
+ // ... persists the new value to localStorage.
+ const setValue: Dispatch> = useCallback(
+ (value) => {
+ // Prevent build error "window is undefined" but keeps working
+ if (IS_SERVER) {
+ console.warn(
+ `Tried setting localStorage key “${key}” even though environment is not a client`,
+ );
+ }
+
+ try {
+ // Allow value to be a function so we have the same API as useState
+ const newValue = value instanceof Function ? value(readValue()) : value;
+
+ // Save to local storage
+ window.localStorage.setItem(key, serializer(newValue));
+
+ // Save state
+ setStoredValue(newValue);
+
+ // We dispatch a custom event so every similar useLocalStorage hook is notified
+ window.dispatchEvent(new StorageEvent("local-storage", { key }));
+ } catch (error) {
+ console.warn(`Error setting localStorage key “${key}”:`, error);
+ }
+ },
+ [key, serializer, readValue],
+ );
+
+ const removeValue = useCallback(() => {
+ // Prevent build error "window is undefined" but keeps working
+ if (IS_SERVER) {
+ console.warn(
+ `Tried removing localStorage key “${key}” even though environment is not a client`,
+ );
+ }
+
+ const defaultValue =
+ initialValue instanceof Function ? initialValue() : initialValue;
+
+ // Remove the key from local storage
+ window.localStorage.removeItem(key);
+
+ // Save state with default value
+ setStoredValue(defaultValue);
+
+ // We dispatch a custom event so every similar useLocalStorage hook is notified
+ window.dispatchEvent(new StorageEvent("local-storage", { key }));
+ }, [key]);
+
+ useEffect(() => {
+ setStoredValue(readValue());
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [key]);
+
+ const handleStorageChange = useCallback(
+ (event: StorageEvent | CustomEvent) => {
+ if ((event as StorageEvent).key && (event as StorageEvent).key !== key) {
+ return;
+ }
+ setStoredValue(readValue());
+ },
+ [key, readValue],
+ );
+
+ useEffect(() => {
+ addEventListener("storage", handleStorageChange);
+ // this is a custom event, triggered in writeValueToLocalStorage
+ addEventListener("local-storage", handleStorageChange);
+ return () => {
+ removeEventListener("storage", handleStorageChange);
+ removeEventListener("local-storage", handleStorageChange);
+ };
+ }, []);
+
+ return [storedValue, setValue, removeValue];
+}
\ No newline at end of file
diff --git a/src/core/stores/deviceStore.ts b/src/core/stores/deviceStore.ts
index e21d59af..867eef27 100644
--- a/src/core/stores/deviceStore.ts
+++ b/src/core/stores/deviceStore.ts
@@ -26,7 +26,8 @@ export type DialogVariant =
| "deviceName"
| "nodeRemoval"
| "pkiBackup"
- | "nodeDetails";
+ | "nodeDetails"
+ | "unsafeRoles";
type QueueStatus = {
res: number, free: number, maxlen: number
@@ -69,6 +70,7 @@ export interface Device {
nodeRemoval: boolean;
pkiBackup: boolean;
nodeDetails: boolean;
+ unsafeRoles: boolean;
};
@@ -103,6 +105,7 @@ export interface Device {
state: MessageState,
) => void;
setDialogOpen: (dialog: DialogVariant, open: boolean) => void;
+ getDialogOpen: (dialog: DialogVariant) => boolean;
processPacket: (data: ProcessPacketParams) => void;
setMessageDraft: (message: string) => void;
setQueueStatus: (status: QueueStatus) => void;
@@ -158,6 +161,7 @@ export const useDeviceStore = createStore((set, get) => ({
nodeRemoval: false,
pkiBackup: false,
nodeDetails: false,
+ unsafeRoles: false,
},
pendingSettingsChanges: false,
messageDraft: "",
@@ -605,6 +609,13 @@ export const useDeviceStore = createStore((set, get) => ({
}),
);
},
+ getDialogOpen: (dialog: DialogVariant) => {
+ const device = get().devices.get(id);
+ if (!device) {
+ throw new Error("Device not found");
+ }
+ return device.dialog[dialog];
+ },
processPacket(data: ProcessPacketParams) {
set(
produce((draft) => {
diff --git a/src/core/utils/eventBus.test.ts b/src/core/utils/eventBus.test.ts
new file mode 100644
index 00000000..39258804
--- /dev/null
+++ b/src/core/utils/eventBus.test.ts
@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { eventBus } from "@core/utils/eventBus.ts";
+
+describe("EventBus", () => {
+ beforeEach(() => {
+ // Reset event listeners before each test
+ (eventBus as any).listeners = {};
+ });
+
+ it("should register an event listener and trigger it on emit", () => {
+ const mockCallback = vi.fn();
+
+ eventBus.on("dialog:unsafeRoles", mockCallback);
+ eventBus.emit("dialog:unsafeRoles", { action: "confirm" });
+
+ expect(mockCallback).toHaveBeenCalledWith({ action: "confirm" });
+ });
+
+ it("should remove an event listener with off", () => {
+ const mockCallback = vi.fn();
+
+ eventBus.on("dialog:unsafeRoles", mockCallback);
+ eventBus.off("dialog:unsafeRoles", mockCallback);
+ eventBus.emit("dialog:unsafeRoles", { action: "dismiss" });
+
+ expect(mockCallback).not.toHaveBeenCalled();
+ });
+
+ it("should return an unsubscribe function from on", () => {
+ const mockCallback = vi.fn();
+ const unsubscribe = eventBus.on("dialog:unsafeRoles", mockCallback);
+
+ unsubscribe();
+ eventBus.emit("dialog:unsafeRoles", { action: "confirm" });
+
+ expect(mockCallback).not.toHaveBeenCalled();
+ });
+
+ it("should allow multiple listeners for the same event", () => {
+ const mockCallback1 = vi.fn();
+ const mockCallback2 = vi.fn();
+
+ eventBus.on("dialog:unsafeRoles", mockCallback1);
+ eventBus.on("dialog:unsafeRoles", mockCallback2);
+ eventBus.emit("dialog:unsafeRoles", { action: "confirm" });
+
+ expect(mockCallback1).toHaveBeenCalledWith({ action: "confirm" });
+ expect(mockCallback2).toHaveBeenCalledWith({ action: "confirm" });
+ });
+
+ it("should only remove the specific listener when off is called", () => {
+ const mockCallback1 = vi.fn();
+ const mockCallback2 = vi.fn();
+
+ eventBus.on("dialog:unsafeRoles", mockCallback1);
+ eventBus.on("dialog:unsafeRoles", mockCallback2);
+ eventBus.off("dialog:unsafeRoles", mockCallback1);
+ eventBus.emit("dialog:unsafeRoles", { action: "dismiss" });
+
+ expect(mockCallback1).not.toHaveBeenCalled();
+ expect(mockCallback2).toHaveBeenCalledWith({ action: "dismiss" });
+ });
+
+ it("should not fail when calling off on a non-existent listener", () => {
+ const mockCallback = vi.fn();
+ eventBus.off("dialog:unsafeRoles", mockCallback);
+ eventBus.emit("dialog:unsafeRoles", { action: "confirm" });
+
+ expect(mockCallback).not.toHaveBeenCalled(); // No error should occur
+ });
+});
diff --git a/src/core/utils/eventBus.ts b/src/core/utils/eventBus.ts
new file mode 100644
index 00000000..afb922fa
--- /dev/null
+++ b/src/core/utils/eventBus.ts
@@ -0,0 +1,44 @@
+export type EventMap = {
+ 'dialog:unsafeRoles': {
+ action: 'confirm' | 'dismiss';
+ };
+ // add more events as required
+};
+
+export type EventName = keyof EventMap;
+export type EventCallback = (data: EventMap[T]) => void;
+
+class EventBus {
+ private listeners: { [K in EventName]?: Array> } = {};
+
+ public on(event: T, callback: EventCallback): () => void {
+ if (!this.listeners[event]) {
+ this.listeners[event] = [];
+ }
+
+ this.listeners[event]?.push(callback as any);
+
+ return () => {
+ this.off(event, callback);
+ };
+ }
+
+ public off(event: T, callback: EventCallback): void {
+ if (!this.listeners[event]) return;
+
+ const callbackIndex = this.listeners[event]?.indexOf(callback as any);
+ if (callbackIndex !== undefined && callbackIndex > -1) {
+ this.listeners[event]?.splice(callbackIndex, 1);
+ }
+ }
+
+ public emit(event: T, data: EventMap[T]): void {
+ if (!this.listeners[event]) return;
+
+ this.listeners[event]?.forEach(callback => {
+ callback(data);
+ });
+ }
+}
+
+export const eventBus = new EventBus();
\ No newline at end of file
diff --git a/src/pages/Config/DeviceConfig.tsx b/src/pages/Config/DeviceConfig.tsx
index 0f6df3b1..45ae5f19 100644
--- a/src/pages/Config/DeviceConfig.tsx
+++ b/src/pages/Config/DeviceConfig.tsx
@@ -1,5 +1,5 @@
import { Bluetooth } from "@components/PageComponents/Config/Bluetooth.tsx";
-import { Device } from "@components/PageComponents/Config/Device.tsx";
+import { Device } from "../../components/PageComponents/Config/Device/index.tsx";
import { Display } from "@components/PageComponents/Config/Display.tsx";
import { LoRa } from "@components/PageComponents/Config/LoRa.tsx";
import { Network } from "@components/PageComponents/Config/Network.tsx";
diff --git a/src/tests/setupTests.ts b/src/tests/setupTests.ts
index 245195c7..089c4c52 100644
--- a/src/tests/setupTests.ts
+++ b/src/tests/setupTests.ts
@@ -1,13 +1,13 @@
-// Try this import style instead
import { expect, afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import * as matchers from '@testing-library/jest-dom/matchers';
+import "@testing-library/jest-dom";
-// Add the matchers (should work with * as import)
-expect.extend(matchers);
+// Enable auto mocks for our UI components
+//vi.mock('@components/UI/Dialog.tsx');
+//vi.mock('@components/UI/Typography/Link.tsx');
-// Mock ResizeObserver
-global.ResizeObserver = class {
+globalThis.ResizeObserver = class {
observe() { }
unobserve() { }
disconnect() { }
diff --git a/vite.config.ts b/vite.config.ts
index 6a7d3f06..b6b90406 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,10 @@
-import { defineConfig } from "vite";
+import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';
import { execSync } from 'node:child_process';
-import path from "node:path";
+import process from "node:process";
+import path from 'node:path';
+
let hash = '';
try {
@@ -32,7 +34,6 @@ export default defineConfig({
},
resolve: {
alias: {
- // Using Node's path and process.cwd() instead of Deno.cwd()
'@app': path.resolve(process.cwd(), './src'),
'@pages': path.resolve(process.cwd(), './src/pages'),
'@components': path.resolve(process.cwd(), './src/components'),
diff --git a/vitest.config.ts b/vitest.config.ts
index e55b9841..d4542ae3 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -16,9 +16,13 @@ export default defineConfig({
},
},
test: {
- globals: true,
- include: ['src/**/*.test.tsx', 'src/**/*.test.ts'],
- setupFiles: ['src/tests/setupTests.ts'],
environment: 'happy-dom',
+ globals: true,
+ mockReset: true,
+ clearMocks: true,
+ restoreMocks: true,
+ root: path.resolve(process.cwd(), './src'),
+ include: ['**/*.{test,spec}.{ts,tsx}'],
+ setupFiles: ["./src/tests/setupTests.ts"],
},
})
\ No newline at end of file