mainContent.jsx

/*
  The main wrapper for the app
*/

import { Route, Routes, useLocation } from "react-router-dom"
import { useEffect } from "react"

import Toolbar from "./toolbar/toolbar"
import SettingsModal from "./settingsModal"
import { Commands } from "./spotlight/commandHandler"

// Wrappers
import SingleRunWrapper from "./SingleRunWrapper"
import { SettingsProvider } from "../helpers/settingsProvider"

// Routes
import FLA from "../fla"
import Graphs from "../graphs"
import Missions from "../missions"
import Params from "../params"
import Config from "../config"
import CameraWindow from "./dashboard/webcam/webcam"
import Dashboard from "../dashboard"
import Navbar from "./navbar"

// Redux
import { useDispatch } from "react-redux"
import { ErrorBoundary } from "react-error-boundary"
import AlertProvider from "./dashboard/alertProvider"
import ErrorBoundaryFallback from "./error/errorBoundary"
import { initSocket } from "../redux/slices/socketSlice"

export default function AppContent() {
  // Conditionally render UI so the webcam route is literally just a webcam
  const renderUI = useLocation().pathname !== "/webcam"

  // Setup sockets for redux
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(initSocket())
  }, [])

  return (
    <SettingsProvider>
      <SingleRunWrapper>
        {renderUI && <Toolbar />}
        <ErrorBoundary fallbackRender={ErrorBoundaryFallback}>
          <SettingsModal />
          {renderUI && <Navbar className="no-drag" />}
          <Routes>
            <Route
              path="/"
              element={
                <AlertProvider>
                  <Dashboard />
                </AlertProvider>
              }
            />
            <Route path="/missions" element={<Missions />} />
            <Route path="/graphs" element={<Graphs />} />
            <Route path="/params" element={<Params />} />
            <Route path="/config" element={<Config />} />
            <Route path="/webcam" element={<CameraWindow />} />
            <Route path="/fla" element={<FLA />} />
          </Routes>
          {renderUI && <Commands />}
        </ErrorBoundary>
      </SingleRunWrapper>
    </SettingsProvider>
  )
}