From 1d2c577e58ad47506a623c04d37e6a06a29c0406 Mon Sep 17 00:00:00 2001 From: Zakaria Mansouri Date: Sat, 6 Aug 2022 14:04:30 +0200 Subject: [PATCH 1/6] added Link Component Factory --- packages/ui/src/error-boundary/index.tsx | 2 +- packages/ui/src/link-factory/index.tsx | 22 ++++++++++++++++++++++ packages/ui/src/link/index.tsx | 10 ---------- 3 files changed, 23 insertions(+), 11 deletions(-) create mode 100644 packages/ui/src/link-factory/index.tsx delete mode 100644 packages/ui/src/link/index.tsx diff --git a/packages/ui/src/error-boundary/index.tsx b/packages/ui/src/error-boundary/index.tsx index d21c78e97..2a79a6236 100644 --- 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 new file mode 100644 index 000000000..ff4b82e7d --- /dev/null +++ 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> => + // eslint-disable-next-line react/display-name + (props) => { + const languageCode = getLanguageCode(); + + if (props.href && (props.href.startsWith("/") || props.href.startsWith(location.origin))) { + return ( + + ); + } else { + return ; + } + }; + +export const Link = linkFactory(() => "en", "en"); diff --git a/packages/ui/src/link/index.tsx b/packages/ui/src/link/index.tsx deleted file mode 100644 index 99ee1f2ea..000000000 --- a/packages/ui/src/link/index.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { FC, HTMLProps } from "react"; -import { Link as ReactRouterLink, LinkProps } from "react-router-dom"; - -export const Link: FC> = (props) => { - if (props.href && (props.href.startsWith("/") || props.href.startsWith(location.origin))) { - return ; - } else { - return ; - } -}; From 8d9047a5d3beaf411c9373468108772a0ec316a8 Mon Sep 17 00:00:00 2001 From: Zakaria Mansouri Date: Sat, 6 Aug 2022 14:07:19 +0200 Subject: [PATCH 2/6] used the Link Component Factory --- web/src/apps/main/components/authors/index.tsx | 2 +- web/src/apps/main/components/card/index.tsx | 2 +- web/src/apps/main/components/contributors/index.tsx | 2 +- web/src/apps/main/components/footer/index.tsx | 2 +- web/src/apps/main/components/link-v2/index.ts | 5 +++++ web/src/apps/main/components/markdown/index.tsx | 2 +- web/src/apps/main/components/navbar/index.tsx | 2 +- web/src/apps/main/components/sidebar/index.tsx | 2 +- .../apps/main/pages/contribute/contributions/index.tsx | 2 +- web/src/apps/main/pages/landing/header/index.tsx | 2 +- web/src/apps/main/pages/landing/mobile/index.tsx | 2 +- web/src/apps/main/pages/not-found/index.tsx | 2 +- web/src/common/utils/language.ts | 3 +++ web/src/components/link-v2/index.tsx | 10 ---------- 14 files changed, 19 insertions(+), 21 deletions(-) create mode 100644 web/src/apps/main/components/link-v2/index.ts create mode 100644 web/src/common/utils/language.ts delete mode 100644 web/src/components/link-v2/index.tsx diff --git a/web/src/apps/main/components/authors/index.tsx b/web/src/apps/main/components/authors/index.tsx index 79d4b5f3f..55463159e 100644 --- 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 index 0917e69cc..5bdebc69c 100644 --- 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 index 09fa82f6f..2377959d8 100644 --- 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 index e6123689b..8fc1e2198 100644 --- 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 new file mode 100644 index 000000000..55427e7ea --- /dev/null +++ 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 index 98067e0a4..39515de3c 100644 --- 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 = ({ 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 index fa79fc6b2..6f8587cbe 100644 --- 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 index bfe18f256..8272549a3 100644 --- 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/pages/contribute/contributions/index.tsx b/web/src/apps/main/pages/contribute/contributions/index.tsx index d1c776248..426009dc8 100644 --- 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 index 2ff679660..5baaca0dd 100644 --- 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 index c18efbf0f..672be97b9 100644 --- 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/not-found/index.tsx b/web/src/apps/main/pages/not-found/index.tsx index 3b7c3d1e4..730092070 100644 --- 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/common/utils/language.ts b/web/src/common/utils/language.ts new file mode 100644 index 000000000..830f6f0c5 --- /dev/null +++ b/web/src/common/utils/language.ts @@ -0,0 +1,3 @@ +import { allLanguages } from "@dzcode.io/models/dist/language"; + +export const urlLanguageRegEx = `/:lang(${allLanguages.map(({ code }) => code).join("|")})?`; diff --git a/web/src/components/link-v2/index.tsx b/web/src/components/link-v2/index.tsx deleted file mode 100644 index be7e2be3c..000000000 --- a/web/src/components/link-v2/index.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { FC, HTMLProps } from "react"; -import { Link, LinkProps } from "react-router-dom"; - -export const LinkV2: FC> = (props) => { - if (props.href && (props.href.startsWith("/") || props.href.startsWith(location.origin))) { - return ; - } else { - return ; - } -}; From befb72a648bee5f6b0679dd8e830d48887e3acb4 Mon Sep 17 00:00:00 2001 From: Zakaria Mansouri Date: Sat, 6 Aug 2022 14:08:24 +0200 Subject: [PATCH 3/6] made React Router support localization --- web/src/apps/main/entry/app.tsx | 39 +++++++++++++++++----- web/src/apps/main/entry/index.tsx | 5 +-- web/src/apps/main/pages/articles/index.tsx | 10 ++++-- web/src/apps/main/pages/learn/index.tsx | 8 +++-- 4 files changed, 46 insertions(+), 16 deletions(-) diff --git a/web/src/apps/main/entry/app.tsx b/web/src/apps/main/entry/app.tsx index 96844fd6b..b388ad986 100644 --- 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((state) => state.settings); + const dispatch = useDispatch>(); - 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 ( @@ -76,8 +94,13 @@ export const App: FC = () => { }> - {routes.map((route, index) => ( - route.import)} /> + {routes.map(({ import: im, path, ...route }, index) => ( + im)} + /> ))} diff --git a/web/src/apps/main/entry/index.tsx b/web/src/apps/main/entry/index.tsx index cf152afef..344decf8d 100644 --- 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( - + , diff --git a/web/src/apps/main/pages/articles/index.tsx b/web/src/apps/main/pages/articles/index.tsx index f153f6b77..c0bb38fe4 100644 --- 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 = () => { setOpen(true)} />} /> - } /> + } + /> diff --git a/web/src/apps/main/pages/learn/index.tsx b/web/src/apps/main/pages/learn/index.tsx index 31ece9365..e13d0e932 100644 --- 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 = () => { setOpen(true)} />} /> } /> From 0ec0d5ec1a783ef9d917c66383bd36c83fc1c3b0 Mon Sep 17 00:00:00 2001 From: Zakaria Mansouri Date: Sat, 6 Aug 2022 14:09:06 +0200 Subject: [PATCH 4/6] updated URL when switching languages --- .../main/redux/reducers/settings/index.ts | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/web/src/apps/main/redux/reducers/settings/index.ts b/web/src/apps/main/redux/reducers/settings/index.ts index c79d65aa0..816f37fad 100644 --- a/web/src/apps/main/redux/reducers/settings/index.ts +++ b/web/src/apps/main/redux/reducers/settings/index.ts @@ -1,4 +1,7 @@ import { allLanguages, LanguageEntity } from "@dzcode.io/models/dist/language"; +import { matchPath } from "react-router-dom"; +import { history } from "src/common/utils/history"; +import { urlLanguageRegEx } from "src/common/utils/language"; export interface SettingsState { darkMode: boolean; @@ -29,6 +32,27 @@ export const settings = ( if (action.payload.language) { localStorage.setItem("languageCode", action.payload.language.code); document.body.setAttribute("dir", action.payload.language.code === "ar" ? "rtl" : "ltr"); + const match = matchPath<{ lang?: LanguageEntity["code"] }>(history.location.pathname, { + path: urlLanguageRegEx, + exact: false, + strict: false, + }); + console.log({ + payload: action.payload.language.code, + match: match?.params.lang, + }); + + const langPrefix = + action.payload.language.code === "en" ? "" : `/${action.payload.language.code}`; + + if (match?.params.lang || langPrefix) { + history.push({ + ...history.location, + pathname: match?.params.lang + ? history.location.pathname.replace(`/${match.params.lang}`, langPrefix) + : `${langPrefix}${history.location.pathname}`, + }); + } } return { ...state, ...action.payload }; default: From 6ba097092468b4f89b4fa0f6dc94b12600d94c65 Mon Sep 17 00:00:00 2001 From: Zakaria Mansouri Date: Sat, 6 Aug 2022 14:09:42 +0200 Subject: [PATCH 5/6] get the correct Article/Document slug with locale --- .../apps/main/redux/actions/articles-page/index.ts | 12 +++++++++--- .../main/redux/actions/documentation-page/index.ts | 12 +++++++++--- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/web/src/apps/main/redux/actions/articles-page/index.ts b/web/src/apps/main/redux/actions/articles-page/index.ts index e556e403e..7f7688b74 100644 --- 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 => 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
(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 index b4366ed10..c0d7b5663 100644 --- 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 => 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(getState().documentation.list, "slug", slug, [ ["content"], ]); From 66cb949d2655de0c53e54b07ddd9efa1c2db1202 Mon Sep 17 00:00:00 2001 From: Zakaria Mansouri Date: Sat, 6 Aug 2022 14:13:19 +0200 Subject: [PATCH 6/6] cleaned console statement --- web/src/apps/main/redux/reducers/settings/index.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/web/src/apps/main/redux/reducers/settings/index.ts b/web/src/apps/main/redux/reducers/settings/index.ts index 816f37fad..d88b67030 100644 --- a/web/src/apps/main/redux/reducers/settings/index.ts +++ b/web/src/apps/main/redux/reducers/settings/index.ts @@ -37,10 +37,6 @@ export const settings = ( exact: false, strict: false, }); - console.log({ - payload: action.payload.language.code, - match: match?.params.lang, - }); const langPrefix = action.payload.language.code === "en" ? "" : `/${action.payload.language.code}`;