Skip to content

Commit

Permalink
feat(single product page): work on responsive details
Browse files Browse the repository at this point in the history 
#31
  • Loading branch information
@KatiaGhezali
KatiaGhezali committed Nov 21, 2023
1 parent 9eca323 commit 7f628c6
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 59 deletions.
96 changes: 48 additions & 48 deletions src/components/ProductDetails/ProductDetails.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,54 +16,52 @@ const ProductDetails = ({ productId }) => {

const { currentUser } = useAuth();

useEffect(() => {
const fetchProductData = async () => {
try {
const productRef = doc(db, "products", productId);
const productDoc = await getDoc(productRef);

if (productDoc.exists()) {
setProductData({ ...productDoc.data(), id: productDoc.id });
setLoading(false);
} else {
console.log("No such product document!");
setLoading(false);
}
} catch (error) {
console.error("Error fetching product data:", error);
const fetchProductData = async () => {
try {
const productRef = doc(db, "products", productId);
const productDoc = await getDoc(productRef);

if (productDoc.exists()) {
setProductData({ ...productDoc.data(), id: productDoc.id });
setLoading(false);
} else {
console.log("No such product document!");
setLoading(false);
}
};

const fetchDataAndAddToCart = async () => {
await fetchProductData();

// Move fetchUserData inside the fetchDataAndAddToCart function
try {
if (productData && currentUser) {
const userRef = doc(
db,
"userinfo",
productData.currentUserUid
);
const userDoc = await getDoc(userRef);

if (userDoc.exists()) {
setUserData(userDoc.data());
} else {
console.log("No such user document!");
}
} catch (error) {
console.error("Error fetching product data:", error);
setLoading(false);
}
};

const fetchDataAndAddToCart = async () => {
await fetchProductData();

// Move fetchUserData inside the fetchDataAndAddToCart function
try {
if (productData && currentUser) {
const userRef = doc(db, "userinfo", productData.currentUserUid);
const userDoc = await getDoc(userRef);

if (userDoc.exists()) {
setUserData(userDoc.data());
} else {
console.log("No such user document!");
// Optionally set userData to a default value or handle accordingly
}
} catch (error) {
console.error("Error fetching user data:", error);
}
};
} catch (error) {
console.error("Error fetching user data:", error);
}
};

useEffect(() => {
if (productId) {
fetchDataAndAddToCart();
}
}, [productId, currentUser]);

console.log(productData);
const handleAddToCart = () => {
// Call addItemToCart with the entire product details
if (productData) {
Expand All @@ -77,14 +75,14 @@ const ProductDetails = ({ productId }) => {
return (
<div
style={{
margin: "180px 160px 0px 180px",
margin: "80px ",
// "@media (max-width: 768px)": {
// margin: "180px 80px 50px 100px", // Adjust these values for smaller screens
// },
}}
className='flex flex-col sm:gap-6 sm:flex-col md:flex-col md:justify-center lg:flex-row lg:justify-between'
>
<div className='grid grid-cols-3 md:flex lg:grid lg:grid-rows-3 w-full sm:w-full md:w-full lg:w-2/3 justify-between gap-4'>
<div className='p-12 grid grid-cols-3 md:flex lg:grid lg:grid-rows-3 w-full sm:w-full md:w-full lg:w-2/3 justify-between gap-4'>
<div className='col-span-3 row-span-1 md:grid-rows-2 items-center justify-center overflow-hidden w-full lg:h-80 md:w-[60%] lg:w-full bg-[#EEF2F4] border rounded-md border-[#979797]'>
<Image
className='object-cover w-full h-full rounded-md '
Expand Down Expand Up @@ -130,7 +128,7 @@ const ProductDetails = ({ productId }) => {

<div className='grid w-full sm:w-full md:w-full lg:w-1/2 text-[#585785]'>
{/* Product Details */}
<div className='col-span-4 md:col-span-2'>
<div className='pt-8 col-span-4 md:col-span-2'>
<h1 className='text-5xl font-bold text-[#7874F2] mb-4'>
{productData?.title}
</h1>
Expand Down Expand Up @@ -160,7 +158,7 @@ const ProductDetails = ({ productId }) => {
<div className='flex items-center'>
<button
onClick={handleAddToCart}
className='text-[#7874F2] mr-4 ml-4 border border-[#7874F2] rounded hover:text-[#F1F6FA] hover:bg-[#7874F2] text-lg cursor-pointer'
className='text-[#7874F2] border border-[#7874F2] rounded hover:text-[#F1F6FA] hover:bg-[#7874F2] text-lg cursor-pointer p-2'
>
Add to cart
</button>
Expand All @@ -173,22 +171,24 @@ const ProductDetails = ({ productId }) => {

{/* User Info */}
<div className='mt-2'>
{userData && currentUser ? (
{currentUser ? (
<div className='flex items-center mt-4 shadow-xl p-4'>
{/* <div className='rounded-full overflow-hidden'>
<div className='rounded-full overflow-hidden'>
<Image
src={userData?.photo}
src={
userData?.photo ||
"/images/profile.jpg"
}
width={65}
height={65}
className='object-cover w-full h-full'
alt='user picture'
/>
</div> */}
</div>
<div className='ml-4 flex-1'>
<div className='flex flex-col'>
<h2 className='text-xl font-bold '>
{userData?.name}{" "}
{userData?.username}
{userData?.name} {userData?.surname}
</h2>
<div className='flex items-center'>
<p className='text-lg mr-2'>
Expand Down
19 changes: 8 additions & 11 deletions src/pages/singleproduct/[productId].jsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,24 @@
import ProductDetails from "@/components/ProductDetails/ProductDetails";
import { useRouter } from "next/router";
import { doc, getDoc } from "firebase/firestore";
import React, { useState, useEffect } from "react";
import { db } from "@/util/firebase";
// import { onSnapshot } from "firebase/firestore";
import { CartProvider } from "@/context/CartContext";
// import MapComponent from "@/components/Map/Map";

function SingleProduct() {
const router = useRouter();
const { productId } = router.query;
const [setProduct] = useState(null);

return (
<CartProvider>
<div>
<div className='relative'>
<ProductDetails productId={productId} />

{/* Conditionally render MapComponent based on screen size */}
{productId && (
<div className='hidden lg:block'>
{/* This will be visible on screens larger than or equal to lg (large) */}
{/* <MapComponent productId={productId} /> */}
{/* {productId && (
<div className="hidden lg:block lg:mt-16 lg:relative lg:z-0"> */}
{/* This will be visible on screens larger than or equal to lg (large) */}
{/* <MapComponent productId={productId} />
</div>
)}
)} */}
</div>
</CartProvider>
);
Expand Down

0 comments on commit 7f628c6

Please sign in to comment.