From 473e6cc114d477d04a8a53ea82143031ed77c23a Mon Sep 17 00:00:00 2001
From: Rostyslav <rostyslav.nahornyi@zade.agency>
Date: Mon, 8 Jan 2024 17:18:04 +0200
Subject: [PATCH 1/5] fix: scenes fetching and tabs styles

---
 .../components/Tabs/Tabs.component.jsx        | 12 ++--
 .../components/Tabs/Tabs.module.scss          | 65 +++++++++++++++----
 .../ScenesModal/ScenesModal.component.jsx     | 64 ++++++++++--------
 3 files changed, 94 insertions(+), 47 deletions(-)

diff --git a/src/components/components/Tabs/Tabs.component.jsx b/src/components/components/Tabs/Tabs.component.jsx
index eaa5adc4..7379a3c9 100644
--- a/src/components/components/Tabs/Tabs.component.jsx
+++ b/src/components/components/Tabs/Tabs.component.jsx
@@ -16,6 +16,7 @@ import { Hint } from './components';
  *    label: string;
  *    value: string;
  *    hint?: string;
+ *    disabled?: boolean
  *  };
  *  selectedTabClassName: string;
  * }} props
@@ -23,15 +24,16 @@ import { Hint } from './components';
 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
index 1b21edc2..ec61c366 100644
--- a/src/components/components/Tabs/Tabs.module.scss
+++ b/src/components/components/Tabs/Tabs.module.scss
@@ -10,41 +10,78 @@
   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;
+  }
+
+  .inactiveTab {
+    color: variables.$lightgray-200;
 
     &:hover {
       cursor: pointer;
-      background-color: rgba(50, 50, 50, 0.6);
-      transition: all 0.3s;
+      color: variables.$gray-300;
+    }
 
-      [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 {
+  .activeTab {
+    color: #ddd;
     background-color: variables.$darkgray-300;
-    transition: all 0.3s;
+
+    &:hover {
+      transition: all 0.3s;
+      background-color: variables.$black-400;
+      transition: all 0.3s;
+    }
+
+    &:focus-visible {
+      border-radius: 11px;
+      border: 1px solid variables.$white;
+      background-color: variables.$black-400;
+    }
+
+    &:not(:focus) {
+      color: #ddd;
+      background-color: variables.$darkgray-300;
+    }
+
+    &: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
index 3f2a480d..347b635b 100644
--- 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',
@@ -26,17 +27,15 @@ const tabs = [
 
 const ScenesModal = ({ isOpen, onClose }) => {
   const { currentUser } = useAuthContext();
+
   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);
-  const [isCommunityLoadedOnce, setIsCommunityLoadedOnce] = useState(false);
   const [selectedTab, setSelectedTab] = useState('owner');
 
   const handleSceneClick = (scene) => {
@@ -67,29 +66,39 @@ const ScenesModal = ({ isOpen, onClose }) => {
 
   useEffect(() => {
     const fetchData = async () => {
-      setIsLoadingScenes(true);
-      let collections;
+      console.log({ scenesData, scenesDataCommunity });
+      if (isOpen) {
+        let collections;
+        setIsLoadingScenes(true);
+
+        try {
+          if (
+            selectedTab === 'owner' &&
+            !scenesData.length &&
+            currentUser?.uid
+          ) {
+            collections = await getUserScenes(currentUser.uid, true);
+            setScenesData(collections);
+          }
 
-      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);
+          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();
@@ -124,12 +133,12 @@ const ScenesModal = ({ isOpen, onClose }) => {
   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);
     }
@@ -165,7 +174,6 @@ const ScenesModal = ({ isOpen, onClose }) => {
                   onClick: () => setSelectedTab(tab.value)
                 };
               })}
-              selectedTabClassName={'selectedTab'}
               className={styles.tabs}
             />
             <div className={styles.buttons}>

From 4d9b48a72b19db4399eab349a09cb93e674ac0ec Mon Sep 17 00:00:00 2001
From: Rostyslav Nahornyi <rostyslav.nahornyi@zade.agency>
Date: Sun, 14 Jan 2024 23:24:49 +0200
Subject: [PATCH 2/5] fix: boolean widget

---
 src/components/widgets/BooleanWidget.js | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/widgets/BooleanWidget.js b/src/components/widgets/BooleanWidget.js
index c4cb74fd..4fdcf93e 100644
--- a/src/components/widgets/BooleanWidget.js
+++ b/src/components/widgets/BooleanWidget.js
@@ -26,16 +26,17 @@ 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,
@@ -43,16 +44,12 @@ export default class BooleanWidget extends React.Component {
     });
 
     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}
         />
         <label htmlFor={id} onClick={(e) => e.stopPropagation()} />
       </div>

From 150367d61d4d363ed474ec3a1e5f516d04f00544 Mon Sep 17 00:00:00 2001
From: Alexander Goryushkin <aleotu@gmail.com>
Date: Sun, 14 Jan 2024 20:37:33 -0300
Subject: [PATCH 3/5] fix incorrect boundingBox

---
 src/lib/EditorControls.js | 52 ---------------------------------------
 1 file changed, 52 deletions(-)

diff --git a/src/lib/EditorControls.js b/src/lib/EditorControls.js
index 1eab841e..fa6374f0 100644
--- 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

From 48d8fee91f9d8d229968543eeb0e12a39073be2c Mon Sep 17 00:00:00 2001
From: Rostyslav Nahornyi <rostyslav.nahornyi@zade.agency>
Date: Mon, 22 Jan 2024 01:40:42 +0200
Subject: [PATCH 4/5] fix: stub for the onChange

---
 src/components/widgets/BooleanWidget.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/widgets/BooleanWidget.js b/src/components/widgets/BooleanWidget.js
index 4fdcf93e..7f4c9cbd 100644
--- a/src/components/widgets/BooleanWidget.js
+++ b/src/components/widgets/BooleanWidget.js
@@ -50,6 +50,7 @@ export default class BooleanWidget extends React.Component {
           type="checkbox"
           checked={this.state.value}
           value={this.state.value}
+          onChange={() => null}
         />
         <label htmlFor={id} onClick={(e) => e.stopPropagation()} />
       </div>

From 51dc77f1cd7ac2d8375ec6387fe8451b54645b38 Mon Sep 17 00:00:00 2001
From: Rostyslav Nahornyi <rostyslav.nahornyi@zade.agency>
Date: Wed, 24 Jan 2024 02:44:24 +0200
Subject: [PATCH 5/5] styles: changed tabs styles  according to new figma tab
 design

---
 .../components/Tabs/Tabs.module.scss          | 21 ++++++-------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/src/components/components/Tabs/Tabs.module.scss b/src/components/components/Tabs/Tabs.module.scss
index ec61c366..e19c9bf8 100644
--- a/src/components/components/Tabs/Tabs.module.scss
+++ b/src/components/components/Tabs/Tabs.module.scss
@@ -26,14 +26,16 @@
     font-size: 16px;
     line-height: 19.2px;
     font-weight: 400;
+
+    transition: 0.3s ease-out;
   }
 
   .inactiveTab {
-    color: variables.$lightgray-200;
+    color: variables.$white;
 
     &:hover {
       cursor: pointer;
-      color: variables.$gray-300;
+      background-color: rgba($color: variables.$gray-500, $alpha: 0.4);
     }
 
     &:focus-visible {
@@ -54,14 +56,8 @@
   }
 
   .activeTab {
-    color: #ddd;
-    background-color: variables.$darkgray-300;
-
-    &:hover {
-      transition: all 0.3s;
-      background-color: variables.$black-400;
-      transition: all 0.3s;
-    }
+    color: variables.$white;
+    background-color: variables.$gray-500 !important;
 
     &:focus-visible {
       border-radius: 11px;
@@ -69,11 +65,6 @@
       background-color: variables.$black-400;
     }
 
-    &:not(:focus) {
-      color: #ddd;
-      background-color: variables.$darkgray-300;
-    }
-
     &:active {
       background-color: variables.$black-700;
       transition: all 0.3s;