From 3d063daafb7a0e5cc3e891ea4509e71210cc51df Mon Sep 17 00:00:00 2001 From: jaimakena Date: Mon, 13 Dec 2021 21:59:05 +0100 Subject: [PATCH 1/2] Changes to fix issue with favourites #271 --- .../ProductDetails/ProductDetails.component.js | 15 +++++++++------ .../ProductDetails/ProductDetails.stories.js | 2 +- .../FavoritesPage/FavoritesPage.Container.js | 2 +- .../MonthlyArrivalsPage.Container.js | 2 +- .../ProductPage/ProductPage.Container.js | 13 +++++++++++-- src/server/api/routes/users.router.js | 2 +- 6 files changed, 24 insertions(+), 12 deletions(-) diff --git a/src/client/components/ProductDetails/ProductDetails.component.js b/src/client/components/ProductDetails/ProductDetails.component.js index 3aa16645..2c01b44e 100644 --- a/src/client/components/ProductDetails/ProductDetails.component.js +++ b/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,7 +69,6 @@ export const ProductDetails = ({ throw new Error(response.status); } }); - window.location.reload(false); } setChecked(!checked); }; @@ -100,12 +104,11 @@ export const ProductDetails = ({ {ProductName} diff --git a/src/client/components/ProductDetails/ProductDetails.stories.js b/src/client/components/ProductDetails/ProductDetails.stories.js index 8ba30f9b..1e2bf215 100644 --- a/src/client/components/ProductDetails/ProductDetails.stories.js +++ b/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)} /> ); diff --git a/src/client/containers/FavoritesPage/FavoritesPage.Container.js b/src/client/containers/FavoritesPage/FavoritesPage.Container.js index f3b069ac..6ca7337d 100644 --- a/src/client/containers/FavoritesPage/FavoritesPage.Container.js +++ b/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} /> ); diff --git a/src/client/containers/MonthlyArrivalsPage/MonthlyArrivalsPage.Container.js b/src/client/containers/MonthlyArrivalsPage/MonthlyArrivalsPage.Container.js index cacc53e5..52989006 100644 --- a/src/client/containers/MonthlyArrivalsPage/MonthlyArrivalsPage.Container.js +++ b/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} /> )) diff --git a/src/client/containers/ProductPage/ProductPage.Container.js b/src/client/containers/ProductPage/ProductPage.Container.js index 32a3f613..254db359 100644 --- a/src/client/containers/ProductPage/ProductPage.Container.js +++ b/src/client/containers/ProductPage/ProductPage.Container.js @@ -16,14 +16,22 @@ 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 favsData = useFetchApi(`users/${auth.currentUser.uid}/${id}/favorites`); React.useEffect(() => { - if (!productData.isLoading) { + if (!productData.isLoading && !favsData.isLoading) { setProduct(productData.data[0]); + if (!favsData.data.error) { + const result = favsData.data.some((item) => { + return item.id == id; + }); + setFav(result); + } } - }, [id, productData]); + }, [id, productData, favsData]); const categoryData = useFetchApi(`categories/${product.category_id}`); @@ -62,6 +70,7 @@ const ProductPageContainer = ({ isAuthenticated }) => { Price={parseInt(product.price, 10)} productColor={product.color} productSize={product.size} + isFavorite={fav} /> ) : ( diff --git a/src/server/api/routes/users.router.js b/src/server/api/routes/users.router.js index 5892d2b4..49d691da 100644 --- a/src/server/api/routes/users.router.js +++ b/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)) From 0f68f4b8444680368db7c13bcba78dc1385816ad Mon Sep 17 00:00:00 2001 From: jaimakena Date: Tue, 14 Dec 2021 21:12:17 +0100 Subject: [PATCH 2/2] Changes as per review comments --- .../components/ProductDetails/ProductDetails.component.js | 1 + src/client/containers/ProductPage/ProductPage.Container.js | 7 ++++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/client/components/ProductDetails/ProductDetails.component.js b/src/client/components/ProductDetails/ProductDetails.component.js index 2c01b44e..6889d963 100644 --- a/src/client/components/ProductDetails/ProductDetails.component.js +++ b/src/client/components/ProductDetails/ProductDetails.component.js @@ -70,6 +70,7 @@ export const ProductDetails = ({ } }); } + window.location.reload(false); setChecked(!checked); }; const [isShown, setIsShown] = React.useState(false); diff --git a/src/client/containers/ProductPage/ProductPage.Container.js b/src/client/containers/ProductPage/ProductPage.Container.js index 254db359..7eb74160 100644 --- a/src/client/containers/ProductPage/ProductPage.Container.js +++ b/src/client/containers/ProductPage/ProductPage.Container.js @@ -19,14 +19,15 @@ const ProductPageContainer = ({ isAuthenticated }) => { const [fav, setFav] = React.useState(false); const productData = useFetchApi(`products/${id}`); - const favsData = useFetchApi(`users/${auth.currentUser.uid}/${id}/favorites`); + const userUid = JSON.parse(localStorage.getItem('user')).uid; + const favsData = useFetchApi(`users/${userUid}/${id}/favorites`); React.useEffect(() => { if (!productData.isLoading && !favsData.isLoading) { setProduct(productData.data[0]); - if (!favsData.data.error) { + if (favsData.data && !favsData.data.error) { const result = favsData.data.some((item) => { - return item.id == id; + return item.id === parseInt(id, 10); }); setFav(result); }