Merge pull request #916 from 3DStreet/zustand-cont

Zustand cont

src/editor/components/components/ActionBar/ActionBar.component.jsx

@@ -7,8 +7,12 @@ import { Button } from '../Button';
 import { useState, useEffect } from 'react';
 import posthog from 'posthog-js';
 import { Rotate24Icon, Translate24Icon } from '../../../icons';
+import useStore from '@/store.js';
+
+const ActionBar = ({ selectedEntity }) => {
+  const setModal = useStore((state) => state.setModal);
+  const isOpen = useStore((state) => state.modal === 'addlayer');
 
-const ActionBar = ({ handleAddClick, isAddLayerPanelOpen, selectedEntity }) => {
   const [cursorEnabled, setCursorEnabled] = useState(
     AFRAME.INSPECTOR.cursor.isPlaying
   );
@@ -42,7 +46,7 @@ const ActionBar = ({ handleAddClick, isAddLayerPanelOpen, selectedEntity }) => {
 
   return (
     <div>
-      {!isAddLayerPanelOpen && (
+      {!isOpen && (
         <div className={styles.wrapper}>
           <Button
             variant="toolbtn"
@@ -79,7 +83,7 @@ const ActionBar = ({ handleAddClick, isAddLayerPanelOpen, selectedEntity }) => {
           >
             <Rotate24Icon />
           </Button>
-          <Button variant="toolbtn" onClick={handleAddClick}>
+          <Button variant="toolbtn" onClick={() => setModal('addlayer')}>
             <AwesomeIcon icon={faPlusSquare} />
           </Button>
         </div>

src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx

@@ -14,6 +14,7 @@ import Events from '../../../lib/Events';
 import pickPointOnGroundPlane from '../../../lib/pick-point-on-ground-plane';
 import { customLayersData, streetLayersData } from './layersData.js';
 import { LayersOptions } from './LayersOptions.js';
+import useStore from '@/store.js';
 
 // Create an empty image
 const emptyImg = new Image();
@@ -266,13 +267,19 @@ const cardMouseLeave = (mixinId) => {
   }
 };
 
-const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
+const AddLayerPanel = () => {
+  const setModal = useStore((state) => state.setModal);
+  const isOpen = useStore((state) => state.modal === 'addlayer');
   // set the first Layers option when opening the panel
   const [selectedOption, setSelectedOption] = useState(LayersOptions[0].value);
   const [groupedMixins, setGroupedMixins] = useState([]);
   const { currentUser } = useAuthContext();
   const isProUser = currentUser && currentUser.isPro;
 
+  const onClose = () => {
+    setModal(null);
+  };
+
   useEffect(() => {
     // call getGroupedMixinOptions once time for getting mixinGroups
     const data = getGroupedMixinOptions();
@@ -398,7 +405,7 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
   return (
     <div
       className={classNames(styles.panel, {
-        [styles.open]: isAddLayerPanelOpen
+        [styles.open]: isOpen
       })}
     >
       {createPortal(

src/editor/components/components/GeoPanel/GeoPanel.component.jsx

@@ -1,8 +1,8 @@
 import GeoImg from '../../../../../ui_assets/geo.png';
 import styles from './GeoPanel.module.scss';
-import Events from '../../../lib/Events';
 import { useAuthContext, useGeoContext } from '../../../contexts/index.js';
 import posthog from 'posthog-js';
+import useStore from '@/store';
 /**
  * GeoPanel component.
  *
@@ -11,14 +11,16 @@ import posthog from 'posthog-js';
  */
 const GeoPanel = () => {
   const { currentUser } = useAuthContext();
+  const setModal = useStore((state) => state.setModal);
+
   const onClick = () => {
     posthog.capture('geo_panel_clicked');
     if (!currentUser) {
-      Events.emit('opensigninmodal');
+      setModal('signin');
     } else if (currentUser.isPro) {
-      Events.emit('opengeomodal');
+      setModal('geo');
     } else {
-      Events.emit('openpaymentmodal');
+      setModal('payment');
     }
   };
 

src/editor/components/components/Logo/Logo.component.jsx

@@ -1,27 +1,32 @@
 import { Button } from '../Button';
-import PropTypes from 'prop-types';
 import styles from './Logo.module.scss';
-
+import useStore from '@/store';
 /**
  * Logo component.
  *
  * @author Oleksii Medvediev
  * @category Components
  */
-const Logo = ({ onToggleEdit, isEditor }) => (
-  <div className="flex items-center gap-2">
-    <div className={styles.logo} id="logoImg">
-      <img src="ui_assets/3D-St-stacked-128.png" alt="3DStreet Logo" />
-    </div>
-    <Button onClick={onToggleEdit} className={styles.btn} variant="toolbtn">
-      {isEditor ? 'Enter Viewer mode' : 'Enter Editor mode'}
-    </Button>
-  </div>
-);
+const Logo = () => {
+  const setIsInspectorEnabled = useStore(
+    (state) => state.setIsInspectorEnabled
+  );
+  const isInspectorEnabled = useStore((state) => state.isInspectorEnabled);
 
-Logo.propTypes = {
-  onToggleEdit: PropTypes.func,
-  isEditor: PropTypes.bool
+  return (
+    <div className="flex items-center space-x-2">
+      <div className={styles.logo} id="logoImg">
+        <img src="ui_assets/3D-St-stacked-128.png" alt="3DStreet Logo" />
+      </div>
+      <Button
+        onClick={() => setIsInspectorEnabled(!isInspectorEnabled)}
+        className={styles.btn}
+        variant="toolbtn"
+      >
+        {isInspectorEnabled ? 'Enter Viewer mode' : 'Enter Editor mode'}
+      </Button>
+    </div>
+  );
 };
 
 export { Logo };

src/editor/components/components/ProfileButton/ProfileButton.component.jsx

@@ -1,12 +1,11 @@
 import styles from './ProfileButton.module.scss';
 
 import { Button } from '../Button';
-import Events from '../../../lib/Events.js';
 import { Profile32Icon } from './icons.jsx';
 import { useAuthContext } from '../../../contexts';
 import posthog from 'posthog-js';
 import MsftProfileImg from '../../../../../ui_assets/profile-microsoft.png';
-
+import useStore from '@/store';
 /**
  * ProfileButton component.
  *
@@ -43,14 +42,14 @@ const renderProfileIcon = (currentUser) => {
 
 const ProfileButton = () => {
   const { currentUser } = useAuthContext();
-
+  const setModal = useStore((state) => state.setModal);
   const onClick = async () => {
     posthog.capture('profile_button_clicked', { is_logged_in: !!currentUser });
     if (currentUser) {
-      return Events.emit('openprofilemodal');
+      setModal('profile');
+    } else {
+      setModal('signin');
     }
-
-    return Events.emit('opensigninmodal');
   };
 
   return (

src/editor/components/modals/GeoModal/GeoModal.component.jsx

@@ -17,8 +17,9 @@ import {
 import GeoImg from '../../../../../ui_assets/geo.png';
 import { roundCoord } from '../../../../../src/utils.js';
 import { QrCode } from '../../components/QrCode';
+import useStore from '@/store.js';
 
-const GeoModal = ({ isOpen, onClose }) => {
+const GeoModal = () => {
   const { isLoaded } = useJsApiLoader({
     googleMapsApiKey: firebaseConfig.apiKey
   });
@@ -30,6 +31,12 @@ const GeoModal = ({ isOpen, onClose }) => {
   const [autocomplete, setAutocomplete] = useState(null);
   const [qrCodeUrl, setQrCodeUrl] = useState(null);
   const [isWorking, setIsWorking] = useState(false);
+  const setModal = useStore((state) => state.setModal);
+  const isOpen = useStore((state) => state.modal === 'geo');
+
+  const onClose = () => {
+    setModal(null);
+  };
 
   useEffect(() => {
     if (isOpen) {

src/editor/components/modals/IntroModal/IntroModal.component.jsx

@@ -1,7 +1,13 @@
 import Modal from '../Modal.jsx';
 import MuxPlayer from '@mux/mux-player-react';
+import useStore from '@/store.js';
 
-const IntroModal = ({ isOpen, onClose }) => {
+const IntroModal = () => {
+  const isOpen = useStore((state) => state.modal === 'intro');
+  const onClose = () => {
+    useStore.getState().setModal(null);
+    localStorage.setItem('shownIntro', true);
+  };
   return (
     <Modal isOpen={isOpen} onClose={onClose} title="Welcome to 3DStreet">
       <MuxPlayer

src/editor/components/modals/PaymentModal/PaymentModal.component.jsx

@@ -9,6 +9,7 @@ import { Button } from '../../components/index.js';
 import Modal from '../Modal.jsx';
 import { functions } from '../../../services/firebase.js';
 import posthog from 'posthog-js';
+import useStore from '@/store';
 
 let stripePromise;
 const getStripe = () => {
@@ -19,9 +20,11 @@ const getStripe = () => {
   return stripePromise;
 };
 
-const PaymentModal = ({ isOpen, onClose }) => {
+const PaymentModal = () => {
   const { currentUser } = useAuthContext();
   const [isLoading, setIsLoading] = useState(false);
+  const setModal = useStore((state) => state.setModal);
+  const modal = useStore((state) => state.modal);
 
   if (location.hash.includes('success')) {
     posthog.capture('checkout_finished');
@@ -59,8 +62,17 @@ const PaymentModal = ({ isOpen, onClose }) => {
     setIsLoading(false);
   };
 
+  const onClose = () => {
+    window.location.hash = '#';
+    setModal(null);
+  };
+
   return (
-    <Modal className={styles.modalWrapper} isOpen={isOpen} onClose={onClose}>
+    <Modal
+      className={styles.modalWrapper}
+      isOpen={modal === 'payment'}
+      onClose={onClose}
+    >
       <div className={styles.paymentDetails}>
         <h3>Unlock Geospatial Features with a free 30 day trial</h3>
         <h2>

src/editor/components/modals/ProfileModal/ProfileModal.component.jsx

@@ -6,16 +6,23 @@ import { Button } from '../../components';
 import { useAuthContext } from '../../../contexts';
 import { signOut } from 'firebase/auth';
 import { auth, functions } from '../../../services/firebase';
-import Events from '../../../lib/Events.js';
 import { Action24, Loader } from '../../../icons';
 import { httpsCallable } from 'firebase/functions';
 import posthog from 'posthog-js';
 import { renderProfileIcon } from '../../components/ProfileButton';
+import useStore from '@/store';
 
-const ProfileModal = ({ isOpen, onClose }) => {
+const ProfileModal = () => {
   const { currentUser, setCurrentUser } = useAuthContext();
+  const setModal = useStore((state) => state.setModal);
+  const modal = useStore((state) => state.modal);
+
   const [isLoading, setIsLoading] = useState(false);
 
+  const onClose = () => {
+    setModal(null);
+  };
+
   const logOutHandler = async () => {
     onClose();
     await signOut(auth);
@@ -40,7 +47,11 @@ const ProfileModal = ({ isOpen, onClose }) => {
   };
 
   return (
-    <Modal className={styles.modalWrapper} isOpen={isOpen} onClose={onClose}>
+    <Modal
+      className={styles.modalWrapper}
+      isOpen={modal === 'profile'}
+      onClose={onClose}
+    >
       <div className={styles.contentWrapper}>
         <h2 className={styles.title}>3DStreet Cloud Account</h2>
         <div className={styles.content}>
@@ -110,7 +121,7 @@ const ProfileModal = ({ isOpen, onClose }) => {
                 <Button
                   onClick={() => {
                     onClose();
-                    Events.emit('openpaymentmodal');
+                    setModal('payment');
                   }}
                   type="filled"
                   target="_blank"

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

@@ -25,7 +25,7 @@ const tabs = [
   }
 ];
 
-const ScenesModal = ({ isOpen, onClose, initialTab = 'owner', delay }) => {
+const ScenesModal = ({ initialTab = 'owner', delay = undefined }) => {
   const { currentUser } = useAuthContext();
   const [renderComponent, setRenderComponent] = useState(!delay);
   const [scenesData, setScenesData] = useState([]);
@@ -38,6 +38,8 @@ const ScenesModal = ({ isOpen, onClose, initialTab = 'owner', delay }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [selectedTab, setSelectedTab] = useState(initialTab);
 
+  const setModal = useStore((state) => state.setModal);
+  const isOpen = useStore((state) => state.modal === 'scenes');
   const handleSceneClick = (scene, event) => {
     posthog.capture('scene_opened', {
       scene_id: scene.id,
@@ -139,6 +141,10 @@ const ScenesModal = ({ isOpen, onClose, initialTab = 'owner', delay }) => {
     fetchData();
   }, [isOpen, currentUser, selectedTab]); // eslint-disable-line
 
+  const onClose = () => {
+    setModal(null);
+  };
+
   const fetchUserScenes = async () => {
     return await getUserScenes(currentUser?.uid);
   };