Remove redux in favor of react-query

Author: AlexandrLi

package-lock.json

@@ -30,15 +30,12 @@
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.8.7",
     "@mui/styles": "^5.8.7",
-    "@reduxjs/toolkit": "^1.2.5",
-    "@types/react-redux": "^7.1.7",
     "@types/yup": "^0.29.14",
     "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",
     "serverless-finch": "^2.6.0",

package.json

@@ -4,38 +4,47 @@ import CartIcon from "@mui/icons-material/ShoppingCart";
 import Add from "@mui/icons-material/Add";
 import Remove from "@mui/icons-material/Remove";
 import IconButton from "@mui/material/IconButton";
-import { useDispatch, useSelector } from "react-redux";
-import { addToCart, selectCartItems, removeFromCart } from "~/store/cartSlice";
+import { useCart, useInvalidateCart, useUpsertCart } from "~/queries/cart";
 
 type AddProductToCartProps = {
   product: Product;
 };
 
 export default function AddProductToCart({ product }: AddProductToCartProps) {
-  const dispatch = useDispatch();
-  const cartItems = useSelector(selectCartItems);
-  const cartItem = cartItems.find((i) => i.product.id === product.id);
+  const { data = [], isFetching } = useCart();
+  const { mutate: upsertCart } = useUpsertCart();
+  const invalidateCart = useInvalidateCart();
+  const cartItem = data.find((i) => i.product.id === product.id);
 
-  return (
+  const addProduct = () => {
+    upsertCart(
+      { product, count: cartItem ? cartItem.count + 1 : 1 },
+      { onSuccess: invalidateCart }
+    );
+  };
+
+  const removeProduct = () => {
+    if (cartItem) {
+      upsertCart(
+        { ...cartItem, count: cartItem.count - 1 },
+        { onSuccess: invalidateCart }
+      );
+    }
+  };
+
+  return cartItem ? (
     <>
-      {cartItem ? (
-        <>
-          <IconButton
-            onClick={() => dispatch(removeFromCart(product))}
-            size="large"
-          >
-            <Remove color={"secondary"} />
-          </IconButton>
-          <Typography align="center">{cartItem.count}</Typography>
-          <IconButton onClick={() => dispatch(addToCart(product))} size="large">
-            <Add color={"secondary"} />
-          </IconButton>
-        </>
-      ) : (
-        <IconButton onClick={() => dispatch(addToCart(product))} size="large">
-          <CartIcon color={"secondary"} />
-        </IconButton>
-      )}
+      <IconButton disabled={isFetching} onClick={removeProduct} size="large">
+        <Remove color={"secondary"} />
+      </IconButton>
+      <Typography align="center">{cartItem.count}</Typography>
+      <IconButton disabled={isFetching} onClick={addProduct} size="large">
+        <Add color={"secondary"} />
+      </IconButton>
     </>
+  ) : (
+    <IconButton disabled={isFetching} onClick={addProduct} size="large">
+      <CartIcon color={"secondary"} />
+    </IconButton>
   );
 }

src/components/AddProductToCart/AddProductToCart.tsx

@@ -28,6 +28,7 @@ export function fieldToTextField({
         fieldOnBlur(e ?? field.name);
       },
     ...field,
+    value: field.value ?? "",
     ...props,
   };
 }

src/components/Form/TextField.tsx

@@ -1,49 +1,15 @@
 import Badge from "@mui/material/Badge";
 import CartIcon from "@mui/icons-material/ShoppingCart";
 import IconButton from "@mui/material/IconButton";
-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";
+import { useCart } from "~/queries/cart";
 
 export default function Cart() {
-  const dispatch = useDispatch();
-  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;
+  const { data = [] } = useCart();
+  const badgeContent = data.length || undefined;
 
   return (
-    <IconButton
-      aria-label="show 4 new mails"
-      color="inherit"
-      component={Link}
-      to="/cart"
-      size="large"
-    >
+    <IconButton color="inherit" component={Link} to="/cart" size="large">
       <Badge badgeContent={badgeContent} color="secondary">
         <CartIcon />
       </Badge>