App.tsx

// Import necessary dependencies and components
import { ThemeProvider } from '@mui/material';
import { useEffect } from 'react';
import { selectCurrentTheme } from './app/Layout/Navigation/darkmodeSlice';
import { DEMO_MODE, DEV_MODE } from './const';
import { addTextModel } from './features/soil-editor/soileditorSlice';
import Router from './router/Router';
import { useAppDispatch, useAppSelector } from "./store/hooks";
import { store } from './store/store';

// Main App component
function App(): JSX.Element {
  // Get the current theme from the Redux store
  const currentTheme = useAppSelector(selectCurrentTheme);

  // Get the dispatch function to dispatch actions to the Redux store
  const dispatch = useAppDispatch()

  // Get the current projects from the Redux store
  const projects = store.getState().soileditor.projects;

  // Load demo projects if there are no projects and the demo mode is enabled
  useEffect(() => {
    if (Object.keys(projects).length === 0 && DEMO_MODE) {
      fetch("/robot.soil").then(e => e.text()).then(e => dispatch(addTextModel(["Robot", "Robot", e])))
      fetch("/monitoring.soil").then(e => e.text()).then(e => dispatch(addTextModel(["Monitoring", "Monitoring", e])))
      fetch("/lasertracker.soil").then(file => file.text()).then(lasertracker => {
        fetch("/base_stations.soil").then(file2 => file2.text()).then(base_stations => {
          fetch("/mobile_entities.soil").then(file3 => file3.text()).then(mobile_entities => {
            fetch("/utils.soil").then(file4 => file4.text()).then(utils => {
              dispatch(addTextModel(["Lasertracker", "lasertracker", lasertracker, "mobile_entities", mobile_entities, "base_stations", base_stations, "utils", utils]))
            })
          })
        })
      })
    }
  }, []);

  // Render the app with the current theme and main router component
  return (
    <ThemeProvider theme={currentTheme}>
      <Router />
    </ThemeProvider>
  );
}

// Export the App component
export default App;