fix: scenes fetching and tabs styles

3DStreet · Jan 8, 2024 · 473e6cc · 473e6cc
1 parent 4e0c553
commit 473e6cc
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 47 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,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
@@ -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}>