From 46341fdf0f187a627faf07020cc2c7da99d5e89a Mon Sep 17 00:00:00 2001
From: Buyankhuu Tsolmonkhuu <Buyankhuuts@Berkeley.edu>
Date: Tue, 14 Nov 2023 14:00:22 -0800
Subject: [PATCH] chore:fixed rendering issue

---
 src/app/[productId]/Buttons.tsx       |  2 +-
 src/app/[productId]/styles.ts         |  1 +
 src/app/profileScreen/style.ts        |  1 +
 src/app/storefront/IndividualItem.tsx | 14 +++++---------
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/app/[productId]/Buttons.tsx b/src/app/[productId]/Buttons.tsx
index 7c6fbc6f..d097e1f0 100644
--- a/src/app/[productId]/Buttons.tsx
+++ b/src/app/[productId]/Buttons.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ToastContainer, toast } from 'react-toastify';
+import { toast } from 'react-toastify';
 import {
   ButtonsWrapper,
   AddToCartButton,
diff --git a/src/app/[productId]/styles.ts b/src/app/[productId]/styles.ts
index 6939e706..92895e23 100644
--- a/src/app/[productId]/styles.ts
+++ b/src/app/[productId]/styles.ts
@@ -80,6 +80,7 @@ export const AddToCartButton = styled.button`
 
 export const ToastPopUP = styled(ToastContainer)`
   position: fixed;
+  z-index: 100;
 
   transform: translatey(130px);
 `;
diff --git a/src/app/profileScreen/style.ts b/src/app/profileScreen/style.ts
index 75d97037..b4821e8a 100644
--- a/src/app/profileScreen/style.ts
+++ b/src/app/profileScreen/style.ts
@@ -37,6 +37,7 @@ export const LogOutButton = styled.button`
 
 export const PopUp = styled(ToastContainer)`
   transform: translate(-150px, 250px);
+  position: fixed;
 `;
 
 export const FavoriteDiv = styled.div`
diff --git a/src/app/storefront/IndividualItem.tsx b/src/app/storefront/IndividualItem.tsx
index 18cfa7d2..727eef2f 100644
--- a/src/app/storefront/IndividualItem.tsx
+++ b/src/app/storefront/IndividualItem.tsx
@@ -26,18 +26,14 @@ export default function IndividualItem(props: { product: Product }) {
   const [isFavorite, setIsFavorite] = useState(true);
   const router = useRouter();
 
-  async function fetchProducts() {
-    const data = (await arrayOfFavorites()) as Product[];
-    for (let i = 0; i < data.length; i += 1) {
-      const ithProduct = data[i];
+  useEffect(() => {
+    async function fetchProducts() {
+      const data = (await arrayOfFavorites()) as Product[];
 
-      if (product.product_id === ithProduct.product_id) {
-        setIsFavorite(!isFavorite);
+      if (data.find(item => item.product_id === product.product_id)) {
+        setIsFavorite(false);
       }
     }
-  }
-
-  useEffect(() => {
     fetchProducts();
   });