feat: add order-view (#9)

src/pages/order-view/helper.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+
+import { LandingService } from '../../api/landing';
+import { Order } from '../../models/landing';
+import { FetchOrderQueryResponse } from '../../models/api';
+
+export const useFetchOrderDetails = ({
+  orderId,
+}: {
+  orderId: Order.View['id'];
+}) => {
+  const { fetchOrder } = LandingService();
+
+  const [data, setData] = useState<FetchOrderQueryResponse>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+
+      try {
+        const data = await fetchOrder(orderId);
+        setData(data.body);
+      } catch (error) {
+        setError(error.message);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return {
+    isLoading,
+    data,
+    error,
+  };
+};

src/pages/order-view/index.tsx

@@ -1,7 +1,75 @@
-import React from "react";
+import React, { FC, useEffect } from 'react';
+import { HStack, Spinner, useToast } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import { Container, Heading, VStack } from '@chakra-ui/react';
+import { useParams } from 'react-router-dom';
 
-const Page = () => {
-  return <h1>Order view</h1>;
+import { LandingThemeProvider } from '../../containers';
+import { OrderDetails } from '../../components/order-view';
+
+import { useFetchOrderDetails } from './helper';
+
+const Page: FC = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.order-view',
+  });
+
+  const { orderId } = useParams();
+
+  const { isLoading, data, error } = useFetchOrderDetails({ orderId });
+
+  const toast = useToast();
+  useEffect(() => {
+    if (error) {
+      toast({
+        title: t('error.title'),
+        description: t('fetch.error'),
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'bottom-right',
+      });
+    }
+  }, [error]);
+
+  return (
+    <LandingThemeProvider>
+      <Container
+        w='full'
+        maxWidth='container.xl'
+        minH='100vh'
+        padding={0}
+        bg='white'
+        centerContent
+      >
+        <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
+          <Heading textAlign='center' mt={4}>
+            {t('title')}
+          </Heading>
+          {isLoading ? (
+            <HStack width='full' justifyContent='center'>
+              <Spinner size='lg' />
+            </HStack>
+          ) : (
+            data && (
+              <OrderDetails
+                id={data.id}
+                orderDate={data.orderDate}
+                status={data.status}
+                phone={data.phone}
+                carNumber={data.carNumber}
+                carBody={data.carBody}
+                carColor={data.carColor}
+                location={data.location}
+                datetimeBegin={data.startWashTime}
+                datetimeEnd={data.endWashTime}
+              />
+            )
+          )}
+        </VStack>
+      </Container>
+    </LandingThemeProvider>
+  );
 };
 
 export default Page;