Task EPAM-JS-Competency-center#8 RDS integration

- update api endpoints
- update ui to conform to data returned by api endpoints
- remove request mocks

Author: voroshkov

src/components/pages/PageOrder/PageOrder.tsx

@@ -14,14 +14,8 @@ import MenuItem from "@mui/material/MenuItem";
 import { Field, Form, Formik, FormikProps } from "formik";
 import Grid from "@mui/material/Grid";
 import TextField from "~/components/Form/TextField";
-import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import TableCell from "@mui/material/TableCell";
-import TableBody from "@mui/material/TableBody";
-import TableContainer from "@mui/material/TableContainer";
 import Box from "@mui/material/Box";
-import { useQueries } from "react-query";
+import { useQuery } from "react-query";
 import { useInvalidateOrder, useUpdateOrderStatus } from "~/queries/orders";
 
 type FormValues = {
@@ -31,63 +25,37 @@ type FormValues = {
 
 export default function PageOrder() {
   const { id } = useParams<{ id: string }>();
-  const results = useQueries([
-    {
-      queryKey: ["order", { id }],
-      queryFn: async () => {
-        const res = await axios.get<Order>(`${API_PATHS.order}/order/${id}`);
-        return res.data;
-      },
+  const {
+    data: order,
+    isLoading,
+  } = useQuery({
+    queryKey: ["order", { id }],
+    queryFn: async () => {
+      const res = await axios.get<Order>(`${API_PATHS.order}/order/${id}`);
+      return res.data;
     },
-    {
-      queryKey: "products",
-      queryFn: async () => {
-        const res = await axios.get<AvailableProduct[]>(
-          `${API_PATHS.bff}/product/available`
-        );
-        return res.data;
-      },
-    },
-  ]);
-  const [
-    { data: order, isLoading: isOrderLoading },
-    { data: products, isLoading: isProductsLoading },
-  ] = results;
+  });
   const { mutateAsync: updateOrderStatus } = useUpdateOrderStatus();
   const invalidateOrder = useInvalidateOrder();
-  const cartItems: CartItem[] = React.useMemo(() => {
-    if (order && products) {
-      return order.items.map((item: OrderItem) => {
-        const product = products.find((p) => p.id === item.productId);
-        if (!product) {
-          throw new Error("Product not found");
-        }
-        return { product, count: item.count };
-      });
-    }
-    return [];
-  }, [order, products]);
-
-  if (isOrderLoading || isProductsLoading) return <p>loading...</p>;
 
-  const statusHistory = order?.statusHistory || [];
+  if (isLoading) return <p>loading...</p>;
 
-  const lastStatusItem = statusHistory[statusHistory.length - 1];
+  const orderStatus = order.status;
 
   return order ? (
     <PaperLayout>
       <Typography component="h1" variant="h4" align="center">
         Manage order
       </Typography>
-      <ReviewOrder address={order.address} items={cartItems} />
+      <ReviewOrder address={order.delivery.address} items={order.cart.items} />
       <Typography variant="h6">Status:</Typography>
       <Typography variant="h6" color="primary">
-        {lastStatusItem?.status.toUpperCase()}
+        {orderStatus.toUpperCase()}
       </Typography>
       <Typography variant="h6">Change status:</Typography>
       <Box py={2}>
         <Formik
-          initialValues={{ status: lastStatusItem.status, comment: "" }}
+          initialValues={{ status: orderStatus, comment: "" }}
           enableReinitialize
           onSubmit={(values) =>
             updateOrderStatus(
@@ -145,30 +113,6 @@ export default function PageOrder() {
         </Formik>
       </Box>
       <Typography variant="h6">Status history:</Typography>
-      <TableContainer>
-        <Table aria-label="simple table">
-          <TableHead>
-            <TableRow>
-              <TableCell>Status</TableCell>
-              <TableCell align="right">Date and Time</TableCell>
-              <TableCell align="right">Comment</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {statusHistory.map((statusHistoryItem) => (
-              <TableRow key={order.id}>
-                <TableCell component="th" scope="row">
-                  {statusHistoryItem.status.toUpperCase()}
-                </TableCell>
-                <TableCell align="right">
-                  {new Date(statusHistoryItem.timestamp).toString()}
-                </TableCell>
-                <TableCell align="right">{statusHistoryItem.comment}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
     </PaperLayout>
   ) : null;
 }

src/components/pages/PageOrders/components/Orders.tsx

@@ -34,13 +34,11 @@ export default function Orders() {
           {data?.map((order) => (
             <TableRow key={order.id}>
               <TableCell component="th" scope="row">
-                {order.address?.firstName} {order.address?.lastName}
-              </TableCell>
-              <TableCell align="right">{order.items.length}</TableCell>
-              <TableCell align="right">{order.address?.address}</TableCell>
-              <TableCell align="right">
-                {order.statusHistory[order.statusHistory.length - 1].status}
+                {order.user?.firstName} {order.user?.lastName}
               </TableCell>
+              <TableCell align="right">{order.cart.items.length}</TableCell>
+              <TableCell align="right">{order.delivery.address}</TableCell>
+              <TableCell align="right">{order.status}</TableCell>
               <TableCell align="right">
                 <Button
                   size="small"

src/constants/apiPaths.ts

@@ -1,9 +1,9 @@
 const API_PATHS = {
   product: "https://bsar9vq69i.execute-api.us-east-1.amazonaws.com",
-  order: "https://.execute-api.eu-west-1.amazonaws.com/dev",
   import: "https://ol9cna0j4c.execute-api.us-east-1.amazonaws.com/dev",
   bff: "https://bsar9vq69i.execute-api.us-east-1.amazonaws.com",
-  cart: "https://.execute-api.eu-west-1.amazonaws.com/dev",
+  order: "https://hknrgnihte.execute-api.us-east-1.amazonaws.com/dev/api",
+  cart: "https://hknrgnihte.execute-api.us-east-1.amazonaws.com/dev/api",
 };
 
 export default API_PATHS;

src/index.tsx

@@ -15,10 +15,10 @@ const queryClient = new QueryClient({
   },
 });
 
-if (import.meta.env.DEV) {
-  const { worker } = await import("./mocks/browser");
-  worker.start({ onUnhandledRequest: "bypass" });
-}
+// if (import.meta.env.DEV) {
+//   const { worker } = await import("./mocks/browser");
+//   worker.start({ onUnhandledRequest: "warn" });
+// }
 axios.interceptors.response.use(
   (response) => response,
   (error) => {

src/queries/orders.ts

@@ -7,7 +7,11 @@ import { Order } from "~/models/Order";
 
 export function useOrders() {
   return useQuery<Order[], AxiosError>("orders", async () => {
-    const res = await axios.get<Order[]>(`${API_PATHS.order}/order`);
+    const res = await axios.get<Order[]>(`${API_PATHS.order}/order`, {
+      headers: {
+        Authorization: `Basic ${localStorage.getItem("authorization_token")}`,
+      },
+    });
     return res.data;
   });
 }