feat: add ErrorBoundary page (#23)

Reviewed-on: #19
Reviewed-by: Primakov Alexandr Alexandrovich <primakovpro@gmail.com>

locales/ru.json

@@ -0,0 +1,35 @@
+{
+  "dry-wash.arm.master.add": "Добавить",
+  "dry-wash.arm.order.title": "Заказы",
+  "dry-wash.arm.order.status.progress": "Выполняется",
+  "dry-wash.arm.order.status.complete": "Завершено",
+  "dry-wash.arm.order.status.pending": "в ожидании",
+  "dry-wash.arm.order.status.working": "В работе",
+  "dry-wash.arm.order.status.canceled": "Отменено",
+  "dry-wash.arm.order.status.placeholder": "Выберите статус",
+  "dry-wash.arm.order.table.header.carNumber": "Номер машины",
+  "dry-wash.arm.order.table.header.washingTime": "Время мойки",
+  "dry-wash.arm.order.table.header.orderDate": "Дата заказа",
+  "dry-wash.arm.order.table.header.status": "Статус",
+  "dry-wash.arm.order.table.header.telephone": "Телефон",
+  "dry-wash.arm.order.table.header.location": "Расположение",
+  "dry-wash.arm.master.title": "Мастера",
+  "dry-wash.arm.master.table.header.name": "Имя",
+  "dry-wash.arm.master.table.header.currentJob": "Актуальная занятость",
+  "dry-wash.arm.master.table.header.phone": "Телефон",
+  "dry-wash.arm.master.table.header.actions": "Действия",
+  "dry-wash.arm.master.table.actionsMenu.delete": "Удалить мастера",
+  "dry-wash.arm.master.drawer.title": "Добавить нового мастера",
+  "dry-wash.arm.master.drawer.inputName.label": "ФИО",
+  "dry-wash.arm.master.drawer.inputName.placeholder": "Введите ФИО",
+  "dry-wash.arm.master.drawer.inputPhone.label": "Номер телефона",
+  "dry-wash.arm.master.drawer.inputPhone.placeholder": "Введите номер телефона",
+  "dry-wash.arm.master.drawer.button.save": "Сохранить",
+  "dry-wash.arm.master.drawer.button.cancel": "Отменить",
+  "dry-wash.arm.master.sideBar.title": " Сухой мастер",
+  "dry-wash.arm.master.sideBar.title.master": "Мастера",
+  "dry-wash.arm.master.sideBar.title.orders": "Заказы",
+  "dry-wash.errorBoundary.title":"Что-то пошло не так",
+  "dry-wash.errorBoundary.description": " Мы уже работаем над исправлением проблемы",
+  "dry-wash.errorBoundary.button.reload": "Перезагрузить страницу"
+}

package.json

@@ -17,7 +17,7 @@
     "author": "",
     "license": "ISC",
     "dependencies": {
-        "@brojs/cli": "^1.3.0",
+        "@brojs/cli": "^1.6.1",
         "@chakra-ui/icons": "^2.2.4",
         "@chakra-ui/react": "^2.4.2",
         "@emotion/react": "^11.4.1",
@@ -26,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-icons": "^5.3.0",

src/app.tsx

@@ -2,13 +2,16 @@ import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import Routers from './routes';
 import { ChakraProvider, theme as chakraTheme } from '@chakra-ui/react';
+import ErrorBoundary from './components/ErrorBoundary';
 
 const App = () => {
   return (
     <ChakraProvider theme={chakraTheme}>
-      <BrowserRouter>
-        <Routers></Routers>
-      </BrowserRouter>
+      <ErrorBoundary>
+        <BrowserRouter>
+          <Routers />
+        </BrowserRouter>
+      </ErrorBoundary>
     </ChakraProvider>
   );
 };

src/assets/videos/index.ts

@@ -1 +0,0 @@
-export { default as DemoVideo } from './demo.mp4';

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,64 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Heading, Text, Button, Center, VStack } from '@chakra-ui/react';
+import i18next from 'i18next';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(): Partial<ErrorBoundaryState> {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error('Error caught by ErrorBoundary:', error, errorInfo);
+    this.setState({ error, errorInfo });
+  }
+
+  render() {
+    const { hasError } = this.state;
+    //TODO: добавить анимацию после залива 404 страницы
+    if (hasError) {
+      return (
+        <Center minH='100vh'>
+          <VStack spacing={4} textAlign='center'>
+            <Heading as='h1' size='2xl'>
+              {i18next.t('dry-wash.errorBoundary.title')}
+            </Heading>
+            <Text fontSize='lg'>
+              {i18next.t('dry-wash.errorBoundary.description')}
+            </Text>
+            <Button
+              colorScheme='teal'
+              size='lg'
+              variant='outline'
+              onClick={() => window.location.reload()}
+            >
+              {i18next.t('dry-wash.errorBoundary.button.reload')}
+            </Button>
+          </VStack>
+        </Center>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/components/ErrorBoundary/index.ts

@@ -0,0 +1 @@
+export { default } from './ErrorBoundary';

src/components/MasterActionsMenu/MasterActionsMenu.tsx

@@ -7,15 +7,16 @@ import {
   IconButton,
 } from '@chakra-ui/react';
 import { EditIcon } from '@chakra-ui/icons';
+import i18next from 'i18next';
 
 const MasterActionsMenu = () => {
   return (
     <Menu>
       <MenuButton icon={<EditIcon />} as={IconButton} variant='outline' />
       <MenuList>
-        <MenuItem>Посмотреть профиль</MenuItem>
-        <MenuItem>Изменить расписание</MenuItem>
-        <MenuItem>Удалить мастера</MenuItem>
+        <MenuItem>
+          {i18next.t('dry-wash.arm.master.table.actionsMenu.delete')}
+        </MenuItem>
       </MenuList>
     </Menu>
   );

src/components/MasterDrawer/MasterDrawer.tsx

@@ -12,6 +12,7 @@ import {
   DrawerHeader,
   DrawerOverlay,
 } from '@chakra-ui/react';
+import i18next from 'i18next';
 
 const MasterDrawer = ({ isOpen, onClose }) => {
   const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
@@ -26,35 +27,46 @@ const MasterDrawer = ({ isOpen, onClose }) => {
       <DrawerOverlay />
       <DrawerContent>
         <DrawerCloseButton />
-        <DrawerHeader>Добавить нового мастера</DrawerHeader>
+        <DrawerHeader>
+          {i18next.t('dry-wash.arm.master.drawer.title')}
+        </DrawerHeader>
         <DrawerBody>
           <FormControl mb='4'>
-            <FormLabel>ФИО</FormLabel>
+            <FormLabel>
+              {i18next.t('dry-wash.arm.master.drawer.inputName.label')}
+            </FormLabel>
             <Input
               value={newMaster.name}
               onChange={(e) =>
                 setNewMaster({ ...newMaster, name: e.target.value })
               }
-              placeholder='Введите ФИО'
+              placeholder={i18next.t(
+                'dry-wash.arm.master.drawer.inputName.placeholder',
+              )}
             />
           </FormControl>
           <FormControl>
-            <FormLabel>Номер телефона</FormLabel>
+            <FormLabel>
+              {' '}
+              {i18next.t('dry-wash.arm.master.drawer.inputPhone.label')}
+            </FormLabel>
             <Input
               value={newMaster.phone}
               onChange={(e) =>
                 setNewMaster({ ...newMaster, phone: e.target.value })
               }
-              placeholder='Введите номер телефона'
+              placeholder={i18next.t(
+                'dry-wash.arm.master.drawer.inputPhone.placeholder',
+              )}
             />
           </FormControl>
         </DrawerBody>
         <DrawerFooter>
           <Button colorScheme='teal' mr={3} onClick={handleSave}>
-            Сохранить
+            {i18next.t('dry-wash.arm.master.drawer.button.save')}
           </Button>
           <Button variant='ghost' onClick={onClose}>
-            Отменить
+            {i18next.t('dry-wash.arm.master.drawer.button.cancel')}
           </Button>
         </DrawerFooter>
       </DrawerContent>

src/components/Masters/Masters.tsx

@@ -13,9 +13,10 @@ import {
 } from '@chakra-ui/react';
 import { mastersData } from '../../mocks';
 import MasterItem from '../MasterItem';
-import MasterDrawer from '../MasterModal';
+import MasterDrawer from '../MasterDrawer';
+import i18next from 'i18next';
 
-const TABLE_HEADERS = ['Имя', 'Актуальная занятость', 'Телефон', 'Действия'];
+const TABLE_HEADERS = ['name', 'currentJob', 'phone', 'actions'];
 
 const Masters = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -23,16 +24,18 @@ const Masters = () => {
   return (
     <Box p='8'>
       <Flex justifyContent='space-between' alignItems='center' mb='5'>
-        <Heading size='lg'>Мастера</Heading>
+        <Heading size='lg'> {i18next.t('dry-wash.arm.master.title')}</Heading>
         <Button colorScheme='green' onClick={onOpen}>
-          + Добавить
+          + {i18next.t('dry-wash.arm.master.add')}
         </Button>
       </Flex>
       <Table variant='simple' colorScheme='blackAlpha'>
         <Thead>
           <Tr>
             {TABLE_HEADERS.map((name) => (
-              <Th key={name}>{name}</Th>
+              <Th key={name}>
+                {i18next.t(`dry-wash.arm.master.table.header.${name}`)}
+              </Th>
             ))}
           </Tr>
         </Thead>

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,
@@ -20,13 +23,13 @@ const OrderItem = ({
         <Select
           value={statusSelect}
           onChange={(e) => setStatus(e.target.value)}
-          placeholder='Выберите статус'
+          placeholder={i18next.t(`dry-wash.arm.order.status.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.arm.order.status.${status}`)}
+            </option>
+          ))}
         </Select>
       </Td>
       <Td>

src/components/Orders/Orders.tsx

@@ -2,26 +2,28 @@ import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
 import React from 'react';
 import { ordersData } from '../../mocks';
 import OrderItem from '../OrderItem';
-
+import i18next from 'i18next';
 const Orders = () => {
   const TABLE_HEADERS = [
-    'Номер машины',
-    'Время мойки',
-    'Дата заказа',
-    'Статус',
-    'Телефон',
-    'Расположение',
+    'carNumber',
+    'washingTime',
+    'orderDate',
+    'status',
+    'telephone',
+    'location',
   ];
   return (
     <Box p='8'>
       <Heading size='lg' mb='5'>
-        Заказы
+        {i18next.t('dry-wash.arm.order.title')}
       </Heading>
       <Table variant='simple' colorScheme='blackAlpha'>
         <Thead>
           <Tr>
             {TABLE_HEADERS.map((name, key) => (
-              <Th key={key}>{name}</Th>
+              <Th key={key}>
+                {i18next.t(`dry-wash.arm.order.table.header.${name}`)}
+              </Th>
             ))}
           </Tr>
         </Thead>

src/components/Sidebar/Sidebar.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Heading, VStack } from '@chakra-ui/react';
 import React from 'react';
 import { Divider } from '@chakra-ui/react';
-
+import i18next from 'i18next';
 const Sidebar = ({ onSelectPage }) => (
   <Box
     borderRight='1px solid black'
@@ -12,7 +12,7 @@ const Sidebar = ({ onSelectPage }) => (
     pt='8'
   >
     <Heading color='green' size='lg' mb='5'>
-      Сухой мастер
+      {i18next.t(`dry-wash.arm.master.sideBar.title`)}
     </Heading>
 
     <VStack align='start' spacing='4'>
@@ -23,7 +23,7 @@ const Sidebar = ({ onSelectPage }) => (
         colorScheme='green'
         variant='ghost'
       >
-        Заказы
+        {i18next.t(`dry-wash.arm.master.sideBar.title.orders`)}
       </Button>
       <Divider />
       <Button
@@ -32,7 +32,7 @@ const Sidebar = ({ onSelectPage }) => (
         colorScheme='green'
         variant='ghost'
       >
-        Мастера
+        {i18next.t(`dry-wash.arm.master.sideBar.title.master`)}
       </Button>
       <Divider />
     </VStack>

src/components/landing/HeroSection/HeroSection.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import { Box, Heading, Text, Center, VStack, BoxProps } from '@chakra-ui/react';
-import { DemoVideo } from '../../../assets/videos';
 import { DemoVideoPosterImg } from '../../../assets/images';
 import { CtaButton, SiteLogo, PageSection } from '../';
 
@@ -11,7 +10,7 @@ export const HeroSection: FC<HeroSectionProps> = ({ flexShrink }) => {
     <Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
       <Box
         as='video'
-        src={DemoVideo}
+        src={`${__webpack_public_path__}/remote-assets/demo.mp4`}
         poster={DemoVideoPosterImg}
         autoPlay
         loop

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/cli';
 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 />);
     });
   }

types.d.ts

@@ -16,7 +16,4 @@ declare module "*.webp" {
   export = value;
 }
 
-declare module '*.mp4' {
-  const src: string;
-  export default src;
-}
+declare const __webpack_public_path__: string;