Frontend: Fix bug in adding favorites on product page

src/client/components/ProductDetails/ProductDetails.component.js

@@ -22,15 +22,20 @@ export const ProductDetails = ({
 }) => {
   const { shoppingCart, changeProductQuantity } = useShoppingCartContext();
   const [checked, setChecked] = React.useState(isFavorite);
+
   const [itemValue, setItemValue] = React.useState(1);
   React.useEffect(() => {
     getQuantity(itemValue);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [itemValue]);
 
+  React.useEffect(() => {
+    setChecked(isFavorite);
+  }, [isFavorite, productId]);
+
   const checkFavoriteHandler = () => {
     // This function need to be change database for add or remove from favorite.
-    if (checked) {
+    if (!checked) {
       fetch(`/api/users/${userId}/favorites`, {
         method: 'POST',
         headers: {
@@ -64,8 +69,8 @@ export const ProductDetails = ({
           throw new Error(response.status);
         }
       });
-      window.location.reload(false);
     }
+    window.location.reload(false);
     setChecked(!checked);
   };
   const [isShown, setIsShown] = React.useState(false);
@@ -100,12 +105,11 @@ export const ProductDetails = ({
             <span className="text">{ProductName}</span>
             <button type="button" onClick={checkFavoriteHandler}>
               <div className="heart">
-                {' '}
                 {checked ? (
-                  <Heart height="30" />
-                ) : (
                   <Heart height="30" fill="#8E0EF2" strokeWidth="0" />
-                )}{' '}
+                ) : (
+                  <Heart height="30" />
+                )}
               </div>
             </button>
           </div>

src/client/components/ProductDetails/ProductDetails.stories.js

@@ -17,6 +17,6 @@ export const Product = () => (
     Price={number('Price', '200')}
     productColor={text('Color', 'Black')}
     productSize={text('Size', 'XL')}
-    isFavorite={boolean('Change Favorite Heart', true)}
+    isFavorite={boolean('Change Favorite Heart', false)}
   />
 );

src/client/containers/FavoritesPage/FavoritesPage.Container.js

@@ -30,7 +30,7 @@ const FavoritesPageContainer = () => {
                 Price={product.price}
                 productColor={product.color}
                 productSize={product.size}
-                isFavorite={false}
+                isFavorite={true}
                 imageAlt={product.name}
               />
             );

src/client/containers/MonthlyArrivalsPage/MonthlyArrivalsPage.Container.js

@@ -28,7 +28,7 @@ const MonthlyArrivalsPageContainer = ({ isAuthenticated }) => {
               Price={product.price}
               productColor={product.color}
               productSize={product.size}
-              isFavorite={true}
+              isFavorite={false}
               imageAlt={product.name}
             />
           ))

src/client/containers/ProductPage/ProductPage.Container.js

@@ -16,14 +16,23 @@ const ProductPageContainer = ({ isAuthenticated }) => {
   const [product, setProduct] = React.useState({});
   const [category, setCategory] = React.useState('');
   const [similarProduct, setSimilarProduct] = React.useState([]);
+  const [fav, setFav] = React.useState(false);
 
   const productData = useFetchApi(`products/${id}`);
+  const userUid = JSON.parse(localStorage.getItem('user')).uid;
+  const favsData = useFetchApi(`users/${userUid}/${id}/favorites`);
 
   React.useEffect(() => {
-    if (!productData.isLoading) {
+    if (!productData.isLoading && !favsData.isLoading) {
       setProduct(productData.data[0]);
+      if (favsData.data && !favsData.data.error) {
+        const result = favsData.data.some((item) => {
+          return item.id === parseInt(id, 10);
+        });
+        setFav(result);
+      }
     }
-  }, [id, productData]);
+  }, [id, productData, favsData]);
 
   const categoryData = useFetchApi(`categories/${product.category_id}`);
 
@@ -62,6 +71,7 @@ const ProductPageContainer = ({ isAuthenticated }) => {
                 Price={parseInt(product.price, 10)}
                 productColor={product.color}
                 productSize={product.size}
+                isFavorite={fav}
               />
             ) : (
               <Page404Container />

src/server/api/routes/users.router.js

@@ -182,7 +182,7 @@ router.post('/', (req, res, next) => {
  *      404:
  *        description: The favorite products for the specified user_id did not found
  */
-router.get('/:id/favorites/', (req, res, next) => {
+router.get('/:id/:productId/favorites/', (req, res, next) => {
   usersController
     .getUserFavorites(req.params.id)
     .then((result) => res.json(result))