From b735c80b2696a0a2f52fae1ee5cbf5c3aeebe248 Mon Sep 17 00:00:00 2001
From: Rostyslav Nahornyi <rostyslav.nahornyi@zade.agency>
Date: Sun, 14 Jan 2024 23:57:45 +0200
Subject: [PATCH] feat: open scenes modal for initial entry

---
 src/components/Main.js                        |  7 ++++++-
 .../ScenesModal/ScenesModal.component.jsx     | 19 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/Main.js b/src/components/Main.js
index 7e7df92c..bb427359 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -20,6 +20,9 @@ THREE.ImageUtils.crossOrigin = '';
 injectCSS(
   'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'
 );
+
+const isStreetLoaded = window.location.hash.length;
+
 export default class Main extends Component {
   constructor(props) {
     super(props);
@@ -29,7 +32,7 @@ export default class Main extends Component {
       isModalTexturesOpen: false,
       isSignInModalOpened: false,
       isProfileModalOpened: false,
-      isScenesModalOpened: false,
+      isScenesModalOpened: !isStreetLoaded,
       sceneEl: AFRAME.scenes[0],
       visible: {
         scenegraph: true,
@@ -227,6 +230,8 @@ export default class Main extends Component {
         <ScenesModal
           isOpen={this.state.isScenesModalOpened}
           onClose={this.onCloseScenesModal}
+          initialTab={isStreetLoaded ? 'owner' : 'community'}
+          delay={!isStreetLoaded ? 1500 : undefined}
         />
         <ProfileModal
           isOpen={this.state.isProfileModalOpened}
diff --git a/src/components/modals/ScenesModal/ScenesModal.component.jsx b/src/components/modals/ScenesModal/ScenesModal.component.jsx
index 3f2a480d..046bfd61 100644
--- a/src/components/modals/ScenesModal/ScenesModal.component.jsx
+++ b/src/components/modals/ScenesModal/ScenesModal.component.jsx
@@ -24,8 +24,9 @@ const tabs = [
   }
 ];
 
-const ScenesModal = ({ isOpen, onClose }) => {
+const ScenesModal = ({ isOpen, onClose, initialTab = 'owner', delay }) => {
   const { currentUser } = useAuthContext();
+  const [renderComponent, setRenderComponent] = useState(!delay);
   const [scenesData, setScenesData] = useState([]);
   const [scenesDataCommunity, setScenesDataCommunity] = useState([]);
   const scenesPerPage = 20;
@@ -37,7 +38,7 @@ const ScenesModal = ({ isOpen, onClose }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [isUserLoadedOnce, setIsUserLoadedOnce] = useState(false);
   const [isCommunityLoadedOnce, setIsCommunityLoadedOnce] = useState(false);
-  const [selectedTab, setSelectedTab] = useState('owner');
+  const [selectedTab, setSelectedTab] = useState(initialTab);
 
   const handleSceneClick = (scene) => {
     if (scene.data() && scene.data().data) {
@@ -65,6 +66,16 @@ const ScenesModal = ({ isOpen, onClose }) => {
     }
   };
 
+  useEffect(() => {
+    if (delay) {
+      const timeoutId = setTimeout(() => {
+        setRenderComponent(true);
+      }, delay);
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, []);
+
   useEffect(() => {
     const fetchData = async () => {
       setIsLoadingScenes(true);
@@ -135,7 +146,7 @@ const ScenesModal = ({ isOpen, onClose }) => {
     }
   };
 
-  return (
+  return renderComponent ? (
     <Modal
       className={styles.modalWrapper}
       isOpen={isOpen}
@@ -260,7 +271,7 @@ const ScenesModal = ({ isOpen, onClose }) => {
         )}
       </div>
     </Modal>
-  );
+  ) : null;
 };
 
 export { ScenesModal };