wing + filter

client/src/components/searchPage/LayoutCard.tsx

@@ -3,6 +3,7 @@ import Button from "../Button";
 import HeartIcon from "../icons/Heart";
 import { IAparmentRes } from "../../types/apartmentsRes";
 import { useEffect, useState } from "react";
+import useFavorites from "../../store/useFavorites";
 
 interface LayoutCardProps {
   apartmentCard: IAparmentRes;
@@ -19,8 +20,10 @@ const LayoutCard = ({ apartmentCard }: LayoutCardProps) => {
   } = apartmentCard;
   const wing = unit.split("-")[0] === "E" ? "East" : "West";
   const unitNumber = unit.split("-")[1];
+
   const totalArea = `${_totalArea}`.split(".").join(",");
   const [isFavorite, setIsFavorite] = useState(false);
+  const { setFavorites } = useFavorites();
 
   const navigate = useNavigate();
 
@@ -28,25 +31,32 @@ const LayoutCard = ({ apartmentCard }: LayoutCardProps) => {
     navigate(`${id}`);
   };
 
-  const handleOnFavoriteClick = () => {
+  const handleOnFavoriteClick = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    e.stopPropagation();
     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);
+        setFavorites(updatedFavorites);
         localStorage.setItem("Favorites", convertedFavorites);
       } else {
         setIsFavorite(true);
         const updatedFavorites = [..._favorites, apartmentCard];
+        setFavorites(updatedFavorites);
         const convertedFavorites = JSON.stringify(updatedFavorites);
         localStorage.setItem("Favorites", convertedFavorites);
       }

client/src/components/searchPage/LayoutOptions.tsx

@@ -8,96 +8,15 @@ import FilterIcon from "../icons/FilterIcon";
 import useModal from "../../store/useModal";
 import { MobileModalWrapper } from "../modals/mobile/MobileModalWrapper";
 import SearchFiltersModal from "../modals/mobile/SearchFiltersModal";
-import { getApartments } from "../../api/apartments";
-import { IAparmentRes, IApartmentsRes } from "../../types/apartmentsRes";
 import { updateAccessToken } from "../../api/updateAccessToken";
 import useApartments from "../../store/useApartments";
 import useSearchFilters from "../../store/useSearchFilters";
-import { ICheckbox } from "../../types/checkbox";
-import { IMultirangeSlider } from "../../types/multirangeSlider";
 import { useDebounce } from "@uidotdev/usehooks";
-import { ISwitcher } from "../../types/switcher";
-import { initialSliders } from "../../consts/initialMasterplanFilters";
-import { ISort } from "../../types/sortType";
-
-const getFilteredApartments = async (
-  zohoToken: string | null,
-  setApartments: (apartments: IAparmentRes[]) => void,
-  apartments: IAparmentRes[],
-  roveHomeTypeCheckboxes: ICheckbox[],
-  apartmentTypeCheckboxes: ICheckbox[],
-  multirangeSliders: IMultirangeSlider[],
-  switchers: ISwitcher[],
-  viewCheckboxes: ICheckbox[],
-  sortList: ISort[],
-  page: number,
-  perPage: number
-) => {
-  const roveHomeFilters = roveHomeTypeCheckboxes
-    .filter((chx) => chx.selected)
-    .map((chx) => chx.value);
-
-  const apartmentTypeFilters = apartmentTypeCheckboxes
-    .filter((chx) => chx.selected)
-    .map((chx) => chx.value);
-
-  const viewFilters = viewCheckboxes
-    .filter((chx) => chx.selected)
-    .map((chx) => chx.value);
-
-  const sortBy = sortList.find((sortType) => sortType.isSelected)?.value;
-
-  const totalAreaSlider = multirangeSliders.find(
-    (sld) => sld.title === "Total Area"
-  );
-  const totalAreaFilter = [
-    totalAreaSlider?.startValue,
-    totalAreaSlider?.endValue,
-  ] as number[];
-  const isNotFirstFloor = switchers.find(
-    (swch) => swch.isSwitched && swch.title === "Not the first floor"
-  );
-  const isNotTopFloor = switchers.find(
-    (swch) => swch.isSwitched && swch.title === "Not the top floor"
-  );
-  const initialFloorSlider = initialSliders.find(
-    (sld) => sld.title === "Floor"
-  ) as IMultirangeSlider;
-  // если значение ввода в границах слайдера
-  const maxFloor = initialFloorSlider?.maxValue;
-  const minFloor = initialFloorSlider?.minValue;
-
-  const floorSlider = multirangeSliders.find(
-    (sld) => sld.title === "Floor"
-  ) as IMultirangeSlider;
-
-  const startFloorValue = isNotFirstFloor
-    ? Math.max(minFloor + 1, floorSlider.startValue)
-    : floorSlider.startValue;
-  const endFloorValue = isNotTopFloor
-    ? Math.min(maxFloor - 1, floorSlider?.endValue)
-    : floorSlider?.endValue;
-
-  const floorFilter = [startFloorValue, endFloorValue];
-
-  const res = await getApartments(
-    zohoToken,
-    roveHomeFilters,
-    apartmentTypeFilters,
-    viewFilters,
-    totalAreaFilter,
-    floorFilter,
-    sortBy,
-    page,
-    perPage
-  ).then((data) => {
-    const apartmentsData = (data as IApartmentsRes).apartments;
-    const updatedApartments = [...apartments, ...apartmentsData];
-    setApartments(updatedApartments);
-  });
-
-  return res;
-};
+import {
+  perPageInitial,
+  pageInitial,
+} from "../../consts/initialMasterplanFilters";
+import { getFilteredApartments } from "../../calc/getFilteredApartments";
 
 const LayoutOptions = () => {
   const { apartments, setApartments } = useApartments();
@@ -113,6 +32,7 @@ const LayoutOptions = () => {
     setSortList,
     page,
     setPage,
+    setPerPage,
     perPage,
   } = useSearchFilters();
   const debouncedSliders = useDebounce(multirangeSliders, 300);
@@ -134,8 +54,11 @@ const LayoutOptions = () => {
   };
 
   function handleOnShowMoreBtnClick(): void {
-    const nextPage = page + 1;
-    setPage(nextPage);
+    const _page = page + 1;
+    const _perPage = _page * perPageInitial;
+
+    setPage(_page);
+    setPerPage(_perPage);
   }
 
   useEffect(() => {
@@ -144,17 +67,15 @@ const LayoutOptions = () => {
     getFilteredApartments(
       zohoToken,
       setApartments,
-      apartments,
       roveHomeTypeCheckboxes,
       apartmentTypeCheckboxes,
       debouncedSliders,
       switchers,
       viewCheckboxes,
       sortList,
-      page,
+      pageInitial,
       perPage
     ).catch((error) => {
-      console.log("error", error);
       const errorStatus = error.response.status;
 
       if (errorStatus === 401) {
@@ -163,14 +84,13 @@ const LayoutOptions = () => {
             getFilteredApartments(
               token,
               setApartments,
-              apartments,
               roveHomeTypeCheckboxes,
               apartmentTypeCheckboxes,
               debouncedSliders,
               switchers,
               viewCheckboxes,
               sortList,
-              page,
+              pageInitial,
               perPage
             );
           }
@@ -185,7 +105,6 @@ const LayoutOptions = () => {
     switchers,
     viewCheckboxes,
     sortList,
-    page,
     perPage,
   ]);
 

client/src/components/searchPage/SidebarFilters.tsx

@@ -10,6 +10,8 @@ import {
   initialSliders,
   initialSwitchers,
   initialRoveHomeCheckboxes,
+  pageInitial,
+  perPageInitial,
 } from "../../consts/initialMasterplanFilters";
 
 const SidebarFilters = () => {
@@ -24,6 +26,8 @@ const SidebarFilters = () => {
     setRoveHomeTypeCheckboxes,
     viewCheckboxes,
     setViewCheckboxes,
+    setPage,
+    setPerPage,
   } = useSearchFilters();
 
   const handleOnCheckboxApartmentClick = (checkboxId: string) => {
@@ -89,6 +93,8 @@ const SidebarFilters = () => {
     setRoveHomeTypeCheckboxes(initialRoveHomeCheckboxes);
     setMultirangeSliders(initialSliders);
     setSwitchers(initialSwitchers);
+    setPage(pageInitial);
+    setPerPage(perPageInitial);
   };
 
   return (

client/src/components/searchPage/SortButton.tsx

@@ -35,7 +35,7 @@ const SortButton = ({ sortList, onClick }: SortButtonProps) => {
       </button>
       <div
         className={`absolute z-20 flex flex-col bg-white p-2 text-[#0D1922] rounded-lg w-full shadow-lg transition-opacity duration-300 ease-in-out ${
-          isSelected ? "opacity-100" : "opacity-0"
+          isSelected ? "opacity-100" : "opacity-0 pointer-events-none hidden"
         }`}
       >
         {sortList.map((sort) => (