made React Router support localization

Author: ZibanPirate

web/src/apps/main/entry/app.tsx

@@ -1,15 +1,21 @@
 import "./style.scss";
 
+import { allLanguages, LanguageEntity } from "@dzcode.io/models/dist/language";
 import { ErrorBoundary } from "@dzcode.io/ui/dist/error-boundary";
 import Container from "@material-ui/core/Container";
 import { ComponentType, FC, lazy, Suspense, useEffect } from "react";
-import { Route, RouteProps, Switch, useLocation } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { Route, RouteProps, Switch, useLocation, useRouteMatch } from "react-router-dom";
 import { Footer } from "src/apps/main/components/footer";
 import { Navbar } from "src/apps/main/components/navbar";
 import { Theme } from "src/apps/main/components/theme";
 import { getEnv } from "src/common/utils";
+import { urlLanguageRegEx } from "src/common/utils/language";
 import { Loading } from "src/components/loading";
 
+import { Dispatch, StateInterface } from "../redux";
+import { SettingsState } from "../redux/reducers/settings";
+
 interface RouteInterface extends RouteProps {
   import: Promise<{ default: ComponentType }>;
 }
@@ -50,17 +56,29 @@ const routes: RouteInterface[] = [
 ];
 
 export const App: FC = () => {
-  if (getEnv() !== "development") {
-    const location = useLocation();
+  const location = useLocation();
+  const match = useRouteMatch<{ lang?: LanguageEntity["code"] }>(urlLanguageRegEx);
+  const { language } = useSelector<StateInterface, SettingsState>((state) => state.settings);
+  const dispatch = useDispatch<Dispatch<SettingsState>>();
 
-    useEffect(() => {
+  useEffect(() => {
+    if (getEnv() !== "development") {
       if (window.ga) {
         window.ga("set", "page", location.pathname);
         window.ga("send", "pageview");
         window.fbq("track", "PageView");
       }
-    }, [location]);
-  }
+    }
+
+    const urlLanguage =
+      allLanguages.find(({ code }) => code === match?.params.lang) || allLanguages[0];
+    if (urlLanguage.code !== language.code) {
+      dispatch({
+        type: "UPDATE_SETTINGS",
+        payload: { language: urlLanguage },
+      });
+    }
+  }, [location]);
 
   return (
     <Theme>
@@ -76,8 +94,13 @@ export const App: FC = () => {
           <Container maxWidth="lg" style={{ paddingTop: "130px" }}>
             <Suspense fallback={<Loading />}>
               <Switch>
-                {routes.map((route, index) => (
-                  <Route {...route} key={`route-${index}`} component={lazy(() => route.import)} />
+                {routes.map(({ import: im, path, ...route }, index) => (
+                  <Route
+                    {...route}
+                    path={path ? `${urlLanguageRegEx}${path}` : undefined}
+                    key={`route-${index}`}
+                    component={lazy(() => im)}
+                  />
                 ))}
               </Switch>
             </Suspense>

web/src/apps/main/entry/index.tsx

@@ -2,9 +2,10 @@ import * as Sentry from "@sentry/browser";
 import { Integrations } from "@sentry/tracing";
 import { render } from "react-dom";
 import { Provider } from "react-redux";
-import { BrowserRouter as Router } from "react-router-dom";
+import { Router } from "react-router-dom";
 import { mainStore } from "src/apps/main/redux";
 import { getEnv } from "src/common/utils";
+import { history } from "src/common/utils/history";
 
 import { App } from "./app";
 
@@ -23,7 +24,7 @@ if (env !== "development") {
 
 render(
   <Provider store={mainStore}>
-    <Router>
+    <Router history={history}>
       <App />
     </Router>
   </Provider>,

web/src/apps/main/pages/articles/index.tsx

@@ -24,7 +24,8 @@ export const ArticlesPage: FC = () => {
     dispatch(fetchArticlesList());
   }, []);
 
-  const { path } = useRouteMatch();
+  const { path: pathRegex } = useRouteMatch();
+  const path = "/Articles";
   const loadedCurrentArticle = isLoaded(currentArticle);
 
   return (
@@ -53,10 +54,13 @@ export const ArticlesPage: FC = () => {
         <Grid item xs md={7}>
           <Route
             exact
-            path={`${path}`}
+            path={pathRegex}
             render={() => <Landing onShowSidebar={() => setOpen(true)} />}
           />
-          <Route path={`${path}/:articleSlug`} render={() => <Content key={location.pathname} />} />
+          <Route
+            path={`${pathRegex}/:articleSlug`}
+            render={() => <Content key={location.pathname} />}
+          />
         </Grid>
       </Grid>
     </ErrorBoundary>

web/src/apps/main/pages/learn/index.tsx

@@ -25,7 +25,9 @@ export const LearnPage: FC = () => {
     dispatch(fetchDocumentationList());
   }, []);
 
-  const { path } = useRouteMatch();
+  const { path: pathRegex } = useRouteMatch();
+  const path = "/Learn";
+
   const loadedCurrentDocument = isLoaded(currentDocument);
 
   return (
@@ -54,11 +56,11 @@ export const LearnPage: FC = () => {
         <Grid item xs md={7}>
           <Route
             exact
-            path={`${path}`}
+            path={pathRegex}
             render={() => <Landing onShowSidebar={() => setOpen(true)} />}
           />
           <Route
-            path={`${path}/:documentSlug`}
+            path={`${pathRegex}/:documentSlug`}
             render={() => <Content key={location.pathname} />}
           />
         </Grid>