feat: add router to the arm page (#14)

Reviewed-on: #16
Reviewed-by: Rustam <kagapov.rustam@yandex.ru>
Reviewed-by: Primakov Alexandr Alexandrovich <primakovpro@gmail.com>

locales/ru.json

@@ -0,0 +1,5 @@
+{
+  "dry-wash.arm.masters.add": "Добавить",
+  "dry-wash.order.status.progress": "Выполняется",
+  "dry-wash.order.status.complete": "Завершено"
+}

package-lock.json

@@ -10,6 +10,7 @@
             "license": "ISC",
             "dependencies": {
                 "@brojs/cli": "^1.3.0",
+                "@brojs/i18nextreactconfig": "^1.3.3",
                 "@chakra-ui/icons": "^2.2.4",
                 "@chakra-ui/react": "^2.4.2",
                 "@emotion/react": "^11.4.1",
@@ -17,6 +18,7 @@
                 "@types/react": "^18.3.12",
                 "express": "^4.21.1",
                 "framer-motion": "^6.2.8",
+                "i18next": "^23.16.4",
                 "react": "^18.3.1",
                 "react-dom": "^18.3.1",
                 "react-router-dom": "^6.27.0"
@@ -1665,6 +1667,14 @@
             "resolved": "https://git.bro-js.ru/api/packages/bro-js/npm/%40brojs%2Ffire.app/-/1.3.0/fire.app-1.3.0.tgz",
             "integrity": "sha512-4jt/o944FttMUDU5fnGknaa8alz/0FaFATtgc5lVcsJ1Us4TKamHXtx4aj1hw6Pe89aBu61KLy8aCwNE24O0Mg=="
         },
+        "node_modules/@brojs/i18nextreactconfig": {
+            "version": "1.3.3",
+            "resolved": "https://git.bro-js.ru/api/packages/bro-js/npm/%40brojs%2Fi18nextreactconfig/-/1.3.3/i18nextreactconfig-1.3.3.tgz",
+            "integrity": "sha512-zdSjXTyXUXFjVYl/yHtHYfZBW3Tkawg9d5JbKdKwJOzDBvIA8b1P6yEAzNIwP/LBn4D/bFI2EuQzw1XIJYXjZQ==",
+            "dependencies": {
+                "i18next-xhr-backend": "^3.2.2"
+            }
+        },
         "node_modules/@brojs/templates": {
             "version": "1.3.0",
             "resolved": "https://git.bro-js.ru/api/packages/bro-js/npm/%40brojs%2Ftemplates/-/1.3.0/templates-1.3.0.tgz",
@@ -7003,9 +7013,9 @@
             }
         },
         "node_modules/i18next": {
-            "version": "23.16.0",
-            "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.0.tgz",
-            "integrity": "sha512-Ni3CG6c14teOogY19YNRl+kYaE/Rb59khy0VyHVn4uOZ97E2E/Yziyi6r3C3s9+wacjdLZiq/LLYyx+Cgd+FCw==",
+            "version": "23.16.4",
+            "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.4.tgz",
+            "integrity": "sha512-9NIYBVy9cs4wIqzurf7nLXPyf3R78xYbxExVqHLK9od3038rjpyOEzW+XB130kZ1N4PZ9inTtJ471CRJ4Ituyg==",
             "funding": [
                 {
                     "type": "individual",
@@ -7020,7 +7030,6 @@
                     "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
                 }
             ],
-            "peer": true,
             "dependencies": {
                 "@babel/runtime": "^7.23.2"
             }
@@ -7041,6 +7050,15 @@
                 "cross-fetch": "4.0.0"
             }
         },
+        "node_modules/i18next-xhr-backend": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/i18next-xhr-backend/-/i18next-xhr-backend-3.2.2.tgz",
+            "integrity": "sha512-OtRf2Vo3IqAxsttQbpjYnmMML12IMB5e0fc5B7qKJFLScitYaXa1OhMX0n0X/3vrfFlpHL9Ro/H+ps4Ej2j7QQ==",
+            "deprecated": "replaced by i18next-http-backend",
+            "dependencies": {
+                "@babel/runtime": "^7.5.5"
+            }
+        },
         "node_modules/iconv-lite": {
             "version": "0.4.24",
             "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",

package.json

@@ -18,6 +18,7 @@
     "license": "ISC",
     "dependencies": {
         "@brojs/cli": "^1.3.0",
+        "@brojs/i18nextreactconfig": "^1.3.3",
         "@chakra-ui/icons": "^2.2.4",
         "@chakra-ui/react": "^2.4.2",
         "@emotion/react": "^11.4.1",
@@ -25,6 +26,7 @@
         "@types/react": "^18.3.12",
         "express": "^4.21.1",
         "framer-motion": "^6.2.8",
+        "i18next": "^23.16.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.27.0"

src/components/LayoutArm/LayoutArm.tsx

@@ -3,13 +3,19 @@ import Sidebar from '../Sidebar';
 import Orders from '../Orders';
 import Masters from '../Masters';
 import React from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
 
-const LayoutArm = ({ currentPage, onSelectPage }) => (
+const LayoutArm = () => (
   <Flex h='100vh'>
-    <Sidebar onSelectPage={onSelectPage} />
+    <Sidebar />
     <Box flex='1' bg='gray.50'>
-      {currentPage === 'orders' && <Orders />}
-      {currentPage === 'masters' && <Masters />}
+      <Routes>
+        <Route>
+          <Route index element={<Navigate to='orders' replace />} />
+          <Route path='orders' element={<Orders />} />
+          <Route path='masters' element={<Masters />} />
+        </Route>
+      </Routes>
     </Box>
   </Flex>
 );

src/components/Masters/Masters.tsx

@@ -14,6 +14,7 @@ import {
 import { mastersData } from '../../mocks';
 import MasterItem from '../MasterItem';
 import MasterDrawer from '../MasterModal';
+import i18next from 'i18next';
 
 const TABLE_HEADERS = ['Имя', 'Актуальная занятость', 'Телефон', 'Действия'];
 
@@ -25,7 +26,7 @@ const Masters = () => {
       <Flex justifyContent='space-between' alignItems='center' mb='5'>
         <Heading size='lg'>Мастера</Heading>
         <Button colorScheme='green' onClick={onOpen}>
-          + Добавить
+          + {i18next.t('dry-wash.arm.masters.add')}
         </Button>
       </Flex>
       <Table variant='simple' colorScheme='blackAlpha'>

src/components/OrderItem/OrderItem.tsx

@@ -1,5 +1,8 @@
 import React, { useState } from 'react';
 import { Td, Tr, Link, Select } from '@chakra-ui/react';
+import i18next from 'i18next';
+
+const statuses = ['pending', 'progress', 'working', 'canceled', 'complete'];
 
 const OrderItem = ({
   carNumber,
@@ -22,11 +25,11 @@ const OrderItem = ({
           onChange={(e) => setStatus(e.target.value)}
           placeholder='Выберите статус'
         >
-          <option value='в ожидании'>в ожидании</option>
-          <option value='В процессе'>в процессе</option>
-          <option value='в работе'>в работе</option>
-          <option value='отменил'>отменил</option>
-          <option value='Завершено'>Завершено</option>
+          {statuses.map((status) => (
+            <option key={status} value={status}>
+              {i18next.t(`dry-wash.order.status.${status}`)}
+            </option>
+          ))}
         </Select>
       </Td>
       <Td>

src/components/Sidebar/Sidebar.tsx

@@ -1,8 +1,8 @@
 import { Box, Button, Heading, VStack } from '@chakra-ui/react';
 import React from 'react';
 import { Divider } from '@chakra-ui/react';
-
-const Sidebar = ({ onSelectPage }) => (
+import { Link } from 'react-router-dom';
+const Sidebar = () => (
   <Box
     borderRight='1px solid black'
     bg='gray.50'
@@ -17,23 +17,17 @@ const Sidebar = ({ onSelectPage }) => (
 
     <VStack align='start' spacing='4'>
       <Divider />
-      <Button
-        onClick={() => onSelectPage('orders')}
-        w='100%'
-        colorScheme='green'
-        variant='ghost'
-      >
-        Заказы
-      </Button>
+      <Link to='orders'>
+        <Button w='100%' colorScheme='green' variant='ghost'>
+          Заказы
+        </Button>
+      </Link>
       <Divider />
-      <Button
-        onClick={() => onSelectPage('masters')}
-        w='100%'
-        colorScheme='green'
-        variant='ghost'
-      >
-        Мастера
-      </Button>
+      <Link to='masters'>
+        <Button w='100%' colorScheme='green' variant='ghost'>
+          Мастера
+        </Button>
+      </Link>
       <Divider />
     </VStack>
   </Box>

src/index.tsx

@@ -1,19 +1,26 @@
- 
 /* eslint-disable react/display-name */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-
+import { i18nextReactInitConfig } from '@brojs/i18nextreactconfig';
 import App from './app';
+import i18next from 'i18next';
 
+i18next.t = i18next.t.bind(i18next);
+const i18nextPromise = i18nextReactInitConfig(i18next);
 export default () => <App />;
 
 let rootElement: ReactDOM.Root;
 
-export const mount = (Component, element = document.getElementById('app')) => {
+export const mount = async (
+  Component,
+  element = document.getElementById('app'),
+) => {
   const rootElement = ReactDOM.createRoot(element);
+  await i18nextPromise;
   rootElement.render(<Component />);
   if (module.hot) {
-    module.hot.accept('./app', () => {
+    module.hot.accept('./app', async () => {
+      await i18next.reloadResources();
       rootElement.render(<Component />);
     });
   }

src/pages/arm/index.tsx

@@ -2,9 +2,7 @@ import React, { useState } from 'react';
 import LayoutArm from '../../components/LayoutArm';
 
 const Page = () => {
-  const [currentPage, setCurrentPage] = useState('orders');
-
-  return <LayoutArm currentPage={currentPage} onSelectPage={setCurrentPage} />;
+  return <LayoutArm />;
 };
 
 export default Page;

src/routes.tsx

@@ -9,7 +9,7 @@ const Routers = () => {
     <Routes>
       <Route path='/dry-wash' element={<Landing />}></Route>
       <Route path='/dry-wash/order' element={<Order />}></Route>
-      <Route path='/dry-wash/arm' element={<Arm />}></Route>
+      <Route path='/dry-wash/arm/*' element={<Arm />}></Route>
     </Routes>
   );
 };