virtual tour + marker title

2024-06-21 16:47:30 +05:00
parent 07d460ea27
commit 22e04fd927
15 changed files with 457 additions and 588 deletions
@@ -52,7 +52,8 @@ async function getApartments(
  const url = `${apartmentsApi}?${query}`;
  const res = await ky.get(url, {
    headers: {
-      Authorization: `Zoho-oauthtoken ${token}`,
+      Authorization: `Zoho-oauthtoken 1000.f2b816cab56f851da9397cfbc17254e6.8636301ca36fb659a41b050bf0237d4d`,
+      // Authorization: `Zoho-oauthtoken ${token}`,
    },
  });

@@ -57,7 +57,7 @@ const FavoritesSlider = ({ cards }: FavoritesSliderProps) => {
  }, [cardRef.current]);

  return (
-    <div className="w-[calc(100vw - 48px)] relative ">
+    <div className="w-[calc(100vw - 48px)] relative">
      <div
        className="absolute -left-2 z-30"
        style={{ top: `${buttonTopPos}px` }}
@@ -7,7 +7,7 @@ const LogoIcon = () => {
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
-      <g clip-path="url(#clip0_227_586)">
+      <g clipPath="url(#clip0_227_586)">
        <path
          d="M10.3982 0H0L2.49306 1.87928V22.1237L0 24H10.3982L7.90218 22.1237V1.87928L10.3982 0Z"
          fill="currentColor"
@@ -10,9 +10,9 @@ const SearchIcon = () => {
      <path
        d="M15.8332 15.8334L12.973 12.9785M12.973 12.9785C13.9084 12.0445 14.487 10.7533 14.487 9.327C14.487 6.47707 12.1767 4.16675 9.32676 4.16675C6.47683 4.16675 4.1665 6.47707 4.1665 9.327C4.1665 12.1769 6.47683 14.4873 9.32676 14.4873C10.7504 14.4873 12.0394 13.9108 12.973 12.9785Z"
        stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
      />
    </svg>
  );
@@ -2,6 +2,7 @@ import { useNavigate } from "react-router-dom";
 import Button from "../Button";
 import HeartIcon from "../icons/Heart";
 import { IAparmentRes } from "../../types/apartmentsRes";
+import { useEffect, useState } from "react";

 interface LayoutCardProps {
  apartmentCard: IAparmentRes;
@@ -19,6 +20,7 @@ const LayoutCard = ({ apartmentCard }: LayoutCardProps) => {
  const wing = unit.split("-")[0] === "E" ? "East" : "West";
  const unitNumber = unit.split("-")[1];
  const totalArea = `${_totalArea}`.split(".").join(",");
+  const [isFavorite, setIsFavorite] = useState(false);

  const navigate = useNavigate();

@@ -26,6 +28,41 @@ const LayoutCard = ({ apartmentCard }: LayoutCardProps) => {
    navigate(`${id}`);
  };

+  const handleOnFavoriteClick = () => {
+    const favorites = localStorage.getItem("Favorites");
+
+    if (!favorites) {
+      setIsFavorite(true);
+      const updatedFavorites = JSON.stringify([apartmentCard]);
+      localStorage.setItem("Favorites", updatedFavorites);
+    } else {
+      const _favorites = JSON.parse(favorites) as IAparmentRes[];
+      if (_favorites.some((apart) => apart.id === apartmentCard.id)) {
+        setIsFavorite(false);
+        const updatedFavorites = [..._favorites].filter(
+          (apart) => apart.id !== apartmentCard.id
+        );
+        const convertedFavorites = JSON.stringify(updatedFavorites);
+        localStorage.setItem("Favorites", convertedFavorites);
+      } else {
+        setIsFavorite(true);
+        const updatedFavorites = [..._favorites, apartmentCard];
+        const convertedFavorites = JSON.stringify(updatedFavorites);
+        localStorage.setItem("Favorites", convertedFavorites);
+      }
+    }
+  };
+
+  useEffect(() => {
+    const favorites = localStorage.getItem("Favorites");
+    if (favorites) {
+      const _isFavorite = (JSON.parse(favorites) as IAparmentRes[]).some(
+        (apart) => apart.id === apartmentCard.id
+      );
+      setIsFavorite(_isFavorite);
+    }
+  }, [apartmentCard.id]);
+
  return (
    <div
      className="bg-white flex flex-col p-4 rounded-2xl cursor-pointer select-none"
@@ -49,7 +86,8 @@ const LayoutCard = ({ apartmentCard }: LayoutCardProps) => {
          </div>
        </div>
        <Button
-          icon={<HeartIcon isFilled={false} />}
+          onClick={handleOnFavoriteClick}
+          icon={<HeartIcon isFilled={isFavorite} />}
          buttonType="favorite"
          isCircleRounded
        />
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect } from "react";
 import LayoutCard from "./LayoutCard";
 import SortButton from "./SortButton";
@@ -22,6 +23,7 @@ import { ISort } from "../../types/sortType";
 const getFilteredApartments = async (
  zohoToken: string | null,
  setApartments: (apartments: IAparmentRes[]) => void,
+  apartments: IAparmentRes[],
  roveHomeTypeCheckboxes: ICheckbox[],
  apartmentTypeCheckboxes: ICheckbox[],
  multirangeSliders: IMultirangeSlider[],
@@ -90,7 +92,8 @@ const getFilteredApartments = async (
    perPage
  ).then((data) => {
    const apartmentsData = (data as IApartmentsRes).apartments;
-    setApartments(apartmentsData);
+    const updatedApartments = [...apartments, ...apartmentsData];
+    setApartments(updatedApartments);
  });

  return res;
@@ -109,7 +112,6 @@ const LayoutOptions = () => {
    sortList,
    setSortList,
    page,
-    setPerPage,
    setPage,
    perPage,
  } = useSearchFilters();
@@ -134,7 +136,6 @@ const LayoutOptions = () => {
  function handleOnShowMoreBtnClick(): void {
    const nextPage = page + 1;
    setPage(nextPage);
-    // setPerPage(nextPage);
  }

  useEffect(() => {
@@ -143,6 +144,7 @@ const LayoutOptions = () => {
    getFilteredApartments(
      zohoToken,
      setApartments,
+      apartments,
      roveHomeTypeCheckboxes,
      apartmentTypeCheckboxes,
      debouncedSliders,
@@ -152,6 +154,7 @@ const LayoutOptions = () => {
      page,
      perPage
    ).catch((error) => {
+      console.log("error", error);
      const errorStatus = error.response.status;

      if (errorStatus === 401) {
@@ -160,6 +163,7 @@ const LayoutOptions = () => {
            getFilteredApartments(
              token,
              setApartments,
+              apartments,
              roveHomeTypeCheckboxes,
              apartmentTypeCheckboxes,
              debouncedSliders,
@@ -11,25 +11,6 @@ import {
  initialSwitchers,
  initialRoveHomeCheckboxes,
 } from "../../consts/initialMasterplanFilters";
-// import { IMultirangeSlider } from "../../types/multirangeSlider";
-
-// function updateSlider(switcherTitle: string, sliders: IMultirangeSlider[]) {
-// if(switcherTitle === 'Not the first floor'){
-// const updatedSlider = sliders.map((sld) => {
-//   if(sld.title === 'Floor'){
-//     const floorSlider = initialSliders.find(sld1 => sld1.title === 'Floor');
-//     const minValue = floorSlider?.minValue;
-//     const isValueEqualMinValue = sld.minValue === minValue;
-//     //Если значение равно минимальному значение, то уменьшаем минимальное значение
-//     if(isValueEqualMinValue){
-//       return {...sld, startValue: minValue, minValue: minValue}
-//     }
-//     return
-//   }
-//     return sld
-// })
-// }
-// }

 const SidebarFilters = () => {
  const {
@@ -149,7 +130,7 @@ const SidebarFilters = () => {
          </div>
          <div className="flex flex-col pt-6 w-full gap-8">
            {multirangeSliders.map((slider) => (
-              <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-2" key={slider.id}>
                <div className="flex justify-between items-center">
                  <p className="text-[#0D1922] text-s ">{slider.title}</p>
                  <p className="text-[#73787C] text-s">{slider.unit}</p>
@@ -27,6 +27,33 @@ const LabelMarker = ({ sphereLink, apartment }: LaberlMarkerProps) => {
    <>
      {
        <Html position={sphereLink.labelPosition} center>
+          <div className="relative">
+            <div
+              className="bg-white w-9 h-9 rounded-full text-[#00BED7] flex items-center justify-center cursor-pointer peer"
+              onClick={handleOnClick}
+            >
+              <WalkHereIcon />
+            </div>
+            <div className="absolute -left-[66px] bottom-11 w-[168px] rounded-lg flex flex-col p-1 gap-1 items-center opacity-0 peer-hover:opacity-100 duration-300 ease-in-out transition-opacity">
+              {/* <div className="bg-[#D9D9D9] rounded-lg w-full h-full object-contain overflow-clip">
+                <img
+                  src="/images/virtual-tour/studio1/previews/preview.jpg"
+                  alt=""
+                />
+              </div> */}
+              <div className="text-white font-semibold bg-[#0D192266] py-1 px-2 rounded-lg capitalize">
+                {currentSphere?.roomType}
+              </div>
+            </div>
+          </div>
+        </Html>
+      }
+    </>
+  );
+};
+
+{
+  /* <Html position={sphereLink.labelPosition} center>
          <div className="relative">
            <div
              className="bg-white w-9 h-9 rounded-full text-[#00BED7] flex items-center justify-center cursor-pointer peer"
@@ -46,10 +73,7 @@ const LabelMarker = ({ sphereLink, apartment }: LaberlMarkerProps) => {
              </div>
            </div>
          </div>
-        </Html>
-      }
-    </>
-  );
-};
+        </Html> */
+}

 export default LabelMarker;
@@ -1,57 +0,0 @@
-[
-  {
-    "id": "studio-1_sp-01",
-    "sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-01.jpg",
-    "roomType": "room 1",
-    "position": [-14.16, 0, 24.11],
-    "links": [
-      {
-        "id": "studio-1_sp-02",
-        "type": "default",
-        "labelPosition": [-15.16, 0, 24.11]
-      }
-    ]
-  },
-  {
-    "id": "studio-1_sp-02",
-    "sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-02.jpg",
-    "roomType": "room 2",
-    "position": [-14.16, 0, 24.11],
-    "links": []
-  },
-  {
-    "id": "studio-1_sp-03",
-    "sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-03.jpg",
-    "roomType": "room 3",
-    "position": [-14.16, 0, 24.11],
-    "links": []
-  },
-  {
-    "id": "studio-1_sp-04",
-    "sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-04.jpg",
-    "roomType": "room 4",
-    "position": [-14.16, 0, 24.11],
-    "links": []
-  },
-  {
-    "id": "studio-1_sp-05",
-    "sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-05.jpg",
-    "roomType": "room 5",
-    "position": [-14.16, 0, 24.11],
-    "links": []
-  },
-  {
-    "id": "studio-1_sp-06",
-    "sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-06.jpg",
-    "roomType": "room 6",
-    "position": [-14.16, 0, 24.11],
-    "links": []
-  },
-  {
-    "id": "studio-1_sp-07",
-    "sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-07.jpg",
-    "roomType": "room 7",
-    "position": [-14.16, 0, 24.11],
-    "links": []
-  }
-]
@@ -394,451 +394,318 @@
    "map": "/images/virtual-tour/BDR-2-B_21/map.jpg",
    "spheres": [
      {
-        "id": "studio-3_sp-01",
+        "id": "studio-4_sp-01",
        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_010000.jpg",
-        "roomType": "entrance 1",
+        "roomType": "entrance",
        "position": [-14.16, 0, 24.11],
-        "mapPosition": [120, 220],
+        "mapPosition": [205, 210],
        "links": [
          {
-            "id": "studio-3_sp-07",
-            "type": "default",
-            "labelPosition": [-12.16, 0, 20.11]
-          },
-          {
-            "id": "studio-3_sp-014",
-            "type": "default",
-            "labelPosition": [-30.16, 0, 230.11]
-          },
-          {
-            "id": "studio-3_sp-02",
+            "id": "studio-4_sp-02",
            "type": "default",
            "labelPosition": [100.16, 0, 30.11]
          }
        ]
      },
      {
-        "id": "studio-3_sp-014",
+        "id": "studio-4_sp-02",
        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_030000.jpg",
-        "roomType": "bathroom 2",
+        "roomType": "hallway 1",
        "position": [-14.16, 0, 24.11],
-        "mapPosition": [188, 220],
+        "mapPosition": [205, 160],
        "links": [
          {
-            "id": "studio-3_sp-01",
+            "id": "studio-4_sp-07",
            "type": "default",
-            "labelPosition": [-13, 0, 1.11]
+            "labelPosition": [-14, 0, 1.11]
          },
          {
-            "id": "studio-3_sp-010",
+            "id": "studio-4_sp-01",
+            "type": "default",
+            "labelPosition": [-80, 0, 18.11]
+          },
+          {
+            "id": "studio-4_sp-026",
            "type": "default",
            "labelPosition": [40, 0, 22.11]
+          },
+          {
+            "id": "studio-4_sp-06",
+            "type": "default",
+            "labelPosition": [40, 0, 140.11]
          }
        ]
      },
      {
-        "id": "studio-3_sp-010",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_040000.jpg",
-        "roomType": "bedroom 3",
+        "id": "studio-4_sp-03",
+        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_070000.jpg",
+        "roomType": "glass doors 1",
        "position": [-14.16, 0, 24.11],
-        "mapPosition": [188, 144],
+        "mapPosition": [235, 40],
        "links": [
          {
-            "id": "studio-3_sp-014",
+            "id": "studio-4_sp-02",
            "type": "default",
-            "labelPosition": [-45, 0, 20.11]
+            "labelPosition": [-90, 0, 5.11]
          },
          {
-            "id": "studio-3_sp-02",
+            "id": "studio-4_sp-013",
            "type": "default",
-            "labelPosition": [-15, 0, 3.11]
+            "labelPosition": [0, 0, 22.11]
          },
          {
-            "id": "studio-3_sp-013",
+            "id": "studio-4_sp-05",
            "type": "default",
-            "labelPosition": [-5, 0, 23.31]
+            "labelPosition": [-10, 0, -40.11]
          }
        ]
      },
      {
-        "id": "studio-3_sp-013",
+        "id": "studio-4_sp-013",
+        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_210000.jpg",
+        "roomType": "balcony 3",
+        "position": [-14.16, 0, 24.11],
+        "mapPosition": [235, 20],
+        "links": [
+          {
+            "id": "studio-4_sp-03",
+            "type": "default",
+            "labelPosition": [-70, 0, 25.11]
+          },
+          {
+            "id": "studio-4_sp-25",
+            "type": "default",
+            "labelPosition": [-14, 0, 10.11]
+          }
+        ]
+      },
+      {
+        "id": "studio-4_sp-011",
+        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_190000.jpg",
+        "roomType": "balcony 1",
+        "position": [-14.16, 0, 24.11],
+        "mapPosition": [75, 20],
+        "links": [
+          {
+            "id": "studio-4_sp-010",
+            "type": "default",
+            "labelPosition": [-70, 0, 22.11]
+          },
+          {
+            "id": "studio-4_sp-012",
+            "type": "default",
+            "labelPosition": [-14, 0, 110.11]
+          }
+        ]
+      },
+      {
+        "id": "studio-4_sp-25",
+        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_200000.jpg",
+        "roomType": "balcony 2",
+        "position": [-14.16, 0, 24.11],
+        "mapPosition": [160, 20],
+        "links": [
+          {
+            "id": "studio-4_sp-05",
+            "type": "default",
+            "labelPosition": [-70, 0, 25.11]
+          },
+          {
+            "id": "studio-4_sp-013",
+            "type": "default",
+            "labelPosition": [-10, 0, 100.11]
+          },
+          {
+            "id": "studio-4_sp-011",
+            "type": "default",
+            "labelPosition": [-20, 0, -80.11]
+          }
+        ]
+      },
+      {
+        "id": "studio-4_sp-05",
+        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_100000.jpg",
+        "roomType": "glass doors 2",
+        "position": [-14.16, 0, 24.11],
+        "mapPosition": [160, 40],
+        "links": [
+          {
+            "id": "studio-4_sp-04",
+            "type": "default",
+            "labelPosition": [-70, 0, 25.11]
+          },
+          {
+            "id": "studio-4_sp-25",
+            "type": "default",
+            "labelPosition": [-10, 0, 24.11]
+          },
+          {
+            "id": "studio-4_sp-03",
+            "type": "default",
+            "labelPosition": [-10, 0, 100.11]
+          }
+        ]
+      },
+      {
+        "id": "studio-4_sp-04",
+        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_080000.jpg",
+        "roomType": "living room 2",
+        "position": [-14.16, 0, 24.11],
+        "mapPosition": [170, 110],
+        "links": [
+          {
+            "id": "studio-4_sp-05",
+            "type": "default",
+            "labelPosition": [90.16, 0, 10.11]
+          },
+          {
+            "id": "studio-4_sp-026",
+            "type": "default",
+            "labelPosition": [-15, 0, 120.11]
+          }
+        ]
+      },
+      {
+        "id": "studio-4_sp-026",
        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_050000.jpg",
-        "roomType": "bedroom 4",
+        "roomType": "living room 1",
        "position": [-14.16, 0, 24.11],
-        "mapPosition": [188, 80],
+        "mapPosition": [225, 110],
        "links": [
          {
-            "id": "studio-3_sp-010",
+            "id": "studio-4_sp-02",
            "type": "default",
-            "labelPosition": [-45, 0, 25.11]
+            "labelPosition": [-45, 0, 18.11]
          },
          {
-            "id": "studio-3_sp-04",
+            "id": "studio-4_sp-06",
+            "type": "default",
+            "labelPosition": [-45, 0, 50.11]
+          },
+          {
+            "id": "studio-4_sp-04",
            "type": "default",
            "labelPosition": [-12, 0, -50.11]
          },
          {
-            "id": "studio-3_sp-016",
+            "id": "studio-4_sp-03",
            "type": "default",
-            "labelPosition": [120, 0, 20.11]
+            "labelPosition": [120, 0, 50.11]
          }
        ]
      },
      {
-        "id": "studio-3_sp-02",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_060000.jpg",
-        "roomType": "living room 5",
+        "id": "studio-4_sp-06",
+        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_110000.jpg",
+        "roomType": "kitchen",
        "position": [-14.16, 0, 24.11],
-        "mapPosition": [128, 155],
+        "mapPosition": [250, 170],
        "links": [
          {
-            "id": "studio-3_sp-04",
+            "id": "studio-4_sp-02",
            "type": "default",
-            "labelPosition": [-0.16, 0, 21.11]
+            "labelPosition": [-5, 0, -100.11]
          },
          {
-            "id": "studio-3_sp-010",
+            "id": "studio-4_sp-026",
            "type": "default",
-            "labelPosition": [-14.16, 0, 40.11]
-          },
-          {
-            "id": "studio-3_sp-01",
-            "type": "default",
-            "labelPosition": [-45, 0, 24.11]
-          },
-          {
-            "id": "studio-3_sp-07",
-            "type": "default",
-            "labelPosition": [-80, 0, -40.11]
+            "labelPosition": [5, 0, 10.11]
          }
        ]
      },
      {
-        "id": "studio-3_sp-07",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_070000.jpg",
-        "roomType": "kitchen 6",
+        "id": "studio-4_sp-07",
+        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_120000.jpg",
+        "roomType": "hallway 3",
        "position": [-14.16, 0, 24.11],
-        "mapPosition": [65, 205],
+        "mapPosition": [175, 165],
        "links": [
          {
-            "id": "studio-3_sp-01",
+            "id": "studio-4_sp-014",
            "type": "default",
-            "labelPosition": [-60, 0, 60.11]
+            "labelPosition": [-70, 0, 25.11]
          },
          {
-            "id": "studio-3_sp-02",
+            "id": "studio-4_sp-08",
            "type": "default",
-            "labelPosition": [0, 0, 35.11]
+            "labelPosition": [-15, 0, -50.11]
+          },
+          {
+            "id": "studio-4_sp-02",
+            "type": "default",
+            "labelPosition": [-10, 0, 90.11]
          }
        ]
      },
      {
-        "id": "studio-3_sp-04",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_080000.jpg",
-        "roomType": "glass doors 7",
+        "id": "studio-4_sp-08",
+        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_130000.jpg",
+        "roomType": "hallway 4",
        "position": [-14.16, 0, 24.11],
-        "mapPosition": [85, 60],
+        "mapPosition": [120, 165],
        "links": [
          {
-            "id": "studio-3_sp-021",
+            "id": "studio-4_sp-09",
            "type": "default",
-            "labelPosition": [90.16, 0, 30.11]
+            "labelPosition": [-70, 0, 25.11]
          },
          {
-            "id": "studio-3_sp-013",
+            "id": "studio-4_sp-010",
            "type": "default",
-            "labelPosition": [-15, 0, 120.11]
+            "labelPosition": [-40, 0, -80.11]
          },
          {
-            "id": "studio-3_sp-02",
+            "id": "studio-4_sp-07",
            "type": "default",
-            "labelPosition": [-45, 0, 40.11]
+            "labelPosition": [-15, 0, 150.11]
+          }
+        ]
+      },
+      {
+        "id": "studio-4_sp-09",
+        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_230000.jpg",
+        "roomType": "bathroom 2",
+        "position": [-14.16, 0, 24.11],
+        "mapPosition": [120, 210],
+        "links": [
+          {
+            "id": "studio-4_sp-08",
+            "type": "default",
+            "labelPosition": [0, 0, 24.11]
+          }
+        ]
+      },
+      {
+        "id": "studio-4_sp-010",
+        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_150000.jpg",
+        "roomType": "bedroom",
+        "position": [-14.16, 0, 24.11],
+        "mapPosition": [70, 180],
+        "links": [
+          {
+            "id": "studio-4_sp-011",
+            "type": "default",
+            "labelPosition": [-5, 0, 25.11]
+          },
+          {
+            "id": "studio-4_sp-08",
+            "type": "default",
+            "labelPosition": [-5, 0, 100.11]
          }
        ]
      },

      {
-        "id": "studio-3_sp-016",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_090000.jpg",
-        "roomType": "balcony 8",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [155, 20],
-        "links": [
-          {
-            "id": "studio-3_sp-013",
-            "type": "default",
-            "labelPosition": [-45, 0, 25.11]
-          },
-          {
-            "id": "studio-3_sp-018",
-            "type": "default",
-            "labelPosition": [-10, 0, -60.11]
-          }
-        ]
-      },
-      {
-        "id": "studio-3_sp-018",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_100000.jpg",
-        "roomType": "balcony 9",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [85, 20],
-        "links": [
-          {
-            "id": "studio-3_sp-04",
-            "type": "default",
-            "labelPosition": [-70, 0, 25.11]
-          },
-          {
-            "id": "studio-3_sp-016",
-            "type": "default",
-            "labelPosition": [-10, 0, 100.11]
-          }
-        ]
-      },
-      {
-        "id": "studio-3_sp-019",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_110000.jpg",
-        "roomType": "balcony 10",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [85, 20],
-        "links": [
-          {
-            "id": "studio-3_sp-04",
-            "type": "default",
-            "labelPosition": [-70, 0, 25.11]
-          },
-          {
-            "id": "studio-3_sp-016",
-            "type": "default",
-            "labelPosition": [-10, 0, 100.11]
-          }
-        ]
-      },
-      {
-        "id": "studio-3_sp-020",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_120000.jpg",
-        "roomType": "balcony 11",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [85, 20],
-        "links": [
-          {
-            "id": "studio-3_sp-04",
-            "type": "default",
-            "labelPosition": [-70, 0, 25.11]
-          },
-          {
-            "id": "studio-3_sp-016",
-            "type": "default",
-            "labelPosition": [-10, 0, 100.11]
-          }
-        ]
-      },
-      {
-        "id": "studio-3_sp-021",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_130000.jpg",
-        "roomType": "balcony 12",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [85, 20],
-        "links": [
-          {
-            "id": "studio-3_sp-04",
-            "type": "default",
-            "labelPosition": [-70, 0, 25.11]
-          },
-          {
-            "id": "studio-3_sp-016",
-            "type": "default",
-            "labelPosition": [-10, 0, 100.11]
-          }
-        ]
-      },
-      {
-        "id": "studio-3_sp-022",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_140000.jpg",
-        "roomType": "balcony 13",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [85, 20],
-        "links": [
-          {
-            "id": "studio-3_sp-04",
-            "type": "default",
-            "labelPosition": [-70, 0, 25.11]
-          },
-          {
-            "id": "studio-3_sp-016",
-            "type": "default",
-            "labelPosition": [-10, 0, 100.11]
-          }
-        ]
-      },
-      {
-        "id": "studio-3_sp-023",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_150000.jpg",
-        "roomType": "balcony 14",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [85, 20],
-        "links": [
-          {
-            "id": "studio-3_sp-04",
-            "type": "default",
-            "labelPosition": [-70, 0, 25.11]
-          },
-          {
-            "id": "studio-3_sp-016",
-            "type": "default",
-            "labelPosition": [-10, 0, 100.11]
-          }
-        ]
-      },
-      {
-        "id": "studio-3_sp-024",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_160000.jpg",
-        "roomType": "balcony 15",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [85, 20],
-        "links": [
-          {
-            "id": "studio-3_sp-04",
-            "type": "default",
-            "labelPosition": [-70, 0, 25.11]
-          },
-          {
-            "id": "studio-3_sp-016",
-            "type": "default",
-            "labelPosition": [-10, 0, 100.11]
-          }
-        ]
-      },
-      {
-        "id": "studio-3_sp-025",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_170000.jpg",
-        "roomType": "balcony 16",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [85, 20],
-        "links": [
-          {
-            "id": "studio-3_sp-04",
-            "type": "default",
-            "labelPosition": [-70, 0, 25.11]
-          },
-          {
-            "id": "studio-3_sp-016",
-            "type": "default",
-            "labelPosition": [-10, 0, 100.11]
-          }
-        ]
-      },
-      {
-        "id": "studio-3_sp-026",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_180000.jpg",
-        "roomType": "balcony 17",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [85, 20],
-        "links": [
-          {
-            "id": "studio-3_sp-04",
-            "type": "default",
-            "labelPosition": [-70, 0, 25.11]
-          },
-          {
-            "id": "studio-3_sp-016",
-            "type": "default",
-            "labelPosition": [-10, 0, 100.11]
-          }
-        ]
-      },
-      {
-        "id": "studio-3_sp-027",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_190000.jpg",
-        "roomType": "balcony 18",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [85, 20],
-        "links": [
-          {
-            "id": "studio-3_sp-04",
-            "type": "default",
-            "labelPosition": [-70, 0, 25.11]
-          },
-          {
-            "id": "studio-3_sp-016",
-            "type": "default",
-            "labelPosition": [-10, 0, 100.11]
-          }
-        ]
-      },
-      {
-        "id": "studio-3_sp-028",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_200000.jpg",
-        "roomType": "balcony 19",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [85, 20],
-        "links": [
-          {
-            "id": "studio-3_sp-04",
-            "type": "default",
-            "labelPosition": [-70, 0, 25.11]
-          },
-          {
-            "id": "studio-3_sp-016",
-            "type": "default",
-            "labelPosition": [-10, 0, 100.11]
-          }
-        ]
-      },
-      {
-        "id": "studio-3_sp-029",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_210000.jpg",
-        "roomType": "balcony 20",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [85, 20],
-        "links": [
-          {
-            "id": "studio-3_sp-04",
-            "type": "default",
-            "labelPosition": [-70, 0, 25.11]
-          },
-          {
-            "id": "studio-3_sp-016",
-            "type": "default",
-            "labelPosition": [-10, 0, 100.11]
-          }
-        ]
-      },
-      {
-        "id": "studio-3_sp-030",
+        "id": "studio-4_sp-014",
        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_220000.jpg",
-        "roomType": "balcony 21",
+        "roomType": "bathroom 1",
        "position": [-14.16, 0, 24.11],
-        "mapPosition": [85, 20],
+        "mapPosition": [175, 210],
        "links": [
          {
-            "id": "studio-3_sp-04",
+            "id": "studio-4_sp-07",
            "type": "default",
-            "labelPosition": [-70, 0, 25.11]
-          },
-          {
-            "id": "studio-3_sp-016",
-            "type": "default",
-            "labelPosition": [-10, 0, 100.11]
-          }
-        ]
-      },
-      {
-        "id": "studio-3_sp-031",
-        "sphereImage": "/images/virtual-tour/BDR-2-B_21/BDR-2-B_21_230000.jpg",
-        "roomType": "balcony 22",
-        "position": [-14.16, 0, 24.11],
-        "mapPosition": [85, 20],
-        "links": [
-          {
-            "id": "studio-3_sp-04",
-            "type": "default",
-            "labelPosition": [-70, 0, 25.11]
-          },
-          {
-            "id": "studio-3_sp-016",
-            "type": "default",
-            "labelPosition": [-10, 0, 100.11]
+            "labelPosition": [10, 0, 25.11]
          }
        ]
      }
@@ -7,7 +7,6 @@ import "./index.css";
 import Complex from "./pages/Complex";
 import ComplexWing from "./pages/ComplexWing";
 import Search from "./pages/Search";
-import SearchParticularApartments from "./pages/SearchParticularApartments";
 import SearchApartment from "./pages/SearchApartment";
 import Favorites from "./pages/Favorites";
 import VirtualTour from "./pages/VirtualTour";
@@ -48,12 +47,12 @@ const router = createBrowserRouter([
      },
      {
        path: "/search/:apartmentType",
-        element: <SearchParticularApartments />,
-      },
-      {
-        path: "/search/:apartmentType/:apartmentId",
        element: <SearchApartment />,
      },
+      // {
+      //   path: "/search/:apartmentType/:apartmentId",
+      //   element: <SearchApartment />,
+      // },
      {
        path: "/favorites",
        element: <Favorites />,
@@ -11,140 +11,140 @@ import { ISwitcher } from "../types/switcher";
 import FavoritesSlider from "../components/favoritesPage/FavoriteSlider";
 import FavoriteCardList from "../components/favoritesPage/FavoriteCardList";

-const favoriteCards: ILayoutCard[] = [
-  {
-    id: "1",
-    roveHome: "Marasi Drive",
-    apartmentType: "Studio Flex",
-    wing: "East Wing",
-    floorStart: 11,
-    floorEnd: 35,
-    units: 234,
-    cost: 10488888,
-    square: 619,
-  },
-  {
-    id: "2",
-    roveHome: "Marasi Drive",
-    apartmentType: "1 Bedroom",
-    wing: "East Wing",
-    floorStart: 11,
-    floorEnd: 35,
-    units: 234,
-    cost: 1668888,
-    square: 619,
-  },
-  {
-    id: "3",
-    roveHome: "Marasi Drive",
-    apartmentType: "1 Bedroom",
-    wing: "East Wing",
-    floorStart: 11,
-    floorEnd: 35,
-    units: 234,
-    cost: 1668888,
-    square: 609,
-  },
-  {
-    id: "4",
-    roveHome: "Marasi Drive",
-    apartmentType: "1 Bedroom",
-    wing: "East Wing",
-    floorStart: 11,
-    floorEnd: 35,
-    units: 234,
-    cost: 1138888,
-    square: 609,
-  },
-  {
-    id: "5",
-    roveHome: "Marasi Drive",
-    apartmentType: "Studio Flex",
-    wing: "East Wing",
-    floorStart: 11,
-    floorEnd: 35,
-    units: 234,
-    cost: 10488888,
-    square: 609,
-  },
-  {
-    id: "6",
-    roveHome: "Marasi Drive",
-    apartmentType: "1 Bedroom",
-    wing: "East Wing",
-    floorStart: 11,
-    floorEnd: 35,
-    units: 234,
-    cost: 1668888,
-    square: 609,
-  },
-  {
-    id: "7",
-    roveHome: "Marasi Drive",
-    apartmentType: "1 Bedroom",
-    wing: "East Wing",
-    floorStart: 11,
-    floorEnd: 35,
-    units: 234,
-    cost: 1668888,
-    square: 609,
-  },
-  {
-    id: "8",
-    roveHome: "Marasi Drive",
-    apartmentType: "1 Bedroom",
-    wing: "East Wing",
-    floorStart: 11,
-    floorEnd: 35,
-    units: 234,
-    cost: 1138888,
-    square: 609,
-  },
-  {
-    id: "9",
-    roveHome: "Marasi Drive",
-    apartmentType: "Studio Flex",
-    wing: "East Wing",
-    floorStart: 11,
-    floorEnd: 35,
-    units: 234,
-    cost: 10488888,
-    square: 609,
-  },
-  {
-    id: "10",
-    roveHome: "Marasi Drive",
-    apartmentType: "1 Bedroom",
-    wing: "East Wing",
-    floorStart: 11,
-    floorEnd: 35,
-    units: 234,
-    cost: 1668888,
-    square: 609,
-  },
-  {
-    id: "11",
-    roveHome: "Marasi Drive",
-    apartmentType: "1 Bedroom",
-    wing: "East Wing",
-    floorStart: 11,
-    floorEnd: 35,
-    units: 234,
-    cost: 1668888,
-    square: 609,
-  },
-  {
-    id: "12",
-    roveHome: "Marasi Drive",
-    apartmentType: "1 Bedroom",
-    wing: "East Wing",
-    floorStart: 11,
-    floorEnd: 35,
-    units: 234,
-    cost: 1138888,
-    square: 609,
-  },
-];
+// const favoriteCards: ILayoutCard[] = [
+//   {
+//     id: "1",
+//     roveHome: "Marasi Drive",
+//     apartmentType: "Studio Flex",
+//     wing: "East Wing",
+//     floorStart: 11,
+//     floorEnd: 35,
+//     units: 234,
+//     cost: 10488888,
+//     square: 619,
+//   },
+//   {
+//     id: "2",
+//     roveHome: "Marasi Drive",
+//     apartmentType: "1 Bedroom",
+//     wing: "East Wing",
+//     floorStart: 11,
+//     floorEnd: 35,
+//     units: 234,
+//     cost: 1668888,
+//     square: 619,
+//   },
+//   {
+//     id: "3",
+//     roveHome: "Marasi Drive",
+//     apartmentType: "1 Bedroom",
+//     wing: "East Wing",
+//     floorStart: 11,
+//     floorEnd: 35,
+//     units: 234,
+//     cost: 1668888,
+//     square: 609,
+//   },
+//   {
+//     id: "4",
+//     roveHome: "Marasi Drive",
+//     apartmentType: "1 Bedroom",
+//     wing: "East Wing",
+//     floorStart: 11,
+//     floorEnd: 35,
+//     units: 234,
+//     cost: 1138888,
+//     square: 609,
+//   },
+//   {
+//     id: "5",
+//     roveHome: "Marasi Drive",
+//     apartmentType: "Studio Flex",
+//     wing: "East Wing",
+//     floorStart: 11,
+//     floorEnd: 35,
+//     units: 234,
+//     cost: 10488888,
+//     square: 609,
+//   },
+//   {
+//     id: "6",
+//     roveHome: "Marasi Drive",
+//     apartmentType: "1 Bedroom",
+//     wing: "East Wing",
+//     floorStart: 11,
+//     floorEnd: 35,
+//     units: 234,
+//     cost: 1668888,
+//     square: 609,
+//   },
+//   {
+//     id: "7",
+//     roveHome: "Marasi Drive",
+//     apartmentType: "1 Bedroom",
+//     wing: "East Wing",
+//     floorStart: 11,
+//     floorEnd: 35,
+//     units: 234,
+//     cost: 1668888,
+//     square: 609,
+//   },
+//   {
+//     id: "8",
+//     roveHome: "Marasi Drive",
+//     apartmentType: "1 Bedroom",
+//     wing: "East Wing",
+//     floorStart: 11,
+//     floorEnd: 35,
+//     units: 234,
+//     cost: 1138888,
+//     square: 609,
+//   },
+//   {
+//     id: "9",
+//     roveHome: "Marasi Drive",
+//     apartmentType: "Studio Flex",
+//     wing: "East Wing",
+//     floorStart: 11,
+//     floorEnd: 35,
+//     units: 234,
+//     cost: 10488888,
+//     square: 609,
+//   },
+//   {
+//     id: "10",
+//     roveHome: "Marasi Drive",
+//     apartmentType: "1 Bedroom",
+//     wing: "East Wing",
+//     floorStart: 11,
+//     floorEnd: 35,
+//     units: 234,
+//     cost: 1668888,
+//     square: 609,
+//   },
+//   {
+//     id: "11",
+//     roveHome: "Marasi Drive",
+//     apartmentType: "1 Bedroom",
+//     wing: "East Wing",
+//     floorStart: 11,
+//     floorEnd: 35,
+//     units: 234,
+//     cost: 1668888,
+//     square: 609,
+//   },
+//   {
+//     id: "12",
+//     roveHome: "Marasi Drive",
+//     apartmentType: "1 Bedroom",
+//     wing: "East Wing",
+//     floorStart: 11,
+//     floorEnd: 35,
+//     units: 234,
+//     cost: 1138888,
+//     square: 609,
+//   },
+// ];

 const initialCollectionCompareSwitcher: ISwitcher = {
  id: "1",
@@ -154,7 +154,8 @@ const initialCollectionCompareSwitcher: ISwitcher = {

 const Favorites = () => {
  const [sortList, setSortList] = useState(initialSortList);
-  const [cards, setCards] = useState(favoriteCards);
+  const [cards, setCards] = useState<ILayoutCard[]>([]);
+  // const [cards, setCards] = useState(favoriteCards);
  const [switcher, setSwitcher] = useState(initialCollectionCompareSwitcher);

  const handleOnSortClick = (sortId: string) => {
@@ -171,10 +172,18 @@ const Favorites = () => {
    });
  };

-  useEffect(() => {
-    const sortedCards = sortCardBy(sortList, favoriteCards);
+  const handleOnDeleteFavoriteClick = () => {
+    localStorage.removeItem("Favorites");
+    setCards([]);
+  };

-    setCards(sortedCards);
+  useEffect(() => {
+    const favoriteCards = localStorage.getItem("Favorites");
+    if (favoriteCards) {
+      const convertedCards = JSON.parse(favoriteCards);
+      const sortedCards = sortCardBy(sortList, convertedCards);
+      setCards(sortedCards);
+    }
  }, [sortList]);

  return (
@@ -185,7 +194,7 @@ const Favorites = () => {
            <div className="flex items-center gap-8">
              <div className="flex gap-4 font-semibold text-subheadline-s leading-7 py-[6px]">
                <h2 className="text-[#0D1922]">Units</h2>
-                <p className="text-[#73787C]">145</p>
+                <p className="text-[#73787C]">{cards.length}</p>
              </div>
              <SortButton sortList={sortList} onClick={handleOnSortClick} />
            </div>
@@ -196,6 +205,7 @@ const Favorites = () => {
                  icon={<TrashIcon />}
                  className="text-[#73787C]"
                  text="Remove all"
+                  onClick={handleOnDeleteFavoriteClick}
                />
                <div className="flex gap-2 items-center text-s">
                  <p
@@ -9,6 +9,7 @@ import VirtualTourSidebar from "../components/virtualTour/VirtualTourSidebar";
 import _appartment from "../data/appartments.json";

 const appartments = _appartment as IAppartmentComplex[];
+const defaultApartment = appartments[0];

 const VirtualTour = () => {
  const [currentAppartment, setCurrentAppartment] =
@@ -22,6 +23,8 @@ const VirtualTour = () => {
    );
    if (_currentAppartment) {
      setCurrentAppartment(_currentAppartment);
+    } else {
+      setCurrentAppartment(defaultApartment);
    }
  }, [appartmentTypeId]);

@@ -243,9 +243,8 @@ router.get("/", async (req, res) => {

      const slicedApartments = sortedApartments.slice(
        ((page as number) - 1) * (per_page as number),
-        per_page as number
+        (per_page as number) * (page as number)
      );
-      console.log("slicedApartments", slicedApartments);

      res.status(200).json({
        message: "ok",