From a08c53ba1e109f3bfe03ee64f249cdea2fc8a79c Mon Sep 17 00:00:00 2001
From: Sendou <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 21 Jun 2020 15:21:25 +0300
Subject: [PATCH] home page trans

---
 .../public/locales/en/translation.json        |  15 ++
 .../src/components/home/HomePage.tsx          |   4 +-
 frontend-react/src/components/home/Stats.tsx  | 130 +++++++++++-------
 .../src/components/home/WeeksTournaments.tsx  |   6 +-
 .../src/components/root/SideNavContent.tsx    |   6 +-
 5 files changed, 103 insertions(+), 58 deletions(-)

diff --git a/frontend-react/public/locales/en/translation.json b/frontend-react/public/locales/en/translation.json
index 59bb3c8c2..25e2c86f1 100644
--- a/frontend-react/public/locales/en/translation.json
+++ b/frontend-react/public/locales/en/translation.json
@@ -940,5 +940,20 @@
     "Profile": "Profile",
     "Log out": "Log out",
     "Log in via Discord": "Log in via Discord"
+  },
+  "home": {
+    "Competitive Splatoon Hub": "Competitive Splatoon Hub",
+    "Play in competitive events this week": "Play in competitive events this week",
+    "View more info": "View more info",
+    "Featuring...": "Featuring...",
+    "xRankMonths": "{{xRankMonthCount}} months of <3><0>X Rank Top 500 data</0></3>",
+    "buildCount": "<0></0> <2><0>builds</0></2>",
+    "userCount": "<0></0> <2><0>users</0></2>",
+    "faCount": "<0></0> <2><0>free agents</0></2>",
+    "tournamentCount": "<0></0> <2><0>tournament results</0></2>",
+    "As well as": "As well as",
+    "calendarExplanation": "<0><0>Calendar</0></0> to discover upcoming events",
+    "drawingToolExplanation": "<0><0>Map drawing tool</0></0> to easily share your plans",
+    "analyzerExplanation": "<0><0>Build analyzer</0></0> to find out exactly what your builds are doing"
   }
 }
diff --git a/frontend-react/src/components/home/HomePage.tsx b/frontend-react/src/components/home/HomePage.tsx
index 1dce1a715..7bad04f74 100644
--- a/frontend-react/src/components/home/HomePage.tsx
+++ b/frontend-react/src/components/home/HomePage.tsx
@@ -8,9 +8,11 @@ import "./HomePage.css"
 import { Helmet } from "react-helmet-async"
 import Stats from "./Stats"
 import WeeksTournaments from "./WeeksTournaments"
+import { useTranslation } from "react-i18next"
 
 const HomePage: React.FC<RouteComponentProps> = () => {
   const { colorMode, grayWithShade } = useContext(MyThemeContext)
+  const { t } = useTranslation()
   return (
     <>
       <Helmet>
@@ -32,7 +34,7 @@ const HomePage: React.FC<RouteComponentProps> = () => {
           fontWeight="light"
           color={grayWithShade}
         >
-          Competitive Splatoon Hub
+          {t("home;Competitive Splatoon Hub")}
         </Heading>
         <Stats />
       </Flex>
diff --git a/frontend-react/src/components/home/Stats.tsx b/frontend-react/src/components/home/Stats.tsx
index 980171337..d10d05eb9 100644
--- a/frontend-react/src/components/home/Stats.tsx
+++ b/frontend-react/src/components/home/Stats.tsx
@@ -5,6 +5,7 @@ import React, { useContext } from "react"
 import { STATS } from "../../graphql/queries/stats"
 import MyThemeContext from "../../themeContext"
 import Error from "../common/Error"
+import { useTranslation, Trans } from "react-i18next"
 
 interface StatsData {
   stats: {
@@ -24,12 +25,17 @@ const xRankMonths = () => {
 const Stats: React.FC = () => {
   const { grayWithShade, themeColorWithShade } = useContext(MyThemeContext)
   const { data, error } = useQuery<StatsData>(STATS)
+  const { t } = useTranslation()
 
   if (error) return <Error errorMessage={error.message} />
 
   const stats = data?.stats
 
-  const getStatString = (value?: number) => {
+  interface StatOrSkeletonProps {
+    value?: number
+  }
+
+  const StatOrSkeleton: React.FC<StatOrSkeletonProps> = ({ value }) => {
     if (!value) {
       return (
         <Skeleton
@@ -40,13 +46,17 @@ const Stats: React.FC = () => {
         />
       )
     }
-    return value
+    return <>{value}</>
   }
 
+  const getStatString = (_asd: any) => 2
+
+  const xRankMonthCount = xRankMonths()
+
   return (
     <>
       <Box fontSize="xl" fontWeight="hairline" mt="1em" color={grayWithShade}>
-        Featuring...
+        {t("home;Featuring...")}
       </Box>
       <Flex
         flexDirection="column"
@@ -57,48 +67,58 @@ const Stats: React.FC = () => {
         textAlign="center"
       >
         <Box mb="0.5em">
-          {xRankMonths()} months of{" "}
-          <Link to="/xsearch">
-            <Box as="span" color={themeColorWithShade}>
-              X Rank Top 500 data
-            </Box>
-          </Link>
+          <Trans i18nKey="home;xRankMonths">
+            {{ xRankMonthCount }} months of{" "}
+            <Link to="/xsearch">
+              <Box as="span" color={themeColorWithShade}>
+                X Rank Top 500 data
+              </Box>
+            </Link>
+          </Trans>
         </Box>
         <Box mb="0.5em">
-          {getStatString(stats?.build_count)}{" "}
-          <Link to="/builds">
-            <Box as="span" color={themeColorWithShade}>
-              builds
-            </Box>
-          </Link>
+          <Trans i18nKey="home;buildCount">
+            <StatOrSkeleton value={stats?.build_count} />{" "}
+            <Link to="/builds">
+              <Box as="span" color={themeColorWithShade}>
+                builds
+              </Box>
+            </Link>
+          </Trans>
         </Box>
         <Box mb="0.5em">
-          {getStatString(stats?.user_count)}{" "}
-          <Link to="/u">
-            <Box as="span" color={themeColorWithShade}>
-              users
-            </Box>
-          </Link>{" "}
+          <Trans i18nKey="home;userCount">
+            <StatOrSkeleton value={stats?.user_count} />{" "}
+            <Link to="/u">
+              <Box as="span" color={themeColorWithShade}>
+                users
+              </Box>
+            </Link>{" "}
+          </Trans>
         </Box>
         <Box mb="0.5em">
-          {getStatString(stats?.fa_count)}{" "}
-          <Link to="/freeagents">
-            <Box as="span" color={themeColorWithShade}>
-              free agents
-            </Box>
-          </Link>
+          <Trans i18nKey="home;faCount">
+            <StatOrSkeleton value={stats?.fa_count} />{" "}
+            <Link to="/freeagents">
+              <Box as="span" color={themeColorWithShade}>
+                free agents
+              </Box>
+            </Link>
+          </Trans>
         </Box>
         <Box>
-          {getStatString(stats?.tournament_count)}{" "}
-          <Link to="/tournaments">
-            <Box as="span" color={themeColorWithShade}>
-              tournament results
-            </Box>
-          </Link>
+          <Trans i18nKey="home;tournamentCount">
+            <StatOrSkeleton value={stats?.tournament_count} />{" "}
+            <Link to="/tournaments">
+              <Box as="span" color={themeColorWithShade}>
+                tournament results
+              </Box>
+            </Link>
+          </Trans>
         </Box>
       </Flex>
       <Box fontSize="xl" fontWeight="hairline" mt="0.5em" color={grayWithShade}>
-        As well as
+        {t("home;As well as")}
       </Box>
       <Flex
         flexDirection="column"
@@ -108,28 +128,34 @@ const Stats: React.FC = () => {
         textAlign="center"
       >
         <Box mb="0.5em">
-          <Link to="/calendar">
-            <Box as="span" color={themeColorWithShade}>
-              Calendar
-            </Box>
-          </Link>{" "}
-          to discover upcoming events
+          <Trans i18nKey="home;calendarExplanation">
+            <Link to="/calendar">
+              <Box as="span" color={themeColorWithShade}>
+                Calendar
+              </Box>
+            </Link>{" "}
+            to discover upcoming events
+          </Trans>
         </Box>
         <Box mb="0.5em">
-          <Link to="/plans">
-            <Box as="span" color={themeColorWithShade}>
-              Map drawing tool
-            </Box>
-          </Link>{" "}
-          to easily share your plans
+          <Trans i18nKey="home;drawingToolExplanation">
+            <Link to="/plans">
+              <Box as="span" color={themeColorWithShade}>
+                Map drawing tool
+              </Box>
+            </Link>{" "}
+            to easily share your plans
+          </Trans>
         </Box>
         <Box>
-          <Link to="/analyzer">
-            <Box as="span" color={themeColorWithShade}>
-              Build analyzer
-            </Box>
-          </Link>{" "}
-          to find out exactly what your builds are doing
+          <Trans i18nKey="home;analyzerExplanation">
+            <Link to="/analyzer">
+              <Box as="span" color={themeColorWithShade}>
+                Build analyzer
+              </Box>
+            </Link>{" "}
+            to find out exactly what your builds are doing
+          </Trans>
         </Box>
       </Flex>
     </>
diff --git a/frontend-react/src/components/home/WeeksTournaments.tsx b/frontend-react/src/components/home/WeeksTournaments.tsx
index 791c2803a..b5c901d32 100644
--- a/frontend-react/src/components/home/WeeksTournaments.tsx
+++ b/frontend-react/src/components/home/WeeksTournaments.tsx
@@ -13,10 +13,12 @@ import { FiClock, FiInfo } from "react-icons/fi"
 import MyThemeContext from "../../themeContext"
 import Button from "../elements/Button"
 import { Link } from "@reach/router"
+import { useTranslation } from "react-i18next"
 
 const WeeksTournaments: React.FC = () => {
   const { themeColorWithShade, grayWithShade } = useContext(MyThemeContext)
   const { data, error, loading } = useQuery<UpcomingEventsData>(UPCOMING_EVENTS)
+  const { t } = useTranslation()
 
   if (loading) return <Loading />
   if (error) return <Error errorMessage={error.message} />
@@ -31,7 +33,7 @@ const WeeksTournaments: React.FC = () => {
 
   return (
     <>
-      <SubHeader>Play in competitive events this week</SubHeader>
+      <SubHeader>{t("home;Play in competitive events this week")}</SubHeader>
       <Flex alignItems="center" flexDirection="column">
         {events.map((tournament) => (
           <Box
@@ -55,7 +57,7 @@ const WeeksTournaments: React.FC = () => {
         <Box mt="1em">
           <Link to="/calendar">
             <Button outlined icon={FiInfo}>
-              View more info
+              {t("home;View more info")}
             </Button>
           </Link>
         </Box>
diff --git a/frontend-react/src/components/root/SideNavContent.tsx b/frontend-react/src/components/root/SideNavContent.tsx
index 64136df60..62c317fd9 100644
--- a/frontend-react/src/components/root/SideNavContent.tsx
+++ b/frontend-react/src/components/root/SideNavContent.tsx
@@ -76,7 +76,7 @@ const UserItem: React.FC<{ data?: UserData }> = ({ data }) => {
                 color={themeColorWithShade}
                 size="1.5em"
               />{" "}
-              {t("Log in via Discord")}
+              {t("navigation;Log in via Discord")}
             </PseudoBox>
           </a>
         </ListItem>
@@ -101,7 +101,7 @@ const UserItem: React.FC<{ data?: UserData }> = ({ data }) => {
             <Flex alignItems="center" justifyContent="center">
               <Box as={FiUser} w="24px" h="auto" mr="1em" />{" "}
               <Box as="span" mt="2px">
-                {t("Profile")}
+                {t("navigation;Profile")}
               </Box>
             </Flex>
           </MenuItem>
@@ -111,7 +111,7 @@ const UserItem: React.FC<{ data?: UserData }> = ({ data }) => {
             <Flex alignItems="center" justifyContent="center">
               <Box as={FiLogOut} w="24px" h="auto" mr="1em" />{" "}
               <Box as="span" mt="2px">
-                {t("Log out")}
+                {t("navigation;Log out")}
               </Box>
             </Flex>
           </MenuItem>