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

Jump to bottom

Fix window undefined issue #176

Merged
merged 8 commits into from
Nov 27, 2023
Merged

Fix window undefined issue #176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e969028
feat(product details): fix picture issue, so they show when clicked on
KatiaGhezali Nov 27, 2023
6c001f5
fix(map): fix window undefined issue
KatiaGhezali Nov 27, 2023
578ab5d
feat(map): fix map responsiveness
KatiaGhezali Nov 27, 2023
f5dfdab
fix(map): fix coordinates
KatiaGhezali Nov 27, 2023
2efc384
fix(product page): fix padding issue
KatiaGhezali Nov 27, 2023
8db7ba6
fix(product page): fix image selection feature
KatiaGhezali Nov 27, 2023
227e0a4
fix(product details): fix space between components
KatiaGhezali Nov 27, 2023
451f66c
fix(product page): fix margin and padding issues
KatiaGhezali Nov 27, 2023
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
108 changes: 45 additions & 63 deletions src/components/Map/Map.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,47 @@
import React, { useState, useEffect } from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import dynamic from "next/dynamic";
import { GiPositionMarker } from "react-icons/gi";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet/dist/images/marker-icon.png";
import "leaflet/dist/images/marker-shadow.png";
import "leaflet/dist/leaflet.css";
import { db } from "@/util/firebase";
import { doc, getDoc } from "firebase/firestore";
import Loader from "../Loader/Loader";

const MapComponent = () => {
const [position, setPosition] = useState([0, 0]); // Default position
const [city, setCity] = useState("");
const [country, setCountry] = useState("");
const [loading, setLoading] = useState(true);

useEffect(() => {
const fetchData = async () => {
const productRef = doc(db, "products", "1");
const productDoc = await getDoc(productRef);
const MapContainer = dynamic(
() => import("react-leaflet").then((module) => module.MapContainer),
{
loading: () => <Loader />, // You can replace this with your loader component
ssr: false, // Disables server-side rendering
}
);

if (productDoc.exists()) {
const productData = productDoc.data();
const productLocation = productData?.location;
const productAddress = productData?.address;
const TileLayer = dynamic(
() => import("react-leaflet").then((module) => module.TileLayer),
{
ssr: false,
}
);

if (
productLocation &&
productLocation.latitude &&
productLocation.longitude
) {
const latitude = productLocation.latitude;
const longitude = productLocation.longitude;
setPosition([latitude, longitude]);
} else {
console.log("Product location coordinates are undefined.");
// Handle the case when latitude or longitude is undefined.
}
const Marker = dynamic(
() => import("react-leaflet").then((module) => module.Marker),
{
ssr: false,
}
);

if (
productLocation &&
productLocation.city &&
productLocation.country
) {
setCity(productLocation.city);
setCountry(productLocation.country);
} else {
console.log("Product address is undefined.");
// Handle the case when city or country is undefined.
}
} else {
console.log("No such product document!");
// Handle the case when the product document does not exist.
}
const Popup = dynamic(
() => import("react-leaflet").then((module) => module.Popup),
{
ssr: false,
}
);

setLoading(false);
};

fetchData();
}, []);
const MapComponent = () => {
const [position, setPosition] = useState([36.7525, 3.04197]); // Hardcoded position [latitude, longitude]
const [city, setCity] = useState("Algiers"); // Hardcoded city
const [country, setCountry] = useState("Algeria"); // Hardcoded country
const [loading, setLoading] = useState(false); // No need to set it to true since data is hardcoded

const customMarkerIcon = new L.Icon({
iconUrl: "/marker.png",
Expand All @@ -71,21 +54,20 @@ const MapComponent = () => {
return (
<div className='flex justify-center items-center h-screen'>
<div className='border border-black rounded-lg w-9/12 h-3/6'>
{!loading && (
<MapContainer
center={position}
zoom={15}
style={{ width: "100%", height: "100%" }}
>
<TileLayer url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' />
<MapContainer
center={position}
zoom={20}
style={{ width: "100%", height: "100%" }}
noSsr // Disable server-side rendering
>
<TileLayer url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' />

{position[0] !== 0 && position[1] !== 0 && (
<Marker position={position} icon={customMarkerIcon}>
<Popup>{`${city}, ${country}`}</Popup>
</Marker>
)}
</MapContainer>
)}
{position[0] !== 0 && position[1] !== 0 && (
<Marker position={position} icon={customMarkerIcon}>
<Popup>{`${city}, ${country}`}</Popup>
</Marker>
)}
</MapContainer>
</div>
</div>
);
Expand Down
38 changes: 22 additions & 16 deletions src/components/ProductDetails/ProductDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const ProductDetails = ({ productId }) => {
const [userData, setUserData] = useState(null);
const [loading, setLoading] = useState(true);
const { currentUser } = useAuth();
const [selectedPicture, setSelectedPicture] = useState(null);

useEffect(() => {
const fetchProductAndUserData = async () => {
Expand All @@ -27,6 +28,7 @@ const ProductDetails = ({ productId }) => {
id: productDoc.id,
};
setProductData(productData);
setSelectedPicture(productData?.pictures[0]);

if (currentUser) {
const userRef = doc(
Expand Down Expand Up @@ -69,53 +71,57 @@ const ProductDetails = ({ productId }) => {
}

return (
<div
style={{
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='flex flex-col lg:mt-[10px] lg:mb-[-700px] lg:mr-[80px] lg:ml-[40px] md:mb-[80px] md:mt-[20px] md:mr-[20px] md:ml-[20px] sm:mb-[20px] sm:mt-[80px] sm:mr-[80px] sm:ml-[80px] sm:gap-6 sm:flex-col md:flex-col md:justify-center lg:flex-row lg:justify-between'>
<div className='lg:p-12 md:p-10 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 '
src={productData?.pictures[0]}
className='object-cover w-full h-full rounded-md cursor-pointer'
src={selectedPicture}
width={1600}
height={1000}
alt='product image'
onClick={() =>
setSelectedPicture(productData?.pictures[0])
}
/>
</div>
<div className=' col-span-3 row-span-1 md:w-[40%] lg:w-full rounded-md gap-1'>
<div className='flex justify-between gap-4 md:grid md:grid-cols-2 md:grid-rows-1 sm:gap-2 lg:flex'>
<div className='col-span-2 row-span-1 md:row-span-2 w-full bg-[#EEF2F4] h-20 sm:h-28 md:h-64 lg:h-28 border rounded-md border-[#979797] overflow-hidden'>
<Image
className='object-cover w-full h-full rounded-md '
className='object-cover w-full h-full rounded-md cursor-pointer'
src={productData?.pictures[1]}
width={1600}
height={1000}
alt='product image'
onClick={() =>
setSelectedPicture(productData?.pictures[1])
}
/>
</div>

{/* Render other small pictures similarly with onClick handler */}
<div className='w-full col-span-1 row-span-1 bg-[#EEF2F4] h-20 sm:h-28 border rounded-md border-[#979797] overflow-hidden'>
<Image
className='object-cover w-full h-full '
className='object-cover w-full h-full cursor-pointer'
src={productData?.pictures[2]}
width={1600}
height={1000}
alt='product image'
onClick={() =>
setSelectedPicture(productData?.pictures[2])
}
/>
</div>
<div className='col-span-1 row-span-1 bg-[#EEF2F4] h-20 sm:h-28 w-full border rounded-md border-[#979797] overflow-hidden lg:w-full'>
<Image
className='object-cover w-full h-full '
className='object-cover w-full h-full cursor-pointer'
src={productData?.pictures[3]}
width={1600}
height={1000}
alt='product image'
onClick={() =>
setSelectedPicture(productData?.pictures[3])
}
/>
</div>
</div>
Expand Down Expand Up @@ -154,7 +160,7 @@ const ProductDetails = ({ productId }) => {
<div className='flex items-center'>
<button
onClick={handleAddToCart}
className='text-orange-500 border border-orange-500 rounded hover:text-[#F1F6FA] hover:bg-orange-500 text-lg cursor-pointer pl-4 pr-4 pt-1 pb-1'
className='text-orange-500 border border-orange-500 rounded hover:text-[#F1F6FA] hover:bg-orange-500 text-lg cursor-pointer pl-4 pr-4 pt-1 pb-1 mb-1'
pb-2
>
Add to cart
Expand Down
19 changes: 11 additions & 8 deletions src/pages/singleproduct/[productId].jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
import dynamic from "next/dynamic";
import ProductDetails from "@/components/ProductDetails/ProductDetails";
import { useRouter } from "next/router";
import { CartProvider } from "@/context/CartContext";
// import MapComponent from "@/components/Map/Map";

const MapComponent = dynamic(() => import("@/components/Map/Map"), {
ssr: false,
});

function SingleProduct() {
const router = useRouter();
const { productId } = router.query;

return (
<div className='relative'>
<div className='relative p-4 sm:p-8 md:p-2 lg:p-2'>
<ProductDetails productId={productId} />

{/* Conditionally render MapComponent based on screen size */}
{/* {productId && (
<div className="hidden lg:block lg:mt-16 lg:relative lg:z-0">

<MapComponent productId={productId} />
</div>
)} */}
{productId && (
<div className='hidden lg:block lg:relative lg:z-0'>
<MapComponent productId={productId} />
</div>
)}
</div>
);
}
Expand Down
Loading