From ce7bc77b1c919668a0a55cd0cbe540a1fd673f14 Mon Sep 17 00:00:00 2001 From: zojgame Date: Thu, 15 Feb 2024 18:37:20 +0500 Subject: [PATCH] refactoring + bug fix --- src/App.css | 0 src/App.tsx | 53 ------------------- src/components/LayoutToggle.tsx | 6 +-- src/components/Map/MapView.tsx | 10 ++-- src/components/ViewToggle.tsx | 6 +-- .../mobile/Appartment/ButtomPanelModal.tsx | 9 ++-- .../mobile/Appartment/ButtonPanel.tsx | 46 ++++++++++++---- .../mobile/Appartment/ImageSlider.tsx | 12 ++++- src/main.tsx | 10 ++-- src/pages/ApartmentPage.tsx | 19 +++++++ .../{Desktop.tsx => DesktopApartmentPage.tsx} | 4 +- .../{Mobile.tsx => MobileApartmentPage.tsx} | 39 +++++++------- 12 files changed, 102 insertions(+), 112 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/App.tsx create mode 100644 src/pages/ApartmentPage.tsx rename src/pages/Desktop/{Desktop.tsx => DesktopApartmentPage.tsx} (97%) rename src/pages/Mobile/{Mobile.tsx => MobileApartmentPage.tsx} (79%) diff --git a/src/App.css b/src/App.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index eb0b8e9..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { isMobile } from "react-device-detect"; -import { useEffect, useState } from "react"; -import { osVersion, isIOS } from "react-device-detect"; -import "./App.css"; -import { useVilla } from "./hooks/useVilla"; -import Desktop from "./pages/Desktop/Desktop"; -import Mobile from "./pages/Mobile/Mobile"; -import useStore from "./store/store"; -import NotSupportModal from "./components/NotSupportModal"; - -function isWebview() { - const navigator = window.navigator; - const userAgent = navigator.userAgent; - const normalizedUserAgent = userAgent.toLowerCase(); - const standalone = navigator.standalone; - - const isIos = - /ip(ad|hone|od)/.test(normalizedUserAgent) || - (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1); - const isAndroid = /android/.test(normalizedUserAgent); - const isSafari = /safari/.test(normalizedUserAgent); - const isWebview = - (isAndroid && /; wv\)/.test(normalizedUserAgent)) || - (isIos && !standalone && !isSafari); - - return isWebview; -} - -function App() { - const { villa } = useVilla(); - const { setCurrentVilla, setModal } = useStore(); - const [isNotSupport, setIsNotSupport] = useState(true); - - useEffect(() => { - // const isDeviceSupport = !(Number(osVersion) < 17 && isIOS); - // console.log("isDeviceSupport", isDeviceSupport); - // setIsNotSupport(!isDeviceSupport); - setCurrentVilla(villa); - }, [setCurrentVilla, villa]); - - // useEffect(() => { - // if (isNotSupport) { - // setModal(); - // } - // }, [isNotSupport]); - - return ( - // <>{isNotSupport ? <> : <>{isMobile ? : }} - <>{isMobile ? : } - ); -} - -export default App; diff --git a/src/components/LayoutToggle.tsx b/src/components/LayoutToggle.tsx index 53c9b28..f170392 100644 --- a/src/components/LayoutToggle.tsx +++ b/src/components/LayoutToggle.tsx @@ -19,7 +19,7 @@ const LayoutToggle = ({
setCurrentView(1)} > {" "} @@ -28,7 +28,7 @@ const LayoutToggle = ({
setCurrentView(2)} > {" "} @@ -37,7 +37,7 @@ const LayoutToggle = ({
setCurrentView(3)} > {" "} diff --git a/src/components/Map/MapView.tsx b/src/components/Map/MapView.tsx index 7bb3b01..74c4209 100644 --- a/src/components/Map/MapView.tsx +++ b/src/components/Map/MapView.tsx @@ -88,13 +88,12 @@ type MapViewComponentProps = { export const MapViewComponent = (props: MapViewComponentProps) => { const { children, className } = props; - const { selectedOnMapVilla, setModal } = useStore(); - const [isLoading, setIsLoading] = useState(false); + const { selectedOnMapVilla, setLoader, setModal } = useStore(); + const [isLoading, setIsLoading] = useState(true); + const [view, setView] = useState<__esri.MapView | undefined>(); const mapRef = useRef(null); - const [view, setView] = useState<__esri.MapView | undefined>(); - useEffect(() => { if (!mapRef?.current) return; @@ -109,8 +108,9 @@ export const MapViewComponent = (props: MapViewComponentProps) => { useEffect(() => { if (isLoading) { - setModal(); + setLoader(); } else { + setLoader(null); if (isMobile) { if (selectedOnMapVilla) { setModal(); diff --git a/src/components/ViewToggle.tsx b/src/components/ViewToggle.tsx index 79afd4f..c113908 100644 --- a/src/components/ViewToggle.tsx +++ b/src/components/ViewToggle.tsx @@ -6,12 +6,10 @@ type ViewSwitcherProps = { }; const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => { - const { sendMessageToUnity, setCurrentView, currentView, setIs3DTour } = - useStore(); + const { sendMessageToUnity, setCurrentView, currentView } = useStore(); const handleOnFirstClick = () => { setCurrentView(1); - setIs3DTour(false); if (sendMessageToUnity) { sendMessageToUnity("JsConnector", "SetOutdoor"); } @@ -19,7 +17,6 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => { const handleOnSecondClick = () => { setCurrentView(2); - setIs3DTour(false); if (sendMessageToUnity) { sendMessageToUnity("JsConnector", "SetGroundFloor"); } @@ -27,7 +24,6 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => { const handleOnThirdClick = () => { setCurrentView(3); - setIs3DTour(false); if (sendMessageToUnity) { sendMessageToUnity("JsConnector", "SetFirstFloor"); } diff --git a/src/components/mobile/Appartment/ButtomPanelModal.tsx b/src/components/mobile/Appartment/ButtomPanelModal.tsx index 955976c..c5eab17 100644 --- a/src/components/mobile/Appartment/ButtomPanelModal.tsx +++ b/src/components/mobile/Appartment/ButtomPanelModal.tsx @@ -75,7 +75,6 @@ export default function ButtomPanelModal() { return (
- +
diff --git a/src/components/mobile/Appartment/ButtonPanel.tsx b/src/components/mobile/Appartment/ButtonPanel.tsx index 609dc72..6109cad 100644 --- a/src/components/mobile/Appartment/ButtonPanel.tsx +++ b/src/components/mobile/Appartment/ButtonPanel.tsx @@ -1,9 +1,27 @@ +import { useNavigate } from "react-router-dom"; import useStore from "../../../store/store"; import PopupModal from "./PopupModal"; import HelpPanel from "./HelpPanel"; import HelpButton from "../../HelpButton"; import BackButton from "../../BackButton"; -import { useNavigate } from "react-router-dom"; + +function isWebview() { + const navigator = window.navigator; + const userAgent = navigator.userAgent; + const normalizedUserAgent = userAgent.toLowerCase(); + const standalone = window.matchMedia("(display-mode: standalone)").matches; + + const isIos = + /ip(ad|hone|od)/.test(normalizedUserAgent) || + (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1); + const isAndroid = /android/.test(normalizedUserAgent); + const isSafari = /safari/.test(normalizedUserAgent); + const isWebview = + (isAndroid && /; wv\)/.test(normalizedUserAgent)) || + (isIos && !standalone && !isSafari); + + return isWebview; +} const ButtonPanel = () => { const { @@ -15,6 +33,7 @@ const ButtonPanel = () => { currentView, } = useStore(); const navigate = useNavigate(); + const isWebView = isWebview(); const handleOnHelpClick = () => { setModal(); @@ -43,17 +62,22 @@ const ButtonPanel = () => { onClick={handleOnBackClick} /> ) : ( - - // + <> + {!isWebView ? ( + + ) : ( + <> + )} + + )} + {is3DTour ? ( + + ) : ( + <> )} -
} diff --git a/src/components/mobile/Appartment/ImageSlider.tsx b/src/components/mobile/Appartment/ImageSlider.tsx index f68c686..f4d771e 100644 --- a/src/components/mobile/Appartment/ImageSlider.tsx +++ b/src/components/mobile/Appartment/ImageSlider.tsx @@ -1,9 +1,17 @@ import useStore from "../../../store/store"; -const ImageSlider = () => { +type ImageSliderProps = { + isScrollable?: boolean; +}; + +const ImageSlider = ({ isScrollable = true }: ImageSliderProps) => { const { currentVilla } = useStore(); return ( -
+
{currentVilla && currentVilla.perspectiveWorkings.map((working) => ( , + element: , }, { path: "/", diff --git a/src/pages/ApartmentPage.tsx b/src/pages/ApartmentPage.tsx new file mode 100644 index 0000000..58387f9 --- /dev/null +++ b/src/pages/ApartmentPage.tsx @@ -0,0 +1,19 @@ +import { isMobile } from "react-device-detect"; +import { useEffect } from "react"; +import { useVilla } from "../hooks/useVilla"; +import DesktopApartmentPage from "./Desktop/DesktopApartmentPage"; +import MobileApartmentPage from "./Mobile/MobileApartmentPage"; +import useStore from "../store/store"; + +function ApartmentPage() { + const { villa } = useVilla(); + const { setCurrentVilla } = useStore(); + + useEffect(() => { + setCurrentVilla(villa); + }, [setCurrentVilla, villa]); + + return <>{isMobile ? : }; +} + +export default ApartmentPage; diff --git a/src/pages/Desktop/Desktop.tsx b/src/pages/Desktop/DesktopApartmentPage.tsx similarity index 97% rename from src/pages/Desktop/Desktop.tsx rename to src/pages/Desktop/DesktopApartmentPage.tsx index 41a2f8d..96111a8 100644 --- a/src/pages/Desktop/Desktop.tsx +++ b/src/pages/Desktop/DesktopApartmentPage.tsx @@ -9,7 +9,7 @@ import { useVilla } from "../../hooks/useVilla"; import ViewToggle from "../../components/ViewToggle"; import ParameterDescription from "../../components/desktop/Appartment/ParameterDescription"; -const Desktop = () => { +const DesktopApartmentPage = () => { const { setCurrentView, setSendMessageToUnity, @@ -94,4 +94,4 @@ const Desktop = () => { ); }; -export default Desktop; +export default DesktopApartmentPage; diff --git a/src/pages/Mobile/Mobile.tsx b/src/pages/Mobile/MobileApartmentPage.tsx similarity index 79% rename from src/pages/Mobile/Mobile.tsx rename to src/pages/Mobile/MobileApartmentPage.tsx index 66277b9..6ef5d83 100644 --- a/src/pages/Mobile/Mobile.tsx +++ b/src/pages/Mobile/MobileApartmentPage.tsx @@ -1,40 +1,35 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import { useEffect, useState } from "react"; import { ReactUnityEventParameter } from "react-unity-webgl/distribution/types/react-unity-event-parameters"; import { Unity } from "react-unity-webgl"; +import { osVersion, isIOS } from "react-device-detect"; import useStore from "../../store/store"; import LoaderModal from "../../components/LoaderModal"; import ButtonPanel from "../../components/mobile/Appartment/ButtonPanel"; import { useUnity } from "../../hooks/useUnity"; import { useVilla } from "../../hooks/useVilla"; import ButtomPanelModal from "../../components/mobile/Appartment/ButtomPanelModal"; +import NotSupportModal from "../../components/NotSupportModal"; -type MobileProps = { - isWebView?: boolean; -}; - -const Mobile = ({ isWebView }: MobileProps) => { +const MobileApartmentPage = () => { const { setCurrentView, setModal, - currentVilla, setSendMessageToUnity, setLoader, setIs3DTour, - is3DTour, } = useStore(); const { villa } = useVilla(); const { unityProvider, sendMessage, addEventListener, removeEventListener } = useUnity(); - // const [isNotSupport, setIsNotSupport] = useState(true); const [isContainerLoaded, setIsContainerLoaded] = useState(false); - - // useEffect(() => { - // const isDeviceSupport = !(Number(osVersion) < 17 && isIOS); - // console.log("isDeviceSupport", isDeviceSupport); - // setIsNotSupport(!isDeviceSupport); - // }, []); + const isDeviceSupported = !(Number(osVersion) < 17 && isIOS); useEffect(() => { + if (!isDeviceSupported) { + return; + } + setLoader(); addEventListener("SetLoaded", handleSetLoaded); addEventListener("SetView", handleSetView); @@ -50,6 +45,10 @@ const Mobile = ({ isWebView }: MobileProps) => { }, []); useEffect(() => { + if (!isDeviceSupported) { + setModal(); + return; + } setModal(); setSendMessageToUnity(sendMessage); if (isContainerLoaded) { @@ -84,13 +83,15 @@ const Mobile = ({ isWebView }: MobileProps) => { <>
- + {isDeviceSupported && ( + + )}
); }; -export default Mobile; +export default MobileApartmentPage;