get the correct Article/Document slug with locale

Author: ZibanPirate

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"],

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"],
     ]);