fix: avoid leading double slash (#8846)

* fix(client): prefer useLocale() over useParams()

* fix(cloud-function): normalize encoded leading slash

Author: caugner

Diff for: client/src/contributor-spotlight/index.tsx

@@ -8,6 +8,7 @@ import { GetInvolved } from "../ui/molecules/get_involved";
 import { Quote } from "../ui/molecules/quote";
 
 import "./index.scss";
+import { useLocale } from "../hooks";
 
 type ContributorDetails = {
   sections: [string];
@@ -23,7 +24,8 @@ type ContributorDetails = {
 };
 
 export function ContributorSpotlight(props: HydrationData<ContributorDetails>) {
-  const { "*": slug, locale = "en-US" } = useParams();
+  const locale = useLocale();
+  const { "*": slug } = useParams();
   const baseURL = `/${locale.toLowerCase()}/community/spotlight/${slug}`;
   const contributorJSONUrl = `${baseURL}/index.json`;
 

Diff for: client/src/document/hooks.ts

@@ -1,10 +1,11 @@
 import { useEffect, useRef, useState } from "react";
 import { useLocation, useParams } from "react-router-dom";
-import { useIsServer } from "../hooks";
+import { useIsServer, useLocale } from "../hooks";
 import { Doc } from "../../../libs/types/document";
 
 export function useDocumentURL() {
-  const { "*": slug, locale } = useParams();
+  const locale = useLocale();
+  const { "*": slug } = useParams();
   const url = `/${locale}/docs/${slug}`;
   // If you're in local development Express will force the trailing /
   // on any URL. We can't keep that if we're going to compare the current

Diff for: client/src/document/index.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { useSearchParams, useParams, useNavigate } from "react-router-dom";
+import { useSearchParams, useNavigate } from "react-router-dom";
 import useSWR, { mutate } from "swr";
 
 import { CRUD_MODE, PLACEMENT_ENABLED } from "../env";
 import { useGA } from "../ga-context";
-import { useIsServer } from "../hooks";
+import { useIsServer, useLocale } from "../hooks";
 
 import { useDocumentURL, useCopyExamplesToClipboard } from "./hooks";
 import { Doc } from "../../../libs/types/document";
@@ -65,7 +65,7 @@ export function Document(props /* TODO: define a TS interface for this */) {
 
   const mountCounter = React.useRef(0);
   const documentURL = useDocumentURL();
-  const { locale = "en-US" } = useParams();
+  const locale = useLocale();
   const [searchParams] = useSearchParams();
 
   const navigate = useNavigate();

Diff for: client/src/document/toolbar/edit-actions.tsx

@@ -4,6 +4,7 @@ import { CRUD_MODE_HOSTNAMES } from "../../env";
 import { Source } from "../../../../libs/types/document";
 
 import "./edit-actions.scss";
+import { useLocale } from "../../hooks";
 
 export function EditActions({ source }: { source: Source }) {
   const { folder, filename, github_url } = source;
@@ -50,7 +51,8 @@ export function EditActions({ source }: { source: Source }) {
     }
   }
 
-  const { locale = "en-US", "*": slug } = useParams();
+  const locale = useLocale();
+  const { "*": slug } = useParams();
 
   if (!folder) {
     return null;

Diff for: client/src/flaws/index.tsx

@@ -1,16 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  createSearchParams,
-  Link,
-  useParams,
-  useSearchParams,
-} from "react-router-dom";
+import { createSearchParams, Link, useSearchParams } from "react-router-dom";
 import useSWR from "swr";
 
 import "./index.scss";
 
 import { humanizeFlawName } from "../flaw-utils";
 import { MainContentContainer } from "../ui/atoms/page-content";
+import { useLocale } from "../hooks";
 
 interface DocumentPopularity {
   value: number;
@@ -156,7 +152,7 @@ function useFiltersURL(): [Filters, (filters: Partial<Filters>) => void] {
 }
 
 export default function AllFlaws() {
-  const { locale = "en-US" } = useParams();
+  const locale = useLocale();
   const [filters] = useFiltersURL();
   const [lastData, setLastData] = useState<Data | null>(null);
 

Diff for: client/src/page-not-found/fallback-link.tsx

@@ -1,12 +1,13 @@
 import React from "react";
-import { useLocation, useParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import useSWR from "swr";
 
 import { Doc } from "../../../libs/types";
 import NoteCard from "../ui/molecules/notecards";
 
 import LANGUAGES_RAW from "../../../libs/languages";
 import { RETIRED_LOCALES } from "../../../libs/constants";
+import { useLocale } from "../hooks";
 
 const LANGUAGES = new Map(
   Object.entries(LANGUAGES_RAW).map(([locale, data]) => {
@@ -22,7 +23,7 @@ const LANGUAGES = new Map(
 // like "Did you mean: <a href=$url>$doctitle</a>?"
 
 export default function FallbackLink({ url }: { url: string }) {
-  const { locale = "en-US" } = useParams();
+  const locale = useLocale();
   const location = useLocation();
 
   const [fallbackCheckURL, setFallbackCheckURL] = React.useState<null | string>(

Diff for: client/src/plus/plus-docs/index.tsx

@@ -3,6 +3,7 @@ import { MDN_PLUS_TITLE } from "../../constants";
 import StaticPage from "../../homepage/static-page";
 import { useUserData } from "../../user-context";
 import "./index.scss";
+import { useLocale } from "../../hooks";
 
 function PlusDocsNav() {
   const userData = useUserData();
@@ -46,7 +47,7 @@ function RelatedTopics({
   heading: string;
   items: { slug: string; title: string }[];
 }) {
-  const { locale = "en-US" } = useParams();
+  const locale = useLocale();
   const { pathname: locationPathname } = useLocation();
 
   return (
@@ -81,7 +82,8 @@ function RelatedTopics({
 }
 
 function PlusDocs({ ...props }) {
-  const { locale = "en-US", "*": slug } = useParams();
+  const locale = useLocale();
+  const { "*": slug } = useParams();
 
   return (
     <StaticPage

Diff for: client/src/search.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useCombobox } from "downshift";
 import useSWR from "swr";
 
@@ -52,7 +52,7 @@ function useSearchIndex(): readonly [
   const [shouldInitialize, setShouldInitialize] = useState(false);
   const [searchIndex, setSearchIndex] = useState<null | SearchIndex>(null);
   // Default to 'en-US' if you're on the home page without the locale prefix.
-  const { locale = "en-US" } = useParams();
+  const locale = useLocale();
 
   const url = `/${locale}/search-index.json`;
 

Diff for: client/src/translations/dashboard/index.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import {
   createSearchParams,
   Link,
-  useParams,
   useSearchParams,
   useNavigate,
 } from "react-router-dom";
 import useSWR from "swr";
 
 import { MainContentContainer } from "../../ui/atoms/page-content";
+import { useLocale } from "../../hooks";
 
 interface Data {
   l10nKPIs: L10nKPIs;
@@ -89,7 +89,7 @@ function getStorage(locale: string): LocaleStorageData | null {
 }
 
 export function TranslationDashboard() {
-  const { locale = "en-US" } = useParams();
+  const locale = useLocale();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 

Diff for: client/src/translations/differences/index.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import {
   createSearchParams,
   Link,
-  useParams,
   useSearchParams,
   useNavigate,
 } from "react-router-dom";
@@ -13,6 +12,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import "./index.scss";
 
 import { MainContentContainer } from "../../ui/atoms/page-content";
+import { useLocale } from "../../hooks";
 
 dayjs.extend(relativeTime);
 
@@ -107,7 +107,7 @@ function getStorage(locale: string): LocaleStorageData | null {
 }
 
 export function TranslationDifferences() {
-  const { locale = "en-US" } = useParams();
+  const locale = useLocale();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 

Diff for: client/src/translations/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link, useParams, Routes, Route } from "react-router-dom";
+import { Link, Routes, Route } from "react-router-dom";
 import useSWR from "swr";
 
 import "./index.scss";
@@ -10,6 +10,7 @@ import { MainContentContainer } from "../ui/atoms/page-content";
 import { TranslationDifferences } from "./differences";
 import { MissingTranslations } from "./missing";
 import { TranslationDashboard } from "./dashboard";
+import { useLocale } from "../hooks";
 
 interface Locale {
   locale: string;
@@ -39,7 +40,7 @@ export default function Translations() {
 }
 
 function PickLocale() {
-  const { locale = "en-US" } = useParams();
+  const locale = useLocale();
   React.useEffect(() => {
     let title = "All translations";
     if (locale.toLowerCase() !== "en-us") {

Diff for: client/src/translations/missing/index.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import {
   createSearchParams,
   Link,
-  useParams,
   useSearchParams,
   useNavigate,
 } from "react-router-dom";
@@ -11,6 +10,7 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 
 import { MainContentContainer } from "../../ui/atoms/page-content";
+import { useLocale } from "../../hooks";
 
 dayjs.extend(relativeTime);
 
@@ -104,7 +104,7 @@ function getStorage(locale: string): LocaleStorageData | null {
 }
 
 export function MissingTranslations() {
-  const { locale = "en-US" } = useParams();
+  const locale = useLocale();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 

Diff for: client/src/ui/organisms/article-actions/language-menu/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import { useGA } from "../../../../ga-context";
 import { Translation } from "../../../../../../libs/types/document";
@@ -8,6 +8,7 @@ import { Submenu } from "../../../molecules/submenu";
 
 import "./index.scss";
 import { DropdownMenu, DropdownMenuWrapper } from "../../../molecules/dropdown";
+import { useLocale } from "../../../../hooks";
 
 // This needs to match what's set in 'libs/constants.js' on the server/builder!
 const PREFERRED_LOCALE_COOKIE_NAME = "preferredlocale";
@@ -25,7 +26,7 @@ export function LanguageMenu({
   const ga = useGA();
   const { pathname } = useLocation();
   const navigate = useNavigate();
-  const { locale = "en-US" } = useParams();
+  const locale = useLocale();
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   function translateURL(destinationLocale: string) {

Diff for: cloud-function/src/middlewares/redirect-leading-slash.ts

@@ -20,9 +20,14 @@ export async function redirectLeadingSlash(
   next: NextFunction
 ) {
   const pathname = req.url;
-  if (pathname.startsWith("//")) {
-    return redirect(res, pathname.replace(/^\/+/g, "/"));
+  const normalizedPathname = normalizeLeadingSlash(pathname);
+  if (pathname !== normalizedPathname) {
+    return redirect(res, normalizedPathname);
   }
 
   next();
 }
+
+function normalizeLeadingSlash(pathname: string): string {
+  return pathname.replace(/^(\/|%2f)+/i, "/");
+}