From 900827be97845688e4bea72a8c5d9611a3e9d069 Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Tue, 15 Dec 2020 08:08:01 +0000
Subject: [PATCH] feat(lang): add i18n strings for new about page

---
 .../Settings/SettingsAbout/index.tsx          | 29 ++++++++++++++-----
 src/i18n/locale/en.json                       |  7 +++++
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/Settings/SettingsAbout/index.tsx b/src/components/Settings/SettingsAbout/index.tsx
index b11d64ad..7925e193 100644
--- a/src/components/Settings/SettingsAbout/index.tsx
+++ b/src/components/Settings/SettingsAbout/index.tsx
@@ -4,9 +4,20 @@ import Error from '../../../pages/_error';
 import List from '../../Common/List';
 import LoadingSpinner from '../../Common/LoadingSpinner';
 import { SettingsAboutResponse } from '../../../../server/interfaces/api/settingsInterfaces';
-import { FormattedNumber } from 'react-intl';
+import { defineMessages, FormattedNumber, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  overseerrinformation: 'Overseerr Information',
+  version: 'Version',
+  totalmedia: 'Total Media',
+  totalrequests: 'Total Requests',
+  gettingsupport: 'Getting Support',
+  githubdiscussions: 'GitHub Discussions',
+  clickheretojoindiscord: 'Click here to join our Discord server.',
+});
 
 const SettingsAbout: React.FC = () => {
+  const intl = useIntl();
   const { data, error } = useSWR<SettingsAboutResponse>(
     '/api/v1/settings/about'
   );
@@ -26,19 +37,21 @@ const SettingsAbout: React.FC = () => {
   return (
     <>
       <div className="mb-8">
-        <List title="Overseerr Information">
-          <List.Item title="Version">{data.version}</List.Item>
-          <List.Item title="Total Media">
+        <List title={intl.formatMessage(messages.overseerrinformation)}>
+          <List.Item title={intl.formatMessage(messages.version)}>
+            {data.version}
+          </List.Item>
+          <List.Item title={intl.formatMessage(messages.totalmedia)}>
             <FormattedNumber value={data.totalMediaItems} />
           </List.Item>
-          <List.Item title="Total Requests">
+          <List.Item title={intl.formatMessage(messages.totalrequests)}>
             <FormattedNumber value={data.totalRequests} />
           </List.Item>
         </List>
       </div>
       <div className="mb-8">
-        <List title="Getting Support">
-          <List.Item title="GitHub Discussions">
+        <List title={intl.formatMessage(messages.gettingsupport)}>
+          <List.Item title={intl.formatMessage(messages.githubdiscussions)}>
             <a
               href="https://github.com/sct/overseerr/discussions"
               target="_blank"
@@ -55,7 +68,7 @@ const SettingsAbout: React.FC = () => {
               rel="noreferrer"
               className="text-indigo-500 hover:underline"
             >
-              Click here to join our Discord server.
+              {intl.formatMessage(messages.clickheretojoindiscord)}
             </a>
           </List.Item>
         </List>
diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json
index af814e4b..f598cae4 100644
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -139,6 +139,13 @@
   "components.Settings.RadarrModal.validationPortRequired": "You must provide a port",
   "components.Settings.RadarrModal.validationProfileRequired": "You must select a profile",
   "components.Settings.RadarrModal.validationRootFolderRequired": "You must select a root folder",
+  "components.Settings.SettingsAbout.clickheretojoindiscord": "Click here to join our Discord server.",
+  "components.Settings.SettingsAbout.gettingsupport": "Getting Support",
+  "components.Settings.SettingsAbout.githubdiscussions": "GitHub Discussions",
+  "components.Settings.SettingsAbout.overseerrinformation": "Overseerr Information",
+  "components.Settings.SettingsAbout.totalmedia": "Total Media",
+  "components.Settings.SettingsAbout.totalrequests": "Total Requests",
+  "components.Settings.SettingsAbout.version": "Version",
   "components.Settings.SonarrModal.add": "Add Server",
   "components.Settings.SonarrModal.apiKey": "API Key",
   "components.Settings.SonarrModal.apiKeyPlaceholder": "Your Sonarr API Key",