From 429b66b0f576e5c3b182f146c8a05fe1009425d4 Mon Sep 17 00:00:00 2001 From: Yuvaraj2111 <64225422+Yuvaraj2111@users.noreply.github.com> Date: Tue, 20 Jul 2021 16:27:41 +0530 Subject: [PATCH] overlay added --- .../pages/Category/Components/procard.jsx | 226 +++++++++--------- .../pages/Category/Components/viewproduct.jsx | 68 +++--- .../pages/offer-page/components/Layout.jsx | 83 ++++++- src/components/pages/wishList/index.jsx | 124 +++++----- src/components/utils/footer/index.jsx | 21 +- src/styles/pages/offer-page.js | 27 +++ 6 files changed, 324 insertions(+), 225 deletions(-) diff --git a/src/components/pages/Category/Components/procard.jsx b/src/components/pages/Category/Components/procard.jsx index 7431002..548b459 100644 --- a/src/components/pages/Category/Components/procard.jsx +++ b/src/components/pages/Category/Components/procard.jsx @@ -1,4 +1,4 @@ -import React,{ useState,useEffect } from "react"; +import React, { useState, useEffect } from "react"; import { FiHeart } from "react-icons/fi"; import { FaHeart } from "react-icons/fa"; import { AiOutlineShoppingCart } from "react-icons/ai"; @@ -36,84 +36,84 @@ const Card1 = () => { const [loading, setloading] = useState(true); // const [toggleHeart, setToggleHeart] = useState(false); - async function fetchCategory(cat){ - let pro=[]; - pro = await fetchResult("productcategory",cat) + async function fetchCategory(cat) { + let pro = []; + pro = await fetchResult("productcategory", cat) setproductData(pro) setloading(false); - console.log("product",productData) - console.log("casga",cat) - } - async function fetchsubCategory(subcat){ - let pro=[]; - pro = await fetchResult("productsubcategory",subcat) + console.log("product", productData) + console.log("casga", cat) + } + async function fetchsubCategory(subcat) { + let pro = []; + pro = await fetchResult("productsubcategory", subcat) setproductData(pro) setloading(false); - console.log("product",productData) - console.log("casga",subcat) - } + console.log("product", productData) + console.log("casga", subcat) + } const params = useParams(); - console.log("paramsslug",params.slug); - console.log("paramssubslug",params.subslug); + console.log("paramsslug", params.slug); + console.log("paramssubslug", params.subslug); useEffect(() => { // Fetch single product here - if(params.subslug === undefined || params.subslug==='All') + if (params.subslug === undefined || params.subslug === 'All') fetchCategory(params.slug) else fetchsubCategory(params.subslug) - }, [params.slug,params.subslug]); - const updatewish = async (id,wish) => { - let item=productData; - console.log("wishid",id); - console.log("wishstatus",wish) - let wishlistproduct=[]; - if(wish){ - wishlistproduct = await fetchResult("removefromwishlist",id) - console.log("wishlistproduct",wishlistproduct) - if(wishlistproduct.description.includes("doesn't")){ - toast("Already removed from Wishlist!",{ - style:{backgroundColor:`${LightShade}`,color:'white',width:'60%'} + }, [params.slug, params.subslug]); + const updatewish = async (id, wish) => { + let item = productData; + console.log("wishid", id); + console.log("wishstatus", wish) + let wishlistproduct = []; + if (wish) { + wishlistproduct = await fetchResult("removefromwishlist", id) + console.log("wishlistproduct", wishlistproduct) + if (wishlistproduct.description.includes("doesn't")) { + toast("Already removed from Wishlist!", { + style: { backgroundColor: `${LightShade}`, color: 'white', width: '60%' } }); } - else if(wishlistproduct.description.includes("successfully")){ - toast("Removed from Wishlist!",{ - style:{backgroundColor:'plum',color:'white',width:'50%'} + else if (wishlistproduct.description.includes("successfully")) { + toast("Removed from Wishlist!", { + style: { backgroundColor: 'plum', color: 'white', width: '50%' } }); - let a=item.find(e => e.id === id) + let a = item.find(e => e.id === id) a.wishlist = !a.wishlist; - console.log("uytdfgh",item) + console.log("uytdfgh", item) setproductData([...item]) } - else{ - toast.error("Error in Removing from Wishlist",{ - style:{backgroundColor:'plum',color:'white',width:'50%'} + else { + toast.error("Error in Removing from Wishlist", { + style: { backgroundColor: 'plum', color: 'white', width: '50%' } }); } } - else{ - wishlistproduct = await fetchResult("addtowishlist",id) - console.log("wishlistproduct",wishlistproduct) - if(wishlistproduct.description.includes("Already")){ - toast("Already in Wishlist!",{ - style:{backgroundColor:`${LightShade}`,color:'white',width:'60%'} + else { + wishlistproduct = await fetchResult("addtowishlist", id) + console.log("wishlistproduct", wishlistproduct) + if (wishlistproduct.description.includes("Already")) { + toast("Already in Wishlist!", { + style: { backgroundColor: `${LightShade}`, color: 'white', width: '60%' } }); } - else if(wishlistproduct.description.includes("created")){ - toast("Added To Wishlist!",{ - style:{backgroundColor:'plum',color:'white',width:'50%'} + else if (wishlistproduct.description.includes("created")) { + toast("Added To Wishlist!", { + style: { backgroundColor: 'plum', color: 'white', width: '50%' } }); - let a=item.find(e => e.id === id) + let a = item.find(e => e.id === id) a.wishlist = !a.wishlist; - console.log("uytdfgh",item) + console.log("uytdfgh", item) setproductData([...item]) } - else{ - toast.error("Error in Adding to Wishlist",{ - style:{backgroundColor:'plum',color:'white',width:'50%'} + else { + toast.error("Error in Adding to Wishlist", { + style: { backgroundColor: 'plum', color: 'white', width: '50%' } }); } } - + } const ShopbyPrice = () => ( @@ -268,68 +268,68 @@ const Card1 = () => { ); return ( <> - - {loading ?
: - -
- {productData.length > 0 && - productData.map((item,id) => ( - - NEW - - - -
- - {item.name} - - - {item.description} - - - ₹{item.buyingPrice} - ₹{item.originalPrice} - {item.discount === 0 ? : item.discount+'%OFF'} - updatewish(item.id,item.wishlist)}> - - {item.wishlist ? - - : - } - - - -
- - ))} - -

Shop by Price

- - - {/* {listItems2} */} - -

Shop by Size

- - - {/* {listItems3} */} -
- - - } + + {loading ?
: + +
+ {productData.length > 0 && + productData.map((item, id) => ( + + NEW + + + +
+ + {item.name} + + + {item.description} + + + ₹{item.buyingPrice} + ₹{item.originalPrice} + {item.discount === 0 ? : item.discount + '%OFF'} + updatewish(item.id, item.wishlist)}> + + {item.wishlist ? + + : + } + + + +
+ + ))} + +

Shop by Price

+ + + {/* {listItems2} */} + +

Shop by Size

+ + + {/* {listItems3} */} +
+ + + } ); - }; +}; export default Card1; diff --git a/src/components/pages/Category/Components/viewproduct.jsx b/src/components/pages/Category/Components/viewproduct.jsx index 9d21a88..6106a4e 100644 --- a/src/components/pages/Category/Components/viewproduct.jsx +++ b/src/components/pages/Category/Components/viewproduct.jsx @@ -1,48 +1,48 @@ -import React, {useState,useEffect} from 'react'; -import {FaArrowCircleUp} from 'react-icons/fa'; +import React, { useState, useEffect } from 'react'; +import { FaArrowCircleUp } from 'react-icons/fa'; import Card2 from "../../../utils/layout/productCard" // import SidebarNav from "./sidebarnav" -import {TopButton} from "../../../../styles/pages/category-styles" +import { TopButton } from "../../../../styles/pages/category-styles" import { useParams } from "react-router-dom"; import { fetchResult } from '../../../../services/api/loaded-services'; const Products = () => { - const [visible, setVisible] = useState(false) - const [data, setData]= useState({}) - const toggleVisible = () => { - const scrolled = document.documentElement.scrollTop; - if (scrolled > 100){ - setVisible(true) - } - else if (scrolled <= 100){ - setVisible(false) - } - }; - - const scrollToTop = () =>{ - window.scrollTo({ - top: 0, - behavior: 'smooth' - }); + const [visible, setVisible] = useState(false) + const [data, setData] = useState({}) + const toggleVisible = () => { + const scrolled = document.documentElement.scrollTop; + if (scrolled > 100) { + setVisible(true) + } + else if (scrolled <= 100) { + setVisible(false) + } + }; + + const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); }; const params = useParams(); useEffect(() => { - console.log("proparams",params.id); + console.log("proparams", params.id); async function fetchdata() { - let res = await fetchResult("singleproduct",params.id) - setData(res); - console.log("res",res) + let res = await fetchResult("singleproduct", params.id) + setData(res); + console.log("res", res) } fetchdata(); }, []) - window.addEventListener('scroll', toggleVisible); - return (
- {/* */} - - - - -
); + window.addEventListener('scroll', toggleVisible); + return (
+ {/* */} + + + + +
); } - + export default Products; \ No newline at end of file diff --git a/src/components/pages/offer-page/components/Layout.jsx b/src/components/pages/offer-page/components/Layout.jsx index 33827d0..27e8841 100644 --- a/src/components/pages/offer-page/components/Layout.jsx +++ b/src/components/pages/offer-page/components/Layout.jsx @@ -4,11 +4,16 @@ import Loading from "../../../utils/loader"; import { Link, useParams } from "react-router-dom"; import { TiMediaPlayOutline } from "react-icons/ti"; import { Container, Row } from "react-bootstrap"; -import { Text } from "../../../../styles/widgets/widgets"; +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 } from "../../../../styles/pages/offer-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 { retriveDetails } from "../../../../services/storage/details"; + const Layout = () => { let history = useHistory(); @@ -39,10 +44,42 @@ const Layout = () => { setSaleProducts(home.offers[index]); } getProducts(); - }, []); + console.log("sale", saleProducts) + }, [saleProducts]); + const AddWishlist = async (pid, index) => { + 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) + } + } + + 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 ( <> + {saleProducts ? ( <> @@ -50,7 +87,7 @@ const Layout = () => { - {saleProducts.values.map((item) => ( + {saleProducts.values.map((item, i) => ( { data-bs-placement="right" title={item.name} > - history.push(`/products/${item.id}`)} - /> + + history.push(`/products/${item.id}`)} + /> + + { + !item.wishlist ? + + : + + + } + + + { const [item, setItem] = useState(["initial"]) + const [visible, setVisible] = useState(true) + const [page, setPage] = useState(2) let history = useHistory() useEffect(() => { fetchAll() + setVisible(false) }, []) - useEffect(() => { - setItem(item) - }, [item]) - async function fetchAll() { let user = await retriveDetails() let res = await ApiPostService(process.env.REACT_APP_WISHLIST + "/" + user.id + "/" + 1 + "/") setItem(res.data) } + async function DeleteWishList(i, id) { + let user = await retriveDetails() + await ApiPostService(process.env.REACT_APP_REMOVE_WISHLIST_URL + "/" + user.id + "/" + id + "/") + let newItem = [...item] + newItem.splice(i, 1) + setItem(newItem) + toast("removed successfully", { style: { background: "#F1797B", textAlign: 'center', color: "#ffffff" } }) + } return (
@@ -43,63 +51,69 @@ const WishList = () => {
-
My Wishlist ({item.length})
+
My Wishlist + ({item.length}) +
+ { + visible && + + }
{item.length !== 0 && item[0] !== "initial" && - - - { - item.map((product, i) => ( + <> + + + { + item.map((product, i) => ( + + + + + + + +

{product.name}

+ + ₹{product.buyingPrice} + ₹{product.originalPrice} + + { + product.unitInStock > 0 ? +

In stock

+ : +

Out of stock

+ } + + + + + DeleteWishList(i, product.id)} /> + + - - - - - - -

{product.name}

- - ₹{product.buyingPrice} - ₹{product.originalPrice} - - { - product.unitInStock > 0 ? -

In stock

- : -

Out of stock

- } - - - - - { - let user = await retriveDetails() - await ApiPostService(process.env.REACT_APP_REMOVE_WISHLIST_URL + "/" + user.id + "/" + product.id + "/") - let newItem = [...item] - newItem.splice(i, 1) - setItem(newItem) - toast("removed successfully", { - style: { background: "#F1797B", textAlign: 'center', color: "#ffffff" } - }) - }} /> - - + + + )) + } + + - - - )) - } - - +
+ +
+ }{ item.length === 0 && item[0] !== "initial" &&
diff --git a/src/components/utils/footer/index.jsx b/src/components/utils/footer/index.jsx index 0567e8f..1d94a37 100644 --- a/src/components/utils/footer/index.jsx +++ b/src/components/utils/footer/index.jsx @@ -60,7 +60,7 @@ const Footer = () => { Partnership @@ -68,7 +68,7 @@ const Footer = () => { Website @@ -76,7 +76,7 @@ const Footer = () => { Social Media @@ -84,7 +84,7 @@ const Footer = () => { Branding @@ -96,8 +96,7 @@ const Footer = () => { About @@ -105,7 +104,7 @@ const Footer = () => { Our project @@ -113,7 +112,7 @@ const Footer = () => { Career @@ -125,7 +124,7 @@ const Footer = () => { Support @@ -133,7 +132,7 @@ const Footer = () => { Support Request @@ -141,7 +140,7 @@ const Footer = () => { Contact diff --git a/src/styles/pages/offer-page.js b/src/styles/pages/offer-page.js index c8424e9..f3a38d2 100644 --- a/src/styles/pages/offer-page.js +++ b/src/styles/pages/offer-page.js @@ -1,11 +1,28 @@ import { Col } from "react-bootstrap"; import styled from "styled-components"; +export const Overlay = styled.div` + position: absolute; + bottom: 0; + background: rgb(0, 0, 0); + background: rgba(255, 255, 255, 255); + color: #f1f1f1; + width: 100%; + transition: .5s ease; + opacity:0; + color: white; + font-size: 20px; + padding: 5px; + text-align: center; + transition: .5s ease; +`; + export const Column = styled(Col)` margin-bottom: 3%; margin-top: 3%; margin-left: 2%; margin-right: 1%; + position: relative; @media screen and (max-width: 450px) { margin-bottom: 1%; margin-top: 1%; @@ -13,3 +30,13 @@ export const Column = styled(Col)` margin-right: 0; } `; + +export const ImgOverlay = styled.div` + position: relative; + :hover{ + opacity:1; + ${Overlay}{ + opacity:1; + } + } +`