virtual tour sidebar info

2024-06-27 14:36:11 +05:00
parent 9737340da7
commit d499a1dd13
19 changed files with 395 additions and 145 deletions
@@ -1,13 +1,13 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 import Footer from "../components/Footer";
 import ButtonPanel from "../components/apartmentPage/ButtonPanel";
 import ApartmentLayout from "../components/apartmentPage/ApartmentLayout";
 import ApartmentSidebar from "../components/ApartmentSidebar";
 import StudioDescriptionSection from "../components/apartmentPage/StudioDescriptionSection";
-import { useEffect, useState } from "react";
-import { getApartments } from "../api/apartments";
+import { getCurrentApartment } from "../api/apartments";
 import { updateAccessToken } from "../api/updateAccessToken";
-import { IAparmentRes, IApartmentsRes } from "../types/apartmentsRes";
-import { useNavigate, useParams } from "react-router-dom";
+import { IAparmentRes } from "../types/apartmentsRes";
 import useModal from "../store/useModal";
 import SearchLoaderModal from "../components/modals/SearchLoaderModal";

@@ -23,47 +23,44 @@ const ApartmentPage = () => {
    setIsLoading(true);
    const zohoToken = localStorage.getItem("ACCESS_TOKEN");

-    getApartments(zohoToken)
+    if (!id) return;
+
+    getCurrentApartment(zohoToken, id)
      .then((data) => {
-        const apartmentsData = (data as IApartmentsRes).apartments;
-        const _currentApartment = apartmentsData.find((aprt) => aprt.id === id);
-        if (_currentApartment) {
-          setCurrentApartment(_currentApartment);
-        } else {
-          console.log("Apartment not found");
-          navigate(-1);
-        }
+        const _currentApartment = data.apartment;
+        setCurrentApartment(_currentApartment);
        setIsLoading(false);
      })
      .catch((error) => {
        const errorStatus = error.response.status;

        if (errorStatus === 401) {
-          updateAccessToken().then((token) => {
+          return updateAccessToken().then((token) => {
            if (token) {
-              getApartments(token)
+              getCurrentApartment(token, id)
                .then((data) => {
-                  const apartmentsData = (data as IApartmentsRes).apartments;
-                  const _currentApartment = apartmentsData.find(
-                    (aprt) => aprt.id === id
-                  );
+                  const _currentApartment = data.apartment;
                  if (_currentApartment) {
                    setCurrentApartment(_currentApartment);
-                  } else {
-                    navigate(-1);
                  }
-                  setIsLoading(false);
                })
                .catch(() => {
                  console.error("error", error);
+                })
+                .finally(() => {
                  setIsLoading(false);
                });
            }
          });
+        } else if (errorStatus === 404) {
+          console.log("Apartment not found");
+          navigate(-1);
        } else {
          console.error("error", error);
          setIsLoading(false);
+          navigate(-1);
        }
+        setIsLoading(false);
      });
  }, [id, navigate]);

@@ -1,40 +1,108 @@
 import { useEffect, useState } from "react";
 import { Canvas } from "@react-three/fiber";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import VirtualTourWrapper from "../components/virtualTour/VirtualTourWrapper";
 import { IAppartmentComplex } from "../types/apartmentSphere";
 import VirtualTourTopPanel from "../components/virtualTour/VirtualTourTopPanel";
 import ButtomPanelCompassVirtualTour from "../components/virtualTour/ButtomPanelCompassVirualTour";
 import VirtualTourSidebar from "../components/virtualTour/VirtualTourSidebar";
 import _appartment from "../data/appartments.json";
+import { getCurrentApartment } from "../api/apartments";
+import { updateAccessToken } from "../api/updateAccessToken";
+import { IAparmentRes } from "../types/apartmentsRes";
+import useModal from "../store/useModal";
+import LoaderModal from "../components/modals/LoaderModal";

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

 const VirtualTour = () => {
-  const [currentAppartment, setCurrentAppartment] =
+  const [currentAppartmentSphere, setCurrentAppartmentSphere] =
    useState<null | IAppartmentComplex>(null);
-
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentApartment, setCurrentApartment] = useState<IAparmentRes | null>(
+    null
+  );
+  const navigate = useNavigate();
  const { appartmentTypeId } = useParams();
+  const { setModal } = useModal();

  useEffect(() => {
-    const _currentAppartment = appartments.find(
-      (app) => app.id === appartmentTypeId
+    setIsLoading(true);
+    const zohoToken = localStorage.getItem("ACCESS_TOKEN");
+
+    if (!appartmentTypeId) return;
+
+    getCurrentApartment(zohoToken, appartmentTypeId)
+      .then((data) => {
+        const _currentApartment = data.apartment;
+        setCurrentApartment(_currentApartment);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        const errorStatus = error.response.status;
+
+        if (errorStatus === 401) {
+          return updateAccessToken().then((token) => {
+            if (token) {
+              getCurrentApartment(token, appartmentTypeId)
+                .then((data) => {
+                  const _currentApartment = data.apartment;
+                  if (_currentApartment) {
+                    setCurrentApartment(_currentApartment);
+                  }
+                })
+                .catch(() => {
+                  console.error("error", error);
+                })
+                .finally(() => {
+                  setIsLoading(false);
+                });
+            }
+          });
+        } else if (errorStatus === 404) {
+          console.log("Apartment not found");
+          navigate(-1);
+        } else {
+          console.error("error", error);
+          setIsLoading(false);
+          navigate(-1);
+        }
+        setIsLoading(false);
+      });
+  }, [appartmentTypeId, navigate]);
+
+  useEffect(() => {
+    if (!currentApartment) return;
+
+    const _currentAppartmentSphere = appartments.find(
+      (app) => app.id === currentApartment.Unit_Type
    );
-    if (_currentAppartment) {
-      setCurrentAppartment(_currentAppartment);
+    if (_currentAppartmentSphere) {
+      setCurrentAppartmentSphere(_currentAppartmentSphere);
    } else {
-      setCurrentAppartment(defaultApartment);
+      setCurrentAppartmentSphere(defaultApartment);
    }
-  }, [appartmentTypeId]);
+  }, [appartmentTypeId, currentApartment]);
+
+  useEffect(() => {
+    if (isLoading) {
+      setModal(<LoaderModal />);
+    } else {
+      setModal(null);
+    }
+  }, [isLoading, setModal]);

  return (
    <div className="overflow-hidden h-screen w-screen select-none">
      <VirtualTourTopPanel />
-      <VirtualTourSidebar currentAppartment={currentAppartment} />
+      <VirtualTourSidebar
+        appartmentSphere={currentAppartmentSphere}
+        apartment={currentApartment}
+      />
      <Canvas camera={{ fov: 90 }}>
-        {currentAppartment && (
-          <VirtualTourWrapper appartment={currentAppartment} />
+        {currentAppartmentSphere && (
+          <VirtualTourWrapper appartment={currentAppartmentSphere} />
        )}
      </Canvas>
      <ButtomPanelCompassVirtualTour />