feat: separation of imports MasterItem.tsx (#40)

bro.config.js

@@ -1,9 +1,9 @@
 /* eslint-disable no-undef */
 /* eslint-disable @typescript-eslint/no-require-imports */
-const pkg = require('./package');
+const pkg = require("./package");
 
 module.exports = {
-  apiPath: 'stubs/api',
+  apiPath: "stubs/api",
   webpackConfig: {
     output: {
       publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
@@ -11,19 +11,17 @@ module.exports = {
   },
   /* use https://admin.bro-js.ru/ to create config, navigations and features */
   navigations: {
-    'dry-wash.main': '/dry-wash',
-    'dry-wash.create': '/order',
-    'dry-wash.view.order': '/order/:orderId',
-    'dry-wash.arm.master': '/master',
-    'dry-wash.arm.order': '/order',
-    'dry-wash.arm': '/arm/*',
+    "dry-wash.main": "/dry-wash",
+    "dry-wash.create": "/order",
+    "dry-wash.view.order": "/order/:orderId",
+    "dry-wash.arm": "/arm",
   },
   features: {
-    'dry-wash-pl': {
+    "dry-wash-pl": {
       // add your features here in the format [featureName]: { value: string }
     },
   },
   config: {
-    'dry-wash-pl.api': '/api',
+    "dry-wash-pl.api": "/api",
   },
 };

locales/ru.json

@@ -49,5 +49,6 @@
   "dry-wash.notFound.button.back": "Вернуться на главную",
   "dry-wash.errorBoundary.title":"Что-то пошло не так",
   "dry-wash.errorBoundary.description": "Мы уже работаем над исправлением проблемы",
-  "dry-wash.errorBoundary.button.reload": "Перезагрузить страницу"
+  "dry-wash.errorBoundary.button.reload": "Перезагрузить страницу",
+  "dry-wash.washTime.timeSlot": "{{start}} - {{end}}"
 }

package-lock.json

@@ -17,6 +17,7 @@
                 "@fontsource/open-sans": "^5.1.0",
                 "@lottiefiles/react-lottie-player": "^3.5.4",
                 "@types/react": "^18.3.12",
+                "dayjs": "^1.11.13",
                 "express": "^4.21.1",
                 "framer-motion": "^6.2.8",
                 "i18next": "^23.16.4",
@@ -5304,6 +5305,11 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/dayjs": {
+            "version": "1.11.13",
+            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+            "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+        },
         "node_modules/debug": {
             "version": "4.3.7",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",

package.json

@@ -25,6 +25,7 @@
         "@fontsource/open-sans": "^5.1.0",
         "@lottiefiles/react-lottie-player": "^3.5.4",
         "@types/react": "^18.3.12",
+        "dayjs": "^1.11.13",
         "express": "^4.21.1",
         "framer-motion": "^6.2.8",
         "i18next": "^23.16.4",

src/__data__/urls.ts

@@ -1,40 +1,25 @@
-import { generatePath } from 'react-router-dom';
-import { getNavigationValue } from '@brojs/cli';
+import { generatePath } from "react-router-dom";
+import { getNavigationValue } from "@brojs/cli";
 
-import { Order } from '../models';
-
-const getFullUrls = (url: string) =>
-  `${getNavigationValue('dry-wash.main')}${url}`;
+import { Order } from "../models";
 
 export const URLs = {
   landing: {
-    url: getNavigationValue('dry-wash.main'),
+    url: getNavigationValue("dry-wash.main"),
     getUrl() {
       return this.url;
-    },
+    }
   },
   orderForm: {
-    url: getNavigationValue('dry-wash.create'),
+    url: getNavigationValue("dry-wash.create"),
     getUrl() {
       return this.url;
-    },
+    }
   },
   orderView: {
-    url: getNavigationValue('dry-wash.view.order'),
+    url: getNavigationValue("dry-wash.view.order"),
     getUrl(orderId: Order.Id) {
       return generatePath(this.url, { orderId });
-    },
-  },
-  armMaster: {
-    url: getNavigationValue('dry-wash.arm.master'),
-    isOn: Boolean(getNavigationValue('dry-wash.arm.master')),
-  },
-  armOrder: {
-    url: getNavigationValue('dry-wash.arm.order'),
-    isOn: Boolean(getNavigationValue('dry-wash.arm.order')),
-  },
-  armBase: {
-    url: getFullUrls(getNavigationValue('dry-wash.arm')),
-    isOn: Boolean(getNavigationValue('dry-wash.arm')),
-  },
-};
+    }
+  }
+};

src/components/LayoutArm/LayoutArm.tsx

@@ -5,33 +5,20 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import Sidebar from '../Sidebar';
 import Orders from '../Orders';
 import Masters from '../Masters';
-import { URLs } from '../../__data__/urls';
 
-const LayoutArm = () => {
-  let defaultRedirect = null;
-
-  if (URLs.armOrder.isOn) {
-    defaultRedirect = URLs.armOrder.url;
-  } else if (URLs.armMaster.isOn) {
-    defaultRedirect = URLs.armMaster.url;
-  }
-
-  return (
-    <Flex h='100vh'>
-      <Sidebar />
-      <Box flex='1' bg='gray.50'>
-        <Routes>
-          <Route index element={<Navigate to={defaultRedirect} replace />} />
-          {URLs.armOrder.isOn && (
-            <Route path={URLs.armOrder.url} element={<Orders />} />
-          )}
-          {URLs.armMaster.isOn && (
-            <Route path={URLs.armMaster.url} element={<Masters />} />
-          )}
-        </Routes>
-      </Box>
-    </Flex>
-  );
-};
+const LayoutArm = () => (
+  <Flex h='100vh'>
+    <Sidebar />
+    <Box flex='1' bg='gray.50'>
+      <Routes>
+        <Route>
+          <Route index element={<Navigate to='orders' replace />} />
+          <Route path='orders' element={<Orders />} />
+          <Route path='masters' element={<Masters />} />
+        </Route>
+      </Routes>
+    </Box>
+  </Flex>
+);
 
 export default LayoutArm;

src/components/MasterItem/MasterItem.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Badge, Link, Stack, Td, Tr } from '@chakra-ui/react';
 
 import MasterActionsMenu from '../MasterActionsMenu';
+import { getTimeSlot } from '../../lib/date-helpers';
 
 const MasterItem = ({ name, schedule, phone }) => {
   return (
@@ -9,9 +10,9 @@ const MasterItem = ({ name, schedule, phone }) => {
       <Td>{name}</Td>
       <Td>
         <Stack direction='row'>
-          {schedule.map((time, index) => (
+          {schedule.map(({ startWashTime, endWashTime }, index) => (
             <Badge colorScheme={'green'} key={index}>
-              {time}
+              {getTimeSlot(startWashTime, endWashTime)}
             </Badge>
           ))}
         </Stack>

src/components/Masters/Masters.tsx

@@ -13,9 +13,9 @@ import {
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 
-import { mastersData } from '../../mocks';
 import MasterItem from '../MasterItem';
 import MasterDrawer from '../MasterDrawer';
+import data from '../../../stubs/json/arm-masters/success.json';
 
 const TABLE_HEADERS = [
   'name' as const,
@@ -48,7 +48,7 @@ const Masters = () => {
           </Tr>
         </Thead>
         <Tbody>
-          {mastersData.map((master, index) => (
+          {data.body.map((master, index) => (
             <MasterItem key={index} {...master} />
           ))}
         </Tbody>

src/components/OrderItem/OrderItem.tsx

@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
 import { Td, Tr, Link, Select } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+
+import { getTimeSlot } from '../../lib/date-helpers';
 
 const statuses = [
   'pending' as const,
@@ -15,7 +18,8 @@ type GetArrItemType<ArrType> =
 
 export type OrderProps = {
   carNumber?: string;
-  washTime?: string;
+  startWashTime?: string;
+  endWashTime?: string;
   orderDate?: string;
   status?: GetArrItemType<typeof statuses>;
   phone?: string;
@@ -24,7 +28,8 @@ export type OrderProps = {
 
 const OrderItem = ({
   carNumber,
-  washTime,
+  startWashTime,
+  endWashTime,
   orderDate,
   status,
   phone,
@@ -39,8 +44,8 @@ const OrderItem = ({
   return (
     <Tr>
       <Td>{carNumber}</Td>
-      <Td>{washTime}</Td>
-      <Td>{orderDate}</Td>
+      <Td>{getTimeSlot(startWashTime, endWashTime)}</Td>
+      <Td>{dayjs(orderDate).format('DD.MM.YYYY')}</Td>
       <Td>
         <Select
           value={statusSelect}

src/components/Orders/Orders.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 
-import { ordersData } from '../../mocks';
 import OrderItem from '../OrderItem';
 import { OrderProps } from '../OrderItem/OrderItem';
+import data from '../../../stubs/json/arm-orders/success.json';
 
 const Orders = () => {
   const { t } = useTranslation('~', {
@@ -34,7 +34,7 @@ const Orders = () => {
           </Tr>
         </Thead>
         <Tbody>
-          {ordersData.map((order, index) => (
+          {data.body.map((order, index) => (
             <OrderItem
               key={index}
               {...order}

src/components/Sidebar/Sidebar.tsx

@@ -3,8 +3,6 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
-import { URLs } from '../../__data__/urls';
-
 const Sidebar = () => {
   const { t } = useTranslation('~', {
     keyPrefix: 'dry-wash.arm.master.sideBar',
@@ -25,29 +23,25 @@ const Sidebar = () => {
 
       <VStack align='start' spacing='4'>
         <Divider />
-        {URLs.armOrder.isOn && (
-          <Button
-            as={Link}
-            to={URLs.armOrder.url}
-            w='100%'
-            colorScheme='green'
-            variant='ghost'
-          >
-            {t('orders')}
-          </Button>
-        )}
+        <Button
+          as={Link}
+          to='orders'
+          w='100%'
+          colorScheme='green'
+          variant='ghost'
+        >
+          {t('orders')}
+        </Button>
         <Divider />
-        {URLs.armMaster.isOn && (
-          <Button
-            as={Link}
-            to={URLs.armMaster.url}
-            w='100%'
-            colorScheme='green'
-            variant='ghost'
-          >
-            {t('master')}
-          </Button>
-        )}
+        <Button
+          as={Link}
+          to='masters'
+          w='100%'
+          colorScheme='green'
+          variant='ghost'
+        >
+          {t('master')}
+        </Button>
         <Divider />
       </VStack>
     </Box>

src/lib/date-helpers.ts

@@ -0,0 +1,12 @@
+import dayjs from 'dayjs';
+import i18next from 'i18next';
+
+export const getTimeSlot = (start: string, end: string) => {
+  const startDay = dayjs(start).format('HH:mm');
+  const endDay = dayjs(end).format('HH:mm');
+
+  return i18next.t('~:dry-wash.washTime.timeSlot', {
+    start: startDay,
+    end: endDay,
+  });
+};

src/mocks/index.ts

@@ -1,35 +0,0 @@
-export const mastersData = [
-  {
-    id: 'masters1',
-    name: 'Иван Иванов',
-    schedule: ['15:00 - 16:30', '17:00 - 18:00'],
-    phone: '+7 900 123 45 67',
-  },
-  {
-    id: 'masters2',
-    name: 'Сергей Петров',
-    schedule: ['10:00 - 12:30', '14:00 - 15:30', '16:00 - 17:00'],
-    phone: '+7 900 234 56 78',
-  },
-];
-
-export const ordersData = [
-  {
-    id: 'order1',
-    carNumber: 'A123BC',
-    washTime: '10:30',
-    orderDate: '2024-10-31',
-    status: 'progress',
-    phone: '79001234567',
-    location: 'Казань, ул. Баумана, 1',
-  },
-  {
-    id: 'order2',
-    carNumber: 'B456CD',
-    washTime: '11:00',
-    orderDate: '2024-10-31',
-    status: 'complete',
-    phone: '79002345678',
-    location: 'Казань, ул. Кремлёвская, 3',
-  },
-];

src/routes.tsx

@@ -17,9 +17,7 @@ const Routers = () => {
         <Route path={URLs.landing.url} element={<Landing />} />
         <Route path={URLs.orderForm.url} element={<OrderForm />} />
         <Route path={URLs.orderView.url} element={<OrderView />} />
-        {URLs.armBase.isOn && (
-          <Route path={URLs.armBase.url} element={<Arm />}></Route>
-        )}
+        <Route path='/dry-wash/arm/*' element={<Arm />}></Route>
         <Route path='*' element={<NotFound />} />
       </Routes>
     </Suspense>

stubs/json/arm-masters/success.json

@@ -0,0 +1,35 @@
+{
+  "success": true,
+  "body": [
+    {
+      "id": "masters1",
+      "name": "Иван Иванов",
+      "schedule": [ {
+        "id": "order1",
+        "startWashTime": "2024-11-24T10:30:00.000Z",
+        "endWashTime": "2024-11-24T16:30:00.000Z"
+      },
+        {
+          "id": "order2",
+          "startWashTime": "2024-11-24T11:30:00.000Z",
+          "endWashTime": "2024-11-24T17:30:00.000Z"
+        }],
+      "phone": "+7 900 123 45 67"
+    },
+    {
+      "id": "masters12",
+      "name": "Иван Иванов",
+      "schedule": [ {
+        "id": "order1",
+        "startWashTime": "2024-11-24T10:30:00.000Z",
+        "endWashTime": "2024-11-24T16:30:00.000Z"
+      },
+        {
+          "id": "order2",
+          "startWashTime": "2024-11-24T11:30:00.000Z",
+          "endWashTime": "2024-11-24T17:30:00.000Z"
+        }],
+      "phone": "+7 900 123 45 67"
+    }
+  ]
+}

stubs/json/arm-orders/success.json

@@ -0,0 +1,25 @@
+{
+  "success": true,
+  "body": [
+    {
+      "id": "order1",
+      "carNumber": "A123BC",
+      "startWashTime": "2024-11-24T10:30:00.000Z",
+      "endWashTime": "2024-11-24T16:30:00.000Z",
+      "orderDate": "2024-11-24T08:41:46.366Z",
+      "status": "progress",
+      "phone": "79001234563",
+      "location": "Казань, ул. Баумана, 1"
+    },
+    {
+      "id": "order2",
+      "carNumber": "A245BC",
+      "startWashTime": "2024-11-24T11:30:00.000Z",
+      "endWashTime": "2024-11-24T17:30:00.000Z",
+      "orderDate": "2024-11-24T07:40:46.366Z",
+      "status": "progress",
+      "phone": "79001234567",
+      "location": "Казань, ул. Баумана, 43"
+    }
+  ]
+}