Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

wishlist feature is added with toggle functionality #94

Merged
merged 2 commits into from
May 13, 2024
Merged

wishlist feature is added with toggle functionality #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3b14b89
wishlist feature is added with toggle functionality
dev-rsiva May 13, 2024
347699c
Merge branch 'main' into wishlist-feature
MAVRICK-1 May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
918 changes: 635 additions & 283 deletions src/App.css
View file
Open in desktop

Large diffs are not rendered by default.

43 changes: 34 additions & 9 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import NotFound from "./pages/NotFound";
import DetailsPage from "./pages/Details";
import axios from "axios";
import Cart from "./pages/cart";
import Wishlist from "./pages/wishList";
import SignIn from "./pages/SignIn";
import SignUp from "./pages/SignUp";
import Loader from "./assets/images/loading.gif";
Expand All @@ -38,6 +39,7 @@ function App() {
const [productData, setProductData] = useState([]);

const [cartItems, setCartItems] = useState([]);
const [wishlistItems, setWishlistItems] = useState([]);

const [isLoading, setIsloading] = useState(true);

Expand All @@ -50,17 +52,18 @@ function App() {
const [isLogin, setIsLogin] = useState();
const [isOpenFilters, setIsopenFilters] = useState(false);
const [data, setData] = useState([]);
const [cartCount,setCartCount] = useState(0)
const [cartCount, setCartCount] = useState(0);
const [wishlistCount, setWishlistCount] = useState(0);


useEffect(()=>{
fetchCartProducts()
},[isLogin])
useEffect(() => {
fetchCartProducts();
fetchWishlistProducts();
}, [isLogin]);

const fetchCartProducts = async () => {
try {
const cartRef = doc(db, 'carts', localStorage.getItem("uid"));
const productsCollectionRef = collection(cartRef, 'products');
const cartRef = doc(db, "carts", localStorage.getItem("uid"));
const productsCollectionRef = collection(cartRef, "products");
const querySnapshot = await getDocs(productsCollectionRef);
const products = [];
querySnapshot.forEach((doc) => {
Expand All @@ -69,10 +72,28 @@ function App() {
setCartItems(products);
setCartCount(products.length); // Set the product count
} catch (error) {
console.error('Error fetching cart products:', error);
console.error("Error fetching cart products:", error);
}
};

const fetchWishlistProducts = async () => {
console.log("fetchWishlistProducts");
try {
const wishlistRef = doc(db, "wishlists", localStorage.getItem("uid"));
const productsCollectionRef = collection(wishlistRef, "products");
const querySnapshot = await getDocs(productsCollectionRef);
console.log(querySnapshot);
const products = [];
querySnapshot.forEach((doc) => {
products.push({ id: doc.id, ...doc.data() });
});
console.log(products);
setWishlistItems(products);
setWishlistCount(products.length); // Set the product count
} catch (error) {
console.error("Error fetching wishlist products:", error);
}
};

useEffect(() => {
const fetchData = async () => {
Expand Down Expand Up @@ -210,7 +231,10 @@ function App() {
setIsopenNavigation,
cartCount,
setCartCount,
fetchCartProducts
wishlistCount,
setWishlistCount,
fetchCartProducts,
fetchWishlistProducts,
};

return data && data.productData ? (
Expand Down Expand Up @@ -247,6 +271,7 @@ function App() {
element={<DetailsPage data={data.productData} />}
/>
<Route exact={true} path="/cart" element={<Cart />} />
<Route exact={true} path="/wishlist" element={<Wishlist />} />

{/* sign in , signup Protection */}
{isLogin === null && (
Expand Down
102 changes: 76 additions & 26 deletions src/components/header/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,12 @@ const Header = (props) => {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const [isopenSearch, setOpenSearch] = useState(false);
const [isOpenNav, setIsOpenNav] = useState(false);
const {cartCount, setCartCount} = useContext(MyContext);
const { cartCount, setCartCount } = useContext(MyContext);
const { wishlistCount, setWishlistCount } = useContext(MyContext);

const headerRef = useRef();
const searchInput = useRef();
const [profile,setProfile] = useState("")
const [profile, setProfile] = useState("");

const context = useContext(MyContext);
const history = useNavigate();
Expand All @@ -67,9 +69,9 @@ const Header = (props) => {
getCountry("https://countriesnow.space/api/v0.1/countries/");
}, []);

useEffect(()=>{
setProfile(localStorage.getItem("userImage"))
},[context.isLogin])
useEffect(() => {
setProfile(localStorage.getItem("userImage"));
}, [context.isLogin]);
const getCountry = async (url) => {
try {
await axios.get(url).then((res) => {
Expand Down Expand Up @@ -101,7 +103,7 @@ const Header = (props) => {

const signOut = () => {
context.signOut();
localStorage.setItem("userImage","")
localStorage.setItem("userImage", "");
history("/");
};

Expand Down Expand Up @@ -162,7 +164,29 @@ const Header = (props) => {
<div
onClick={() => setisOpenAccDropDown(!isOpenAccDropDown)}
>
{profile!=""?<img src={profile} alt="" style={{width:"65%", height:"65%", borderRadius:"50%",marginLeft:"15%"}} />:<img src="https://cdn-icons-png.flaticon.com/512/5323/5323352.png" alt="" style={{width:"50px", height:"50px", borderRadius:"50%",marginLeft:"13%"}} />}
{profile != "" ? (
<img
src={profile}
alt=""
style={{
width: "65%",
height: "65%",
borderRadius: "50%",
marginLeft: "15%",
}}
/>
) : (
<img
src="https://cdn-icons-png.flaticon.com/512/5323/5323352.png"
alt=""
style={{
width: "50px",
height: "50px",
borderRadius: "50%",
marginLeft: "13%",
}}
/>
)}
</div>
)}
</div>
Expand Down Expand Up @@ -223,39 +247,44 @@ const Header = (props) => {
<ul className="list list-inline mb-0 headerTabs">
<li className="list-inline-item">
<span>
<Link to={"/wishlist"} style={{ textDecoration: "none" }}>
<Link
to={"/wishlist"}
style={{ textDecoration: "none" }}
>
{" "}
<img src={IconCompare} />
<span className="badge bg-success rounded-circle">
3
</span>
Compare
</Link>
<img src={IconCompare} />
<span className="badge bg-success rounded-circle">
3
</span>
Compare
</Link>
</span>
</li>
<li className="list-inline-item">
<span>
<Link to={"/wishlist"} style={{ textDecoration: "none" }}>
<Link
to={"/wishlist"}
style={{ textDecoration: "none" }}
>
{" "}
<img src={IconHeart} />
<span className="badge bg-success rounded-circle">
3
</span>
Wishlist
</Link>
<img src={IconHeart} />
<span className="badge bg-success rounded-circle">
{wishlistCount}
</span>
Wishlist
</Link>
</span>
</li>
<li className="list-inline-item">
<span>
<Link to={"/cart"} style={{ textDecoration: "none" }}>
<Link to={"/cart"} style={{ textDecoration: "none" }}>
{" "}
<img src={IconCart} />
<span className="badge bg-success rounded-circle">
{cartCount}
{cartCount}
</span>
Cart
</Link>

</span>
</li>

Expand All @@ -264,8 +293,29 @@ const Header = (props) => {
<span
onClick={() => setisOpenDropDown(!isOpenDropDown)}
>

{profile!=""?<img src={profile} alt="" style={{width:"65%", height:"65%", borderRadius:"50%",marginLeft:"18%"}} />:<img src="https://cdn-icons-png.flaticon.com/512/5323/5323352.png" alt="" style={{width:"50px", height:"50px", borderRadius:"50%",marginLeft:"18%"}} />}
{profile != "" ? (
<img
src={profile}
alt=""
style={{
width: "65%",
height: "65%",
borderRadius: "50%",
marginLeft: "18%",
}}
/>
) : (
<img
src="https://cdn-icons-png.flaticon.com/512/5323/5323352.png"
alt=""
style={{
width: "50px",
height: "50px",
borderRadius: "50%",
marginLeft: "18%",
}}
/>
)}
</span>

{isOpenDropDown !== false && (
Expand Down
Loading