Fix routes title change, remove console logs

Author: k.golikov

src/App.tsx

@@ -8,17 +8,23 @@ import { HashRouter } from 'react-router-dom';
 import ErudaLayout from './layouts/ErudaLayout';
 import ThemeProvider from './layouts/ThemeProvider';
 import AppLoadingLayout from './layouts/appLoadingLayout/AppLoadingLayout';
+import RouteContextProvider from './layouts/RouteContextProvider';
+import RouteContextConsumer from './layouts/RouteContextConsumer';
 
 const App: FunctionComponent = () => (
     <ThemeProvider>
         <ErudaLayout>
             <AppLoadingLayout>
                 <Provider store={store}>
-                    <HashRouter>
-                        <AppLayout>
-                            <AppRouter />
-                        </AppLayout>
-                    </HashRouter>
+                    <RouteContextProvider>
+                        <RouteContextConsumer>
+                            <HashRouter>
+                                <AppLayout>
+                                    <AppRouter />
+                                </AppLayout>
+                            </HashRouter>
+                        </RouteContextConsumer>
+                    </RouteContextProvider>
                 </Provider>
             </AppLoadingLayout>
         </ErudaLayout>

src/AppRouter.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { routesList } from './constants/router/routes';
 import NotFoundPage from './pages/notFoundPage/NotFoundPage';
-import RouteWrapper from './layouts/RouteWrapper';
+import RouteContextInitializer from './layouts/RouteContextInitializer';
 
 const AppRouter = () => (
     <Routes>
@@ -13,9 +13,9 @@ const AppRouter = () => (
         <Route
             path="*"
             element={
-                <RouteWrapper title="Not Found">
+                <RouteContextInitializer title="Not Found" key="@NOT_FOUND">
                     <NotFoundPage />
-                </RouteWrapper>
+                </RouteContextInitializer>
             }
         />
     </Routes>

src/constants/router/routes.tsx

@@ -28,7 +28,7 @@ import HtmlEditorPage from '../../pages/htmlEditorPage/HtmlEditorPage';
 import Base64Page from '../../pages/base64Page/Base64Page';
 import DataUrlPage from '../../pages/dataUrlPage/DataUrlPage';
 import DataUrlViewPage from '../../pages/dataUrlViewPage/DataUrlViewPage';
-import RouteWrapper from '../../layouts/RouteWrapper';
+import RouteContextInitializer from '../../layouts/RouteContextInitializer';
 
 export interface AppRoute extends Omit<RouteProps, 'element'> {
     path: string;
@@ -202,7 +202,11 @@ export const routes: AppRoutesMap = {
 
 export const convertAppRoute = ({ component, title, ...route }: AppRoute): RouteProps => ({
     ...route,
-    element: <RouteWrapper title={title}>{renderComponent(component)}</RouteWrapper>
+    element: (
+        <RouteContextInitializer title={title} key={route.path}>
+            {renderComponent(component)}
+        </RouteContextInitializer>
+    )
 });
 
 export const appRoutesList: AppRoute[] = values(routes);

src/context/RouteContext.ts

@@ -1,9 +1,18 @@
 import { createContext, Dispatch, SetStateAction } from 'react';
 
-export interface RouteContextType {
+export interface RouteContextState {
     title: string;
 }
 
-const RouteContext = createContext<[RouteContextType, Dispatch<SetStateAction<RouteContextType>>]>([] as any);
+export interface RouteContextMeta {
+    isInitialized: boolean;
+}
+
+export interface RouteContextType {
+    state: [RouteContextState, Dispatch<SetStateAction<RouteContextState>>];
+    meta: [RouteContextMeta, Dispatch<SetStateAction<RouteContextMeta>>];
+}
+
+const RouteContext = createContext<RouteContextType>({} as any);
 
 export default RouteContext;

src/hooks/useMutationObserver.ts

@@ -24,7 +24,6 @@ const useMutationObserver = (
         }
 
         observerRef.current = new MutationObserver((mutations, observer1) => {
-            console.log('OBSERVER');
             memoizedCallback(mutations, observer1);
         });
         observerRef.current.observe(current, options);

src/hooks/useRouteContext.ts

@@ -1,6 +1,12 @@
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import RouteContext from '../context/RouteContext';
 
 const useRouteContext = () => useContext(RouteContext);
 
+export const useRouteContextState = () => {
+    const { state } = useRouteContext();
+
+    return useMemo(() => state, [state]);
+};
+
 export default useRouteContext;

src/hooks/useRouteContextEffect.ts

@@ -0,0 +1,22 @@
+import useRouteContext from './useRouteContext';
+import { DependencyList, useEffect } from 'react';
+import { RouteContextType } from '../context/RouteContext';
+
+declare const UNDEFINED_VOID_ONLY: unique symbol;
+type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };
+type RouteContextEffectCallback = (setState: RouteContextType['state'][1]) => void | Destructor;
+
+const useRouteContextEffect = (effect: RouteContextEffectCallback, deps: DependencyList) => {
+    const {
+        state: [, setState],
+        meta: [meta]
+    } = useRouteContext();
+
+    useEffect(() => {
+        if (meta.isInitialized) {
+            effect(setState);
+        }
+    }, [...deps, meta]);
+};
+
+export default useRouteContextEffect;

src/layouts/RouteContextConsumer.tsx

@@ -1,8 +1,10 @@
 import React, { FunctionComponent, useEffect } from 'react';
-import useRouteContext from '../hooks/useRouteContext';
+import { useRouteContextState } from '../hooks/useRouteContext';
 
 const RouteContextConsumer: FunctionComponent = ({ children }) => {
-    const [{ title }] = useRouteContext();
+    const [routeContext] = useRouteContextState();
+
+    const { title } = routeContext;
 
     useEffect(() => {
         if (title) {

src/layouts/RouteContextInitializer.tsx

@@ -0,0 +1,22 @@
+import React, { FunctionComponent, useEffect } from 'react';
+import { RouteContextState } from '../context/RouteContext';
+import useRouteContext from '../hooks/useRouteContext';
+
+const RouteContextInitializer: FunctionComponent<RouteContextState> = ({ children, ...contextValue }) => {
+    const {
+        state: [, setState],
+        meta: [, setMeta]
+    } = useRouteContext();
+
+    useEffect(() => {
+        setState(contextValue);
+        setMeta((meta) => ({
+            ...meta,
+            isInitialized: true
+        }));
+    }, []);
+
+    return <>{children}</>;
+};
+
+export default RouteContextInitializer;

src/layouts/RouteContextProvider.tsx

@@ -0,0 +1,26 @@
+import React, { FunctionComponent, useMemo, useState } from 'react';
+import RouteContext, { RouteContextMeta, RouteContextState, RouteContextType } from '../context/RouteContext';
+
+const initialContextState: RouteContextState = {
+    title: 'MRGRD56'
+};
+
+const initialContextMeta: RouteContextMeta = {
+    isInitialized: false
+};
+
+const RouteContextProvider: FunctionComponent = ({ children }) => {
+    const contextState = useState<RouteContextState>(initialContextState);
+    const contextMeta = useState<RouteContextMeta>(initialContextMeta);
+
+    const contextValue = useMemo<RouteContextType>(() => {
+        return {
+            state: contextState,
+            meta: contextMeta
+        };
+    }, [contextState, contextMeta]);
+
+    return <RouteContext.Provider value={contextValue}>{children}</RouteContext.Provider>;
+};
+
+export default RouteContextProvider;