dyomedea/src/App.tsx

import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';
import LiveMap from './components/map/LiveMap';

import { useAtom } from 'jotai';
import { atomWithHash } from 'jotai/utils';
import { MapScope } from './components/map/types';
import { debounce } from 'lodash';

setupIonicReact();

const initialScope: MapScope = {
  center: { lat: -37.8403508, lon: 77.5539501 },
  zoom: 13,
  tileProvider: 'osm',
};
const scopeAtom = atomWithHash('scope', initialScope);

/**
 *
 * @returns The root app component
 */
const App: React.FC = () => {
  const [scope, setScope] = useAtom(scopeAtom);

  console.log(`App, scope: ${JSON.stringify(scope)}`);
  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route exact path='/home'>
            <LiveMap
              scope={scope}
              setScope={debounce(setScope, 1000)}
              numberOfTiledLayers={5}
            />
          </Route>
          <Route exact path='/'>
            <Redirect to='/home' />
          </Route>
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
};

export default App;