Add react-query

Author: AlexandrLi

package-lock.json

@@ -33,10 +33,11 @@
     "@reduxjs/toolkit": "^1.2.5",
     "@types/react-redux": "^7.1.7",
     "@types/yup": "^0.29.14",
-    "axios": "^0.19.2",
+    "axios": "^0.27.2",
     "formik": "^2.2.9",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
+    "react-query": "^3.39.1",
     "react-redux": "^7.2.0",
     "react-router-dom": "^6.3.0",
     "serverless": "^2.29.0",
@@ -59,7 +60,7 @@
     "jsdom": "^20.0.0",
     "msw": "^0.43.0",
     "prettier": "2.7.1",
-    "typescript": "^4.6.3",
+    "typescript": "^4.7.4",
     "vite": "^2.9.9",
     "vitest": "^0.17.0"
   },

package.json

@@ -15,7 +15,7 @@ function App() {
         <Route path="cart" element={<PageCart />} />
         <Route path="admin">
           <Route path="orders" element={<PageOrders />} />
-          <Route path="order/:id" element={<PageOrder />} />
+          <Route path="orders/:id" element={<PageOrder />} />
           <Route path="products" element={<PageProductImport />} />
           <Route path="product-form" element={<PageProductForm />}>
             <Route path=":id" element={<PageProductForm />} />

src/components/App/App.tsx

@@ -1,26 +1,38 @@
 import Badge from "@mui/material/Badge";
 import CartIcon from "@mui/icons-material/ShoppingCart";
 import IconButton from "@mui/material/IconButton";
-import React from "react";
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 import { useDispatch, useSelector } from "react-redux";
 import { selectCartItems, updateFromApi } from "~/store/cartSlice";
 import { Link } from "react-router-dom";
 import API_PATHS from "~/constants/apiPaths";
+import { useQuery } from "react-query";
+import { CartItem } from "~/models/CartItem";
 
 export default function Cart() {
   const dispatch = useDispatch();
-  React.useEffect(() => {
-    axios
-      .get(`${API_PATHS.cart}/profile/cart`, {
-        headers: {
-          Authorization: `Basic ${localStorage.getItem("authorization_token")}`,
-        },
-      })
-      .then((response) => {
-        dispatch(updateFromApi({ items: response.data }));
-      });
-  }, [dispatch]);
+  useQuery<CartItem[], AxiosError>(
+    "cart",
+    async () => {
+      const res = await axios.get<CartItem[]>(
+        `${API_PATHS.cart}/profile/cart`,
+        {
+          headers: {
+            Authorization: `Basic ${localStorage.getItem(
+              "authorization_token"
+            )}`,
+          },
+        }
+      );
+      return res.data;
+    },
+    {
+      onSuccess: (data) => {
+        dispatch(updateFromApi({ items: data }));
+      },
+    }
+  );
+
   const cartItems = useSelector(selectCartItems);
   const badgeContent = cartItems.length || undefined;
 

src/components/MainLayout/components/Cart.tsx

@@ -19,7 +19,7 @@ import TextField from "~/components/Form/TextField";
 
 const steps = ["Review your cart", "Shipping address", "Review your order"];
 
-const initialAddressValues: any = AddressSchema.cast({});
+const initialAddressValues = AddressSchema.cast({});
 
 const CartIsEmpty = () => (
   <Typography variant="h6" gutterBottom>