Fixed offer page

src/components/pages/home/components/Grid.jsx

@@ -7,9 +7,9 @@ import { Block } from "../../../../styles/pages/home-page";
 const Grid = ({ data, text }) => {
   let history = useHistory();
   const gridImg = [
-    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTugCX5kSC9m1XFVcK7BWoZY9HiycolFcoTQ&usqp=CAU",
-    "https://m.media-amazon.com/images/I/61R4wTQfJdL._AC_SX425_.jpg",
-    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu5mYIH9y9ovhGwpiqquVjk2g6ivCHrnSO1g&usqp=CAU",
+    "https://res.cloudinary.com/dzvurs61r/image/upload/v1626785853/Grid1_a4knbf.jpg",
+    "https://res.cloudinary.com/dzvurs61r/image/upload/v1626785853/Grid2_woeinh.jpg",
+    "https://res.cloudinary.com/dzvurs61r/image/upload/v1626785853/Grid3_isnggj.jpg",
   ];
 
   function handleClick(category, slug) {
@@ -28,6 +28,7 @@ const Grid = ({ data, text }) => {
               <Block
                 style={{
                   backgroundImage: `url(${img})`,
+                  backgroundColor: "#d6c3e0",
                 }}
                 onClick={() =>
                   handleClick(data[index].category, data[index].slug)

src/components/pages/home/index.jsx

@@ -30,20 +30,19 @@ function ImageBanners({ banner }) {
   );
 }
 
-export default function Home({ login }) {
+export default function Home({ logged }) {
   const [home, setHome] = useState(null);
-  let logged = localStorage.getItem("isLogged");
 
   useEffect(() => {
     getData();
-  }, [login]);
+  }, [logged]);
 
   const getData = async () => {
     await getApi();
     let values;
     values = await fetchResult("home");
     setHome({ ...values });
-    // console.log(values);
+    console.log(values);
   };
 
   return (

src/components/pages/offer-page/components/Layout.jsx

@@ -8,10 +8,12 @@ import { Text, Button } from "../../../../styles/widgets/widgets";
 import { fetchResult } from "../../../../services/api/loaded-services";
 import { ApiPostService } from "../../../../services/api/api-services";
 import { CardImg } from "../../../../styles/pages/home-page";
-import { Column, Overlay, ImgOverlay } from "../../../../styles/pages/offer-page";
-import { HiHeart } from 'react-icons/hi'
-import { toast } from "react-toastify";
-import { LightShade } from "../../../../styles/themes/color-theme";
+import {
+  Column,
+  Overlay,
+  ImgOverlay,
+} from "../../../../styles/pages/offer-page";
+import { HiHeart } from "react-icons/hi";
 import { retriveDetails } from "../../../../services/storage/details";
 
 
@@ -44,39 +46,41 @@ const Layout = () => {
       setSaleProducts(home.offers[index]);
     }
     getProducts();
-    console.log("sale", saleProducts)
   }, [saleProducts]);
 
-  const AddWishlist = async (pid, index) => {
-    let user = await retriveDetails()
+  const addWishlist = async (product, index) => {
+    let currentState = { ...saleProducts };
+    let addedToWishlist = { ...saleProducts };
+    addedToWishlist.values[index].wishlist = true;
+    setSaleProducts(addedToWishlist);
+
+    let user = await retriveDetails();
     let res = await ApiPostService(process.env.REACT_APP_ADD_WISHLIST_URL, {
-      "customer": user.id,
-      "product": pid
-    })
-    if (res.sucess) {
-      setSaleProducts()
-      console.log("before", saleProducts)
-      setSaleProducts(prev => ({
-        ...prev,
-        [saleProducts.values[index].wishlist]: true
-      }))
-      console.log("after", saleProducts)
-    }
-  }
+      customer: user.id,
+      product: product.id,
+    });
+
+    if (!res.success) setSaleProducts(currentState);
+  };
+
+  const RemoveWishlist = async (pid, index) => {
+    let currentState = { ...saleProducts };
+    let remove = { ...saleProducts };
+    remove.values[index].wishlist = false;
+    setSaleProducts(remove);
+    let user = retriveDetails();
+    let res = await ApiPostService(
+      process.env.REACT_APP_REMOVE_WISHLIST_URL +
+        "/" +
+        user.id +
+        "/" +
+        pid +
+        "/"
+    );
+
+    if (!res.success) setSaleProducts(currentState);
+  };
 
-  const RemoveWishlist = async (pid) => {
-    let user = await retriveDetails()
-    let res = await ApiPostService(process.env.REACT_APP_REMOVE_WISHLIST_URL + "/" + user.id + "/" + pid + "/")
-    if (res.sucess) {
-      setSaleProducts()
-      console.log("before", saleProducts)
-      setSaleProducts(prev => ({
-        ...prev,
-        [saleProducts.values[index].wishlist]: false
-      }))
-      console.log("after", saleProducts)
-    }
-  }
   return (
     <>
 
@@ -108,23 +112,21 @@ const Layout = () => {
                       onClick={() => history.push(`/products/${item.id}`)}
                     />
                     <Overlay>
-                      {
-                        !item.wishlist ?
-                          <Button onClick={() => AddWishlist(item.id, i)}>
-                            <span style={{ fontSize: '.75rem' }} >
-                              Add to wishlist
-                              <HiHeart size="18" className="ml-2 mb-1" />
-                            </span>
-                          </Button>
-                          :
-
-                          <Button onClick={() => RemoveWishlist(item.id, i)}>
-                            <span style={{ fontSize: '.8rem' }} >
-                              Remove
-                              <HiHeart size="18" className="ml-2 mb-1" />
-                            </span>
-                          </Button>
-                      }
+                      {!item.wishlist ? (
+                        <Button onClick={() => addWishlist(item, i)}>
+                          <span style={{ fontSize: ".75rem" }}>
+                            Add to wishlist
+                            <HiHeart size="18" className="ml-2 mb-1" />
+                          </span>
+                        </Button>
+                      ) : (
+                        <Button onClick={() => RemoveWishlist(item.id, i)}>
+                          <span style={{ fontSize: ".8rem" }}>
+                            Remove
+                            <HiHeart size="18" className="ml-2 mb-1" />
+                          </span>
+                        </Button>
+                      )}
                     </Overlay>
 
                   </ImgOverlay>

src/navigations/Routes.jsx

@@ -37,7 +37,7 @@ function Routes() {
       <ScrollToTop />
       <Header func={setLogOut} />
       <Switch>
-        <Route exact path="/" component={() => <Home login={logged} />} />
+        <Route exact path="/" component={() => <Home logged={logged} />} />
         <Route path="/category" component={Category} />
         <Route path="/products/:id" component={Products} />
         <Route path="/offers/:index" component={Offers} />

src/services/api/loaded-services.js

@@ -9,14 +9,14 @@ let userData = {};
 let personalDetails = {};
 let customer;
 
-export function getCustomer() {
-  customer = retriveDetails();
-}
-
 // Gets all the (get) requests
 async function getApi() {
-  getCategory();
-  getHome();
+  await getHome();
+  await getCategory();
+}
+
+export function getCustomer() {
+  customer = retriveDetails();
 }
 
 async function postApi(value) {

src/styles/pages/offer-page.js

@@ -2,19 +2,19 @@ import { Col } from "react-bootstrap";
 import styled from "styled-components";
 
 export const Overlay = styled.div`
-  position: absolute; 
-  bottom: 0; 
+  position: absolute;
+  bottom: 0;
   background: rgb(0, 0, 0);
-  background: rgba(255, 255, 255, 255); 
-  color: #f1f1f1; 
+  background: rgba(255, 255, 255, 255);
+  color: #f1f1f1;
   width: 100%;
-  transition: .5s ease;
-  opacity:0;
+  transition: 0.5s ease;
+  opacity: 0;
   color: white;
   font-size: 20px;
   padding: 5px;
   text-align: center;
-  transition: .5s ease;
+  transition: 0.5s ease;
 `;
 
 export const Column = styled(Col)`
@@ -33,10 +33,11 @@ export const Column = styled(Col)`
 
 export const ImgOverlay = styled.div`
   position: relative;
-  :hover{
-    opacity:1;
-    ${Overlay}{
-      opacity:1;
+  :hover {
+    opacity: 1;
+    ${Overlay} {
+      opacity: 1;
     }
   }
-`
+`;
+