nestiq-component-library 1.0.25 → 1.0.27

package/src/components/ImageListPopup/ImageListPopup.tsx

@@ -1,51 +1,20 @@
 import "./ImageListPopup.css";
-import React, { useEffect, useRef, useState } from "react";
-// import icon_checkmark from "../../../assets/Images/icon_checkmark.svg";
+import React, { useRef, useState } from "react";
 import blcIconArrowRight from "../../assets/Images/blackarrow-Right.svg";
 import blcIconArrowLeft from "../../assets/Images/blckarrow-Left.svg";
 import iconClose from "../../assets/images/icon_close_2.png";
 
 interface PopupProps {
-  property: {
-    city: string;
-    constructedArea: string;
-    rooms: string;
-    propertyArea: string;
-    askingPrice: string;
-  };
-  handleArrowClickInMainImage: any;
-  pictureUrls: any[];
-  currentImageIndex: number;
-  imageListRef: any;
+  pictureUrls: { title: string; url: string }[];
 }
 
 export default function ImageListPopup(props: PopupProps) {
   const [showPopUp, setShowPopUp] = useState(true);
-  // const { id } = useParams();
-  const [mainImage, setMainImage] = useState(null);
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
-  // const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
-  const imageListRef = useRef(null);
-
-  // const baseUrl = "https://api-dev.nestiq.de";
-  // const pictureUrls = props.property.pictures.map(
-  //   (picture) => `${baseUrl}${picture.contentUrl}`
-  // );
-  const imagePopupData = props.pictureUrls.map((pic) => {
-    return {
-      src: pic,
-      title: "Not Specified",
-    };
-  });
-
-  useEffect(() => {
-    if (props.pictureUrls.length > 0) {
-      setMainImage(props.pictureUrls[0]);
-    }
-  }, [props.pictureUrls]);
+  const imageListRef = useRef<HTMLDivElement | null>(null);
 
   const handleArrowClickInMainImage = (direction: any) => {
-    if (!props.property || props.pictureUrls.length === 0) return;
+    if (props.pictureUrls.length === 0) return;
 
     let newIndex = currentImageIndex;
     if (direction === "left") {
@@ -57,9 +26,8 @@ export default function ImageListPopup(props: PopupProps) {
     }
 
     setCurrentImageIndex(newIndex);
-    setMainImage(props.pictureUrls[newIndex]);
 
-    props.imageListRef.current.scrollTo({
+    imageListRef.current!.scrollTo({
       left: newIndex * 150,
       behavior: "smooth",
     });
@@ -74,11 +42,14 @@ export default function ImageListPopup(props: PopupProps) {
       {showPopUp && (
         <div className="popup-overlay">
           <div className=" d-flex  flex-column  col-6 ">
+            <span className="txt-white">
+              {props.pictureUrls[currentImageIndex].title}
+            </span>
             <div className="d-flex  align-self-end me-0 ms-5">
               <img
                 src={iconClose}
                 alt="close"
-                className="closeIcon  "
+                className="closeIcon"
                 onClick={handleClose}
               />
             </div>
@@ -101,7 +72,7 @@ export default function ImageListPopup(props: PopupProps) {
                 <div
                   className=" rounded-5 mainImage "
                   style={{
-                    backgroundImage: `url(${props.pictureUrls[currentImageIndex]})`,
+                    backgroundImage: `url(${props.pictureUrls[currentImageIndex].url})`,
                     height: "350px",
                     width: "600px",
                     backgroundSize: "cover",
@@ -124,54 +95,25 @@ export default function ImageListPopup(props: PopupProps) {
                 </div>
               </div>
             </div>
-            {/* <div className="d-flex flex-column">
-              <div className=" d-flex flex-row align-self-center ">
-                <img
-                  src={LeftArrow}
-                  alt="close"
-                  className="w-100 h-100 align-self-center me-5   "
-                />
-                <img src={house} alt="close" className="w-100 h-100    " />
-                <img
-                  src={RightArrow}
-                  alt="close"
-                  className="w-100 h-100  align-self-center ms-5  "
-                />
-              </div>
-            </div> */}
             <div className="d-flex flex-row">
               {/* Arrows on the main image */}
             </div>
             <div className="d-flex flex-row gap-4  w-100 secondList ">
               <div className="col-lg-12 d-flex flex-row p-1  align-self-center mt-5">
                 <div className="col-12 position-relative d-flex justify-content-center">
-                  {/* <div
-                    className="col-1 h-100 d-flex position-absolute start-0"
-                    onClick={() => handleArrowClickInMainImage("left")}
-                    role="button"
-                  >
-                    <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                      <img
-                        src={iconArrowLeft}
-                        className="arroIconColour"
-                        alt="Left Arrow"
-                      />
-                    </div>
-                  </div> */}
                   <div
                     className="col-lg-10 rounded-3 h-100 w-100 d-flex flex-row gap-2 overflow-auto "
-                    ref={props.imageListRef}
+                    ref={imageListRef}
                   >
-                    {props.property && (
+                    {props.pictureUrls.length > 0 && (
                       <div className="col-lg-5 h-100 w-25 d-flex gap-4 flex-row rounded-3">
-                        {props.pictureUrls.map((imageUrl, index) => (
+                        {props.pictureUrls.map((picture, index) => (
                           <div
                             key={index}
                             className="col-lg-12 h-100 d-flex"
                             onClick={() => {
-                              setMainImage(imageUrl);
                               setCurrentImageIndex(index);
-                              props.imageListRef.current.scrollTo({
+                              imageListRef.current!.scrollTo({
                                 left: index * 150,
                                 behavior: "smooth",
                               });
@@ -179,7 +121,7 @@ export default function ImageListPopup(props: PopupProps) {
                             role="button"
                           >
                             <img
-                              src={imageUrl}
+                              src={picture.url}
                               alt={`Image ${index + 1}`}
                               className="col-12 h-100 rounded-3 object-fit-cover"
                             />
@@ -188,19 +130,6 @@ export default function ImageListPopup(props: PopupProps) {
                       </div>
                     )}
                   </div>
-                  {/* <div
-                    className="col-1 h-100 d-flex position-absolute end-0 top-0"
-                    onClick={() => handleArrowClickInMainImage("right")}
-                    role="button"
-                  >
-                    <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
-                      <img
-                        src={iconArrowRight}
-                        className="arroIconColour"
-                        alt="Right Arrow"
-                      />
-                    </div>
-                  </div> */}
                 </div>
               </div>
             </div>

package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 // import { FormattedMessage } from "react-intl";
 import ShareIcon from "../../assets/images/icon_share_1.svg";
 import locationIcon from "../../assets/images/locationIconBlack.svg";
-import PopUp from "../ImageListPopup/ImageListPopup";
 import "./PropertyDetailsHeader.css";
+import PopUp from "../SharePopup/PopUp";
 
 export interface PopupProps {
   property: {
@@ -13,7 +13,7 @@ export interface PopupProps {
     propertyArea: string;
     askingPrice: string;
   };
-  showPopUp: boolean;
+  title: string;
 }
 
 export default function PropertyDetailsHeader(props: PopupProps) {
@@ -26,13 +26,10 @@ export default function PropertyDetailsHeader(props: PopupProps) {
   return (
     <div className="Pheader compact d-flex col-12 col-lg-12 position-relative mt-5 ">
       <div className="header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 ">
-        <strong>
-          Einziehen ohne einen Pinselstrich - Kernsaniertes Einfamilienhaus in
-          top Lage
-        </strong>
+        <strong>{props.title ?? "-"}</strong>
       </div>
       <div className="header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4">
-        <img src={locationIcon} className="vector me-2" />
+        <img src={locationIcon} className="vector me-2" alt="location Icon" />
 
         <div className="propText text-truncate col-lg-6 col-md-6 d-flex align-items-center">
           {props.property.city}
@@ -40,7 +37,12 @@ export default function PropertyDetailsHeader(props: PopupProps) {
       </div>
       <div className="d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4">
         {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
-        <img src={ShareIcon} className="v_share me-3" onClick={handlePopUp} />
+        <img
+          src={ShareIcon}
+          alt="share icon"
+          className="v_share me-3"
+          onClick={handlePopUp}
+        />
       </div>
       <div className="fetch_section d-flex align-items-center flex-row col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0">
         {props && (
@@ -52,14 +54,14 @@ export default function PropertyDetailsHeader(props: PopupProps) {
         {props && (
           <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
             {props.property.constructedArea} m² <br />
-            constructedArea
+            Wohnfläche
             {/* <FormattedMessage id="LIVING_SPACE" /> */}
           </div>
         )}
         {props && (
           <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
             {props.property.rooms} <br />
-            rooms
+            Zimmer
             {/* <FormattedMessage id="ROOMS" /> */}
           </div>
         )}
@@ -72,11 +74,11 @@ export default function PropertyDetailsHeader(props: PopupProps) {
           </div>
         )}
       </div>
-      {/* {showPopUp && (
+      {showPopUp && (
         <PopUp
-      
+      onClick={handlePopUp}
         />
-      )} */}
+      )}
     </div>
   );
 }

package/src/components/PropertyImageList/PropertyImageList.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
-// import { useParams } from "react-router-dom";
+import React, { useRef, useState } from "react";
 import iconArrowRight from "../../assets/Images/Icon_rightArrow.svg";
 import blcIconArrowRight from "../../assets/Images/blackarrow-Right.svg";
 import blcIconArrowLeft from "../../assets/Images/blckarrow-Left.svg";
@@ -12,36 +11,15 @@ import ImageListPopup from "../ImageListPopup/ImageListPopup";
 import PopupProps from "../ImageListPopup/ImageListPopup";
 
 interface PopupProps {
-  property: {
-    city: string;
-    constructedArea: string;
-    rooms: string;
-    propertyArea: string;
-    askingPrice: string;
-  };
-  pictureUrls: any[];
-  imageListRef: any;
+  pictureUrls: { title: string; url: string }[];
 }
 export default function PropertyImageList(prop: PopupProps) {
-  const [mainImage, setMainImage] = useState(null);
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
   const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
-  const imageListRef = useRef(null);
-  const [open, setopen] = useState<boolean>(false);
-  // const [pictureUrls, setPictureUrls] = useState([]);
-
-  // const baseUrl = "https://api-dev.nestiq.de";
-  // const pictureUrls = prop.property.pictures.map(
-  //   (picture) => `${baseUrl}${picture.contentUrl}`
-  // );
-  useEffect(() => {
-    if (prop.pictureUrls.length > 0) {
-      setMainImage(prop.pictureUrls[0]);
-    }
-  }, [prop.pictureUrls]);
+  const imageListRef = useRef<HTMLDivElement | null>(null);
 
   const handleArrowClickInMainImage = (direction: any) => {
-    if (!prop.property || prop.pictureUrls.length === 0) return;
+    if (prop.pictureUrls.length === 0) return;
 
     let newIndex = currentImageIndex;
     if (direction === "left") {
@@ -53,9 +31,11 @@ export default function PropertyImageList(prop: PopupProps) {
     }
 
     setCurrentImageIndex(newIndex);
-    setMainImage(prop.pictureUrls[newIndex]);
 
-   
+    imageListRef.current!.scrollTo({
+      left: newIndex * 150,
+      behavior: "smooth",
+    });
   };
 
   const toggleAllPhotos = () => {
@@ -67,7 +47,7 @@ export default function PropertyImageList(prop: PopupProps) {
       <div
         className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
         style={{
-          backgroundImage: `url(${prop.pictureUrls[currentImageIndex]})`,
+          backgroundImage: `url(${prop.pictureUrls[currentImageIndex]?.url})`,
           backgroundSize: "cover",
           backgroundPosition: "center",
         }}
@@ -114,16 +94,15 @@ export default function PropertyImageList(prop: PopupProps) {
               className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
               ref={imageListRef}
             >
-              {prop.property && (
+              {prop.pictureUrls.length > 0 && (
                 <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
-                  {prop.pictureUrls.map((imageUrl, index) => (
+                  {prop.pictureUrls.map((picture, index) => (
                     <div
                       key={index}
                       className="col-lg-12 h-100 d-flex"
                       onClick={() => {
-                        setMainImage(imageUrl);
                         setCurrentImageIndex(index);
-                        prop.imageListRef.current.scrollTo({
+                        imageListRef.current!.scrollTo({
                           left: index * 150,
                           behavior: "smooth",
                         });
@@ -131,7 +110,7 @@ export default function PropertyImageList(prop: PopupProps) {
                       role="button"
                     >
                       <img
-                        src={imageUrl}
+                        src={picture.url}
                         alt={`Image ${index + 1}`}
                         className="col-12 h-100 rounded-3 object-fit-cover"
                       />
@@ -188,15 +167,7 @@ export default function PropertyImageList(prop: PopupProps) {
       </div>
 
       {/* Popup for all photos */}
-      {isImagePopupOpen && (
-        <ImageListPopup
-          currentImageIndex={currentImageIndex}
-          handleArrowClickInMainImage={handleArrowClickInMainImage}
-          imageListRef={imageListRef}
-          pictureUrls={prop.pictureUrls}
-          property={prop.property}
-        />
-      )}
+      {isImagePopupOpen && <ImageListPopup pictureUrls={prop.pictureUrls} />}
     </div>
   );
 }