Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@danial117
danial117 committed Oct 19, 2024
1 parent 3653aeb commit bbbe82b
Show file tree
Hide file tree
Showing 10 changed files with 170 additions and 83 deletions.
Binary file added src/assets/brands/Klaire-labs.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/brands/Pure_Encapsulations.jfif
View file
Binary file not shown.
Binary file added src/assets/brands/apex_energetics.jfif
View file
Binary file not shown.
Binary file added src/assets/brands/apex_energetics.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/brands/designs-for-health.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/brands/microbiome-labs.webp
View file
Binary file not shown.
51 changes: 29 additions & 22 deletions src/components/BrandsComponent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,28 @@ const Pagination = ({totalPages , currentPage, onPageChange}) => {




const brands = [
{
name: 'Pure Encapsulations',
image: require('../assets/brands/Pure_Encapsulations.jfif'), // Adjust the path as needed
// Add any additional properties here
},
{
name: 'Designs for Health',
image: require('../assets/brands/designs-for-health.png'), // Replace with an actual image path
// Add any additional properties here
},
{
name: 'Apex Energetics, Inc',
image: require('../assets/brands/apex_energetics.png'), // Replace with an actual image path
// Add any additional properties here
},
{
name: 'Microbiome Labs',
image: require('../assets/brands/microbiome-labs.webp'), // Replace with an actual image path
// Add any additional properties here
}
];



Expand All @@ -79,29 +100,13 @@ const Pagination = ({totalPages , currentPage, onPageChange}) => {

const BrandComponent=()=>{

const [brands, setBrands] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);






const fetchBrands = (page = 1) => {
fetch(`${process.env.REACT_APP_API_URL}/brands?page=${page}`)
.then((response) => response.json())
.then((data) => {
setBrands(data.brands); // Assuming the API response contains a 'brands' array
setTotalPages(data.totalPages); // Assuming the API response contains a 'totalPages' property
});
};

useEffect(() => {
fetchBrands(currentPage);
}, [currentPage]); // Fetch brands whenever the current page changes

const handlePageChange = (pageNumber) => {
setCurrentPage(pageNumber);
};



Expand All @@ -116,8 +121,10 @@ const BrandComponent=()=>{
return(

<div onClick={()=>{window.location.href=`/brand/${data.name}`}} className='border-2 cursor-pointer border-gray-500' key={index}>
<img className="w-[500px] h-[175px] mx-auto my-auto" src={`${process.env.REACT_APP_API_URL}/assets/brands/${data.brandLogoPath}`} alt={data.name} />
<img className="w-[500px] xs:max-sm:h-[145px] h-[175px] mx-auto my-auto" src={data.image} alt={data.name} />
</div>


)
})}

Expand All @@ -128,14 +135,14 @@ const BrandComponent=()=>{



<div className='my-24 w-full'>
{/* <div className='my-24 w-full'>
<Pagination
totalPages={totalPages}
currentPage={currentPage}
onPageChange={handlePageChange}
/>
</div>
</div> */}


</div>
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 @@ -69,7 +69,7 @@ const SearchComponent = ({ isMobile }) => {
})


console.log(isLoadingSearchProducts)




Expand Down
198 changes: 139 additions & 59 deletions src/scenes/BrandPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { useContext } from "react"
import { CartContext } from "../cartContext/cartContext"
import Skeleton from "../skeleton/skeleton"
import { useQuery } from "@tanstack/react-query"
import { Inventory2Rounded,SearchRounded } from "@mui/icons-material"

const RenderSkeletons = () => {
return [1, 2, 3, 4, 5, 6].map((index) => (
Expand Down Expand Up @@ -43,30 +44,29 @@ const BrandPage = () => {
const cartItemIds = cartItems.map(item => item._id);
const [products,setProducts]=useState([])
const { cart, toggleCart } = useContext(CartContext);


const [search,setSearch]=useState('')
const brand=encodeURIComponent(brandName.replace('/','-'))





const FetchBrands=async()=>{
const brand=encodeURIComponent(brandName.replace('/','-'))
await fetch(`${process.env.REACT_APP_API_URL}/brands/name/${brand}?page=${page}&limit=6`,{

await fetch(`${process.env.REACT_APP_API_URL}/brands/name/${brand}?page=${page}&limit=16`,{
method:'GET'
}).then((response)=>response.json()).then((result)=>{products.push(...result); setPage(page+1)})






}












const { isLoading,refetch } = useQuery({
Expand All @@ -75,69 +75,146 @@ const BrandPage = () => {
refetchOnWindowFocus: false
})






const SearchProductByName=async()=>{

if(search)
{


await fetch(`${process.env.REACT_APP_API_URL}/products?productName=${search}&brand=${brand}&limit=16`,{
method:'GET'
}).then((response)=>response.json()).then((result)=>{setProducts(result); })
}else{



await fetch(`${process.env.REACT_APP_API_URL}/brands/name/${brand}?page=1&limit=16`,{
method:'GET'
}).then((response)=>response.json()).then((result)=>{setProducts(result); setPage(page+1)})

}
}


const { isLoading:isLoadingSearchProducts,refetch:refetchSearch } = useQuery({
queryKey: ['brand'],
queryFn: SearchProductByName,
refetchOnWindowFocus: false,
enabled: false
})




return (
<>
<NavBar />



<div className="w-full h-auto bg-gray-200">
<div className="container w-full flex flex-col mx-auto p-4 pb-24">
<p className="font-Abel py-6 text-[1.7rem]">Results:</p>
<div className="grid w-full grid-cols-1 md:grid-cols-3 gap-6">
{

typeof products === 'object' && products.map((data, index) => {
const carted = cartItemIds.includes(data._id);

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 ?? '404.jpeg'}`}
alt={data.name}
/>

<div className="flex w-[40%] xs:max-lg:w-[100%] mx-auto flex-row">
<div className="w-full flex flex-row xs:max-sm:py-2 py-4 bg-white">

<div className="mx-2 xs:max-sm:mx-[4px] my-auto text-emerald-600">
<Inventory2Rounded />
</div>
<input
placeholder="Search your products"
className="w-[70%] xs:max-sm:w-[70%] ml-2 text-md focus:outline-none"
type="text"
name="product"
value={search}
onChange={(e)=>{setSearch(e.target.value)}}

/>
</div>


<div onClick={refetchSearch} className="py-2 px-6 xs:max-sm:px-2 text-white bg-emerald-500">
<SearchRounded onClick={SearchProductByName} style={{ fontSize: 40, cursor: 'pointer' }} />
</div>
<div className="m-2 relative h-[180px] flex flex-col">
<p className="font-Abel text-[12px] xs:max-sm:text-[10px] font-bold text-emerald-400 my-[2px]">{data?.brand}</p>
<p
onClick={() => { navigate(`/productPage/${data._id}`); }}
className="font-Lexend cursor-pointer xs:max-sm:text-[10px] text-gray-800"
>
{data.name}
</p>
<p className="font-Poppins xs:max-sm:text-[14px] text-gray-600">{data?.options[0].option}</p>
<div className="grid w-full absolute bottom-2 py-2 grid-cols-2 xs:max-sm:grid-cols-1 xs:max-sm:gap-y-2 gap-x-2">
<div className="bg-gray-200 xs:max-sm:py-[2px] sm:max-md:py-[2px] font-Abel py-2 xs:max-sm:text-[16px] text-[20px] rounded-md text-center">
${data.options[0].price}
</div>




<p className="font-Abel py-6 text-[1.7rem]">Results:</p>
<div className="grid w-full grid-cols-1 md:grid-cols-3 gap-6">

{!isLoadingSearchProducts ? (
Array.isArray(products) && products.map((data, index) => {
const carted = cartItemIds.includes(data._id);

return (
<div key={index} className="flex gap-y-2 border-2 bg-white rounded-md border-emerald-500 flex-col">
{/* Product Image */}
<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-[200px] mx-auto"
src={`${process.env.REACT_APP_API_URL}/assets/products/md/${data?.productImage?.medium ?? '404.jpeg'}`}
alt={data.name}
/>
</div>
{carted ? (
<div
onClick={toggleCart}
style={{ userSelect: 'none' }}
className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300"
>
View in cart
</div>
) : (
<div
onClick={() => dispatch(addItemToCartAsync({ product: { ...data, option:{id: data.options[0].id,price:data.options[0].price}}}))}
className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300"

{/* Product Details */}
<div className="m-2 relative h-[180px] flex flex-col">
<p className="font-Abel text-[12px] xs:max-sm:text-[10px] font-bold text-emerald-400 my-[2px]">
{data?.brand}
</p>
<p
onClick={() => navigate(`/productPage/${data._id}`)}
className="font-Lexend cursor-pointer xs:max-sm:text-[10px] text-gray-800"
>
Add to cart
{data.name}
</p>
<p className="font-Poppins xs:max-sm:text-[14px] text-gray-600">
{data?.options[0]?.option}
</p>
<div className="grid w-full absolute bottom-2 py-2 grid-cols-2 xs:max-sm:grid-cols-1 xs:max-sm:gap-y-2 gap-x-2">
<div className="bg-gray-200 xs:max-sm:py-[2px] sm:max-md:py-[2px] font-Abel py-2 xs:max-sm:text-[16px] text-[20px] rounded-md text-center">
${data.options[0].price}
</div>
{carted ? (
<div
onClick={toggleCart}
style={{ userSelect: 'none' }}
className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300"
>
View in cart
</div>
) : (
<div
onClick={() => dispatch(addItemToCartAsync({ product: { ...data, option: { id: data.options[0].id, price: data.options[0].price } } }))}
className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300"
>
Add to cart
</div>
)}
</div>
)}
</div>
</div>
</div>
</div>
);
})
}
);
})
) : (
<RenderSkeletons />
)}




{isLoading &&
{(isLoading || isLoadingSearchProducts) &&
<RenderSkeletons /> // Capitalized to make it a valid React component
}

Expand All @@ -146,6 +223,9 @@ const BrandPage = () => {
<p className="font-Abel text-center text-emerald-500">Show all Products</p>
</div>

</div>


</div>

<Footer />
Expand Down
2 changes: 1 addition & 1 deletion src/scenes/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const Footer=()=>{
<p className="text-white font-Abel">{cmsData.FooterContent?.email}</p>

</div>
vcfcvvc <p className="my-2 text-white -mb-2 text-lg font-Lexend">Follow Us</p>
<p className="my-2 text-white -mb-2 text-lg font-Lexend">Follow Us</p>
<div className="flex flex-row gap-x-2">
<a className="cursor-pointer" href={cmsData?.FooterContent?.facebookLink} target="_blank" rel="noopener noreferrer">
<Facebook />
Expand Down

0 comments on commit bbbe82b

Please sign in to comment.