From d310aa5382aad5826b4a1637fcc84f49b17d90f4 Mon Sep 17 00:00:00 2001
From: Matt <Geczy@users.noreply.github.com>
Date: Wed, 5 Jun 2024 09:12:41 -0500
Subject: [PATCH] Add i18n support with react-i18next

---
 package.json                              |  2 +
 public/locales/en/common.json             | 35 ++++++++-
 src/components/Homepage/Hero.tsx          | 21 +++--
 src/pages/_app.tsx                        | 94 ++++++++++++-----------
 src/pages/dashboard/features/advanced.tsx |  8 +-
 src/pages/dashboard/features/chat.tsx     |  8 +-
 src/pages/dashboard/features/index.tsx    |  8 +-
 src/pages/dashboard/features/overlay.tsx  |  8 +-
 src/pages/dashboard/index.tsx             | 32 ++++----
 src/pages/overlay/index.tsx               |  8 +-
 10 files changed, 135 insertions(+), 89 deletions(-)

diff --git a/package.json b/package.json
index 1887719e..379fcdb1 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "clsx": "^2.1.1",
     "focus-visible": "^5.2.0",
     "framer-motion": "^11.2.4",
+    "i18next": "^21.8.10",
     "lucide-react": "^0.378.0",
     "mantine-flagpack": "^4.0.1",
     "next": "14.2.3",
@@ -50,6 +51,7 @@
     "react-countdown": "^2.3.5",
     "react-countdown-circle-timer": "^3.2.1",
     "react-dom": "18.3.1",
+    "react-i18next": "^11.18.6",
     "react-redux": "^9.1.2",
     "redux": "^5.0.1",
     "redux-socket.io-middleware": "^1.0.4",
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index b6f2111f..c99c641c 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -4,5 +4,36 @@
         "title": "Welcome, streamer",
         "description": "Unlock the Ultimate Dota 2 Streaming Experience with Dotabod! Boost your stream's engagement, showcase real-time stats, and delight your audience with our all-in-one streaming toolkit. Elevate your game and become the streamer you were meant to be!"
     },
-    "live": "Live"
-}
\ No newline at end of file
+    "live": "Live",
+    "setup": {
+        "title": "Setup",
+        "subtitle": "Let's get Dotabod working for you right away",
+        "step1": "Twitch",
+        "step2": "Dota 2",
+        "step3": "OBS",
+        "step4": "All done!",
+        "finalNote": "That's it! You're all set up."
+    },
+    "features": {
+        "main": {
+            "title": "Main features",
+            "subtitle": "Customize the options your stream receives."
+        },
+        "chat": {
+            "title": "Chatter",
+            "subtitle": "The bot can post some random messages as you play your game."
+        },
+        "advanced": {
+            "title": "Advanced features",
+            "subtitle": "Looking for even more? They'll be here 😎"
+        },
+        "overlay": {
+            "title": "Overlay",
+            "subtitle": "This stuff will show up on your stream"
+        }
+    },
+    "troubleshoot": {
+        "title": "Live preview",
+        "subtitle": "Take a peak to see if your OBS is showing the correct overlay. Try joining a bot match to have this preview show the pick blocker, for example."
+    }
+}
diff --git a/src/components/Homepage/Hero.tsx b/src/components/Homepage/Hero.tsx
index 576c8d29..09ef7d13 100644
--- a/src/components/Homepage/Hero.tsx
+++ b/src/components/Homepage/Hero.tsx
@@ -12,6 +12,7 @@ import { CursorArrowRaysIcon } from '@heroicons/react/24/outline'
 import useSWR from 'swr'
 import { fetcher } from '@/lib/fetcher'
 import TwitchSvg from 'src/images/logos/twitch.svg'
+import { useTranslation } from 'react-i18next';
 
 const featuredUsers = [
   {
@@ -132,6 +133,7 @@ const TwitchUser = ({
 }
 
 export function Hero() {
+  const { t } = useTranslation();
   const session = useSession()
   const name = session.data?.user?.name || 'streamers'
   const { nonSupporters } = grouped
@@ -147,7 +149,7 @@ export function Hero() {
         <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
             <h1 className="flex items-center space-x-2 text-4xl font-medium tracking-tight text-gray-200">
-              <span>Welcome, {name}</span>
+              <span>{t('hero.title', 'Welcome, streamer')}</span>
               <Image
                 src="/images/emotes/peepoclap.webp"
                 width={38}
@@ -156,10 +158,7 @@ export function Hero() {
               />
             </h1>
             <p className="mt-6 text-lg text-gray-300">
-              Unlock the Ultimate Dota 2 Streaming Experience with Dotabod!
-              Boost your stream&apos;s engagement, showcase real-time stats, and
-              delight your audience with our all-in-one streaming toolkit.
-              Elevate your game and become the streamer you were meant to be!
+              {t('hero.description', "Unlock the Ultimate Dota 2 Streaming Experience with Dotabod! Boost your stream's engagement, showcase real-time stats, and delight your audience with our all-in-one streaming toolkit. Elevate your game and become the streamer you were meant to be!")}
             </p>
             <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
               <Link href="/dashboard">
@@ -167,9 +166,9 @@ export function Hero() {
                   <div className="flex items-center space-x-2">
                     <CursorArrowRaysIcon className="flex h-4 w-4" />
                     {session?.status === 'authenticated' ? (
-                      <span>Go to dashboard</span>
+                      <span>{t('hero.dashboard', 'Go to dashboard')}</span>
                     ) : (
-                      <span>Get started</span>
+                      <span>{t('hero.getStarted', 'Get started')}</span>
                     )}
                   </div>
                 </Button>
@@ -181,7 +180,7 @@ export function Hero() {
               >
                 <div className="flex items-center space-x-2">
                   <Image alt="discord" src={DiscordSvg} className="h-4 w-4" />
-                  <span>Join Discord</span>
+                  <span>{t('hero.joinDiscord', 'Join Discord')}</span>
                 </div>
               </Button>
             </div>
@@ -211,7 +210,7 @@ export function Hero() {
                   height={18}
                   alt="twitch logo"
                 />
-                <span>Featured in over 15,000 Twitch streamers</span>
+                <span>{t('hero.featuredStreamers', 'Featured in over 15,000 Twitch streamers')}</span>
               </div>
             </div>
             <ul className="mx-auto flex max-w-xl flex-wrap justify-center lg:mx-0 lg:justify-start">
@@ -241,7 +240,7 @@ export function Hero() {
               <div className="relative lg:col-span-7 xl:col-span-6">
                 <div className="flex items-center space-x-2 text-center text-sm font-semibold text-gray-300 lg:text-left">
                   <LiveIcon />
-                  <span>Top streamers using Dotabod:</span>
+                  <span>{t('hero.topStreamers', 'Top streamers using Dotabod:')}</span>
                 </div>
               </div>
               <ul className="mx-auto flex max-w-xl flex-wrap justify-center lg:mx-0 lg:justify-start">
@@ -259,7 +258,7 @@ export function Hero() {
               <div className="relative lg:col-span-7 xl:col-span-6">
                 <div className="flex items-center space-x-2 text-center text-sm font-semibold text-gray-300 lg:text-left">
                   <LiveIcon />
-                  <span>Random Dotabod streamers:</span>
+                  <span>{t('hero.randomStreamers', 'Random Dotabod streamers:')}</span>
                 </div>
               </div>
               <ul className="mx-auto flex max-w-xl flex-wrap justify-center lg:mx-0 lg:justify-start">
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 17e7269a..57fe3d50 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,5 +1,7 @@
 import { Analytics as VercelAnalytics } from '@vercel/analytics/react'
 import { SessionProvider } from 'next-auth/react'
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../i18n';
 
 import '@/styles/tailwind.css'
 import 'focus-visible'
@@ -38,53 +40,55 @@ const App = ({
 
   return (
     <SessionProvider session={session}>
-      <ConfigProvider
-        theme={{
-          algorithm: theme.darkAlgorithm,
-          components: {
-            Button: {
-              colorLink: 'var(--color-purple-300)',
-              colorPrimaryHover: 'var(--color-purple-300)',
+      <I18nextProvider i18n={i18n}>
+        <ConfigProvider
+          theme={{
+            algorithm: theme.darkAlgorithm,
+            components: {
+              Button: {
+                colorLink: 'var(--color-purple-300)',
+                colorPrimaryHover: 'var(--color-purple-300)',
+              },
+              Tabs: {
+                colorPrimary: 'var(--color-purple-400)',
+                itemHoverColor: 'var(--color-purple-300)',
+              },
+              Menu: {
+                colorSubItemBg: 'var(--color-gray-800)',
+                colorItemBgHover: 'var(--color-gray-700)',
+                colorItemBgSelected: 'var(--color-gray-600)',
+                colorItemTextSelected: 'var(--color-gray-200)',
+                colorItemText: 'var(--color-gray-300)',
+              },
+              Switch: {
+                colorPrimary: 'var(--color-purple-900)',
+              },
             },
-            Tabs: {
-              colorPrimary: 'var(--color-purple-400)',
-              itemHoverColor: 'var(--color-purple-300)',
+            token: {
+              colorPrimary: 'rgb(85, 24, 103)',
+              colorLink: 'var(--color-purple-500)',
+              colorLinkActive: 'var(--color-purple-300)',
+              colorLinkHover: 'var(--color-purple-300)',
+              colorText: 'var(--color-gray-200)',
+              colorBgLayout: 'var(--color-gray-900)',
+              colorBgContainer: 'var(--color-gray-800)',
             },
-            Menu: {
-              colorSubItemBg: 'var(--color-gray-800)',
-              colorItemBgHover: 'var(--color-gray-700)',
-              colorItemBgSelected: 'var(--color-gray-600)',
-              colorItemTextSelected: 'var(--color-gray-200)',
-              colorItemText: 'var(--color-gray-300)',
-            },
-            Switch: {
-              colorPrimary: 'var(--color-purple-900)',
-            },
-          },
-          token: {
-            colorPrimary: 'rgb(85, 24, 103)',
-            colorLink: 'var(--color-purple-500)',
-            colorLinkActive: 'var(--color-purple-300)',
-            colorLinkHover: 'var(--color-purple-300)',
-            colorText: 'var(--color-gray-200)',
-            colorBgLayout: 'var(--color-gray-900)',
-            colorBgContainer: 'var(--color-gray-800)',
-          },
-        }}
-      >
-        <StyleProvider hashPriority="high">
-          <SentrySession />
-          <VercelAnalytics />
-          <GoogleAnalytics />
-          <MantineProvider>
-            <Provider store={store}>
-              <AntProvider>
-                {getLayout(<Component {...pageProps} />)}
-              </AntProvider>
-            </Provider>
-          </MantineProvider>
-        </StyleProvider>
-      </ConfigProvider>
+          }}
+        >
+          <StyleProvider hashPriority="high">
+            <SentrySession />
+            <VercelAnalytics />
+            <GoogleAnalytics />
+            <MantineProvider>
+              <Provider store={store}>
+                <AntProvider>
+                  {getLayout(<Component {...pageProps} />)}
+                </AntProvider>
+              </Provider>
+            </MantineProvider>
+          </StyleProvider>
+        </ConfigProvider>
+      </I18nextProvider>
     </SessionProvider>
   )
 }
diff --git a/src/pages/dashboard/features/advanced.tsx b/src/pages/dashboard/features/advanced.tsx
index 958f105d..de5cbf28 100644
--- a/src/pages/dashboard/features/advanced.tsx
+++ b/src/pages/dashboard/features/advanced.tsx
@@ -5,19 +5,21 @@ import Head from 'next/head'
 import { ReactElement } from 'react'
 import type { NextPageWithLayout } from '@/pages/_app'
 import Header from '@/components/Dashboard/Header'
+import { useTranslation } from 'react-i18next';
 
 const FeaturesPage: NextPageWithLayout = () => {
   const { status } = useSession()
+  const { t } = useTranslation();
 
   return status === 'authenticated' ? (
     <>
       <Head>
-        <title>Dotabod | Advanced features</title>
+        <title>{t('features.advanced.title')}</title>
       </Head>
 
       <Header
-        subtitle="Looking for even more? They'll be here 😎"
-        title="Advanced features"
+        subtitle={t('features.advanced.subtitle')}
+        title={t('features.advanced.title')}
       />
 
       <SceneSwitcher />
diff --git a/src/pages/dashboard/features/chat.tsx b/src/pages/dashboard/features/chat.tsx
index 53460b86..b9f02952 100644
--- a/src/pages/dashboard/features/chat.tsx
+++ b/src/pages/dashboard/features/chat.tsx
@@ -5,19 +5,21 @@ import Head from 'next/head'
 import { ReactElement } from 'react'
 import type { NextPageWithLayout } from '@/pages/_app'
 import Header from '@/components/Dashboard/Header'
+import { useTranslation } from 'react-i18next';
 
 const FeaturesPage: NextPageWithLayout = () => {
   const { status } = useSession()
+  const { t } = useTranslation();
 
   return status === 'authenticated' ? (
     <>
       <Head>
-        <title>Dotabod | Chat features</title>
+        <title>{t('features.chat.title')}</title>
       </Head>
 
       <Header
-        subtitle="The bot can post some random messages as you play your game."
-        title="Chatter"
+        subtitle={t('features.chat.subtitle')}
+        title={t('features.chat.title')}
       />
 
       <ChatterCard />
diff --git a/src/pages/dashboard/features/index.tsx b/src/pages/dashboard/features/index.tsx
index 75d7f73b..38db5e86 100644
--- a/src/pages/dashboard/features/index.tsx
+++ b/src/pages/dashboard/features/index.tsx
@@ -9,19 +9,21 @@ import { ReactElement } from 'react'
 import type { NextPageWithLayout } from '@/pages/_app'
 import Header from '@/components/Dashboard/Header'
 import IdeaCard from '@/components/Dashboard/Features/IdeaCard'
+import { useTranslation } from 'react-i18next';
 
 const FeaturesPage: NextPageWithLayout = () => {
   const { status } = useSession()
+  const { t } = useTranslation();
 
   return status === 'authenticated' ? (
     <>
       <Head>
-        <title>Dotabod | Main features</title>
+        <title>{t('features.main.title')}</title>
       </Head>
 
       <Header
-        subtitle="Customize the options your stream receives."
-        title="Main features"
+        subtitle={t('features.main.subtitle')}
+        title={t('features.main.title')}
       />
 
       <div className="grid grid-cols-1 gap-6 md:grid-cols-1 lg:grid-cols-2">
diff --git a/src/pages/dashboard/features/overlay.tsx b/src/pages/dashboard/features/overlay.tsx
index 4967de34..d861a86d 100644
--- a/src/pages/dashboard/features/overlay.tsx
+++ b/src/pages/dashboard/features/overlay.tsx
@@ -12,19 +12,21 @@ import QueueCard from '@/components/Dashboard/Features/QueueCard'
 import MmrOverlay from '@/components/Overlay/MmrOverlay'
 import BetsOverlay from '@/components/Overlay/BetsOverlay'
 import WinProbabilityOverlay from '@/components/Overlay/WinProbabilityOverlay'
+import { useTranslation } from 'react-i18next';
 
 const FeaturesPage: NextPageWithLayout = () => {
   const { status } = useSession()
+  const { t } = useTranslation();
 
   return status === 'authenticated' ? (
     <>
       <Head>
-        <title>Dotabod | Overlay features</title>
+        <title>{t('features.overlay.title')}</title>
       </Head>
 
       <Header
-        subtitle="This stuff will show up on your stream"
-        title="Overlay"
+        subtitle={t('features.overlay.subtitle')}
+        title={t('features.overlay.title')}
       />
 
       <div className="grid grid-cols-1 gap-6 md:grid-cols-1 lg:grid-cols-2">
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 4f93f4e9..b735f7ed 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -10,9 +10,11 @@ import Link from 'next/link'
 import Header from '@/components/Dashboard/Header'
 import DashboardShell from '@/components/Dashboard/DashboardShell'
 import { Button, Steps } from 'antd'
+import { useTranslation } from 'react-i18next';
 
 const SetupPage = () => {
   const { status } = useSession()
+  const { t } = useTranslation();
 
   const [active, setActive] = useState(0)
   const nextStep = () =>
@@ -22,24 +24,24 @@ const SetupPage = () => {
 
   const steps = [
     {
-      title: 'Twitch',
+      title: t('setup.step1', 'Twitch'),
       content: <ChatBot />,
     },
     {
-      title: 'Dota 2',
+      title: t('setup.step2', 'Dota 2'),
       content: <ExportCFG />,
     },
     {
-      title: 'OBS',
+      title: t('setup.step3', 'OBS'),
       content: <OBSOverlay />,
     },
     {
-      title: 'All done!',
+      title: t('setup.step4', 'All done!'),
       content: (
         <Card>
           <div className="mb-4 space-x-2">
             <span>
-              <b>That&apos;s it!</b> You&apos;re all set up.
+              <b>{t('setup.finalNote', "That's it! You're all set up.")}</b>
             </span>
             <Image
               className="inline"
@@ -63,12 +65,10 @@ const SetupPage = () => {
             </div>
             <div>
               <p>
-                Test it by joining a bot match. Visit the{' '}
-                <Link href="overlay">Live Preview page</Link> to confirm the
-                overlay is showing. You should see the minimap blocker overlay
-                once you&apos;re in a match.
+                {t('setup.testInstruction', "Test it by joining a bot match. Visit the Live Preview page to confirm the overlay is showing. You should see the minimap blocker overlay once you're in a match.")}
+                <Link href="overlay">{t('setup.livePreview', 'Live Preview page')}</Link>
+                {t('setup.note', "Note: Dotabod will only work if your stream is online.")}
               </p>
-              <p>Note: Dotabod will only work if your stream is online.</p>
             </div>
           </div>
         </Card>
@@ -79,13 +79,13 @@ const SetupPage = () => {
   return status === 'authenticated' ? (
     <>
       <Head>
-        <title>Dotabod | Setup</title>
+        <title>{t('setup.title', 'Dotabod | Setup')}</title>
       </Head>
       <Header
         subtitle={
           <>
             <div>
-              Let&apos;s get Dotabod working for you right away{' '}
+              {t('setup.subtitle', "Let's get Dotabod working for you right away")}
               <Image
                 src="/images/emotes/peepoclap.webp"
                 width={30}
@@ -96,7 +96,7 @@ const SetupPage = () => {
             </div>
           </>
         }
-        title="Setup"
+        title={t('setup.title', 'Setup')}
       />
 
       <Steps current={active} onChange={setActive} items={steps} />
@@ -106,20 +106,20 @@ const SetupPage = () => {
       <div className="flex space-x-4 pb-10">
         {active > 0 && (
           <Button size="large" onClick={prevStep}>
-            Back
+            {t('setup.back', 'Back')}
           </Button>
         )}
 
         {active === steps.length - 1 && (
           <Link href="/dashboard/features">
             <Button size="large" type="primary">
-              View features
+              {t('setup.viewFeatures', 'View features')}
             </Button>
           </Link>
         )}
         {active < steps.length - 1 && (
           <Button size="large" type="primary" onClick={nextStep}>
-            Next step
+            {t('setup.nextStep', 'Next step')}
           </Button>
         )}
       </div>
diff --git a/src/pages/overlay/index.tsx b/src/pages/overlay/index.tsx
index 193f84f3..91567eb9 100644
--- a/src/pages/overlay/index.tsx
+++ b/src/pages/overlay/index.tsx
@@ -3,19 +3,21 @@ import Head from 'next/head'
 import Header from '@/components/Dashboard/Header'
 import DashboardShell from '@/components/Dashboard/DashboardShell'
 import { ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'; // Import useTranslation hook
 
 const TroubleshootPage = () => {
   const { status, data } = useSession()
+  const { t } = useTranslation(); // Initialize useTranslation hook
 
   return status === 'authenticated' ? (
     <>
       <Head>
-        <title>Dotabod | Troubleshooting</title>
+        <title>{t('troubleshoot.title')}</title> {/* Use t function for translation */}
       </Head>
 
       <Header
-        subtitle="Take a peak to see if your OBS is showing the correct overlay. Try joining a bot match to have this preview show the pick blocker, for example."
-        title="Live preview"
+        subtitle={t('troubleshoot.subtitle')} {/* Use t function for translation */}
+        title={t('troubleshoot.title')} {/* Use t function for translation */}
       />
       <div className="mt-12 origin-top-left lg:col-span-2 lg:mt-0 ">
         <iframe