Fix #1408: [BOUNTY] [level:advanced] Refactor React State Managers to C

Frontend/src/components/ErrorBoundary.tsx

@@ -0,0 +1,176 @@
+import React, { ErrorInfo, ReactNode } from 'react';
+import { buildErrorPayload, copyErrorPayload } from '../utils/errorDiagnostics';
+
+type ErrorBoundaryProps = {
+  children: ReactNode;
+  title?: string;
+  description?: string;
+};
+
+type ErrorBoundaryState = {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+  copied: boolean;
+};
+
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = {
+    hasError: false,
+    error: null,
+    errorInfo: null,
+    copied: false,
+  };
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    return {
+      hasError: true,
+      error,
+      copied: false,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.setState({ errorInfo });
+    console.error('[error-boundary] Unhandled application error', error, errorInfo);
+  }
+
+  handleRetry = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      copied: false,
+    });
+  };
+
+  handleCopy = async () => {
+    const { error, errorInfo } = this.state;
+
+    if (!error) {
+      return;
+    }
+
+    const payload = buildErrorPayload(error, errorInfo);
+    const copied = await copyErrorPayload(payload);
+    this.setState({ copied });
+  };
+
+  render() {
+    if (!this.state.hasError) {
+      return this.props.children;
+    }
+
+    const payload = this.state.error
+      ? buildErrorPayload(this.state.error, this.state.errorInfo)
+      : null;
+
+    return (
+      <div
+        style={{
+          minHeight: '100vh',
+          display: 'grid',
+          placeItems: 'center',
+          padding: '24px',
+          background: 'radial-gradient(circle at top, #ffe7c2 0%, #f6f1e8 45%, #efe6d6 100%)',
+          color: '#1d1d1b',
+          fontFamily: 'Georgia, "Times New Roman", serif',
+        }}
+      >
+        <div
+          style={{
+            width: '100%',
+            maxWidth: '760px',
+            borderRadius: '28px',
+            overflow: 'hidden',
+            boxShadow: '0 30px 80px rgba(60, 42, 20, 0.16)',
+            border: '1px solid rgba(69, 50, 31, 0.12)',
+            background: 'rgba(255,255,255,0.86)',
+            backdropFilter: 'blur(10px)',
+          }}
+        >
+          <div
+            style={{
+              padding: '18px 24px',
+              background: 'linear-gradient(135deg, #a63f14, #d97706)',
+              color: '#fff7ed',
+              letterSpacing: '0.08em',
+              textTransform: 'uppercase',
+              fontSize: '12px',
+              fontWeight: 700,
+            }}
+          >
+            Application Recovery
+          </div>
+
+          <div style={{ padding: '32px 24px' }}>
+            <p style={{ margin: 0, fontSize: '14px', color: '#9a3412', fontWeight: 700 }}>
+              Something went wrong
+            </p>
+            <h1 style={{ margin: '10px 0 12px', fontSize: 'clamp(2rem, 4vw, 3.4rem)', lineHeight: 1.05 }}>
+              {this.props.title ?? 'We hit an unexpected error.'}
+            </h1>
+            <p style={{ margin: 0, maxWidth: '60ch', fontSize: '16px', lineHeight: 1.7, color: '#44403c' }}>
+              {this.props.description ??
+                'The page crashed before it could finish rendering. You can retry immediately or copy the diagnostic payload and share it with support for faster investigation.'}
+            </p>
+
+            <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', marginTop: '24px' }}>
+              <button
+                type="button"
+                onClick={this.handleRetry}
+                style={{
+                  border: 'none',
+                  borderRadius: '999px',
+                  background: '#1f2937',
+                  color: '#fff',
+                  padding: '12px 18px',
+                  fontSize: '14px',
+                  fontWeight: 700,
+                  cursor: 'pointer',
+                }}
+              >
+                Retry page
+              </button>
+              <button
+                type="button"
+                onClick={this.handleCopy}
+                style={{
+                  borderRadius: '999px',
+                  background: 'transparent',
+                  color: '#9a3412',
+                  padding: '12px 18px',
+                  fontSize: '14px',
+                  fontWeight: 700,
+                  cursor: 'pointer',
+                  border: '1px solid rgba(154, 52, 18, 0.24)',
+                }}
+              >
+                {this.state.copied ? 'Copied payload' : 'Copy error payload'}
+              </button>
+            </div>
+
+            {payload ? (
+              <pre
+                style={{
+                  marginTop: '24px',
+                  padding: '18px',
+                  borderRadius: '18px',
+                  background: '#1c1917',
+                  color: '#fed7aa',
+                  overflowX: 'auto',
+                  fontSize: '12px',
+                  lineHeight: 1.55,
+                }}
+              >
+                {payload}
+              </pre>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ErrorBoundary;

Frontend/src/main.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import ErrorBoundary from './components/ErrorBoundary';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
+  </React.StrictMode>,
+);

Frontend/src/store/createPersistedStore.ts

@@ -0,0 +1,106 @@
+import { StateCreator, StoreMutatorIdentifier, create } from 'zustand';
+import { StateStorage, StorageValue, createJSONStorage, persist } from 'zustand/middleware';
+
+type PersistedStoreOptions<T> = {
+  name: string;
+  version?: number;
+  partialize?: (state: T) => Partial<T>;
+};
+
+type WriteResult = {
+  ok: boolean;
+  error?: Error;
+};
+
+const inMemoryFallback = new Map<string, string>();
+
+const normalizeError = (error: unknown): Error => {
+  if (error instanceof Error) {
+    return error;
+  }
+
+  return new Error(typeof error === 'string' ? error : 'Unknown storage error');
+};
+
+const safeStorage: StateStorage = {
+  getItem: (name) => {
+    try {
+      if (typeof window === 'undefined' || !window.localStorage) {
+        return inMemoryFallback.get(name) ?? null;
+      }
+
+      return window.localStorage.getItem(name);
+    } catch (error) {
+      console.error('[store:persist] Failed to read localStorage key:', name, error);
+      return inMemoryFallback.get(name) ?? null;
+    }
+  },
+  setItem: (name, value) => {
+    const result = writeStorageValue(name, value);
+
+    if (!result.ok) {
+      console.error('[store:persist] Failed to write localStorage key:', name, result.error);
+    }
+  },
+  removeItem: (name) => {
+    try {
+      inMemoryFallback.delete(name);
+
+      if (typeof window === 'undefined' || !window.localStorage) {
+        return;
+      }
+
+      window.localStorage.removeItem(name);
+    } catch (error) {
+      console.error('[store:persist] Failed to remove localStorage key:', name, error);
+    }
+  },
+};
+
+export const writeStorageValue = (name: string, value: string): WriteResult => {
+  try {
+    inMemoryFallback.set(name, value);
+
+    if (typeof window === 'undefined' || !window.localStorage) {
+      return { ok: true };
+    }
+
+    window.localStorage.setItem(name, value);
+    return { ok: true };
+  } catch (error) {
+    const normalized = normalizeError(error);
+
+    if (normalized.name === 'QuotaExceededError') {
+      console.error('[store:persist] Storage quota exceeded while writing key:', name);
+    }
+
+    return { ok: false, error: normalized };
+  }
+};
+
+export const createPersistedStore = <T extends object>(
+  initializer: StateCreator<T, [], []>,
+  options: PersistedStoreOptions<T>,
+) => {
+  return create<T>()(
+    persist(initializer, {
+      name: options.name,
+      version: options.version ?? 1,
+      partialize: options.partialize,
+      storage: createJSONStorage(() => safeStorage),
+      onRehydrateStorage: () => (state, error) => {
+        if (error) {
+          console.error('[store:persist] Failed to rehydrate store:', options.name, error);
+          return;
+        }
+
+        if (!state) {
+          console.warn('[store:persist] No state available during rehydration for store:', options.name);
+        }
+      },
+    }),
+  );
+};
+
+export type PersistedStateCreator<T, Mps extends [StoreMutatorIdentifier, unknown][] = [], Mcs extends [StoreMutatorIdentifier, unknown][] = []> = StateCreator<T, Mps, Mcs>;
+export type PersistedStorageValue<T> = StorageValue<T>;

Frontend/src/utils/errorDiagnostics.ts

@@ -0,0 +1,50 @@
+import { ErrorInfo } from 'react';
+
+type DiagnosticPayload = {
+  message: string;
+  stack: string | null;
+  componentStack: string | null;
+  userAgent: string | null;
+  url: string | null;
+  timestamp: string;
+};
+
+export const buildErrorPayload = (error: Error, errorInfo?: ErrorInfo | null) => {
+  const payload: DiagnosticPayload = {
+    message: error.message,
+    stack: error.stack ?? null,
+    componentStack: errorInfo?.componentStack ?? null,
+    userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : null,
+    url: typeof window !== 'undefined' ? window.location.href : null,
+    timestamp: new Date().toISOString(),
+  };
+
+  return JSON.stringify(payload, null, 2);
+};
+
+export const copyErrorPayload = async (payload: string) => {
+  try {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(payload);
+      return true;
+    }
+
+    if (typeof document === 'undefined') {
+      return false;
+    }
+
+    const textArea = document.createElement('textarea');
+    textArea.value = payload;
+    textArea.setAttribute('readonly', 'true');
+    textArea.style.position = 'fixed';
+    textArea.style.opacity = '0';
+    document.body.appendChild(textArea);
+    textArea.select();
+    const copied = document.execCommand('copy');
+    document.body.removeChild(textArea);
+    return copied;
+  } catch (error) {
+    console.error('[error-boundary] Failed to copy diagnostic payload', error);
+    return false;
+  }
+};