like fetched from server

client/src/components/shops/ShopBox.jsx

@@ -1,11 +1,21 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Skeleton } from "@mui/material";
 import { designVar } from "../../common/data";
 import { LazyLoadImage } from "react-lazy-load-image-component";
+import { useDispatch, useSelector } from "react-redux";
+import { UserState } from "../../slices/userSlice";
+import { likeProduct } from "../../middleware/product";
 export const ShopBox = ({ product }) => {
+  const userState = useSelector(UserState);
+  const dispatch = useDispatch();
   const [liked, setLiked] = useState(false);
-  const change = () => {
-    setLiked((val) => !val);
+
+
+  const change = async () => {
+    // setLiked((val) => !val);
+
+      await  likeProduct(dispatch,setLiked,product?.id);
+
   };
   return (
     <div className="box" style={{ width: "90%", height: "100%" }}>

client/src/middleware/product.js

@@ -5,6 +5,9 @@ import {
   fetchAllProductsError,
   fetchAllProductsStart,
   fetchAllProductsSuccess,
+  likeProductError,
+  likeProductPending,
+  likeProductSuccess,
   myProductsFetchError,
   myProductsFetchStart,
   myProductsFetchSuccess,
@@ -67,3 +70,18 @@ export const fetchSubscribedProducts = async (dispatch, setSubscribedProducts =
     dispatch(subscribedProductfetchError(error.response));
   }
 }
+
+export const likeProduct = async (dispatch, setlikeOnThisProduct = () => {}, id) =>{
+  dispatch(likeProductPending());
+  try{
+    const response = await API.get(`/api/product/subscribe/${id}`, {
+      withCredentials:true
+    });
+
+    setlikeOnThisProduct(true);
+    dispatch(likeProductSuccess(response.data));
+  }
+  catch(error){
+    dispatch(likeProductError(error.response));
+  }
+}

client/src/slices/userSlice.js

@@ -200,6 +200,29 @@ const userSlice = createSlice({
       state.subscribedProductfetchStatusSuccess = false;
       state.subscribedProductfetchStatusError = false;
       state.RemoveSubscribedProductfetchstatusMessage = "";
+    },
+    likeProductSuccess: (state,action)=>{
+      state.likeProductStatuspending = false;
+      state.likeProductStatusSuccess = true;
+      state.likeProductStatusError=false;
+      state.likeProductSuccessMessage= action.payload;
+    },
+    likeProductPending: (state)=>{
+      state.likeProductStatuspending = true;
+      state.likeProductStatusSuccess = false;
+      state.likeProductStatusError=false;
+    },
+    likeProductError: (state,action)=>{
+      state.likeProductStatuspending = false;
+      state.likeProductStatusSuccess = false;
+      state.likeProductStatusError=true;
+      state.likeProductErrorMessage = action.payload.data.message;
+    },
+    unlikeproduct: (state) =>{
+      state.likeProductStatuspending = false;
+      state.likeProductStatusSuccess = false;
+      state.likeProductStatusError=false;
+      state.unlikeproductMessage = "";
     }
 
   },
@@ -237,7 +260,11 @@ export const {
   subscribedProductfetchStart,
   subscribedProductfetchError,
   subscribedProductfetchSuccess,
-  RemoveSubscribedProductfetchstatus
+  RemoveSubscribedProductfetchstatus,
+  likeProductSuccess,
+  likeProductError,
+  likeProductPending,
+  unlikeproduct
 } = userSlice.actions;
 export const selectUser = (state) => state.user.userInfo;
 export const UserState = (state) => state.user;