Merge pull request #8539 from vdusart/feat/redirect-after-language-choice

Redirection after language choice

Author: pettinarip

src/components/Nav/Mobile.tsx

@@ -269,6 +269,7 @@ export interface IProps {
   toggleMenu: (item?: "search" | "menu") => void
   toggleTheme: () => void
   linkSections: ISections
+  fromPageParameter: string
 }
 
 const MobileNavMenu: React.FC<IProps> = ({
@@ -278,6 +279,7 @@ const MobileNavMenu: React.FC<IProps> = ({
   toggleMenu,
   toggleTheme,
   linkSections,
+  fromPageParameter,
 }) => {
   const intl = useIntl()
 
@@ -391,7 +393,7 @@ const MobileNavMenu: React.FC<IProps> = ({
           </BottomItemText>
         </BottomItem>
         <BottomItem onClick={handleClick}>
-          <BottomLink to="/languages/">
+          <BottomLink to={`/languages/${fromPageParameter}`}>
             <MenuIcon name="language" />
             <BottomItemText>
               <Translation id="languages" />

src/components/Nav/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { Flex, Icon, IconButton, Text, useColorMode } from "@chakra-ui/react"
+import { Icon, IconButton, Text, useColorMode } from "@chakra-ui/react"
 import { MdWbSunny, MdBrightness2, MdLanguage } from "react-icons/md"
 import styled from "@emotion/styled"
 import { cloneDeep } from "lodash"
@@ -8,7 +8,6 @@ import { useIntl } from "react-intl"
 import Menu from "./Menu"
 import MobileNavMenu from "./Mobile"
 import ButtonLink from "../ButtonLink"
-import NakedButton from "../NakedButton"
 import Link from "../Link"
 import Search from "../Search"
 import Translation from "../Translation"
@@ -97,25 +96,6 @@ const HomeLogo = styled(HomeIcon)`
   }
 `
 
-const Span = styled.span`
-  padding-left: 0.5rem;
-`
-
-const ThemeToggle = styled(NakedButton)`
-  margin-left: 1rem;
-  display: flex;
-  align-items: center;
-  &:hover {
-    svg {
-      fill: ${(props) => props.theme.colors.primary};
-    }
-  }
-`
-
-const NavIcon = styled(Icon)`
-  fill: ${(props) => props.theme.colors.text};
-`
-
 export interface IProps {
   path: string
 }
@@ -400,7 +380,11 @@ const Nav: React.FC<IProps> = ({ path }) => {
   }
 
   const shouldShowSubNav = path.includes("/developers/")
-
+  const splitPath = path.split("/")
+  const fromPageParameter =
+    splitPath.length > 3 && splitPath[2] !== "languages"
+      ? `?from=/${splitPath.slice(2).join("/")}`
+      : ""
   return (
     <NavContainer>
       <StyledNav aria-label={translateMessageId("nav-primary", intl)}>
@@ -429,7 +413,7 @@ const Nav: React.FC<IProps> = ({ path }) => {
                 _hover={{ color: "primary" }}
                 onClick={toggleColorMode}
               />
-              <ButtonLink to="/languages/" variant="icon">
+              <ButtonLink to={`/languages/${fromPageParameter}`} variant="icon">
                 <Icon as={MdLanguage} fontSize="2xl" />
                 <Text as="span" pl={2}>
                   <Translation id="languages" />
@@ -445,6 +429,7 @@ const Nav: React.FC<IProps> = ({ path }) => {
             toggleMenu={handleMenuToggle}
             toggleTheme={toggleColorMode}
             linkSections={mobileLinkSections}
+            fromPageParameter={fromPageParameter}
           />
         </NavContent>
       </StyledNav>

src/pages/languages.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from "react"
 import styled from "@emotion/styled"
+import { useLocation } from "@reach/router"
 import { useIntl } from "react-intl"
 
 import PageMetadata from "../components/PageMetadata"
 import Translation from "../components/Translation"
 import Link from "../components/Link"
 import { Page, Content } from "../components/SharedStyledComponents"
 
-import { Lang, Language, languageMetadata } from "../utils/languages"
+import { Language, languageMetadata } from "../utils/languages"
 import { translateMessageId, TranslationKey } from "../utils/translations"
 import { CardItem as LangItem } from "../components/SharedStyledComponents"
 import Icon from "../components/Icon"
@@ -68,12 +69,13 @@ const ResetIcon = styled(Icon)`
   fill: ${(props) => props.theme.colors.text};
 `
 
-interface TranslatedLanguage extends Language {
-  path: string
-}
-
 const LanguagesPage = () => {
   const intl = useIntl()
+  const location = useLocation()
+  const redirectTo =
+    location.search.split("from=").length > 1
+      ? location.search.split("from=")[1]
+      : "/"
   const [keyword, setKeyword] = useState<string>("")
   const resetKeyword = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
@@ -83,11 +85,10 @@ const LanguagesPage = () => {
     "page-languages-filter-placeholder",
     intl
   )
-  let translationsCompleted: Array<TranslatedLanguage> = []
+  let translationsCompleted: Array<Language> = []
   for (const lang in languageMetadata) {
     const langMetadata = {
       ...languageMetadata[lang],
-      path: "/",
       name: translateMessageId(`language-${lang}` as TranslationKey, intl),
     }
 
@@ -147,7 +148,7 @@ const LanguagesPage = () => {
           </Form>
           <LangContainer>
             {translationsCompleted.map((lang) => (
-              <LangItem to={lang.path} language={lang.code} key={lang["name"]}>
+              <LangItem to={redirectTo} language={lang.code} key={lang["name"]}>
                 <LangTitle>{lang["name"]}</LangTitle>
                 <h4>{lang.localName}</h4>
               </LangItem>