Merge branch 'master' into fix/issue-299/first-entry

3DStreet · Feb 4, 2024 · 8dee979 · 8dee979
2 parents b735c80 + 787a78e
commit 8dee979
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 107 deletions.
diff --git a/src/components/components/Tabs/Tabs.component.jsx b/src/components/components/Tabs/Tabs.component.jsx
@@ -16,22 +16,24 @@ import { Hint } from './components';
  *    label: string;
  *    value: string;
  *    hint?: string;
+ *    disabled?: boolean
  *  };
  *  selectedTabClassName: string;
  * }} props
  */
 const Tabs = ({ tabs, selectedTabClassName, className }) => (
   <div id={'tabsWrapper'} className={classNames(styles.wrapper, className)}>
     {!!tabs?.length &&
-      tabs.map(({ label, value, onClick, isSelected, hint }) => (
+      tabs.map(({ label, value, onClick, isSelected, hint, disabled }) => (
         <button
           className={classNames(
-            styles.tabButton,
-            isSelected && (selectedTabClassName ?? styles.selectedTab)
+            styles.inactiveTab,
+            isSelected && (selectedTabClassName ?? styles.activeTab),
+            disabled && styles.disabled
           )}
           type={'button'}
-          tabIndex={0}
-          onClick={onClick}
+          // tabIndex={disabled ? -1 : 0}
+          onClick={!disabled && onClick}
           key={value}
         >
           {label}

diff --git a/src/components/components/Tabs/Tabs.module.scss b/src/components/components/Tabs/Tabs.module.scss
@@ -10,41 +10,69 @@
   border-radius: 16px;
   padding: 8px 12px;
 
-  .tabButton {
+  .activeTab,
+  .inactiveTab {
     display: block;
     position: relative;
     border: unset;
     outline: unset;
     background-color: transparent;
+
+    margin: 0;
     padding: 8.5px 12px;
-    color: variables.$white;
     border-radius: 11px;
-    transition: all 0.3s;
+    border: 1px solid transparent;
+
     font-size: 16px;
     line-height: 19.2px;
     font-weight: 400;
-    margin: 0;
+
+    transition: 0.3s ease-out;
+  }
+
+  .inactiveTab {
+    color: variables.$white;
 
     &:hover {
       cursor: pointer;
-      background-color: rgba(50, 50, 50, 0.6);
-      transition: all 0.3s;
+      background-color: rgba($color: variables.$gray-500, $alpha: 0.4);
+    }
 
-      [class*='wrapper'] {
-        visibility: visible;
-        opacity: 1;
-      }
+    &:focus-visible {
+      border-radius: 0;
+      border: 1px solid variables.$white;
     }
 
     &:active {
-      background-color: variables.$black-600;
-      color: variables.$lightgray-200;
+      color: variables.$white;
       transition: all 0.3s;
     }
+
+    &.disabled {
+      color: variables.$gray-500;
+      transition: all 0.3s;
+      cursor: not-allowed;
+    }
   }
 
-  .selectedTab {
-    background-color: variables.$darkgray-300;
-    transition: all 0.3s;
+  .activeTab {
+    color: variables.$white;
+    background-color: variables.$gray-500 !important;
+
+    &:focus-visible {
+      border-radius: 11px;
+      border: 1px solid variables.$white;
+      background-color: variables.$black-400;
+    }
+
+    &:active {
+      background-color: variables.$black-700;
+      transition: all 0.3s;
+    }
+
+    &.disabled {
+      background-color: rgba(50, 50, 50, 0.6);
+      color: variables.$gray-500;
+    }
   }
 }
diff --git a/src/components/modals/ScenesModal/ScenesModal.component.jsx b/src/components/modals/ScenesModal/ScenesModal.component.jsx
@@ -13,6 +13,7 @@ import Events from '../../../lib/Events';
 import { loginHandler } from '../SignInModal';
 import { Load24Icon, Loader, Upload24Icon } from '../../../icons';
 
+const SCENES_PER_PAGE = 20;
 const tabs = [
   {
     label: 'My Scenes',
@@ -29,11 +30,10 @@ const ScenesModal = ({ isOpen, onClose, initialTab = 'owner', delay }) => {
   const [renderComponent, setRenderComponent] = useState(!delay);
   const [scenesData, setScenesData] = useState([]);
   const [scenesDataCommunity, setScenesDataCommunity] = useState([]);
-  const scenesPerPage = 20;
   const [totalDisplayedUserScenes, setTotalDisplayedUserScenes] =
-    useState(scenesPerPage);
+    useState(SCENES_PER_PAGE);
   const [totalDisplayedCommunityScenes, setTotalDisplayedCommunityScenes] =
-    useState(scenesPerPage);
+    useState(SCENES_PER_PAGE);
   const [isLoadingScenes, setIsLoadingScenes] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [isUserLoadedOnce, setIsUserLoadedOnce] = useState(false);
@@ -78,29 +78,39 @@ const ScenesModal = ({ isOpen, onClose, initialTab = 'owner', delay }) => {
 
   useEffect(() => {
     const fetchData = async () => {
-      setIsLoadingScenes(true);
-      let collections;
+      console.log({ scenesData, scenesDataCommunity });
+      if (isOpen) {
+        let collections;
+        setIsLoadingScenes(true);
 
-      if (
-        selectedTab === 'owner' &&
-        isOpen &&
-        !isUserLoadedOnce &&
-        currentUser?.uid
-      ) {
-        setIsUserLoadedOnce(true);
-        collections = await getUserScenes(currentUser.uid, true);
-        setScenesData(collections);
-      } else if (
-        selectedTab === 'community' &&
-        isOpen &&
-        !isCommunityLoadedOnce
-      ) {
-        setIsCommunityLoadedOnce(true);
-        collections = await getCommunityScenes(true);
-        setScenesDataCommunity(collections);
+        try {
+          if (
+            selectedTab === 'owner' &&
+            !scenesData.length &&
+            currentUser?.uid
+          ) {
+            collections = await getUserScenes(currentUser.uid, true);
+            setScenesData(collections);
+          }
+
+          if (selectedTab === 'community' && !scenesDataCommunity.length) {
+            collections = await getCommunityScenes(true);
+            setScenesDataCommunity(collections);
+          }
+        } catch (error) {
+          AFRAME.scenes[0].components['notify'].message(
+            `Error fetching scenes: ${error}`,
+            'error'
+          );
+        } finally {
+          setIsLoadingScenes(false);
+        }
       }
 
-      setIsLoadingScenes(false);
+      if (!isOpen) {
+        setScenesData([]);
+        setScenesDataCommunity([]);
+      }
     };
 
     fetchData();
@@ -135,12 +145,12 @@ const ScenesModal = ({ isOpen, onClose, initialTab = 'owner', delay }) => {
   const loadMoreScenes = () => {
     if (selectedTab === 'owner') {
       const start = totalDisplayedUserScenes;
-      const end = start + scenesPerPage;
+      const end = start + SCENES_PER_PAGE;
 
       loadData(end);
     } else if (selectedTab === 'community') {
       const start = totalDisplayedCommunityScenes;
-      const end = start + scenesPerPage;
+      const end = start + SCENES_PER_PAGE;
 
       loadData(end);
     }
@@ -176,7 +186,6 @@ const ScenesModal = ({ isOpen, onClose, initialTab = 'owner', delay }) => {
                   onClick: () => setSelectedTab(tab.value)
                 };
               })}
-              selectedTabClassName={'selectedTab'}
               className={styles.tabs}
             />
             <div className={styles.buttons}>

diff --git a/src/components/widgets/BooleanWidget.js b/src/components/widgets/BooleanWidget.js
@@ -26,33 +26,31 @@ export default class BooleanWidget extends React.Component {
     }
   }
 
-  onChange = (e) => {
-    var value = e.target.checked;
-    this.setState({ value: value });
+  onChange = () => {
+    const value = !this.state.value;
+
+    this.setState({ value });
     if (this.props.onChange) {
       this.props.onChange(this.props.name, value);
     }
   };
 
   render() {
-    var id = this.props.componentname + '.' + this.props.name;
+    const id = this.props.componentname + '.' + this.props.name;
 
     const checkboxClasses = classNames({
       checkboxAnim: true,
       checked: this.state.value
     });
 
     return (
-      <div
-        className={checkboxClasses}
-        onClick={() => this.setState({ value: !this.state.value })}
-      >
+      <div className={checkboxClasses} onClick={this.onChange}>
         <input
           id={id}
           type="checkbox"
           checked={this.state.value}
           value={this.state.value}
-          onChange={this.onChange}
+          onChange={() => null}
         />
         <label htmlFor={id} onClick={(e) => e.stopPropagation()} />
       </div>

diff --git a/src/lib/EditorControls.js b/src/lib/EditorControls.js
@@ -1,57 +1,5 @@
 import debounce from 'lodash-es/debounce';
 
-THREE.Box3.prototype.expandByObject = (function () {
-  // Computes the world-axis-aligned bounding box of an object (including its children),
-  // accounting for both the object's, and children's, world transforms
-
-  var scope, i, l;
-
-  var v1 = new THREE.Vector3();
-
-  function traverse(node) {
-    var geometry = node.geometry;
-
-    if (geometry !== undefined) {
-      if (geometry.isGeometry) {
-        var vertices = geometry.vertices;
-
-        for (i = 0, l = vertices.length; i < l; i++) {
-          v1.copy(vertices[i]);
-          v1.applyMatrix4(node.matrixWorld);
-
-          if (isNaN(v1.x) || isNaN(v1.y) || isNaN(v1.z)) {
-            continue;
-          }
-          scope.expandByPoint(v1);
-        }
-      } else if (geometry.isBufferGeometry) {
-        var attribute = geometry.attributes.position;
-
-        if (attribute !== undefined) {
-          for (i = 0, l = attribute.count; i < l; i++) {
-            v1.fromBufferAttribute(attribute, i).applyMatrix4(node.matrixWorld);
-
-            if (isNaN(v1.x) || isNaN(v1.y) || isNaN(v1.z)) {
-              continue;
-            }
-            scope.expandByPoint(v1);
-          }
-        }
-      }
-    }
-  }
-
-  return function expandByObject(object) {
-    scope = this;
-
-    object.updateMatrixWorld(true);
-
-    object.traverse(traverse);
-
-    return this;
-  };
-})();
-
 /**
  * @author qiao / https://github.com/qiao
  * @author mrdoob / http://mrdoob.com