update-added error handling

.github/workflows/deploy.yml

@@ -0,0 +1,43 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

project_recommendations.md

@@ -0,0 +1,62 @@
+# Project Improvement Recommendations
+
+## 1. Code Organization and Structure
+- Consider implementing a proper state management solution like Redux or Zustand instead of relying solely on local state
+- Move types/interfaces to separate `.types.ts` files for better code organization
+- Create constants files for magic numbers and strings
+
+## 2. Performance Optimizations
+- Implement React.memo() for components that receive stable props (SignalMeter, MPECalculator)
+- Add useMemo/useCallback hooks for expensive calculations and callback functions
+- Consider implementing virtualization for the SignalGraph when dealing with large datasets
+- Add proper cleanup in useEffect hooks in useSignalStrength.ts
+
+## 3. Error Handling
+- Implement proper error boundaries for the application
+- Add error states and loading states for all components
+- Implement proper error handling for RF calculations
+- Add input validation for RF readings
+
+## 4. Testing
+- Add unit tests using Jest/React Testing Library
+- Add integration tests for the RF calculation utilities
+- Implement E2E tests using Cypress or Playwright
+- Add proper test coverage reporting
+
+## 5. Accessibility
+- Add proper ARIA labels and roles
+- Ensure proper keyboard navigation
+- Implement proper color contrast ratios
+- Add screen reader support
+
+## 6. UI/UX Improvements
+- Add proper loading indicators
+- Implement responsive design patterns
+- Add animations for transitions between states
+- Consider adding dark mode support
+- Add proper tooltips for technical values
+
+## 7. Documentation
+- Add JSDoc comments for all functions and components
+- Create proper README with setup and contribution guidelines
+- Add inline documentation for complex calculations
+- Document all props and their types
+
+## 8. Development Experience
+- Add proper ESLint rules
+- Set up Prettier for consistent code formatting
+- Add pre-commit hooks
+- Implement proper CI/CD pipeline
+
+## 9. Security
+- Implement proper input sanitization
+- Add rate limiting for calculations
+- Implement proper data validation
+- Consider adding HTTP security headers
+
+## 10. Feature Additions
+- Add data export functionality
+- Implement data persistence
+- Add user preferences
+- Consider adding multiple measurement units support
+- Add calibration options

src/App.tsx

@@ -3,11 +3,13 @@ import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import ErrorBoundary from "./components/ErrorBoundary";
 import Index from "./pages/Index";
 
 const queryClient = new QueryClient();
 
 const App = () => (
+  <ErrorBoundary>
   <QueryClientProvider client={queryClient}>
     <TooltipProvider>
       <Toaster />

src/components/ErrorBoundary.tsx

@@ -0,0 +1,40 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return this.props.fallback || (
+        <div className="p-4 bg-warning shadow-win95-out">
+          <h2 className="text-xl font-bold text-win95-text mb-2">Something went wrong</h2>
+          <p className="text-win95-text">{this.state.error?.message}</p>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/components/LoadingIndicator.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface LoadingIndicatorProps {
+  message?: string;
+  height?: string;
+}
+
+const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({ 
+  message = 'Loading...', 
+  height = 'h-20' 
+}) => {
+  return (
+    <div className={`flex items-center justify-center ${height}`}>
+      <div className="animate-pulse text-win95-text">{message}</div>
+    </div>
+  );
+};
+
+export default LoadingIndicator;

src/components/MPECalculator.tsx

@@ -5,7 +5,21 @@ interface MPECalculatorProps {
   reading: RFReading | null;
 }
 
-const MPECalculator: React.FC<MPECalculatorProps> = ({ reading }) => {
+const MPECalculator: React.FC<MPECalculatorProps> = ({ reading, isLoading, error }) => {
+  if (error) {
+    throw error;
+  }
+
+  if (isLoading) {
+    return (
+      <div className="p-4">
+        <h2 className="text-xl font-bold text-win95-text mb-4">MPE Level</h2>
+        <div className="flex items-center justify-center h-20">
+          <div className="animate-pulse text-win95-text">Loading...</div>
+        </div>
+      </div>
+    );
+  }
   const mpe = reading?.mpe ?? 0;
   const isSafe = isSafeExposure(mpe);
 
@@ -38,4 +52,4 @@ const MPECalculator: React.FC<MPECalculatorProps> = ({ reading }) => {
   );
 };
 
-export default MPECalculator;
+export default React.memo(MPECalculator);

src/components/SignalMeter.tsx

@@ -5,7 +5,21 @@ interface SignalMeterProps {
   reading: RFReading | null;
 }
 
-const SignalMeter: React.FC<SignalMeterProps> = ({ reading }) => {
+const SignalMeter: React.FC<SignalMeterProps> = ({ reading, isLoading, error }) => {
+  if (error) {
+    throw error;
+  }
+
+  if (isLoading) {
+    return (
+      <div className="p-4">
+        <h2 className="text-xl font-bold text-win95-text mb-4">Signal Strength</h2>
+        <div className="flex items-center justify-center h-40">
+          <div className="animate-pulse text-win95-text">Loading...</div>
+        </div>
+      </div>
+    );
+  }
   const signalStrength = reading?.signalStrength ?? 0;
   const normalizedStrength = Math.min(Math.abs(signalStrength) / 100, 1);
 
@@ -27,4 +41,4 @@ const SignalMeter: React.FC<SignalMeterProps> = ({ reading }) => {
   );
 };
 
-export default SignalMeter;
+export default React.memo(SignalMeter);

vite.config.ts

@@ -5,6 +5,7 @@ import { componentTagger } from "lovable-tagger";
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
+  base: "/rf-sense-o-meter/",
   server: {
     host: "::",
     port: 8080,