modal + favorite page + video modal + fixes

client/src/components/complexWingPage/SequenceWing.tsx

@@ -12,9 +12,14 @@ import {
   mobileWidht,
   descriptions,
 } from "../../consts/masterplan";
-import { getApartments } from "../../api/apartments";
 import { updateAccessToken } from "../../api/updateAccessToken";
-import { IAparmentRes, IApartmentsRes } from "../../types/apartmentsRes";
+import { IAparmentRes } from "../../types/apartmentsRes";
+import useMasterplanFilters from "../../store/useMasterplanFilters";
+import { initialRoveHomeCheckboxes } from "../../consts/initialMasterplanFilters";
+import { pageInitial } from "../../consts/initialMasterplanFilters";
+import { useDebounce } from "@uidotdev/usehooks";
+import { getFilteredApartments } from "../../calc/getFilteredApartments";
+import MasterplanLoaderModal from "../modals/MasterplanLoaderModal";
 
 const skyGardenFloor = 22;
 
@@ -27,6 +32,7 @@ const SequenceWing = () => {
   const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
   const [currentHoveredFloor, setHoverCurrentFloor] =
     useState<null | IDesctiptionFloor>(null);
+  const [isLoading, setIsLoading] = useState(true);
   const [currentFloor, setCurrentFloor] = useState<IDesctiptionFloor | null>(
     null
   );
@@ -41,6 +47,14 @@ const SequenceWing = () => {
   const [selectedApartments, setSelectedApartments] = useState<IAparmentRes[]>(
     []
   );
+  const {
+    apartmentTypeCheckboxes,
+    switchers,
+    multirangeSliders,
+    viewCheckboxes,
+    sortList,
+  } = useMasterplanFilters();
+  const debouncedSliders = useDebounce(multirangeSliders, 300);
 
   function handleResize() {
     const screenWidth = window.innerWidth;
@@ -149,25 +163,60 @@ const SequenceWing = () => {
 
   useEffect(() => {
     const zohoToken = localStorage.getItem("ACCESS_TOKEN");
+    setIsLoading(true);
 
-    getApartments(zohoToken)
+    getFilteredApartments(
+      zohoToken,
+      setApartments,
+      initialRoveHomeCheckboxes,
+      apartmentTypeCheckboxes,
+      debouncedSliders,
+      switchers,
+      viewCheckboxes,
+      sortList,
+      pageInitial,
+      1000
+    )
       .catch((error) => {
         const errorStatus = error.response.status;
 
         if (errorStatus === 401) {
           updateAccessToken().then((token) => {
             if (token) {
-              getApartments(token);
+              getFilteredApartments(
+                token,
+                setApartments,
+                initialRoveHomeCheckboxes,
+                apartmentTypeCheckboxes,
+                debouncedSliders,
+                switchers,
+                viewCheckboxes,
+                sortList,
+                pageInitial,
+                1000
+              );
             }
           });
         }
       })
-      .then((data) => {
-        const apartmentsData = (data as IApartmentsRes).apartments;
-        const updatedApartments = [...apartmentsData];
-        setApartments(updatedApartments);
+      .finally(() => {
+        setIsLoading(false);
       });
-  }, []);
+  }, [
+    apartmentTypeCheckboxes,
+    debouncedSliders,
+    sortList,
+    switchers,
+    viewCheckboxes,
+  ]);
+
+  useEffect(() => {
+    if (isLoading) {
+      setModal(<MasterplanLoaderModal />);
+    } else {
+      setModal(null);
+    }
+  }, [isLoading, setModal]);
 
   return (
     <div className="absolute left-0 overflow-hidden h-screen w-screen select-none ">