Merge pull request #4 from willianrod/feat/internationalization

add i18next localization
willianrod · Mar 9, 2022 · 4e95b6f · 4e95b6f
2 parents 75eb04f + 8cb7e93
commit 4e95b6f
Show file tree

Hide file tree

Showing 30 changed files with 433 additions and 176 deletions.
diff --git a/package.json b/package.json
@@ -228,11 +228,14 @@
     "electron-updater": "^4.6.4",
     "framer-motion": "^5.6.0",
     "history": "^5.2.0",
+    "i18next": "^21.6.13",
+    "i18next-browser-languagedetector": "^6.1.3",
     "react": "^17.0.2",
     "react-dnd": "^14.0.5",
     "react-dnd-html5-backend": "^14.1.0",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.24.2",
+    "react-i18next": "^11.15.5",
     "react-icons": "^4.3.1",
     "react-input-mask": "^2.0.4",
     "react-qr-code": "^2.0.3",

diff --git a/release/app/package.json b/release/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "odeck",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A free and open-source alternative to StreamDeck",
   "main": "./dist/main/main.js",
   "author": {
@@ -18,7 +18,6 @@
     "cors": "^2.8.5",
     "express": "^4.17.2",
     "node-abi": "^3.8.0",
-    "node-key-sender": "^1.0.11",
     "open": "^8.4.0",
     "play-sound": "^1.1.5",
     "robotjs": "^0.6.0",

diff --git a/release/app/yarn.lock b/release/app/yarn.lock
@@ -532,11 +532,6 @@ node-abi@^3.8.0:
   dependencies:
     semver "^7.3.5"
 
-node-key-sender@^1.0.11:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/node-key-sender/-/node-key-sender-1.0.11.tgz#93210f07163607d8daf2874f1a29567d0acdb94c"
-  integrity sha512-vv2IXd8QdZBFYXaIy02uy2rK6EKj+tOTEuoTxJKS9l8zw8Cz6DeLffR8ompj7N2A3h6XK7aiy+YAcTaeOqwp2Q==
-
 noop-logger@^0.1.1:
   version "0.1.1"
   resolved "https://registry.npmjs.org/noop-logger/-/noop-logger-0.1.1.tgz"

diff --git a/src/main/menu.ts b/src/main/menu.ts
@@ -5,6 +5,7 @@ import {
   BrowserWindow,
   MenuItemConstructorOptions,
 } from 'electron';
+import i18n from '../renderer/i18n';
 
 interface DarwinMenuItemConstructorOptions extends MenuItemConstructorOptions {
   selector?: string;
@@ -84,6 +85,7 @@ export default class MenuBuilder {
         },
       ],
     };
+
     const subMenuEdit: DarwinMenuItemConstructorOptions = {
       label: 'Edit',
       submenu: [
@@ -195,90 +197,24 @@ export default class MenuBuilder {
   buildDefaultTemplate() {
     const templateDefault = [
       {
-        label: '&File',
-        submenu: [
-          {
-            label: '&Open',
-            accelerator: 'Ctrl+O',
-          },
-          {
-            label: '&Close',
-            accelerator: 'Ctrl+W',
-            click: () => {
-              this.mainWindow.close();
-            },
-          },
-        ],
-      },
-      {
-        label: '&View',
-        submenu:
-          process.env.NODE_ENV === 'development' ||
-          process.env.DEBUG_PROD === 'true'
-            ? [
-                {
-                  label: '&Reload',
-                  accelerator: 'Ctrl+R',
-                  click: () => {
-                    this.mainWindow.webContents.reload();
-                  },
-                },
-                {
-                  label: 'Toggle &Full Screen',
-                  accelerator: 'F11',
-                  click: () => {
-                    this.mainWindow.setFullScreen(
-                      !this.mainWindow.isFullScreen()
-                    );
-                  },
-                },
-                {
-                  label: 'Toggle &Developer Tools',
-                  accelerator: 'Alt+Ctrl+I',
-                  click: () => {
-                    this.mainWindow.webContents.toggleDevTools();
-                  },
-                },
-              ]
-            : [
-                {
-                  label: 'Toggle &Full Screen aa',
-                  accelerator: 'F11',
-                  click: () => {
-                    this.mainWindow.setFullScreen(
-                      !this.mainWindow.isFullScreen()
-                    );
-                  },
-                },
-              ],
-      },
-      {
-        label: 'Help',
+        label: i18n.t('help'),
         submenu: [
           {
-            label: 'Learn More',
-            click() {
-              shell.openExternal('https://electronjs.org');
-            },
-          },
-          {
-            label: 'Documentation',
+            label: i18n.t('documentation'),
             click() {
-              shell.openExternal(
-                'https://github.com/electron/electron/tree/main/docs#readme'
-              );
+              shell.openExternal('https://github.com/willianrod/ODeck#readme');
             },
           },
           {
-            label: 'Community Discussions',
+            label: i18n.t('community_discussions'),
             click() {
               shell.openExternal('https://www.electronjs.org/community');
             },
           },
           {
-            label: 'Search Issues',
+            label: i18n.t('report_bug'),
             click() {
-              shell.openExternal('https://github.com/electron/electron/issues');
+              shell.openExternal('https://github.com/willianrod/ODeck/issues');
             },
           },
         ],

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -3,28 +3,32 @@ import { ChakraProvider } from '@chakra-ui/react';
 import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { I18nextProvider } from 'react-i18next';
 import SocketProvider from './context/socket.context';
 import './App.css';
 import Home from './pages/home';
 import theme from './theme';
 import Start from './pages/start';
 import store from './redux/store';
+import i18n from './i18n';
 
 export default function App() {
   return (
-    <ReduxProvider store={store}>
-      <ChakraProvider resetCSS theme={theme}>
-        <DndProvider backend={HTML5Backend}>
-          <SocketProvider>
-            <Router>
-              <Routes>
-                <Route path="/" element={<Start />} />
-                <Route path="/dashboard" element={<Home />} />
-              </Routes>
-            </Router>
-          </SocketProvider>
-        </DndProvider>
-      </ChakraProvider>
-    </ReduxProvider>
+    <I18nextProvider i18n={i18n}>
+      <ReduxProvider store={store}>
+        <ChakraProvider resetCSS theme={theme}>
+          <DndProvider backend={HTML5Backend}>
+            <SocketProvider>
+              <Router>
+                <Routes>
+                  <Route path="/" element={<Start />} />
+                  <Route path="/dashboard" element={<Home />} />
+                </Routes>
+              </Router>
+            </SocketProvider>
+          </DndProvider>
+        </ChakraProvider>
+      </ReduxProvider>
+    </I18nextProvider>
   );
 }
diff --git a/src/renderer/components/CreatePageButton/index.tsx b/src/renderer/components/CreatePageButton/index.tsx
@@ -10,6 +10,7 @@ import {
   ModalFooter,
   useDisclosure,
 } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
 import { useCallback, memo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useForm } from 'react-hook-form';
@@ -20,6 +21,7 @@ import TextInput from '../Form/TextInput';
 
 const CreatePageButton = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const { t } = useTranslation('create-page-button');
 
   const dispatch = useDispatch();
 
@@ -39,34 +41,34 @@ const CreatePageButton = () => {
   return (
     <>
       <Button leftIcon={<Icon as={MdAdd} />} size="sm" onClick={onOpen}>
-        Create Device
+        {t('create_device')}
       </Button>
 
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader>Create a new device</ModalHeader>
+          <ModalHeader>{t('create_new_device')}</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
             <Form form={form} onSubmit={handleCreateDevice}>
               <TextInput
                 name="name"
-                label="Name"
+                label={t('label.name')}
                 defaultValue=""
                 maxLength={100}
                 size="md"
               />
               <TextInput
                 type="number"
                 name="amountVertical"
-                label="Amount of keys vertically"
+                label={t('label.amount_vertically')}
                 defaultValue="4"
                 size="md"
               />
               <TextInput
                 type="number"
                 name="amountHorizontal"
-                label="Amount of keys horizontally"
+                label={t('label.amount_horizontally')}
                 defaultValue="8"
                 size="md"
               />
@@ -75,13 +77,13 @@ const CreatePageButton = () => {
 
           <ModalFooter>
             <Button mr={3} onClick={onClose} variant="outline">
-              Cancel
+              {t('cancel')}
             </Button>
             <Button
               variant="solid"
               onClick={form.handleSubmit(handleCreateDevice)}
             >
-              Create
+              {t('create')}
             </Button>
           </ModalFooter>
         </ModalContent>