Merge pull request #380 from 3DStreet/fix/issue-299/first-entry

feat: open scenes modal for initial entry

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}

src/components/modals/ScenesModal/ScenesModal.component.jsx

@@ -25,9 +25,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 [totalDisplayedUserScenes, setTotalDisplayedUserScenes] =
@@ -36,7 +36,9 @@ const ScenesModal = ({ isOpen, onClose }) => {
     useState(SCENES_PER_PAGE);
   const [isLoadingScenes, setIsLoadingScenes] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const [selectedTab, setSelectedTab] = useState('owner');
+  const [isUserLoadedOnce, setIsUserLoadedOnce] = useState(false);
+  const [isCommunityLoadedOnce, setIsCommunityLoadedOnce] = useState(false);
+  const [selectedTab, setSelectedTab] = useState(initialTab);
 
   const handleSceneClick = (scene) => {
     if (scene.data() && scene.data().data) {
@@ -64,6 +66,16 @@ const ScenesModal = ({ isOpen, onClose }) => {
     }
   };
 
+  useEffect(() => {
+    if (delay) {
+      const timeoutId = setTimeout(() => {
+        setRenderComponent(true);
+      }, delay);
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, []);
+
   useEffect(() => {
     const fetchData = async () => {
       console.log({ scenesData, scenesDataCommunity });
@@ -144,7 +156,7 @@ const ScenesModal = ({ isOpen, onClose }) => {
     }
   };
 
-  return (
+  return renderComponent ? (
     <Modal
       className={styles.modalWrapper}
       isOpen={isOpen}
@@ -268,7 +280,7 @@ const ScenesModal = ({ isOpen, onClose }) => {
         )}
       </div>
     </Modal>
-  );
+  ) : null;
 };
 
 export { ScenesModal };