From 8cc8391a091c52c6eab20234cf6651ef93de8613 Mon Sep 17 00:00:00 2001
From: ilnaz <237x237@gmail.com>
Date: Sat, 14 Dec 2024 22:27:07 +0300
Subject: [PATCH] feat: add a component for changing days (#48)

---
 locales/en.json                               |  3 +-
 src/api/arm.ts                                | 10 ++++--
 .../DateNavigator/DateNavigator.tsx           | 31 +++++++++++++++++++
 src/components/DateNavigator/index.ts         |  1 +
 src/components/Orders/Orders.tsx              | 20 ++++++++++--
 src/pages/notFound/notFound.tsx               |  2 +-
 stubs/api/index.js                            |  2 +-
 7 files changed, 62 insertions(+), 7 deletions(-)
 create mode 100644 src/components/DateNavigator/DateNavigator.tsx
 create mode 100644 src/components/DateNavigator/index.ts

diff --git a/locales/en.json b/locales/en.json
index 17394ab..9549f0b 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -77,5 +77,6 @@
   "dry-wash.notFound.button.back": "Back to Home",
   "dry-wash.errorBoundary.title": "Something went wrong",
   "dry-wash.errorBoundary.description": "We are already working on fixing the issue",
-  "dry-wash.errorBoundary.button.reload": "Reload Page"
+  "dry-wash.errorBoundary.button.reload": "Reload Page",
+  "dry-wash.washTime.timeSlot": "{{start}} - {{end}}"
 }
diff --git a/src/api/arm.ts b/src/api/arm.ts
index 534440d..c406c54 100644
--- a/src/api/arm.ts
+++ b/src/api/arm.ts
@@ -8,8 +8,14 @@ enum ArmEndpoints {
 const armService = () => {
   const endpoint = getConfigValue('dry-wash.api');
 
-  const fetchOrders = async () => {
-    const response = await fetch(`${endpoint}${ArmEndpoints.ORDERS}`);
+  const fetchOrders = async ({ date }: { date: Date }) => {
+    const response = await fetch(`${endpoint}${ArmEndpoints.ORDERS}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ date }),
+    });
 
     if (!response.ok) {
       throw new Error(`Failed to fetch orders: ${response.status}`);
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
new file mode 100644
index 0000000..5cd0255
--- /dev/null
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Box, Button, Text } from '@chakra-ui/react';
+import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
+
+interface DateNavigatorProps {
+  currentDate: Date;
+  onPreviousDate: () => void;
+  onNextDate: () => void;
+}
+
+const DateNavigator = ({
+  currentDate,
+  onPreviousDate,
+  onNextDate,
+}: DateNavigatorProps) => {
+  return (
+    <Box display='flex' alignItems='center' justifyContent='flex-start' mb='5'>
+      <Button onClick={onPreviousDate}>
+        <ArrowBackIcon />
+      </Button>
+      <Text mx='4' fontSize='lg' fontWeight='bold'>
+        {currentDate.toLocaleDateString()}
+      </Text>
+      <Button onClick={onNextDate}>
+        <ArrowForwardIcon />
+      </Button>
+    </Box>
+  );
+};
+
+export default DateNavigator;
diff --git a/src/components/DateNavigator/index.ts b/src/components/DateNavigator/index.ts
new file mode 100644
index 0000000..e3da34f
--- /dev/null
+++ b/src/components/DateNavigator/index.ts
@@ -0,0 +1 @@
+export { default } from './DateNavigator';
diff --git a/src/components/Orders/Orders.tsx b/src/components/Orders/Orders.tsx
index e2dd6bc..de4070c 100644
--- a/src/components/Orders/Orders.tsx
+++ b/src/components/Orders/Orders.tsx
@@ -13,10 +13,12 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
 
 import OrderItem from '../OrderItem';
 import { OrderProps } from '../OrderItem/OrderItem';
 import { armService } from '../../api/arm';
+import DateNavigator from '../DateNavigator';
 
 const TABLE_HEADERS = [
   'carNumber' as const,
@@ -39,13 +41,14 @@ const Orders = () => {
   const [orders, setOrders] = useState<OrderProps[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [currentDate, setCurrentDate] = useState(new Date());
 
   useEffect(() => {
     const loadOrders = async () => {
       setLoading(true);
 
       try {
-        const data = await fetchOrders();
+        const data = await fetchOrders({ date: currentDate });
         setOrders(data.body);
       } catch (err) {
         setError(err.message);
@@ -62,13 +65,26 @@ const Orders = () => {
     };
 
     loadOrders();
-  }, [toast, t]);
+  }, [toast, t, currentDate]);
 
   return (
     <Box p='8'>
       <Heading size='lg' mb='5'>
         {t('title')}
       </Heading>
+
+      <DateNavigator
+        currentDate={currentDate}
+        onPreviousDate={() =>
+          setCurrentDate((prevDate) =>
+            dayjs(prevDate).subtract(1, 'day').toDate(),
+          )
+        }
+        onNextDate={() =>
+          setCurrentDate((prevDate) => dayjs(prevDate).add(1, 'day').toDate())
+        }
+      />
+
       <Table variant='simple' colorScheme='blackAlpha'>
         <Thead>
           <Tr>
diff --git a/src/pages/notFound/notFound.tsx b/src/pages/notFound/notFound.tsx
index 839c4b4..de50b69 100644
--- a/src/pages/notFound/notFound.tsx
+++ b/src/pages/notFound/notFound.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { Text, Button, Center, VStack, Heading } from '@chakra-ui/react';
 import { Link } from 'react-router-dom';
 import { Player } from '@lottiefiles/react-lottie-player';
+import { useTranslation } from 'react-i18next';
 
 import animate from '../../assets/animation/notFound.json';
-import { useTranslation } from 'react-i18next';
 
 const NotFound = () => {
   const { t } = useTranslation('~', {
diff --git a/stubs/api/index.js b/stubs/api/index.js
index 8fe4716..270e7c6 100644
--- a/stubs/api/index.js
+++ b/stubs/api/index.js
@@ -23,7 +23,7 @@ router.get('/arm/masters', (req, res) => {
     );
 });
 
-router.get('/arm/orders', (req, res) => {
+router.post('/arm/orders', (req, res) => {
   res
     .status(/error/.test(STUBS.orders) ? 500 : 200)
     .send(