Simple redirection rules and HTTP404 handling

Examples/src/components/App.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useLocation } from "react-router-dom";
+import {Link, Navigate, Route, Routes, useLocation} from "react-router-dom";
 import { Theme } from "@material-ui/core/styles";
 import Drawer from "@material-ui/core/Drawer";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
@@ -23,9 +23,24 @@ import Gallery from "./Gallery/Gallery";
 import { PAGES } from "./AppRouter/pages";
 import {GalleryItem} from "../helpers/types/types";
 import {allGalleryItems, getSeeAlsoGalleryItems} from "../helpers/SciChartExamples";
+import {REDIRECTION_RULES} from "./AppRouter/redirectionRules";
+
+const NotFound = () => (
+    <div style={{ textAlign: "center", margin: 50 }}>
+        <h1 style={{ fontSize: "3em", margin: 50 }}>404 - Not Found!</h1>
+        <Link to="/">Go Home</Link>
+    </div>
+)
 
 export default function App() {
     const location = useLocation();
+
+    // Process redirection rules first
+    const pathWithoutSlash = location.pathname.endsWith("/") ? location.pathname.slice(0, -1) : location.pathname;
+    if (REDIRECTION_RULES.has(pathWithoutSlash)) {
+        return <Navigate  to={REDIRECTION_RULES.get(pathWithoutSlash)}/>
+    }
+
     // For charts without layout we use '/iframe' prefix, for example '/iframe/javascript-multiline-labels'
     const isIFrame = location.pathname.substring(1, 7) === 'iframe';
     const pathname = isIFrame ? location.pathname.substring(7) : location.pathname;
@@ -95,17 +110,41 @@ export default function App() {
         }
     }, [currentExampleId]);
 
-    if (isIFrame) {
+    const isHttp404 = PAGES.homapage.path !== location.pathname && currentExampleKey === undefined;
+
+    if (isIFrame && !isHttp404) {
         return <AppRouter currentExample={currentExample} seeAlso={seeAlso} isIFrame={true}/>
     }
 
     const testIsOpened = (id: string): boolean => !!openedMenuItems[id];
+
+    const pageContent = <>{PAGES.homapage.path === location.pathname && <AppRouter currentExample={currentExample} seeAlso={[]}/>}
+        <div className={classes.MainAppWrapper}>
+            <div className={classes.DrawerDesktop}>
+                <DrawerContent
+                    testIsOpened={testIsOpened}
+                    toggleOpenedMenuItem={toggleOpenedMenuItem}
+                    toggleDrawer={() => {
+                    }}
+                />
+            </div>
+            {PAGES.homapage.path === location.pathname ? (
+                <div className={classes.GalleryAppWrapper}>
+                    <Gallery examples={allGalleryItems}/>
+                </div>
+            ) : (
+                <AppRouter currentExample={currentExample} seeAlso={seeAlso}/>
+            )}
+        </div>
+    </>;
+
+
     return (
         <div className={classes.App}>
             <Drawer
                 className={classes.DrawerMobile}
                 variant="temporary"
-                classes={{ paper: classes.DrawerPaper }}
+                classes={{paper: classes.DrawerPaper}}
                 anchor="right"
                 open={isMedium && isDrawerOpened}
                 onClose={toggleDrawer}
@@ -117,27 +156,9 @@ export default function App() {
                 />
             </Drawer>
             <div className={classes.MainAppContent}>
-                <AppBarTop toggleDrawer={toggleDrawer} currentExample={currentExample} />
-                {PAGES.homapage.path === location.pathname && <AppRouter currentExample={currentExample} seeAlso={[]} />}
-
-                <div className={classes.MainAppWrapper}>
-                    <div className={classes.DrawerDesktop}>
-                        <DrawerContent
-                            testIsOpened={testIsOpened}
-                            toggleOpenedMenuItem={toggleOpenedMenuItem}
-                            toggleDrawer={() => {}}
-                        />
-                    </div>
-                    {PAGES.homapage.path === location.pathname ? (
-                        <div className={classes.GalleryAppWrapper}>
-                            <Gallery examples={allGalleryItems} />
-                        </div>
-                    ) : (
-                        <AppRouter currentExample={currentExample} seeAlso={seeAlso} />
-                    )}
-                </div>
-
-                <AppFooter />
+                <AppBarTop toggleDrawer={toggleDrawer} currentExample={currentExample}/>
+                {isHttp404 ? <NotFound/> : pageContent}
+                <AppFooter/>
             </div>
         </div>
     );

Examples/src/components/AppRouter/examplePages.ts

@@ -4,7 +4,6 @@ import { digitalBandSeriesChartExampleInfo } from "../Examples/Charts2D/BasicCha
 import { fanChartExampleInfo } from "../Examples/Charts2D/BasicChartTypes/FanChart/exampleInfo";
 import { bubbleChartExampleInfo } from "../Examples/Charts2D/BasicChartTypes/BubbleChart/exampleInfo";
 import { candlestickChartExampleInfo } from "../Examples/Charts2D/BasicChartTypes/CandlestickChart/exampleInfo";
-import { ohlcChartExampleInfo } from "../Examples/Charts2D/BasicChartTypes/OhlcChart/exampleInfo";
 import { columnChartExampleInfo } from "../Examples/Charts2D/BasicChartTypes/ColumnChart/exampleInfo";
 import { impulseChartExampleInfo } from "../Examples/Charts2D/BasicChartTypes/ImpulseChart/exampleInfo";
 import { errorBarsChartExampleInfo } from "../Examples/Charts2D/BasicChartTypes/ErrorBarsChart/exampleInfo";
@@ -174,10 +173,6 @@ export const EXAMPLES_PAGES = asRecord({
         id: "chart2D_basicCharts_CandlestickChart",
         ...candlestickChartExampleInfo
     },
-    chart2D_basicCharts_OhlcChart: {
-        id: "chart2D_basicCharts_OhlcChart",
-        ...ohlcChartExampleInfo
-    },
     chart2D_basicCharts_ErrorBarsChart: {
         id: "chart2D_basicCharts_ErrorBarsChart",
         ...errorBarsChartExampleInfo

Examples/src/components/AppRouter/examples.ts

@@ -3,7 +3,6 @@ import DigitalBandSeriesChart from "../Examples/Charts2D/BasicChartTypes/Digital
 import FanChart from "../Examples/Charts2D/BasicChartTypes/FanChart";
 import BubbleChart from "../Examples/Charts2D/BasicChartTypes/BubbleChart";
 import CandlestickChart from "../Examples/Charts2D/BasicChartTypes/CandlestickChart";
-import OhlcChart from "../Examples/Charts2D/BasicChartTypes/OhlcChart";
 import ColumnChart from "../Examples/Charts2D/BasicChartTypes/ColumnChart";
 import ImpulseChart from "../Examples/Charts2D/BasicChartTypes/ImpulseChart";
 import HeatmapChart from "../Examples/Charts2D/BasicChartTypes/HeatmapChart";
@@ -355,8 +354,6 @@ export const getExampleComponent = (exampleId: string): (() => JSX.Element) => {
             return BubbleChart;
         case EXAMPLES_PAGES.chart2D_basicCharts_CandlestickChart.id:
             return CandlestickChart;
-        case EXAMPLES_PAGES.chart2D_basicCharts_OhlcChart.id:
-            return OhlcChart;
         case EXAMPLES_PAGES.chart2D_basicCharts_ColumnChart.id:
             return ColumnChart;
         case EXAMPLES_PAGES.chart2D_basicCharts_ErrorBarsChart.id:

Examples/src/components/AppRouter/redirectionRules.ts

@@ -0,0 +1,7 @@
+import { Navigate } from "react-router-dom";
+
+// Redirection URLs from - to
+export const REDIRECTION_RULES = new Map<string, string>([
+    ["/javascript-ohlc-chart", "javascript-candlestick-chart"],
+]);
+