From 116e883e91460958f5f8458a91639ba418da8426 Mon Sep 17 00:00:00 2001
From: ilnaz <237x237@gmail.com>
Date: Sat, 9 Nov 2024 19:34:12 +0300
Subject: [PATCH] feat: add router to the arm page (#14)

---
 src/components/LayoutArm/LayoutArm.tsx | 14 ++++++++----
 src/components/Sidebar/Sidebar.tsx     | 30 +++++++++++---------------
 src/pages/arm/index.tsx                |  4 +---
 src/routes.tsx                         |  2 +-
 4 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/components/LayoutArm/LayoutArm.tsx b/src/components/LayoutArm/LayoutArm.tsx
index db48c23..da99da0 100644
--- a/src/components/LayoutArm/LayoutArm.tsx
+++ b/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>
 );
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index a88e350..38d9b38 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/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>
diff --git a/src/pages/arm/index.tsx b/src/pages/arm/index.tsx
index fda55d0..02d21c4 100644
--- a/src/pages/arm/index.tsx
+++ b/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;
diff --git a/src/routes.tsx b/src/routes.tsx
index 6728eb6..f9ff75c 100644
--- a/src/routes.tsx
+++ b/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>
   );
 };