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 ( + + + + {currentDate.toLocaleDateString()} + + + + ); +}; + +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([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(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 ( {t('title')} + + + setCurrentDate((prevDate) => + dayjs(prevDate).subtract(1, 'day').toDate(), + ) + } + onNextDate={() => + setCurrentDate((prevDate) => dayjs(prevDate).add(1, 'day').toDate()) + } + /> + 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(