From 9eefe8133ca144b49bdc89a1b5e8a4e875d558a8 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Sat, 27 Aug 2022 10:31:20 -0600
Subject: [PATCH] Add appbar translations

---
 web/public/locales/en/translation.json | 11 ++++++++++-
 web/src/AppBar.jsx                     | 22 ++++++++++++----------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
index e4bcab4e8..52b932197 100644
--- a/web/public/locales/en/translation.json
+++ b/web/public/locales/en/translation.json
@@ -1,9 +1,18 @@
 {
+    "are_you_sure": "Are you sure?",
+    "auto_dark_mode": "Auto Dark Mode",
     "birdseye": "Birdseye",
     "cameras": "Cameras",
+    "cancel": "Cancel",
+    "dark": "Dark",
     "debug": "Debug",
     "documentation": "Documentation",
     "events": "Events",
     "github": "GitHub",
-    "style_guide": "Style Guide"
+    "light": "Light",
+    "restart_frigate": "Restart Frigate",
+    "restart_in_progress": "Restart in progress",
+    "style_guide": "Style Guide",
+    "wait_for_restart": "Please wait a few seconds for the restart to complete before reloading the page.",
+    "yes": "Yes"
 }
\ No newline at end of file
diff --git a/web/src/AppBar.jsx b/web/src/AppBar.jsx
index 09fc2e9d8..80bc00756 100644
--- a/web/src/AppBar.jsx
+++ b/web/src/AppBar.jsx
@@ -10,8 +10,10 @@ import Prompt from './components/Prompt';
 import { useDarkMode } from './context';
 import { useCallback, useRef, useState } from 'preact/hooks';
 import { useRestart } from './api/mqtt';
+import { useTranslation } from 'react-i18next';
 
 export default function AppBar() {
+  const { t } = useTranslation();
   const [showMoreMenu, setShowMoreMenu] = useState(false);
   const [showDialog, setShowDialog] = useState(false);
   const [showDialogWait, setShowDialogWait] = useState(false);
@@ -56,29 +58,29 @@ export default function AppBar() {
       <BaseAppBar title={LinkedLogo} overflowRef={moreRef} onOverflowClick={handleShowMenu} />
       {showMoreMenu ? (
         <Menu onDismiss={handleDismissMoreMenu} relativeTo={moreRef}>
-          <MenuItem icon={AutoAwesomeIcon} label="Auto dark mode" value="media" onSelect={handleSelectDarkMode} />
+          <MenuItem icon={AutoAwesomeIcon} label={t('auto_dark_mode')} value="media" onSelect={handleSelectDarkMode} />
           <MenuSeparator />
-          <MenuItem icon={LightModeIcon} label="Light" value="light" onSelect={handleSelectDarkMode} />
-          <MenuItem icon={DarkModeIcon} label="Dark" value="dark" onSelect={handleSelectDarkMode} />
+          <MenuItem icon={LightModeIcon} label={t('light')} value="light" onSelect={handleSelectDarkMode} />
+          <MenuItem icon={DarkModeIcon} label={t('dark')} value="dark" onSelect={handleSelectDarkMode} />
           <MenuSeparator />
-          <MenuItem icon={FrigateRestartIcon} label="Restart Frigate" onSelect={handleRestart} />
+          <MenuItem icon={FrigateRestartIcon} label={t('restart_frigate')} onSelect={handleRestart} />
         </Menu>
       ) : null}
       {showDialog ? (
         <Prompt
           onDismiss={handleDismissRestartDialog}
-          title="Restart Frigate"
-          text="Are you sure?"
+          title={t('restart_frigate')}
+          text={t('are_you_sure')}
           actions={[
-            { text: 'Yes', color: 'red', onClick: handleClickRestartDialog },
-            { text: 'Cancel', onClick: handleDismissRestartDialog },
+            { text: `${t('yes')}`, color: 'red', onClick: handleClickRestartDialog },
+            { text: `${t('cancel')}`, onClick: handleDismissRestartDialog },
           ]}
         />
       ) : null}
       {showDialogWait ? (
         <Prompt
-          title="Restart in progress"
-          text="Please wait a few seconds for the restart to complete before reloading the page."
+          title={t('restart_in_progress')}
+          text={t('wait_for_restart')}
         />
       ) : null}
     </Fragment>