feat: convert link to button (#14)

# Conflicts:
#	src/components/Sidebar/Sidebar.tsx
#	src/routes.tsx

package-lock.json

@@ -9,7 +9,7 @@
             "version": "0.0.0",
             "license": "ISC",
             "dependencies": {
-                "@brojs/cli": "^1.6.2",
+                "@brojs/cli": "^1.6.1",
                 "@chakra-ui/icons": "^2.2.4",
                 "@chakra-ui/react": "^2.4.2",
                 "@emotion/react": "^11.4.1",
@@ -1564,10 +1564,9 @@
             }
         },
         "node_modules/@brojs/cli": {
-            "version": "1.6.2",
-            "resolved": "https://git.bro-js.ru/api/packages/bro-js/npm/%40brojs%2Fcli/-/1.6.2/cli-1.6.2.tgz",
-            "integrity": "sha512-IDGX5SMt1VQxW2TfY6onazeSjQgUaRut4rwRZVWgBfzHrdp7cHgobciQkF65baT8SfAeaM3w/XHaQr8X1VKGEg==",
-            "license": "ISC",
+            "version": "1.6.1",
+            "resolved": "https://git.bro-js.ru/api/packages/bro-js/npm/%40brojs%2Fcli/-/1.6.1/cli-1.6.1.tgz",
+            "integrity": "sha512-jcRv68xUxQKYdVOH+eFcuV2DquOU1qHqduozghho02aGNUN8/oB2RL5WQ8ssi4wPJ+HpwRpmpqcqQAnnb9F7Cg==",
             "dependencies": {
                 "@brojs/dev-server": "^1.6.1",
                 "@brojs/fire.app": "^1.6.1",

package.json

@@ -17,7 +17,7 @@
     "author": "",
     "license": "ISC",
     "dependencies": {
-        "@brojs/cli": "^1.6.2",
+        "@brojs/cli": "^1.6.1",
         "@chakra-ui/icons": "^2.2.4",
         "@chakra-ui/react": "^2.4.2",
         "@emotion/react": "^11.4.1",

src/__data__/urls.ts

@@ -1,24 +0,0 @@
-import { generatePath } from "react-router-dom";
-import { getNavigationValue } from "@brojs/cli";
-import { Order } from "../models";
-
-export const URLs = {
-  landing: {
-    url: getNavigationValue("dry-wash.main"),
-    getUrl() {
-      return this.url;
-    }
-  },
-  orderForm: {
-    url: getNavigationValue("dry-wash.create"),
-    getUrl() {
-      return this.url;
-    }
-  },
-  orderView: {
-    url: getNavigationValue("dry-wash.view.order"),
-    getUrl(orderId: Order.Id) {
-      return generatePath(this.url, { orderId });
-    }
-  }
-};

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'

src/components/landing/CtaButton/CtaButton.tsx

@@ -1,11 +1,10 @@
 import React, { FC } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { ButtonProps, Button } from '@chakra-ui/react';
-import { URLs } from '../../../__data__/urls';
 
 export const CtaButton: FC<ButtonProps> = (props) => {
   return (
-    <Button as={RouterLink} to={URLs.orderForm.getUrl()} colorScheme='primary' {...props}>
+    <Button as={RouterLink} to='/dry-wash/order-form' colorScheme='primary' {...props}>
       Сделать заказ
     </Button>
   );

src/mocks/landing/index.ts

@@ -1,5 +1,3 @@
-import { Order } from "../../models";
-
 type ReviewItem = {
   id: string;
   firstname: string;
@@ -33,10 +31,4 @@ export const mockReviews: ReviewItem[] = [
     picture: 'https://img.freepik.com/free-photo/portrait-young-blonde-woman-with-plait-polka-dot-blouse_273609-10490.jpg',
     text: "К сожалению, мой опыт с сухой мойкой автомобилей оказался неудачным. Ожидала увидеть чистую машину после процедуры, но многие участки остались незаделанными. Кроме того, процедура заняла больше времени, чем мне обещали. Возможно, в этом конкретном центре что-то пошло не так, но я бы не стала повторно обращаться за этой услугой."
   },
-].map((data, i) => ({ id: `review${i}`, ...data }));
-
-export const mockOrders: Order.View[] = [
-  { id: 'id1' },
-  { id: 'id2' },
-  { id: 'id3' },
-];
+].map((data, i) => ({ id: `review${i}`, ...data }));

src/models/index.ts

@@ -1 +0,0 @@
-export * as Order from './order';

src/models/order.ts

@@ -1,5 +0,0 @@
-export type Id = string;
-
-export type View = {
-  id: Id;
-};

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/pages/landing/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Container, VStack } from '@chakra-ui/react';
+import { Box, Container, VStack } from '@chakra-ui/react';
 import {
   BenefitsSection,
   Footer,
@@ -19,12 +19,14 @@ const Page: FC = () => {
         bg='white'
         centerContent
       >
-        <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
+        <VStack w='full' h='full' alignItems='stretch'>
           <HeroSection flexShrink={0} />
-          <VStack as='main' flexGrow={1}>
-            <BenefitsSection />
-            <SocialProofSection />
-          </VStack>
+          <Box flexGrow={1}>
+            <VStack as='main'>
+              <BenefitsSection />
+              <SocialProofSection />
+            </VStack>
+          </Box>
           <Footer />
         </VStack>
       </Container>

src/pages/order-form/index.tsx

@@ -1,20 +1,7 @@
-import React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import { Button } from '@chakra-ui/react';
-import { URLs } from '../../__data__/urls';
-import { mockOrders } from '../../mocks/landing';
+import React from "react";
 
 const Page = () => {
-  return (
-    <>
-      <h1>Order form</h1>
-      {mockOrders.map(({ id }) => (
-        <Button key={id} as={RouterLink} to={URLs.orderView.getUrl(id)}>
-          Посмотреть заказ {id}
-        </Button>
-      ))}
-    </>
-  );
+  return <h1>Order form </h1>;
 };
 
 export default Page;

src/routes.tsx

@@ -2,7 +2,6 @@ import React, { lazy, Suspense } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { PageSpinner } from './components';
 import Arm from './pages/arm';
-import { URLs } from './__data__/urls';
 
 const Landing = lazy(() => import('./pages/landing'));
 const OrderForm = lazy(() => import('./pages/order-form'));
@@ -12,12 +11,15 @@ const Routers = () => {
   return (
     <Suspense fallback={<PageSpinner />}>
       <Routes>
-        <Route path={URLs.landing.url} element={<Landing />} />
-        <Route path={URLs.orderForm.url} element={<OrderForm />} />
-        <Route path={URLs.orderView.url} element={<OrderView />} />
-        <Route path='/dry-wash/arm' element={<Arm />}></Route>
+        <Route path='/dry-wash'>
+          <Route index element={<Landing />} />
+          <Route path='order-form' element={<OrderForm />} />
+          <Route path='order-view' element={<OrderView />} />
+        </Route>
+        <Route path='/dry-wash/arm/*' element={<Arm />}></Route>
       </Routes>
     </Suspense>
+
   );
 };