fix: hide button and pinned panel if no pinned items

graasp · Nov 8, 2021 · 1be740c · 1be740c
1 parent 406d46b
commit 1be740c
Showing 1 changed file with 67 additions and 38 deletions.
diff --git a/src/components/common/SideContent.js b/src/components/common/SideContent.js
@@ -22,6 +22,7 @@ import {
 } from '../../config/selectors';
 import { getDirectParentId } from '../../utils/item';
 import { ITEM_TYPES } from '../../enums';
+import { hooks } from '../../config/queryClient';
 
 const useStyles = makeStyles((theme) => ({
   iconButton: {
@@ -58,13 +59,25 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+
+const {
+  useChildren,
+} = hooks;
+
 const SideContent = ({ children, item }) => {
+  const isFolder = item.get('type') !== ITEM_TYPES.FOLDER;
+
   const parentId =
-    (item.get('type') !== ITEM_TYPES.FOLDER &&
+    (isFolder &&
       getDirectParentId(item.get('path'))) ||
     item.get('id');
   const settings = item.get('settings');
 
+  const { data: child } = useChildren(parentId, {
+    enabled: isFolder,
+    getUpdates: isFolder,
+  });
+
   const {
     isPinnedMenuOpen,
     setIsPinnedMenuOpen,
@@ -86,6 +99,24 @@ const SideContent = ({ children, item }) => {
     setIsChatboxMenuOpen(false);
   };
 
+  const displayPinButton = () => {
+    const size = child?.filter(({ settings: s }) => s.isPinned).size;
+    if (!size) return null;
+
+    return(
+      <IconButton
+        id={ITEM_PINNED_BUTTON_ID}
+        className={classes.iconButton}
+        aria-label={
+          isPinnedMenuOpen ? t('Hide Pinned Items') : t('Show Pinned Items')
+        }
+        onClick={togglePinnedOpen}
+      >
+        <PushPinIcon />
+      </IconButton>
+    );
+  };
+
   const diplayChatButton = () => {
     if (!settings?.showChatbox) return null;
 
@@ -131,6 +162,39 @@ const SideContent = ({ children, item }) => {
     );
   };
 
+  const displayPinnedItems = () => {
+    const size = child?.filter(({ settings: s }) => s.isPinned).size;
+    if (!size) return null;
+
+    return(<Paper square>
+    <Slide
+      anchor="right"
+      direction="left"
+      in={isPinnedMenuOpen}
+      mountOnEnter
+      unmountOnExit
+      minHeight={window.innerHeight - HEADER_HEIGHT}
+      id={ITEM_PINNED_ID}
+    >
+      <Box className={classes.drawer}>
+        <div className={classes.drawerHeader}>
+          <IconButton
+            id={PANNEL_CLOSE_BUTTON_ID}
+            onClick={togglePinnedOpen}
+          >
+            {theme.direction === 'rtl' ? (
+              <ChevronLeftIcon />
+            ) : (
+              <ChevronRightIcon />
+            )}
+          </IconButton>
+        </div>
+        <Item id={parentId} showPinnedOnly />
+      </Box>
+    </Slide>
+  </Paper>);
+  };
+
   return (
     <div className={classes.root}>
       <main
@@ -140,49 +204,14 @@ const SideContent = ({ children, item }) => {
       >
         {diplayChatButton()}
 
-        <IconButton
-          id={ITEM_PINNED_BUTTON_ID}
-          className={classes.iconButton}
-          aria-label={
-            isPinnedMenuOpen ? t('Hide Pinned Items') : t('Show Pinned Items')
-          }
-          onClick={togglePinnedOpen}
-        >
-          <PushPinIcon />
-        </IconButton>
+        {displayPinButton()}
 
         {children}
       </main>
 
       {displayChatbox()}
 
-      <Paper square>
-        <Slide
-          anchor="right"
-          direction="left"
-          in={isPinnedMenuOpen}
-          mountOnEnter
-          unmountOnExit
-          minHeight={window.innerHeight - HEADER_HEIGHT}
-          id={ITEM_PINNED_ID}
-        >
-          <Box className={classes.drawer}>
-            <div className={classes.drawerHeader}>
-              <IconButton
-                id={PANNEL_CLOSE_BUTTON_ID}
-                onClick={togglePinnedOpen}
-              >
-                {theme.direction === 'rtl' ? (
-                  <ChevronLeftIcon />
-                ) : (
-                  <ChevronRightIcon />
-                )}
-              </IconButton>
-            </div>
-            <Item id={parentId} showPinnedOnly />
-          </Box>
-        </Slide>
-      </Paper>
+      {displayPinnedItems()}
     </div>
   );
 };