fix: always link to localized URL (fixes #504) (#512)

common-voice · Oct 31, 2021 · 6e66528 · 6e66528
1 parent ab2c696
commit 6e66528
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 38 deletions.
diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx
@@ -6,6 +6,7 @@ import { Localized } from '@fluent/react';
 import logoURL from '../../img/cv-logo-one-color-black.svg';
 import '../../css/header.css';
 
+import { useLocaleUrl } from '../urls';
 import type { RootState } from '../types';
 import LoginButton from './login-button';
 
@@ -15,31 +16,35 @@ type Props = {
 };
 
 function NavItems({ authed, closeNavigation }: Props) {
+  // As the profile link is conditionally rendered we need to always use
+  // the hook first, as otherwise not all hooks will be rendered at all times.
+  const localizedProfileUrl = useLocaleUrl('/profile');
+
   return (
     <React.Fragment>
-      <NavLink to="/" exact onClick={closeNavigation}>
+      <NavLink to={useLocaleUrl('/')} exact onClick={closeNavigation}>
         <Localized id="sc-header-home">Home</Localized>
       </NavLink>
-      <NavLink to="/how-to" exact onClick={closeNavigation}>
+      <NavLink to={useLocaleUrl('/how-to')} exact onClick={closeNavigation}>
         <Localized id="sc-header-how-to">How-to</Localized>
       </NavLink>
-      <NavLink to="/add" exact key="add" onClick={closeNavigation}>
+      <NavLink to={useLocaleUrl('/add')} exact key="add" onClick={closeNavigation}>
         <Localized id="sc-header-add">Add</Localized>
       </NavLink>
-      <NavLink to="/review" key="review" onClick={closeNavigation}>
+      <NavLink to={useLocaleUrl('/review')} key="review" onClick={closeNavigation}>
         <Localized id="sc-header-review">Review</Localized>
       </NavLink>
-      <NavLink to="/rejected" key="rejected" onClick={closeNavigation}>
+      <NavLink to={useLocaleUrl('/rejected')} key="rejected" onClick={closeNavigation}>
         <Localized id="sc-header-rejected">Rejected Sentences</Localized>
       </NavLink>
-      <NavLink to="/sentences" key="sentences" onClick={closeNavigation}>
+      <NavLink to={useLocaleUrl('/sentences')} key="sentences" onClick={closeNavigation}>
         <Localized id="sc-header-my">My Sentences</Localized>
       </NavLink>
-      <NavLink to="/stats" key="stats" onClick={closeNavigation}>
+      <NavLink to={useLocaleUrl('/stats')} key="stats" onClick={closeNavigation}>
         <Localized id="sc-header-statistics">Statistics</Localized>
       </NavLink>
       {authed && (
-        <NavLink to="/profile" exact key="profile" onClick={closeNavigation}>
+        <NavLink to={localizedProfileUrl} exact key="profile" onClick={closeNavigation}>
           <Localized id="sc-header-profile">Profile</Localized>
         </NavLink>
       )}

diff --git a/web/src/components/home.tsx b/web/src/components/home.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Localized } from '@fluent/react';
 
+import { useLocaleUrl } from '../urls';
+
 import '../../css/home.css';
 
 export default function Home() {
@@ -29,7 +31,7 @@ export default function Home() {
         </p>
       </Localized>
       <section id="contribute">
-        <Link to={'/add'}>
+        <Link to={useLocaleUrl('/add')}>
           <div className="contributeCard">
             <Localized id="sc-home-collect-title">
               <h2>Collect sentences</h2>
@@ -39,7 +41,7 @@ export default function Home() {
             </Localized>
           </div>
         </Link>
-        <Link to={'/review'}>
+        <Link to={useLocaleUrl('/review')}>
           <div className="contributeCard">
             <Localized id="sc-home-review-title">
               <h2>Review sentences</h2>

diff --git a/web/src/components/language-info.tsx b/web/src/components/language-info.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Link, useRouteMatch } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { Localized } from '@fluent/react';
 
-import { getReviewUrl } from './review';
+import { useLocaleUrl, getReviewUrl } from '../urls';
 
 type Props = {
   total: number;
@@ -14,10 +14,6 @@ type Props = {
   nativeLanguageName: string;
 };
 
-type LanguageInfoRouteMatch = {
-  locale: string;
-};
-
 const LanguageInfo = (props: Props) => {
   const {
     total,
@@ -28,14 +24,15 @@ const LanguageInfo = (props: Props) => {
     languageName,
     nativeLanguageName,
   } = props;
-  const match = useRouteMatch<LanguageInfoRouteMatch>();
-
   const totalSentences = total;
   const totalInReview = total - validated - rejected;
   const unreviewedSentencesByYou = unreviewedByYou;
   const validatedSentences = validated;
   const rejectedSentences = rejected;
 
+  const localizedAddUrl = useLocaleUrl('/add');
+  const localizedReviewUrl = getReviewUrl(language);
+
   return (
     <section>
       <h3>
@@ -57,23 +54,23 @@ const LanguageInfo = (props: Props) => {
             <Localized
               id="sc-lang-info-review-now"
               elems={{
-                reviewLink: <Link to={getReviewUrl(match.params.locale, language)}></Link>,
+                reviewLink: <Link to={localizedReviewUrl}></Link>,
               }}
             >
               <span>
-                <Link to={getReviewUrl(match.params.locale, language)}>Review now!</Link>
+                <Link to={localizedReviewUrl}>Review now!</Link>
               </span>
             </Localized>
           )}
           {total - validated === 0 && (
             <Localized
               id="sc-lang-info-add-more"
               elems={{
-                addLink: <Link to={'/add'}></Link>,
+                addLink: <Link to={localizedAddUrl}></Link>,
               }}
             >
               <span>
-                <Link to={'/add'}>Add more sentences now!</Link>
+                <Link to={localizedAddUrl}>Add more sentences now!</Link>
               </span>
             </Localized>
           )}

diff --git a/web/src/components/review.tsx b/web/src/components/review.tsx
@@ -9,19 +9,14 @@ import {
   reviewSentences,
   saveSkippedSentences,
 } from '../actions/sentences';
+import { useLocaleUrl, getReviewUrl } from '../urls';
 import truthyFilter from '../truthyFilter';
 import type { RootState, ReviewedState } from '../types';
 
 import LanguageSelector from './language-selector';
 import ReviewForm from './review-form';
 import ReviewCriteria from './review-criteria';
 
-export const getReviewUrl = (locale: string, language: string | undefined) => {
-  const prefix = locale ? `/${locale}` : '';
-  const languageToReview = language || '';
-  return `${prefix}/review/${languageToReview}`;
-};
-
 type ReviewRouteMatch = {
   language: string;
   locale: string;
@@ -41,6 +36,8 @@ export default function Review() {
   const [language, setLanguage] = useState(match.params.language || '');
   const [newlySkippedSentences, setNewlySkippedSentences] = useState<number[]>([]);
   const dispatch = useDispatch();
+  const localizedAddUrl = useLocaleUrl('/add');
+  const localizedProfileUrl = useLocaleUrl('/profile');
 
   // If user only has one language possible, use it.
   if (languages.length === 1 && languages[0] !== language) {
@@ -60,20 +57,20 @@ export default function Review() {
       <Localized
         id="sc-review-lang-not-selected"
         elems={{
-          profileLink: <Link to="/profile"></Link>,
+          profileLink: <Link to={localizedProfileUrl}></Link>,
         }}
       >
         <p>
           You have not selected any languages. Please go to your&nbsp;
-          <Link to="/profile">Profile</Link> to select languages.
+          <Link to={localizedProfileUrl}>Profile</Link> to select languages.
         </p>
       </Localized>
     );
   }
 
   const onSelectLanguage = (language: string) => {
     setLanguage(language);
-    history.push(getReviewUrl(match.params.locale, language));
+    history.push(getReviewUrl(language));
   };
 
   const onReviewed = (reviewedState: ReviewedState) => {
@@ -141,12 +138,12 @@ export default function Review() {
         <Localized
           id="sc-review-no-sentences"
           elems={{
-            addLink: <Link to={'/add'}></Link>,
+            addLink: <Link to={localizedAddUrl}></Link>,
           }}
         >
           <p>
             No sentences to review.&nbsp;
-            <Link to={'/add'}>Add more sentences now!</Link>
+            <Link to={localizedAddUrl}>Add more sentences now!</Link>
           </p>
         </Localized>
       )}

diff --git a/web/src/components/stats.tsx b/web/src/components/stats.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Localized, useLocalization } from '@fluent/react';
+import { Localized } from '@fluent/react';
 
 import { getStats } from '../actions/languages';
 import truthyFilter from '../truthyFilter';
@@ -26,8 +26,6 @@ export default function Stats() {
     .map((lang) => allLanguages.find((extendedLanguage) => extendedLanguage.id === lang))
     .filter(truthyFilter);
 
-  const { l10n } = useLocalization();
-
   return (
     <div>
       <Localized id="sc-stats-title">

diff --git a/web/src/components/submit-form.tsx b/web/src/components/submit-form.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Localized, useLocalization } from '@fluent/react';
 
+import { useLocaleUrl } from '../urls';
 import type { Language, SubmissionFailures } from '../types';
 import LanguageSelector from './language-selector';
 import Sentence from './sentence';
@@ -54,6 +55,7 @@ export default function SubmitForm({
     confirmed: false,
   });
   const [language, setLanguage] = useState(firstLanguage ? firstLanguage.id : '');
+  const localizedHowToUrl = useLocaleUrl('/how-to');
 
   const handleInputChange = (
     event: React.FormEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>
@@ -253,11 +255,11 @@ export default function SubmitForm({
           <Localized
             id="sc-submit-guidelines"
             elems={{
-              howToLink: <Link to={'/how-to'}></Link>,
+              howToLink: <Link to={localizedHowToUrl}></Link>,
             }}
           >
             <p>
-              Please check the <Link to={'/how-to'}>guidelines</Link>.
+              Please check the <Link to={localizedHowToUrl}>guidelines</Link>.
             </p>
           </Localized>
 

diff --git a/web/src/urls.ts b/web/src/urls.ts
@@ -0,0 +1,19 @@
+import { useRouteMatch } from 'react-router-dom';
+
+type LocaleMatch = { locale: string };
+
+export const getReviewUrl = (language: string | undefined) => {
+  const match = useRouteMatch<LocaleMatch>();
+  const locale = match?.params?.locale;
+  const prefix = locale ? `/${locale}` : '';
+  const languageToReview = language || '';
+  return `${prefix}/review/${languageToReview}`;
+};
+
+export const useLocaleUrl = (path: string) => {
+  const match = useRouteMatch<LocaleMatch>();
+  const locale = match?.params?.locale;
+  const prefix = locale ? `/${locale}` : '';
+  const pathWithSlash = path.startsWith('/') ? path : `/${path}`;
+  return `${prefix}${pathWithSlash}`;
+};