Merge remote-tracking branch 'origin/main' into feat/landing

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/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/Sidebar/Sidebar.tsx

@@ -2,7 +2,9 @@ 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 }) => (
+import { Link } from 'react-router-dom';
+
+const Sidebar = () => (
   <Box
     borderRight='1px solid black'
     bg='gray.50'
@@ -18,7 +20,8 @@ const Sidebar = ({ onSelectPage }) => (
     <VStack align='start' spacing='4'>
       <Divider />
       <Button
-        onClick={() => onSelectPage('orders')}
+        as={Link}
+        to='orders'
         w='100%'
         colorScheme='green'
         variant='ghost'
@@ -27,7 +30,8 @@ const Sidebar = ({ onSelectPage }) => (
       </Button>
       <Divider />
       <Button
-        onClick={() => onSelectPage('masters')}
+        as={Link}
+        to='masters'
         w='100%'
         colorScheme='green'
         variant='ghost'