demeter

Autonomous Hydroponic Intelligence

frontend/src/App.js (2239B)


 1import { useState, useEffect } from "react";
 2import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 3import { FarmDataProvider } from "./hooks/useFarmData";
 4import { SettingsProvider } from "./hooks/useSettings";
 5import { useSettings } from "./hooks/useSettings";
 6
 7import LandingPage from "./pages/LandingPage";
 8import Dashboard from "./pages/Dashboard";
 9import CropDetails from "./pages/CropDetails";
10import AddCrop from "./pages/AddCrop";
11import RunCycle from "./pages/RunCycle";
12import FarmIntelligence from "./pages/FarmIntelligence";
13import Analytics from "./pages/Analytics";
14import Alerts from "./pages/Alerts";
15import SettingsPage from "./pages/Settings";
16import Help from "./pages/Help";
17import Onboarding from "./components/Onboarding";
18
19function AppInner() {
20  const { settings, update } = useSettings();
21  const [showOnboarding, setShowOnboarding] = useState(false);
22
23  useEffect(() => {
24    if (!settings.onboardingDone) {
25      // Small delay so the page renders first
26      const t = setTimeout(() => setShowOnboarding(true), 600);
27      return () => clearTimeout(t);
28    }
29  }, [settings.onboardingDone]);
30
31  return (
32    <>
33      <Router>
34        {showOnboarding && (
35          <Onboarding
36            onDone={() => {
37              update("onboardingDone", true);
38              setShowOnboarding(false);
39            }}
40          />
41        )}
42        <Routes>
43          <Route path="/" element={<LandingPage />} />
44          <Route path="/dashboard" element={<Dashboard />} />
45          <Route path="/crop/:cropId" element={<CropDetails />} />
46          <Route path="/add-crop" element={<AddCrop />} />
47          <Route path="/run-cycle/:cropId" element={<RunCycle />} />
48          <Route path="/intelligence" element={<FarmIntelligence />} />
49          <Route path="/analytics" element={<Analytics />} />
50          <Route path="/alerts" element={<Alerts />} />
51          <Route path="/settings" element={<SettingsPage />} />
52          <Route path="/help" element={<Help />} />
53        </Routes>
54      </Router>
55    </>
56  );
57}
58
59function App() {
60  return (
61    <SettingsProvider>
62      <FarmDataProvider>
63        <AppInner />
64      </FarmDataProvider>
65    </SettingsProvider>
66  );
67}
68
69export default App;