Replace managers with context providers

- Replaced all manager components with context providers
    - GradientsManager -> GradientsContextProvider
    - SettingsManager -> SettingsContextProvider
    - SceneryManager -> SceneryContextProvider
    - ThemeManager -> ThemeContextProvider
- Moved state logic from App to new context providers:
    - DistanceMeterContextProvider
    - SideMenuContextProvider

src/components/App.jsx

@@ -1,38 +1,34 @@
-import { useState } from 'react';
+import { EmbeddedContextProvider, useEmbeddedContext } from '../contexts/EmbeddedContext';
+import { ThemeContextProvider} from '../contexts/ThemeContext';
+import { SettingsContextProvider } from '../contexts/SettingsContext';
+import { SceneryContextProvider } from '../contexts/SceneryContext';
+import { GradientsContextProvider } from '../contexts/GradientsContext';
+import { DistanceMeterContextProvider } from '../contexts/DistanceMeterContext';
+import { SideMenuContextProvider } from '../contexts/SideMenuContext';
 import Map from './map/Map';
 import Toolbar from './toolbar/Toolbar';
 import SideMenu from './sidemenu/SideMenu';
-import SettingsManager from './SettingsManager';
 import LocList from './loclist/LocList';
 import DialogManager from './dialog/DialogManager';
-import DistanceMeterContext from '../contexts/DistanceMeterContext';
-import {GradientsManager} from "./GradientsManager";
-import SideMenuContext from '../contexts/SideMenuContext';
-import SceneryManager from './SceneryManager';
-import ThemeManager from './ThemeManager';
-import {EmbeddedContextProvider, useEmbeddedContext} from '../contexts/EmbeddedContext';
 import './Themes.css';
 import './App.css';
 
 function App() {
-    const [sideMenuOpen, setSideMenuOpen] = useState(false);
-    const [distancePoints, setDistancePoints] = useState(null);
-
     return (
         <EmbeddedContextProvider>
-            <ThemeManager>
+            <ThemeContextProvider>
-                <SettingsManager>
+                <SettingsContextProvider>
-                    <SceneryManager>
+                    <SceneryContextProvider>
-                        <GradientsManager>
+                        <GradientsContextProvider>
-                            <DistanceMeterContext.Provider value={{distancePoints, setDistancePoints}}>
+                            <DistanceMeterContextProvider>
-                                <SideMenuContext.Provider value={{sideMenuOpen, setSideMenuOpen}}>
+                                <SideMenuContextProvider>
                                     <AppContent />
-                                </SideMenuContext.Provider>
+                                </SideMenuContextProvider>
-                            </DistanceMeterContext.Provider>
+                            </DistanceMeterContextProvider>
-                        </GradientsManager>
+                        </GradientsContextProvider>
-                    </SceneryManager>
+                    </SceneryContextProvider>
-                </SettingsManager>
+                </SettingsContextProvider>
-            </ThemeManager>
+            </ThemeContextProvider>
         </EmbeddedContextProvider>
     );
 }

src/contexts/DistanceMeterContext.js

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-const DistanceMeterContext = createContext();
-export default DistanceMeterContext;

src/contexts/DistanceMeterContext.jsx

@@ -0,0 +1,16 @@
+import { createContext, useState } from 'react';
+
+const DistanceMeterContext = createContext();
+export default DistanceMeterContext;
+
+export const DistanceMeterContextProvider = ({children}) => {
+    const [distancePoints, setDistancePoints] = useState([]);
+
+    return (
+        <DistanceMeterContext.Provider value={{
+            distancePoints, setDistancePoints
+        }}>
+            { children }
+        </DistanceMeterContext.Provider>
+    );
+}

src/contexts/GradientsContext.js

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-const GradientsContext = createContext();
-export default GradientsContext;

src/contexts/GradientsContext.jsx

@@ -1,7 +1,9 @@
+import {createContext, useContext, useMemo} from "react";
 import Constants from "../helpers/constants";
-import {useContext, useMemo} from "react";
+import SceneryContext from "./SceneryContext";
-import GradientsContext from "../contexts/GradientsContext";
+
-import SceneryContext from "../contexts/SceneryContext";
+const GradientsContext = createContext();
+export default GradientsContext;
 
 function getMinMax(trackColorMode, scenery) {
     if (trackColorMode === 'elevation') {
@@ -54,10 +56,8 @@ function createGradientDefs(scenery) {
     );
 }
 
-export function GradientsManager(props) {
+export function GradientsContextProvider({children}) {
-    const { children } = props;
     const { scenery } = useContext(SceneryContext);
-
     const gradientDefs = useMemo(() => createGradientDefs(scenery), [scenery]);
 
     return (

src/contexts/SceneryContext.js

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-const SceneryContext = createContext();
-export default SceneryContext;

src/contexts/SceneryContext.jsx

@@ -1,17 +1,19 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { createContext, useState, useCallback, useEffect, useRef } from 'react';
-import SceneryContext from '../contexts/SceneryContext';
 import { useZoomPanEmitter } from '../hooks/useZoomPubSub';
 import SceneryParser from '../model/parsing/scenery-parser';
 import SceneryParserLog from '../model/parsing/scenery-parser-log';
 import { showCustomDialog, showDialog } from '../services/dialogService';
 import { resetHoveredTracksStack } from '../services/trackHoverInfoService';
-import SceneryLoadedDialog from './scenery-loaded-dialog/SceneryLoadedDialog';
+import SceneryLoadedDialog from '../components/scenery-loaded-dialog/SceneryLoadedDialog';
 import Constants from '../helpers/constants';
 import MiscHelper from '../helpers/miscHelper';
 import ElectrificationResolver from '../model/parsing/electrification-resolver';
-import { useEmbeddedContext } from '../contexts/EmbeddedContext';
+import { useEmbeddedContext } from './EmbeddedContext';
 
-export default function SceneryManager(props) {
+const SceneryContext = createContext();
+export default SceneryContext;
+
+export const SceneryContextProvider = ({children}) => {
     const [isLoading, setIsLoading] = useState(false);
     const [scenery, setScenery] = useState(null);
     const [sceneryListData, setSceneryListData] = useState(null);
@@ -180,7 +182,7 @@ export default function SceneryManager(props) {
 
     return (
         <SceneryContext.Provider value={{ isLoading, scenery, sceneryListData, loadScenery, loadCustomScenery, electrificationStepModeStep }}>
-            {props.children}
+            {children}
         </SceneryContext.Provider>
     );
-}
+}

src/contexts/SettingsContext.js

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-const SettingsContext = createContext();
-export default SettingsContext;

src/contexts/SettingsContext.jsx

@@ -1,8 +1,10 @@
-import { useCallback, useEffect, useState } from "react";
+import { createContext, useState, useCallback, useEffect } from 'react';
-import SettingsContext from "../contexts/SettingsContext";
 import Constants from "../helpers/constants";
 
-export default function SettingsManager(props) {
+const SettingsContext = createContext();
+export default SettingsContext;
+
+export const SettingsContextProvider = ({children}) => {
     const [ layers, setLayers ] = useState([]);
     const [ trackColorMode, setTrackColorMode ] = useState(Constants.trackColorModeDefault);
     const [ showTrackHoverInfo, setShowTrackHoverInfo ] = useState(true);
@@ -32,7 +34,7 @@ export default function SettingsManager(props) {
             extendedSignals, setExtendedSignals,
             originalSignalNames, setOriginalSignalNames
         }}>
-            { props.children }
+            { children }
         </SettingsContext.Provider>
     );
-}
+}

src/contexts/SideMenuContext.js

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-const SideMenuContext = createContext();
-export default SideMenuContext;

src/contexts/SideMenuContext.jsx

@@ -0,0 +1,16 @@
+import { createContext, useState } from 'react';
+
+const SideMenuContext = createContext();
+export default SideMenuContext;
+
+export const SideMenuContextProvider = ({children}) => {
+    const [sideMenuOpen, setSideMenuOpen] = useState(false);
+
+    return (
+        <SideMenuContext.Provider value={{
+            sideMenuOpen, setSideMenuOpen
+        }}>
+            { children }
+        </SideMenuContext.Provider>
+    );
+}

src/contexts/ThemeContext.js

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-const ThemeContext = createContext();
-export default ThemeContext;

src/contexts/ThemeContext.jsx

@@ -1,7 +1,9 @@
-import { useState } from "react";
+import { createContext, useState } from 'react';
-import ThemeContext from "../contexts/ThemeContext";
 
-export default function ThemeManager(props) {
+const ThemeContext = createContext();
+export default ThemeContext;
+
+export const ThemeContextProvider = ({children}) => {
     const [ lightMode, setLightMode ] = useState(false);
 
     if(lightMode === true) {
@@ -14,7 +16,7 @@ export default function ThemeManager(props) {
         <ThemeContext.Provider value={{
             lightMode, setLightMode
         }}>
-            { props.children }
+            { children }
         </ThemeContext.Provider>
     );
 }