Merge pull request #470 from dzcode-io/466-fix-url-localization-always-use-english-and-prefix-with-language-code

ZibanPirate · web-flow · commit 381957399209 · 2022-08-06T14:39:30.000+02:00
feat: fix url localisation so it always use english URLs and prefix them with language code
diff --git a/packages/ui/src/error-boundary/index.tsx b/packages/ui/src/error-boundary/index.tsx
@@ -2,7 +2,7 @@ import { ErrorBoundary as SentryErrorBoundary } from "@sentry/react";
 import { FC, PropsWithChildren } from "react";
 
 import { Grid } from "../grid";
-import { Link } from "../link";
+import { Link } from "../link-factory";
 import { Typography } from "../typography";
 
 type ErrorBoundaryProps = PropsWithChildren<{
diff --git a/packages/ui/src/link-factory/index.tsx b/packages/ui/src/link-factory/index.tsx
@@ -0,0 +1,22 @@
+import { FC, HTMLProps } from "react";
+import { Link as ReactRouterLink, LinkProps } from "react-router-dom";
+
+export const linkFactory =
+  (getLanguageCode: () => string, defaultLanguageCode: string): FC<HTMLProps<HTMLAnchorElement>> =>
+  // eslint-disable-next-line react/display-name
+  (props) => {
+    const languageCode = getLanguageCode();
+
+    if (props.href && (props.href.startsWith("/") || props.href.startsWith(location.origin))) {
+      return (
+        <ReactRouterLink
+          {...(props as LinkProps)}
+          to={defaultLanguageCode === languageCode ? props.href : `/${languageCode}${props.href}`}
+        />
+      );
+    } else {
+      return <a {...props} />;
+    }
+  };
+
+export const Link = linkFactory(() => "en", "en");
diff --git a/packages/ui/src/link/index.tsx b/packages/ui/src/link/index.tsx
diff --git a/web/src/apps/main/components/authors/index.tsx b/web/src/apps/main/components/authors/index.tsx
@@ -8,10 +8,10 @@ import Typography from "@material-ui/core/Typography";
 import Skeleton from "@material-ui/lab/Skeleton";
 import { FC } from "react";
 import { useDispatch } from "react-redux";
+import { LinkV2 } from "src/apps/main/components/link-v2";
 import { Dispatch } from "src/apps/main/redux";
 import { fetchCurrentArticleAuthors } from "src/apps/main/redux/actions/articles-page";
 import { ArticlesPageState } from "src/apps/main/redux/reducers/articles-page";
-import { LinkV2 } from "src/components/link-v2";
 
 const useStyles = makeStyles((theme) => ({
   avatarsContainer: {
diff --git a/web/src/apps/main/components/card/index.tsx b/web/src/apps/main/components/card/index.tsx
@@ -8,7 +8,7 @@ import makeStyles from "@material-ui/core/styles/makeStyles";
 import Typography from "@material-ui/core/Typography";
 import Skeleton from "@material-ui/lab/Skeleton";
 import { FC } from "react";
-import { LinkV2 } from "src/components/link-v2";
+import { LinkV2 } from "src/apps/main/components/link-v2";
 
 interface CardInfo {
   image: string;
diff --git a/web/src/apps/main/components/contributors/index.tsx b/web/src/apps/main/components/contributors/index.tsx
@@ -8,10 +8,10 @@ import Typography from "@material-ui/core/Typography";
 import Skeleton from "@material-ui/lab/Skeleton";
 import { FC } from "react";
 import { useDispatch } from "react-redux";
+import { LinkV2 } from "src/apps/main/components/link-v2";
 import { Dispatch } from "src/apps/main/redux";
 import { fetchCurrentArticleContributors } from "src/apps/main/redux/actions/articles-page";
 import { ArticlesPageState } from "src/apps/main/redux/reducers/articles-page";
-import { LinkV2 } from "src/components/link-v2";
 
 const useStyles = makeStyles((theme) => ({
   avatarsContainer: {
diff --git a/web/src/apps/main/components/footer/index.tsx b/web/src/apps/main/components/footer/index.tsx
@@ -4,10 +4,10 @@ import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import { FC } from "react";
 import { useSelector } from "react-redux";
+import { LinkV2 } from "src/apps/main/components/link-v2";
 import { T } from "src/apps/main/components/t";
 import { StateInterface } from "src/apps/main/redux";
 import { FooterComponentState } from "src/apps/main/redux/reducers/footer-component";
-import { LinkV2 } from "src/components/link-v2";
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/web/src/apps/main/components/link-v2/index.ts b/web/src/apps/main/components/link-v2/index.ts
@@ -0,0 +1,5 @@
+import { linkFactory } from "@dzcode.io/ui/dist/link-factory";
+
+import { mainStore } from "../../redux";
+
+export const LinkV2 = linkFactory(() => mainStore.getState().settings.language.code, "en");
diff --git a/web/src/apps/main/components/markdown/index.tsx b/web/src/apps/main/components/markdown/index.tsx
@@ -6,8 +6,8 @@ import { useSelector } from "react-redux";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import prism from "react-syntax-highlighter/dist/cjs/styles/prism/prism";
 import tomorrow from "react-syntax-highlighter/dist/cjs/styles/prism/tomorrow";
+import { LinkV2 } from "src/apps/main/components/link-v2";
 import { StateInterface } from "src/apps/main/redux";
-import { LinkV2 } from "src/components/link-v2";
 
 export const Markdown: FC<ReactMarkdown> = ({ children, t, ...markdownProps }) => {
   const theme = useTheme();
diff --git a/web/src/apps/main/components/navbar/index.tsx b/web/src/apps/main/components/navbar/index.tsx
@@ -10,11 +10,11 @@ import { useScrollPosition } from "@n8tb1t/use-scroll-position";
 import { FC, Fragment, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { animated, useSpring } from "react-spring";
+import { LinkV2 } from "src/apps/main/components/link-v2";
 import { T } from "src/apps/main/components/t";
 import { Dispatch, StateInterface } from "src/apps/main/redux";
 import { SettingsState } from "src/apps/main/redux/reducers/settings";
 import logo from "src/assets/svg/logo-wide.svg";
-import { LinkV2 } from "src/components/link-v2";
 
 import { IOSSwitch } from "./ios-switch";
 import { LanguageSwitch } from "./lang-switch";
diff --git a/web/src/apps/main/components/sidebar/index.tsx b/web/src/apps/main/components/sidebar/index.tsx
@@ -10,9 +10,9 @@ import SpeedDialIcon from "@material-ui/lab/SpeedDialIcon";
 import TreeItem from "@material-ui/lab/TreeItem";
 import TreeView from "@material-ui/lab/TreeView";
 import { FC, Fragment } from "react";
+import { LinkV2 } from "src/apps/main/components/link-v2";
 import { SpeedDial } from "src/apps/main/components/speed-dial";
 import { SidebarTreeItem } from "src/apps/main/types";
-import { LinkV2 } from "src/components/link-v2";
 
 const useStyles = makeStyles((theme) =>
   createStyles({
diff --git a/web/src/apps/main/entry/app.tsx b/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>
diff --git a/web/src/apps/main/entry/index.tsx b/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>,
diff --git a/web/src/apps/main/pages/articles/index.tsx b/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>
diff --git a/web/src/apps/main/pages/contribute/contributions/index.tsx b/web/src/apps/main/pages/contribute/contributions/index.tsx
@@ -14,13 +14,13 @@ import QuestionAnswerIcon from "@material-ui/icons/QuestionAnswer";
 import Skeleton from "@material-ui/lab/Skeleton";
 import { FC } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { LinkV2 } from "src/apps/main/components/link-v2";
 import { t } from "src/apps/main/components/t";
 import { Dispatch, StateInterface } from "src/apps/main/redux";
 import { fetchContributions, updateFilterValue } from "src/apps/main/redux/actions/contribute-page";
 import { ContributePageState } from "src/apps/main/redux/reducers/contribute-page";
 import { SettingsState } from "src/apps/main/redux/reducers/settings";
 import { elapsedTime } from "src/common/utils/elapsed-time";
-import { LinkV2 } from "src/components/link-v2";
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/web/src/apps/main/pages/landing/header/index.tsx b/web/src/apps/main/pages/landing/header/index.tsx
@@ -6,9 +6,9 @@ import makeStyles from "@material-ui/core/styles/makeStyles";
 import Typography from "@material-ui/core/Typography";
 import { FC } from "react";
 import image from "src/apps/main/assets/svg/dzcode.svg";
+import { LinkV2 } from "src/apps/main/components/link-v2";
 import { Markdown } from "src/apps/main/components/markdown";
 import { T, t } from "src/apps/main/components/t";
-import { LinkV2 } from "src/components/link-v2";
 
 export const Header: FC = () => {
   const useStyles = makeStyles((theme) => ({
diff --git a/web/src/apps/main/pages/landing/mobile/index.tsx b/web/src/apps/main/pages/landing/mobile/index.tsx
@@ -7,9 +7,9 @@ import androidDark from "src/apps/main/assets/png/android-dark.png";
 import androidLight from "src/apps/main/assets/png/android-light.png";
 import iosDark from "src/apps/main/assets/png/ios-dark.png";
 import iosLight from "src/apps/main/assets/png/ios-light.png";
+import { LinkV2 } from "src/apps/main/components/link-v2";
 import { T } from "src/apps/main/components/t";
 import { StateInterface } from "src/apps/main/redux";
-import { LinkV2 } from "src/components/link-v2";
 import { fullstackConfig } from "src/config";
 
 const useStyles = makeStyles((theme) => ({
diff --git a/web/src/apps/main/pages/learn/index.tsx b/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>
diff --git a/web/src/apps/main/pages/not-found/index.tsx b/web/src/apps/main/pages/not-found/index.tsx
@@ -6,9 +6,9 @@ import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import ArrowForwardIcon from "@material-ui/icons/ArrowForward";
 import { FC } from "react";
 import { useSelector } from "react-redux";
+import { LinkV2 } from "src/apps/main/components/link-v2";
 import { T, t } from "src/apps/main/components/t";
 import svg from "src/assets/svg/404.svg";
-import { LinkV2 } from "src/components/link-v2";
 
 import { Markdown } from "../../components/markdown";
 import { StateInterface } from "../../redux";
diff --git a/web/src/apps/main/redux/actions/articles-page/index.ts b/web/src/apps/main/redux/actions/articles-page/index.ts
@@ -1,13 +1,17 @@
 import { Article } from "@dzcode.io/api/dist/app/types/legacy";
+import { LanguageEntity } from "@dzcode.io/models/dist/language";
 import { isLoaded } from "@dzcode.io/utils/dist/loadable";
 import * as Sentry from "@sentry/browser";
 import { listToTree } from "l2t";
+import { matchPath } from "react-router-dom";
 import { ThunkResult } from "src/apps/main/redux";
 import { ArticlesState } from "src/apps/main/redux/reducers/articles";
 import { ArticlesPageState } from "src/apps/main/redux/reducers/articles-page";
 import { SidebarTreeItem } from "src/apps/main/types";
 import { hasInCollection } from "src/common/utils";
 import { fetchV2 } from "src/common/utils/fetch";
+import { history } from "src/common/utils/history";
+import { urlLanguageRegEx } from "src/common/utils/language";
 
 /**
  * Fetches the list of articles for the sidebar
@@ -164,9 +168,11 @@ export const fetchCurrentArticleAuthors =
  */
 export const fetchCurrentArticle =
   (): ThunkResult<ArticlesPageState | ArticlesState> => async (dispatch, getState) => {
-    const slug = location.pathname
-      .substring(location.pathname.indexOf("/", 1) + 1)
-      .replace(/\/$/, "");
+    const match = matchPath<{ lang?: LanguageEntity["code"]; slug: string }>(
+      history.location.pathname,
+      { path: `${urlLanguageRegEx}/Articles/:slug(.*)` },
+    );
+    const slug = match?.params.slug || "";
 
     const cashedArticle = hasInCollection<Article>(getState().articles.list, "slug", slug, [
       ["content"],
diff --git a/web/src/apps/main/redux/actions/documentation-page/index.ts b/web/src/apps/main/redux/actions/documentation-page/index.ts
@@ -1,13 +1,17 @@
 import { Document } from "@dzcode.io/api/dist/app/types/legacy";
+import { LanguageEntity } from "@dzcode.io/models/dist/language";
 import { isLoaded } from "@dzcode.io/utils/dist/loadable";
 import * as Sentry from "@sentry/browser";
 import { listToTree } from "l2t";
+import { matchPath } from "react-router-dom";
 import { ThunkResult } from "src/apps/main/redux";
 import { DocumentationState } from "src/apps/main/redux/reducers/documentation";
 import { LearnPageState } from "src/apps/main/redux/reducers/learn-page";
 import { SidebarTreeItem } from "src/apps/main/types";
 import { hasInCollection } from "src/common/utils";
 import { fetchV2 } from "src/common/utils/fetch";
+import { history } from "src/common/utils/history";
+import { urlLanguageRegEx } from "src/common/utils/language";
 
 /**
  * Fetches the list of documents for the sidebar
@@ -163,9 +167,11 @@ const fetchCurrentDocumentAuthors =
  */
 export const fetchCurrentDocument =
   (): ThunkResult<LearnPageState | DocumentationState> => async (dispatch, getState) => {
-    const slug = location.pathname
-      .substring(location.pathname.indexOf("/", 1) + 1)
-      .replace(/\/$/, "");
+    const match = matchPath<{ lang?: LanguageEntity["code"]; slug: string }>(
+      history.location.pathname,
+      { path: `${urlLanguageRegEx}/Learn/:slug(.*)` },
+    );
+    const slug = match?.params.slug || "";
     const cashedDocument = hasInCollection<Document>(getState().documentation.list, "slug", slug, [
       ["content"],
     ]);
diff --git a/web/src/apps/main/redux/reducers/settings/index.ts b/web/src/apps/main/redux/reducers/settings/index.ts
diff --git a/web/src/common/utils/language.ts b/web/src/common/utils/language.ts
diff --git a/web/src/components/link-v2/index.tsx b/web/src/components/link-v2/index.tsx
