Skip to content

Commit

Permalink
Merge pull request #50 from danial117/client_dev_34
Browse files Browse the repository at this point in the history 
commited
  • Loading branch information
@danial117
danial117 authored Sep 23, 2024
2 parents e43b387 + 5307fab commit c6085e4
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 28 deletions.
21 changes: 20 additions & 1 deletion src/cartContext/cartContext.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,29 @@
import React, { createContext, useState } from 'react';
import React, { createContext, useState,useEffect } from 'react';
import { useMediaQuery } from '@mui/material';
export const CartContext = createContext();

export const CartProvider = ({ children }) => {
const [cart, setCart] = useState(false);
const isMobile = useMediaQuery('(min-width:768px)');
useEffect(() => {
const handleResize = () => {
if (isMobile) {
const root = document.getElementById('root');
root.style.position = 'static';
}
};

window.addEventListener('resize', handleResize);

// Clean up the event listener on component unmount
return () => {
window.removeEventListener('resize', handleResize);
};
}, [isMobile]);


const toggleCart = () => {


setCart((prevCart) => !prevCart);
if (!isMobile) {
Expand All @@ -15,6 +33,7 @@ export const CartProvider = ({ children }) => {
};

return (

<CartContext.Provider value={{ cart, toggleCart }}>
{children}
</CartContext.Provider>
Expand Down
2 changes: 1 addition & 1 deletion src/components/MainPageProducts.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ const MainPageProducts=()=>{
return (
<div key={index} className="flex gap-y-2 border-2 bg-white rounded-md border-emerald-500 flex-col">
<div onClick={() => navigate(`/productPage/${data._id}`)} className="w-[90%] cursor-pointer sm:max-md:w-[100%] xs:max-sm:w-[100%] mt-6 border-b-2 pb-2 border-gray-200 mx-auto">
<img className="w-[50%] h-[100%] mx-auto my-auto" src={`${process.env.REACT_APP_API_URL}/assets/products/md/${data.productImage.medium}`} alt="Product" />
<img className="w-[100px] h-[175px] mx-auto my-auto" src={`${process.env.REACT_APP_API_URL}/assets/products/md/${data.productImage.medium}`} alt="Product" />
</div>
<div className="m-2 relative h-[180px] flex flex-col">
<p onClick={() => navigate(`/productPage/${data._id}`)} className="cursor-pointer font-Abel text-[12px] xs:max-sm:text-[10px] font-bold text-emerald-400 my-[2px]">{data.brand}</p>
Expand Down
2 changes: 1 addition & 1 deletion src/components/MainProductCarousal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ const MainProductCarousal=()=>{
<div key={index} className="pl-4 xs:max-sm:pl-[2px]">
<div className="flex gap-y-2 h-[350px] bg-white rounded-md flex-col">
<div onClick={()=>{window.location.href=`/productPage/${data._id}`}} className="cursor-pointer w-[90%] h-[50%] mt-6 pb-2 border-gray-200 mx-auto">
<img className="w-[50%] h-[100%] mx-auto my-auto" src={`${process.env.REACT_APP_API_URL}/assets/products/md/${data.productImage.medium}`}/>
<img className="w-[100px] h-[175px] mx-auto my-auto" src={`${process.env.REACT_APP_API_URL}/assets/products/md/${data.productImage.medium}`}/>

</div>
<div className="m-2 flex flex-col gap-y-auto h-full justify-between">
Expand Down
2 changes: 1 addition & 1 deletion src/components/SearchComponent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ const SearchComponent = ({ isMobile }) => {
<div onClick={() => navigate(`/productPage/${data._id}`)} key={index} className="w-full cursor-pointer border-b-2 border-gray-400">
<div className="flex py-2 justify-between items-center w-[90%] gap-x-2 mx-auto">
<div className='flex gap-x-2 items-center'>
<img className="w-[40px] h-auto" src={`${process.env.REACT_APP_API_URL}/assets/products/sm/${data.productImage.small}`} alt="Product" />
<img className="w-[40px] h-[50px]" src={`${process.env.REACT_APP_API_URL}/assets/products/sm/${data.productImage.small}`} alt="Product" />
<TruncateText
text={data.name}
maxLength={40}
Expand Down
2 changes: 1 addition & 1 deletion src/scenes/HomePage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@ const HomePage=()=>{

<div className="w-[5%] mx-auto bg-emerald-500 my-4 h-[3px]"></div>

<p className="text-center w-[50%] xs:max-md:w-[80%] mx-auto font-Livvic text-xs">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae deserunt adipisci aliquid? Totam minima officia, molestias magnam facere iure laborum.</p>
<p className="text-center w-[60%] xs:max-md:w-[80%] mx-auto font-Livvic text-sm">Start by searching for the item you want in the online store's search bar. Once you've found it, add it to your cart and follow the simple checkout process to finalize your purchase.</p>

<div className="grid grid-cols-3 xs:max-md:grid-cols-1 xs:max-md:gap-y-2 xs:max-lg:w-[90%] my-6 gap-x-6 w-[80%] mx-auto">

Expand Down
78 changes: 59 additions & 19 deletions src/scenes/NavBar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

import { KeyboardArrowDownRounded,ShoppingCartRounded,MenuRounded,CloseRounded,AccountCircle, DisplaySettings } from "@mui/icons-material";
import { HomeRounded,ArticleRounded,InfoRounded,ContactsRounded,CategoryRounded,KeyboardArrowDownRounded,ShoppingCartRounded,MenuRounded,CloseRounded,AccountCircle, DisplaySettings } from "@mui/icons-material";
import { useEffect, useState,useContext } from "react";
import Cart from "../widget/Cart";
import { useMediaQuery } from "@mui/material";
Expand All @@ -24,8 +24,7 @@ import { useLocation, useNavigate } from "react-router-dom";

const NavBar=()=>{

const isMobile = useMediaQuery('(min-width:768px)');
const navigate=useNavigate()
const isDesktop = useMediaQuery('(min-width:768px)');
const isMobileCategories = useMediaQuery('(min-width:1024px)');
const { cart, toggleCart } = useContext(CartContext);
const cartItems=useSelector((state)=>state.cartItems);
Expand Down Expand Up @@ -68,13 +67,52 @@ const NavBar=()=>{
setAnchorEl(null);
};

const ToggleMenuSizeCheck = () => window.matchMedia('(min-width: 769px)').matches;



useEffect(() => {
const root = document.getElementById('root');
const overlay = document.createElement('div');
overlay.id = 'overlay';
overlay.style.position = 'fixed';
overlay.style.top = 0;
overlay.style.left = 0;
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
overlay.style.zIndex = 999;
overlay.style.display = 'none'; // Initially hidden


// Append overlay to root
root.appendChild(overlay);

const updateOverlay = () => {
if (toggleMenu) {
overlay.style.display = 'block'; // Show overlay when menu is toggled
} else {
overlay.style.display = 'none'; // Hide overlay when menu is closed
}

// Close the menu if the window size is greater than 769px
if (ToggleMenuSizeCheck() && toggleMenu) {
setToggleMenu(false);
}
};

updateOverlay(); // Initial call

// Listen for resize events
window.addEventListener('resize', updateOverlay);

// Cleanup effect
return () => {
root.removeChild(overlay);
window.removeEventListener('resize', updateOverlay);
};
}, [toggleMenu]);


useEffect(()=>{

},[user])



Expand All @@ -89,7 +127,7 @@ const NavBar=()=>{
</div>
{

isMobile && <div className="flex text-center my-auto justify-center className='font-Abel text-lg' mx-auto gap-x-16 md:max-lg:gap-x-4 basis-[70%] md:max-lg:basis-[80%] mx-auto flex-row">
isDesktop && <div className="flex text-center my-auto justify-center className='font-Abel text-lg' mx-auto gap-x-16 md:max-lg:gap-x-4 basis-[70%] md:max-lg:basis-[80%] mx-auto flex-row">
<p onClick={()=>{window.location.href='/'}} className='font-Lexend cursor-pointer md:max-lg:text-[14px] text-lg'>Home <span><KeyboardArrowDownRounded/></span></p>
<p onClick={()=>{window.location.href='/about'}} className='font-Lexend cursor-pointer md:max-lg:text-[14px] text-lg'>About <span><KeyboardArrowDownRounded/></span></p>
<p onClick={()=>{window.location.href='/news'}} className='font-Lexend cursor-pointer md:max-lg:text-[14px] text-lg'>News <span><KeyboardArrowDownRounded/></span></p>
Expand All @@ -99,7 +137,7 @@ const NavBar=()=>{

}

{isMobile && <div className="basis-[20%] md:max-lg:basis-[30%] md:max-lg:justify-end justify-end md:max-lg:gap-x-6 w-full gap-x-8 flex flex-row py-2 ml-auto mr-[4px]">
{isDesktop && <div className="basis-[20%] md:max-lg:basis-[30%] md:max-lg:justify-end justify-end md:max-lg:gap-x-6 w-full gap-x-8 flex flex-row py-2 ml-auto mr-[4px]">

<div onClick={toggleCart} className="relative cursor-pointer my-auto">
<div className='absolute -top-[2px] right-0'>
Expand Down Expand Up @@ -152,7 +190,7 @@ const NavBar=()=>{
}


{ !isMobile &&
{ !isDesktop &&
<div className="my-auto">
<div className="flex mr-2 flex-row gap-x-4">

Expand Down Expand Up @@ -216,17 +254,19 @@ const NavBar=()=>{

{ toggleMenu &&

<div className="w-[30%] h-[100vh] right-0 z-[1000] fixed bg-gray-200">
<div className="absolute text-emerald-500 right-[3%] top-[3%]">
<div className="w-[50%] h-[100vh] right-0 z-[1000] fixed bg-white">
<div className="absolute text-black right-[3%] top-[3%]">
<CloseRounded onClick={()=>{setToggleMenu(!toggleMenu)}} style={{fontSize:'40px',cursor:'pointer'}}/>
</div>
<div className="flex w-[80%] text-white mx-auto gap-y-6 mt-24 text-black flex-col ">
<p onClick={()=>{window.location.href='/'}} className="font-Abel border-2 bg-emerald-500 cursor-pointer text-center p-2 border-emerald-500">Home</p>
<p onClick={()=>{window.location.href='/about'}} className="font-Abel border-2 bg-emerald-500 cursor-pointer text-center p-2 border-emerald-500">About</p>
<p onClick={()=>{window.location.href='/createAccount'}} className="font-Abel border-2 bg-emerald-500 cursor-pointer text-center p-2 border-emerald-500">Sign Up</p>
<p onClick={()=>{window.location.href='/news'}} className="font-Abel border-2 bg-emerald-500 cursor-pointer text-center p-2 border-emerald-500">News</p>
<p onClick={()=>{window.location.href='/contact'}} className="font-Abel border-2 bg-emerald-500 cursor-pointer text-center p-2 border-emerald-500">Contact</p>
{!isMobileCategories && <p onClick={()=>{window.location.href='/categories'}} className="font-Abel border-2 bg-emerald-500 cursor-pointer text-center p-2 border-emerald-500">Categories</p>}
<div className="flex w-[80%] text-white mx-auto gap-y-8 mt-24 text-black flex-col ">
<div onClick={()=>{window.location.href='/'}} className="flex cursor-pointer flex-row gap-x-4"> <HomeRounded style={{color:'black',fontSize:32}} /> <p className="font-Abel text-[1.4rem] font-bold text-black text-center ">Home</p> </div>
<div onClick={()=>{window.location.href='/about'}} className="flex cursor-pointer flex-row gap-x-4"> <InfoRounded style={{color:'black',fontSize:32}} /> <p className="font-Abel text-[1.4rem] font-bold text-black text-center ">About</p> </div>
<div onClick={()=>{window.location.href='/createAccount'}} className="flex cursor-pointer flex-row gap-x-4"> <HomeRounded style={{color:'black',fontSize:32}} /> <p className="font-Abel text-[1.4rem] font-bold text-black text-center ">Sign Up</p> </div>
<div onClick={()=>{window.location.href='/news'}} className="flex cursor-pointer flex-row gap-x-4"> <ArticleRounded style={{color:'black',fontSize:32}} /> <p className="font-Abel text-[1.4rem] font-bold text-black text-center ">News</p> </div>
<div onClick={()=>{window.location.href='/contact'}} className="flex cursor-pointer flex-row gap-x-4"> <ContactsRounded style={{color:'black',fontSize:32}} /> <p className="font-Abel text-[1.4rem] font-bold text-black text-center ">Contact</p> </div>
{!isMobileCategories && <div onClick={()=>{window.location.href='/categories'}} className="flex flex-row cursor-pointer gap-x-4"> <CategoryRounded style={{color:'black',fontSize:32}} /> <p className="font-Abel text-[1.4rem] font-bold text-black text-center ">Categories</p> </div> }



</div>

Expand Down
10 changes: 6 additions & 4 deletions src/widget/SimiliarProducts.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ const SimiliarProducts=({productName,category,brand})=>{
fetch(`${process.env.REACT_APP_API_URL}/products?name=${productName}&category=${category}&brand=${brand}&limit=6`,{
method:'GET'
}).then((response)=>response.json()).then((result)=>{setProducts(result)})



},[])

},[productName])


return(


Expand Down Expand Up @@ -50,12 +50,14 @@ const SimiliarProducts=({productName,category,brand})=>{

<div key={index} onClick={()=>navigate(`/productPage/${data._id}`)} className="flex cursor-pointer justify-between gap-y-2 border-2 bg-white rounded-md border-emerald-500 flex-col">
<div className=" w-[90%] mt-6 h-[150px] border-b-2 pb-2 border-gray-200 mx-auto">
<img className="w-[50%] h-[100%] mx-auto my-auto" src={`${process.env.REACT_APP_API_URL}/assets/products/md/${data.productImage.medium}`}/>
<img className="w-[100px] h-[140px] mx-auto my-auto" src={`${process.env.REACT_APP_API_URL}/assets/products/md/${data.productImage.medium}`}/>

</div>
<div className="m-2">
<p className="font-Abel text-[12px] font-bold text-emerald-400 my-[2px]">{data.brand}</p>



<TruncateText
text={data.name}
maxLength={30}
Expand Down

0 comments on commit c6085e4

Please sign in to comment.