feat: add i18next

artsy · Apr 1, 2022 · d85c8f0 · d85c8f0
1 parent 206cebf
commit d85c8f0
Show file tree

Hide file tree

Showing 17 changed files with 277 additions and 52 deletions.
diff --git a/package.json b/package.json
@@ -163,6 +163,8 @@
     "history": "4.7.2",
     "http-proxy": "1.18.1",
     "http-shutdown": "1.2.1",
+    "i18next": "^21.6.14",
+    "i18next-browser-languagedetector": "^6.1.4",
     "insane": "2.6.1",
     "invariant": "2.2.4",
     "ip": "^1.1.5",
@@ -219,6 +221,7 @@
     "react-dom": "17.0.2",
     "react-dropzone": "^11.4.2",
     "react-head": "3.0.2",
+    "react-i18next": "^11.16.2",
     "react-linkify": "1.0.0-alpha",
     "react-redux": "5.1.1",
     "react-relay": "10.1.3",

diff --git a/src/desktop/components/react/stitch_components/NavBar.tsx b/src/desktop/components/react/stitch_components/NavBar.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from "react"
 import styled from "styled-components"
 import { NavBar as ReactionNavBar } from "v2/Components/NavBar"
 import { FlashBannerQueryRenderer as FlashBanner } from "v2/Components/FlashBanner"

diff --git a/src/desktop/components/react/stitch_components/ReactionArtworkArtistInfo.tsx b/src/desktop/components/react/stitch_components/ReactionArtworkArtistInfo.tsx
@@ -1,5 +1,6 @@
 import { Box } from "@artsy/palette"
 import { ArtistInfoQueryRenderer } from "v2/Apps/Artwork/Components/ArtistInfo"
+import "v2/System/i18n/i18n"
 
 export const ReactionArtworkArtistInfo = props => {
   return (

diff --git a/src/desktop/components/react/stitch_components/ReactionTooltipQuestion.tsx b/src/desktop/components/react/stitch_components/ReactionTooltipQuestion.tsx
@@ -1,5 +1,6 @@
 import { HelpIcon } from "@artsy/palette"
 import { Tooltip } from "v2/Components/Tooltip"
+import "v2/System/i18n/i18n"
 
 export const ReactionTooltipQuestion = props => {
   return (

diff --git a/src/desktop/components/react/stitch_components/SearchBar.tsx b/src/desktop/components/react/stitch_components/SearchBar.tsx
@@ -1,6 +1,7 @@
 import { Box } from "@artsy/palette"
 import { SearchBarQueryRenderer } from "v2/Components/Search/SearchBar"
 import styled from "styled-components"
+import "v2/System/i18n/i18n"
 
 const SearchBarContainer = styled(Box)`
   z-index: 100;

diff --git a/src/desktop/components/react/stitch_components/index.tsx b/src/desktop/components/react/stitch_components/index.tsx
@@ -20,6 +20,7 @@ export {
 } from "v2/Apps/Settings/Routes/EditSettings/Components/SettingsEditSettingsTwoFactor/TwoFactorAuthentication"
 export { ReactionCCPARequest as CCPARequest } from "./CCPARequest"
 import { Footer as BaseFooter } from "v2/Components/Footer"
+import "v2/System/i18n/i18n"
 
 export const Footer = () => {
   return (

diff --git a/src/desktop/index.ts b/src/desktop/index.ts
@@ -3,7 +3,6 @@ import { middleware as stitchMiddleware } from "@artsy/stitch/dist/internal/midd
 import * as globalReactModules from "desktop/components/react/stitch_components"
 
 const app = express()
-
 /**
  * -----------------------------------------------------------------------------
  *

diff --git a/src/locales/de-DE/translation.json b/src/locales/de-DE/translation.json
@@ -0,0 +1,21 @@
+{
+  "navbar":{
+    "show":"Show",
+    "shows":"Shows",
+    "buy":"Kaufen",
+    "artists":"Künstler",
+    "artworks":"Kunstwerke",
+    "galleries":"Galerien",
+    "auctions":"Auktionen",
+    "fairs":"Messen",
+    "museums":"Museen",
+    "viewingRooms":"Besichtigungsräume",
+    "nfts":"NFTs",
+    "signup":"Registrieren",
+    "login":"Anmelden",
+    "sell":"Verkaufen",
+    "priceDatabase":"Preisdatenbank",
+    "editorial":"Redaktion",
+    "downloadApp":"App herunterladen"
+  }
+}
diff --git a/src/locales/en-US/translation.json b/src/locales/en-US/translation.json
@@ -0,0 +1,21 @@
+{
+  "navbar":{
+    "show":"Show",
+    "shows":"Shows",
+    "buy":"Buy",
+    "artists":"Artists",
+    "artworks":"Artworks",
+    "galleries":"Galleries",
+    "auctions":"Auctions",
+    "fairs":"Fairs",
+    "museums":"Museums",
+    "viewingRooms":"Viewing Rooms",
+    "nfts":"NFTs",
+    "signup":"Sign up",
+    "login":"Log In",
+    "sell":"Sell",
+    "priceDatabase":"Price Database",
+    "editorial":"Editorial",
+    "downloadApp":"Download Appss"
+  }
+}
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -0,0 +1,21 @@
+{
+  "navbar":{
+    "show":"Show",
+    "shows":"Shows",
+    "buy":"Buy",
+    "artists":"Artists",
+    "artworks":"Artworks",
+    "galleries":"Galleries",
+    "auctions":"Auctions",
+    "fairs":"Fairs",
+    "museums":"Museums",
+    "viewingRooms":"Viewing Rooms",
+    "nfts":"NFTs",
+    "signup":"Sign up",
+    "login":"Log In",
+    "sell":"Sell",
+    "priceDatabase":"Price Database",
+    "editorial":"Editorial",
+    "downloadApp":"Download Appss"
+  }
+}
diff --git a/src/v2/Components/NavBar/NavBar.tsx b/src/v2/Components/NavBar/NavBar.tsx
@@ -43,6 +43,7 @@ import { useNavBarHeight } from "./useNavBarHeight"
 import { RouterLink } from "v2/System/Router/RouterLink"
 import { useTracking } from "react-tracking"
 import { Z } from "v2/Apps/Components/constants"
+import { useTranslation } from "react-i18next"
 
 /**
  * Old Force pages have the navbar height hardcoded in several places. If
@@ -72,6 +73,7 @@ export const NavBar: React.FC = track(
     return null
   }
   const { trackEvent } = useTracking()
+  const { t } = useTranslation()
   const [showMobileMenu, toggleMobileNav] = useState(false)
   const xs = __internal__useMatchMedia(themeProps.mediaQueries.xs)
   const sm = __internal__useMatchMedia(themeProps.mediaQueries.sm)
@@ -108,7 +110,7 @@ export const NavBar: React.FC = track(
     event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
   ) => {
     const link = event.currentTarget
-    const text = (link.textContent || link.getAttribute("data-label")) ?? ""
+    const text = (link.getAttribute("data-label") || link.textContent) ?? ""
     const href = link.getAttribute("href")!
 
     trackEvent({
@@ -149,7 +151,7 @@ export const NavBar: React.FC = track(
                   flex={1}
                   size="small"
                 >
-                  Sign Up
+                  {t("navbar.signup")}
                 </Button>
 
                 <Button
@@ -160,7 +162,7 @@ export const NavBar: React.FC = track(
                   ml={1}
                   size="small"
                 >
-                  Log In
+                  {t("navbar.login")}
                 </Button>
               </Flex>
             )}
@@ -181,34 +183,38 @@ export const NavBar: React.FC = track(
                       href="/collect"
                       textDecoration="none"
                       onClick={handleClick}
+                      data-label="Buy"
                     >
-                      Buy
+                      {t("navbar.buy")}
                     </NavBarItemLink>
                   </Flex>
 
                   <NavBarItemLink
                     href="/consign"
                     textDecoration="none"
                     onClick={handleClick}
+                    data-label="Consign"
                   >
-                    Sell
+                    {t("navbar.sell")}
                   </NavBarItemLink>
 
                   <NavBarItemLink
                     href="/price-database"
                     textDecoration="none"
                     onClick={handleClick}
+                    data-label="Price Database"
                   >
-                    Price Database
+                    {t("navbar.priceDatabase")}
                   </NavBarItemLink>
 
                   <Flex alignItems="center" display={["none", "none", "flex"]}>
                     <NavBarItemLink
                       href="/articles"
                       textDecoration="none"
                       onClick={handleClick}
+                      data-label="Articles"
                     >
-                      Editorial
+                      {t("navbar.editorial")}
                     </NavBarItemLink>
                   </Flex>
                 </Text>
@@ -230,7 +236,7 @@ export const NavBar: React.FC = track(
                         })
                       }}
                     >
-                      Log In
+                      {t("navbar.login")}
                     </Button>
 
                     <Button
@@ -244,7 +250,7 @@ export const NavBar: React.FC = track(
                         })
                       }}
                     >
-                      Sign Up
+                      {t("navbar.signup")}
                     </Button>
                   </Flex>
                 )}
@@ -324,7 +330,7 @@ export const NavBar: React.FC = track(
                         onClick={handleClick}
                         data-label="Artists"
                       />
-                      Artists
+                      {t("navbar.artists")}
                     </NavBarItemButton>
                   )}
                 </Dropdown>
@@ -355,37 +361,65 @@ export const NavBar: React.FC = track(
                         onClick={handleClick}
                         data-label="Artworks"
                       />
-                      Artworks
+                      {t("navbar.artworks")}
                     </NavBarItemButton>
                   )}
                 </Dropdown>
 
-                <NavBarItemLink href="/auctions" onClick={handleClick}>
-                  Auctions
+                <NavBarItemLink
+                  href="/auctions"
+                  onClick={handleClick}
+                  data-label="Auctions"
+                >
+                  {t("navbar.auctions")}
                 </NavBarItemLink>
 
-                <NavBarItemLink href="/viewing-rooms" onClick={handleClick}>
-                  Viewing&nbsp;Rooms
+                <NavBarItemLink
+                  href="/viewing-rooms"
+                  onClick={handleClick}
+                  data-label="Viewing Rooms"
+                >
+                  {t("navbar.viewingRooms")}
                 </NavBarItemLink>
 
-                <NavBarItemLink href="/galleries" onClick={handleClick}>
-                  Galleries
+                <NavBarItemLink
+                  href="/galleries"
+                  onClick={handleClick}
+                  data-label="Galleries"
+                >
+                  {t("navbar.galleries")}
                 </NavBarItemLink>
 
-                <NavBarItemLink href="/art-fairs" onClick={handleClick}>
-                  Fairs
+                <NavBarItemLink
+                  href="/art-fairs"
+                  onClick={handleClick}
+                  data-label="Fairs"
+                >
+                  {t("navbar.fairs")}
                 </NavBarItemLink>
 
-                <NavBarItemLink href="/shows" onClick={handleClick}>
-                  Shows
+                <NavBarItemLink
+                  href="/shows"
+                  onClick={handleClick}
+                  data-label="Shows"
+                >
+                  {t("navbar.shows")}
                 </NavBarItemLink>
 
-                <NavBarItemLink href="/institutions" onClick={handleClick}>
-                  Museums
+                <NavBarItemLink
+                  href="/institutions"
+                  onClick={handleClick}
+                  data-label="Institutions"
+                >
+                  {t("navbar.museums")}
                 </NavBarItemLink>
 
-                <NavBarItemLink href="/nft" onClick={handleClick}>
-                  NFTs
+                <NavBarItemLink
+                  href="/nft"
+                  onClick={handleClick}
+                  data-label="NFTs"
+                >
+                  {t("navbar.nfts")}
                 </NavBarItemLink>
               </Flex>
 
@@ -401,7 +435,7 @@ export const NavBar: React.FC = track(
                     })
                   }}
                 >
-                  Download App
+                  {t("navbar.downloadApp")}
                 </NavBarItemButton>
               </Flex>
             </Text>

diff --git a/src/v2/Components/NavBar/__tests__/NavBar.jest.tsx b/src/v2/Components/NavBar/__tests__/NavBar.jest.tsx
@@ -66,17 +66,17 @@ describe("NavBar", () => {
   describe("desktop", () => {
     it("renders logged out items", () => {
       const wrapper = getWrapper()
-      expect(wrapper.html()).toContain("Log In")
-      expect(wrapper.html()).toContain("Sign Up")
+      expect(wrapper.html()).toContain("navbar.login")
+      expect(wrapper.html()).toContain("navbar.signup")
       expect(wrapper.find(BellIcon).length).toEqual(0)
       expect(wrapper.find(SoloIcon).length).toEqual(0)
     })
 
     it("renders logged in items", () => {
       // @ts-expect-error PLEASE_FIX_ME_STRICT_NULL_CHECK_MIGRATION
       const wrapper = getWrapper({ user: true })
-      expect(wrapper.html()).not.toContain("Log In")
-      expect(wrapper.html()).not.toContain("Sign Up")
+      expect(wrapper.html()).not.toContain("navbar.login")
+      expect(wrapper.html()).not.toContain("navbar.signup")
       expect(wrapper.find(BellIcon).length).toEqual(1)
       expect(wrapper.find(SoloIcon).length).toEqual(1)
     })