Zustand (#914)

* add zustand to 3dstreet --------- Co-authored-by: Rahul Gupta <[email protected]> Co-authored-by: Kieran Farr <[email protected]> Co-authored-by: Vincent Fretin <[email protected]>
3DStreet · Nov 15, 2024 · 80c9915 · 80c9915
1 parent 2929a6d
commit 80c9915
Show file tree

Hide file tree

Showing 24 changed files with 109 additions and 390 deletions.
diff --git a/index.html b/index.html
@@ -35,16 +35,6 @@
   <!-- loading animation start -->
   <div class="loader__wrapper">
     <div class="loader">
-      <div class="entities">
-        <img src="./ui_assets/loader/entities.svg" alt="entities" />
-      </div>
-      <div class="transport">
-        <div class="wrapper__transport">
-          <img src="./ui_assets/loader/car.svg" class="car" alt="car" />
-          <img src="./ui_assets/loader/bus.svg" class="bus" alt="bus" />
-          <img src="./ui_assets/loader/bike.svg" class="bike" alt="bike" />
-        </div>
-      </div>
       <div class="road">Loading 3DStreet</div>
     </div>
   </div>
@@ -76,8 +66,8 @@
 
   <a-scene
     renderer="colorManagement: true; physicallyCorrectLights: true; anisotropy: 16; logarithmicDepthBuffer: true;"
-    inspector="url: ./dist/3dstreet-editor.js" timed-inspector="1" loading-screen="enabled: false" notify metadata
-    scene-title reflection device-orientation-permission-ui="enabled: false"
+    loading-screen="enabled: false" notify metadata
+    reflection device-orientation-permission-ui="enabled: false"
     webxr="requiredFeatures:hit-test,local-floor;referenceSpaceType:local-floor;" xr-mode-ui="XRMode: ar">
     <a-assets>
       <!-- TODO: Add this to repo documentation  -->
@@ -129,27 +119,5 @@
     });
   });
 </script>
-<script>
-
-  function startEditor() {
-    var sceneEl = document.querySelector('a-scene');
-    sceneEl.components.inspector.openInspector();
-    document.querySelector('.viewer-header-wrapper').style.display = 'none';
-  }
-
-  // launch the inspector in x seconds if ?viewer querystring NOT present
-  AFRAME.registerComponent('timed-inspector', {
-    init: function () {
-      const urlParams = new URLSearchParams(window.location.search);
-      const viewerParam = urlParams.get('viewer');
-      if (!viewerParam) {
-        setTimeout(function () {
-          window.postMessage('INJECT_AFRAME_INSPECTOR');
-        }, this.data * 1000);
-      }
-    }
-  });
-</script>
-<!-- <script src="./dist/3dstreet-editor.js"></script> -->
 
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,11 +48,11 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-ga4": "^2.1.0",
     "react-select": "^5.4.0",
     "stripe": "^15.8.0",
     "three": "0.145.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.24.5",

diff --git a/src/components/screentock.js b/src/components/screentock.js
@@ -1,18 +1,5 @@
 /* AFRAME */
-
-// function buttonScreenshotTock() {
-//   AFRAME.scenes[0].setAttribute('screentock', 'type', 'jpg');
-//   AFRAME.scenes[0].setAttribute('screentock', 'takeScreenshot', true);
-// }
-// function buttonScreenshotTockPNG() {
-//   AFRAME.scenes[0].setAttribute('screentock', 'type', 'png');
-//   AFRAME.scenes[0].setAttribute('screentock', 'takeScreenshot', true);
-// }
-// function buttonCaptureImage() {
-//   AFRAME.scenes[0].setAttribute('screentock', 'type', 'img');
-//   AFRAME.scenes[0].setAttribute('screentock', 'imgElementSelector', '#captureImg');
-//   AFRAME.scenes[0].setAttribute('screentock', 'takeScreenshot', true);
-// }
+import useStore from '../store';
 
 AFRAME.registerComponent('screentock', {
   schema: {
@@ -62,7 +49,7 @@ AFRAME.registerComponent('screentock', {
       ctx.textAlign = 'center';
       ctx.fillStyle = '#FFF';
       ctx.fillText(
-        STREET.utils.getCurrentSceneTitle(),
+        useStore.getState().sceneTitle,
         screenWidth - screenWidth / 2,
         screenHeight - 43
       );

diff --git a/src/components/streetplan-loader.js b/src/components/streetplan-loader.js
@@ -1,6 +1,9 @@
 /* global AFRAME, XMLHttpRequest */
+import useStore from '../store.js';
 var streetplanUtils = require('../streetplan/streetplan-utils.js');
 
+const state = useStore.getState();
+
 AFRAME.registerComponent('streetplan-loader', {
   dependencies: ['street'],
   schema: {
@@ -25,20 +28,8 @@ AFRAME.registerComponent('streetplan-loader', {
     // streetplan alternative name
     // const streetplanAltName = streetData.altName;
 
-    console.log('streetplanName', streetplanName);
-
-    let currentSceneTitle;
-    const sceneEl = this.el.sceneEl;
-    if (sceneEl && sceneEl.getAttribute('metadata')) {
-      currentSceneTitle = sceneEl.getAttribute('metadata').sceneTitle;
-    }
-    if (!currentSceneTitle) {
-      // only set title from streetplan if none exists
-      sceneEl.setAttribute('metadata', 'sceneTitle', streetplanName);
-      console.log(
-        'therefore setting metadata sceneTitle as streetplanName',
-        streetplanName
-      );
+    if (!state.sceneTitle) {
+      state.setSceneTitle(streetplanName);
     }
 
     el.setAttribute('data-layer-name', 'StreetPlan • ' + streetplanName);

diff --git a/src/editor/components/Collapsible.js b/src/editor/components/Collapsible.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { sendMetric } from '../services/ga';
 
 export default class Collapsible extends React.Component {
   static propTypes = {
@@ -27,7 +26,6 @@ export default class Collapsible extends React.Component {
     // Don't collapse if we click on actions like clipboard
     if (event.target.nodeName === 'A') return;
     this.setState({ collapsed: !this.state.collapsed });
-    sendMetric('Components', 'collapse');
   };
 
   render() {

diff --git a/src/editor/components/Main.js b/src/editor/components/Main.js
@@ -237,7 +237,6 @@ export default class Main extends Component {
   render() {
     const scene = this.state.sceneEl;
     const isEditor = !!this.state.inspectorEnabled;
-    const sceneData = AFRAME.scenes[0].getAttribute('metadata', 'sceneTitle');
 
     return (
       <div id="inspectorContainer">
@@ -316,7 +315,7 @@ export default class Main extends Component {
         )}
         {this.state.inspectorEnabled && (
           <div id="scene-title" className="clickable">
-            <SceneEditTitle sceneData={sceneData} />
+            <SceneEditTitle />
           </div>
         )}
         {this.state.inspectorEnabled && (

diff --git a/src/editor/components/components/Component.js b/src/editor/components/components/Component.js
@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import PropertyRow from './PropertyRow';
 import React from 'react';
 import { getComponentClipboardRepresentation } from '../../lib/entity';
-import { sendMetric } from '../../services/ga';
 
 const isSingleProperty = AFRAME.schema.isSingleProperty;
 
@@ -45,7 +44,6 @@ export default class Component extends React.Component {
           var componentName = trigger
             .getAttribute('data-component')
             .toLowerCase();
-          sendMetric('Components', 'copyComponentToClipboard', componentName);
           return getComponentClipboardRepresentation(
             this.state.entity,
             componentName
@@ -85,7 +83,6 @@ export default class Component extends React.Component {
         entity: this.props.entity,
         component: componentName
       });
-      sendMetric('Components', 'removeComponent', componentName);
     }
   };
 

diff --git a/src/editor/components/components/Mixins.js b/src/editor/components/components/Mixins.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import Select, { components } from 'react-select';
 import Events from '../../lib/Events';
 import { DropdownArrowIcon } from '../../icons';
-import { sendMetric } from '../../services/ga';
 
 export default class Mixin extends React.Component {
   static propTypes = {
@@ -80,7 +79,6 @@ export default class Mixin extends React.Component {
       entity: entity,
       value: mixinStr
     });
-    sendMetric('Components', 'addMixin');
   };
 
   updateMixinSingle = (value) => {
@@ -92,7 +90,6 @@ export default class Mixin extends React.Component {
       entity: entity,
       value: mixinStr
     });
-    sendMetric('Components', 'addMixin');
   };
 
   render() {

diff --git a/src/editor/components/components/SceneEditTitle/SceneEditTitle.component.jsx b/src/editor/components/components/SceneEditTitle/SceneEditTitle.component.jsx
@@ -1,26 +1,13 @@
-import { useEffect, useState } from 'react';
 import styles from './SceneEditTitle.module.scss';
 import { useAuthContext } from '../../../contexts/index.js';
 import { updateSceneIdAndTitle } from '../../../api/scene';
+import useStore from '../../../../store.js';
 
 const SceneEditTitle = ({ sceneData }) => {
-  const [title, setTitle] = useState(sceneData?.sceneTitle);
+  const title = useStore((state) => state.sceneTitle);
+  const setTitle = useStore((state) => state.setSceneTitle);
   const { currentUser } = useAuthContext();
 
-  const sceneId = STREET.utils.getCurrentSceneId();
-
-  useEffect(() => {
-    if (sceneData.sceneId === sceneId) {
-      setTitle(sceneData.sceneTitle);
-    }
-  }, [sceneData?.sceneTitle, sceneData?.sceneId, sceneId]);
-
-  useEffect(() => {
-    AFRAME.scenes[0].addEventListener('newTitle', (event) => {
-      setTitle(event.detail.sceneTitle ?? '');
-    });
-  }, []);
-
   const handleEditClick = () => {
     const newTitle = prompt('Edit the title:', title);
 
@@ -34,14 +21,10 @@ const SceneEditTitle = ({ sceneData }) => {
 
   const saveNewTitle = async (newTitle) => {
     try {
-      if (sceneData?.sceneId) {
-        if (currentUser.uid === STREET.utils.getAuthorId()) {
-          await updateSceneIdAndTitle(sceneData?.sceneId, newTitle);
-        }
+      if (currentUser.uid === STREET.utils.getAuthorId()) {
+        await updateSceneIdAndTitle(STREET.utils.getCurrentSceneId(), newTitle);
+        STREET.notify.successMessage(`New scene title saved: ${newTitle}`);
       }
-      AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', newTitle);
-      AFRAME.scenes[0].setAttribute('metadata', 'sceneId', sceneData?.sceneId);
-      STREET.notify.successMessage(`New scene title saved: ${newTitle}`);
     } catch (error) {
       console.error('Error with update title', error);
       STREET.notify.errorMessage(`Error updating scene title: ${error}`);
@@ -50,13 +33,11 @@ const SceneEditTitle = ({ sceneData }) => {
 
   return (
     <div className={styles.wrapper}>
-      {
-        <div className={styles.readOnly}>
-          <p className={styles.title} onClick={handleEditClick}>
-            {title || 'Untitled'}
-          </p>
-        </div>
-      }
+      <div className={styles.readOnly}>
+        <p className={styles.title} onClick={handleEditClick}>
+          {title || 'Untitled'}
+        </p>
+      </div>
     </div>
   );
 };

diff --git a/src/editor/components/components/Sidebar.js b/src/editor/components/components/Sidebar.js
@@ -8,7 +8,6 @@ import React from 'react';
 import capitalize from 'lodash-es/capitalize';
 import classnames from 'classnames';
 import { ArrowRightIcon, LayersIcon } from '../../icons';
-import { sendMetric } from '../../services/ga';
 import GeoSidebar from './GeoSidebar'; // Make sure to create and import this new component
 
 export default class Sidebar extends React.Component {
@@ -62,7 +61,6 @@ export default class Sidebar extends React.Component {
   // additional toggle for hide/show panel by clicking the button
   toggleRightBar = () => {
     this.setState({ rightBarHide: !this.state.rightBarHide });
-    sendMetric('Components', 'toggleSidebar');
   };
 
   render() {

diff --git a/src/editor/components/modals/ScenesModal/ScenesModal.component.jsx b/src/editor/components/modals/ScenesModal/ScenesModal.component.jsx
@@ -12,7 +12,7 @@ import { getCommunityScenes, getUserScenes } from '../../../api/scene';
 import { Load24Icon, Loader, Upload24Icon } from '../../../icons';
 import { signIn } from '../../../api';
 import posthog from 'posthog-js';
-
+import useStore from '../../../../store.js';
 const SCENES_PER_PAGE = 20;
 const tabs = [
   {
@@ -65,7 +65,7 @@ const ScenesModal = ({ isOpen, onClose, initialTab = 'owner', delay }) => {
       const sceneId = scene.id;
       const sceneTitle = sceneData.title;
       AFRAME.scenes[0].setAttribute('metadata', 'sceneId', sceneId);
-      AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', sceneTitle);
+      useStore.getState().setSceneTitle(sceneTitle);
       AFRAME.scenes[0].setAttribute('metadata', 'authorId', sceneData.author);
       STREET.notify.successMessage('Scene loaded from 3DStreet Cloud.');
       onClose();