wing + filter

client/src/components/complexWingPage/SequenceWing.tsx

@@ -12,6 +12,9 @@ import {
   mobileWidht,
   descriptions,
 } from "../../consts/masterplan";
+import { getApartments } from "../../api/apartments";
+import { updateAccessToken } from "../../api/updateAccessToken";
+import { IAparmentRes, IApartmentsRes } from "../../types/apartmentsRes";
 
 const skyGardenFloor = 22;
 
@@ -31,6 +34,13 @@ const SequenceWing = () => {
   const [isSkygardenSidebar, setIsSkygardenSidebar] = useState(false);
   const [isFloorSidebar, setIsFloorSidebar] = useState(false);
   const { setModal } = useModal();
+  const [apartments, setApartments] = useState<IAparmentRes[]>([]);
+  const [currentHoveredApartments, setCurrentHoveredApartments] = useState<
+    IAparmentRes[]
+  >([]);
+  const [selectedApartments, setSelectedApartments] = useState<IAparmentRes[]>(
+    []
+  );
 
   function handleResize() {
     const screenWidth = window.innerWidth;
@@ -54,7 +64,6 @@ const SequenceWing = () => {
       setLeft(_left);
     }
   }
-
   const handleOnFloorMouseEnter = (
     e: React.MouseEvent<SVGPathElement, MouseEvent>
   ) => {
@@ -64,7 +73,15 @@ const SequenceWing = () => {
     const _currentFloor = descriptions.find((desc) => desc.id === id);
     if (!_currentFloor) return;
     setHoverCurrentFloor(_currentFloor);
+    const _currentHoveredApartments = apartments.filter((apartment) => {
+      const wing =
+        apartment.Unit_No.split("-")[0] === "E" ? "East Wing" : "West Wing";
+      return (
+        apartment.Floor === _currentFloor.floor && wing === _currentFloor.wing
+      );
+    });
     setIsWrapperHovered(true);
+    setCurrentHoveredApartments(_currentHoveredApartments);
   };
 
   const handleOnWingWrapperMouseEnter = (
@@ -78,8 +95,9 @@ const SequenceWing = () => {
   };
 
   const handleOnFloorClick = () => {
-    if (!currentHoveredFloor) return;
+    if (!currentHoveredFloor && !currentHoveredApartments) return;
     const screenWidth = window.innerWidth;
+    setSelectedApartments(currentHoveredApartments);
     setCurrentFloor(currentHoveredFloor);
     if (screenWidth < laptopWidth) {
       setModal(<WingFloorModal />);
@@ -129,6 +147,28 @@ const SequenceWing = () => {
     }
   }, [isSidebar]);
 
+  useEffect(() => {
+    const zohoToken = localStorage.getItem("ACCESS_TOKEN");
+
+    getApartments(zohoToken)
+      .catch((error) => {
+        const errorStatus = error.response.status;
+
+        if (errorStatus === 401) {
+          updateAccessToken().then((token) => {
+            if (token) {
+              getApartments(token);
+            }
+          });
+        }
+      })
+      .then((data) => {
+        const apartmentsData = (data as IApartmentsRes).apartments;
+        const updatedApartments = [...apartmentsData];
+        setApartments(updatedApartments);
+      });
+  }, []);
+
   return (
     <div className="absolute left-0 overflow-hidden h-screen w-screen select-none ">
       <div
@@ -136,6 +176,7 @@ const SequenceWing = () => {
         style={{ right: `${isFloorSidebar ? "0" : "-50%"}` }}
       >
         <FloorSidebar
+          floorApartments={selectedApartments}
           currentFloor={currentFloor}
           onMouseEnter={handleOnWingWrapperMouseLeave}
         />
@@ -193,7 +234,10 @@ const SequenceWing = () => {
             }`,
           }}
         >
-          <FloorDescription descriptionFloor={currentHoveredFloor} />
+          <FloorDescription
+            descriptionFloor={currentHoveredFloor}
+            floorApartments={currentHoveredApartments}
+          />
         </div>
 
         <img