Fix sidebar item doesn't open when navigating to it's sub resource

Author: Polleps

CHANGELOG.md

@@ -6,6 +6,9 @@ This changelog covers all three packages, as they are (for now) updated as a who
 
 ### @tomic/lib
 
+- Add `store.getResourceAncestry` method, which returns the ancestry of a resource, including the resource itself.
+- Add `resource.title` property, which returns the name of a resource, or the first property that is can be used to name the resource.
+
 #### Breaking changes
 
 - `buildSearchSubject` now takes a serverURL instead of the store.

data-browser/src/components/Details/index.tsx

@@ -24,12 +24,16 @@ export function Details({
   const [isOpen, setIsOpen] = React.useState(initialState);
 
   useEffect(() => {
+    console.log('opening details');
     setIsOpen(open);
   }, [open]);
 
   const toggleOpen = useCallback(() => {
-    onStateToggle?.(!isOpen);
-    setIsOpen(p => !p);
+    setIsOpen(p => {
+      onStateToggle?.(!p);
+
+      return !p;
+    });
   }, []);
 
   return (

data-browser/src/components/Dropdown/index.tsx

@@ -6,6 +6,7 @@ import { Button } from '../Button';
 import { DropdownTriggerRenderFunction } from './DropdownTrigger';
 import { shortcuts } from '../HotKeyWrapper';
 import { Shortcut } from '../Shortcut';
+import { transition } from '../../helpers/transition';
 
 export const DIVIDER = 'divider' as const;
 
@@ -96,13 +97,17 @@ export function DropdownMenu({
   const dropdownRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
   const [isActive, setIsActive] = useState(false);
+  const [visible, setVisible] = useState(false);
 
   const handleClose = useCallback(() => {
-    setIsActive(false);
+    setVisible(false);
     // Whenever the menu closes, assume that the next one will be opened with mouse
     setUseKeys(false);
     // Always reset to the top item on close
-    setSelectedIndex(0);
+    setTimeout(() => {
+      setIsActive(false);
+      setSelectedIndex(0);
+    }, 100);
   }, []);
 
   useClickAwayListener([triggerRef, dropdownRef], handleClose, isActive, [
@@ -126,27 +131,31 @@ export function DropdownMenu({
       return;
     }
 
-    const triggerRect = triggerRef.current!.getBoundingClientRect();
-    const menuRect = dropdownRef.current!.getBoundingClientRect();
-    const topPos = triggerRect.y - menuRect.height;
+    setIsActive(true);
 
-    // If the top is outside of the screen, render it below
-    if (topPos < 0) {
-      setY(triggerRect.y + triggerRect.height / 2);
-    } else {
-      setY(topPos + triggerRect.height / 2);
-    }
+    requestAnimationFrame(() => {
+      const triggerRect = triggerRef.current!.getBoundingClientRect();
+      const menuRect = dropdownRef.current!.getBoundingClientRect();
+      const topPos = triggerRect.y - menuRect.height;
 
-    const leftPos = triggerRect.x - menuRect.width;
+      // If the top is outside of the screen, render it below
+      if (topPos < 0) {
+        setY(triggerRect.y + triggerRect.height / 2);
+      } else {
+        setY(topPos + triggerRect.height / 2);
+      }
 
-    // If the left is outside of the screen, render it to the right
-    if (leftPos < 0) {
-      setX(triggerRect.x);
-    } else {
-      setX(triggerRect.x - menuRect.width + triggerRect.width);
-    }
+      const leftPos = triggerRect.x - menuRect.width;
 
-    setIsActive(true);
+      // If the left is outside of the screen, render it to the right
+      if (leftPos < 0) {
+        setX(triggerRect.x);
+      } else {
+        setX(triggerRect.x - menuRect.width + triggerRect.width);
+      }
+
+      setVisible(true);
+    });
   }, [isActive]);
 
   const handleTriggerClick = useCallback(() => {
@@ -219,7 +228,7 @@ export function DropdownMenu({
         isActive={isActive}
         menuId={menuId}
       />
-      <Menu ref={dropdownRef} isActive={isActive} x={x} y={y} id={menuId}>
+      <Menu ref={dropdownRef} visible={visible} x={x} y={y} id={menuId}>
         {isActive &&
           normalizedItems.map((props, i) => {
             if (!isItem(props)) {
@@ -252,12 +261,6 @@ export function DropdownMenu({
   );
 }
 
-interface MenuProps {
-  isActive: boolean;
-  x: number;
-  y: number;
-}
-
 export interface MenuItemSidebarProps extends MenuItemMinimial {
   handleClickItem?: () => unknown;
 }
@@ -343,6 +346,12 @@ const ItemDivider = styled.div`
   border-bottom: 1px solid ${p => p.theme.colors.bg2};
 `;
 
+interface MenuProps {
+  visible: boolean;
+  x: number;
+  y: number;
+}
+
 const Menu = styled.div<MenuProps>`
   font-size: ${p => p.theme.fontSizeBody}rem;
   overflow: hidden;
@@ -358,6 +367,7 @@ const Menu = styled.div<MenuProps>`
   left: ${p => p.x}px;
   width: auto;
   box-shadow: ${p => p.theme.boxShadowSoft};
-  opacity: ${p => (p.isActive ? 1 : 0)};
-  visibility: ${p => (p.isActive ? 'visible' : 'hidden')};
+  opacity: ${p => (p.visible ? 1 : 0)};
+
+  transition: ${() => transition('opacity')};
 `;

data-browser/src/components/SideBar/ResourceSideBar/ResourceSideBar.tsx

@@ -1,11 +1,4 @@
-import React, {
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useString, useResource, useTitle, urls, useArray } from '@tomic/react';
 import { useCurrentSubject } from '../../../helpers/useCurrentSubject';
 import { SideBarItem } from '../SideBarItem';
@@ -19,30 +12,25 @@ import { getIconForClass } from '../../../views/FolderPage/iconMap';
 
 interface ResourceSideBarProps {
   subject: string;
+  ancestry: string[];
   /** When a SideBar item is clicked, we should close the SideBar (on mobile devices) */
   handleClose?: () => unknown;
-  /**
-   * Is called when any of the subResources is the CurrentURL. This is used to
-   * recursively open the sidebar menus when the user opens a resource.
-   */
-  onOpen?: (open: boolean) => void;
 }
 
 /** Renders a Resource as a nav item for in the sidebar. */
 export function ResourceSideBar({
   subject,
+  ancestry,
   handleClose,
-  onOpen,
 }: ResourceSideBarProps): JSX.Element {
   const spanRef = useRef<HTMLSpanElement>(null);
   const resource = useResource(subject, { allowIncomplete: true });
   const [currentUrl] = useCurrentSubject();
-  const deferredUrl = useDeferredValue(currentUrl);
 
   const [title] = useTitle(resource);
   const [description] = useString(resource, urls.properties.description);
 
-  const active = deferredUrl === subject;
+  const active = currentUrl === subject;
   const [open, setOpen] = useState(active);
 
   const [subResources] = useArray(resource, urls.properties.subResources);
@@ -51,23 +39,11 @@ export function ResourceSideBar({
   const [classType] = useString(resource, urls.properties.isA);
   const Icon = getIconForClass(classType!);
 
-  const handleDetailsToggle = useCallback((state: boolean) => {
-    setOpen(state);
-  }, []);
-
-  const setAndPropagateOpen = useCallback(
-    (state: boolean) => {
-      setOpen(state);
-      onOpen?.(state);
-    },
-    [onOpen],
-  );
-
   useEffect(() => {
-    if (active || open) {
-      onOpen?.(true);
+    if (ancestry.includes(subject) && ancestry[0] !== subject) {
+      setOpen(true);
     }
-  }, [active, open]);
+  }, [ancestry]);
 
   const TitleComp = useMemo(
     () => (
@@ -125,17 +101,13 @@ export function ResourceSideBar({
       initialState={open}
       open={open}
       disabled={!hasSubResources}
-      onStateToggle={handleDetailsToggle}
+      onStateToggle={setOpen}
       data-test='resource-sidebar'
       title={TitleComp}
     >
       {hasSubResources &&
         subResources.map(child => (
-          <ResourceSideBar
-            subject={child}
-            onOpen={setAndPropagateOpen}
-            key={child}
-          />
+          <ResourceSideBar subject={child} key={child} ancestry={ancestry} />
         ))}
     </Details>
   );

data-browser/src/components/SideBar/SideBarDrive.tsx

@@ -3,9 +3,10 @@ import {
   useArray,
   useCanWrite,
   useResource,
+  useStore,
   useTitle,
 } from '@tomic/react';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { FaPlus } from 'react-icons/fa';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
@@ -21,6 +22,7 @@ import { ErrorLook } from '../ErrorLook';
 import { DriveSwitcher } from './DriveSwitcher';
 import { IconButton } from '../IconButton/IconButton';
 import { Row } from '../Row';
+import { useCurrentSubject } from '../../helpers/useCurrentSubject';
 
 interface SideBarDriveProps {
   /** Closes the sidebar on small screen devices */
@@ -31,12 +33,22 @@ interface SideBarDriveProps {
 export function SideBarDrive({
   handleClickItem,
 }: SideBarDriveProps): JSX.Element {
+  const store = useStore();
   const { drive, agent } = useSettings();
   const driveResource = useResource(drive);
   const [subResources] = useArray(driveResource, urls.properties.subResources);
   const [title] = useTitle(driveResource);
   const navigate = useNavigate();
   const [angentCanWrite] = useCanWrite(driveResource);
+  const [currentSubject] = useCurrentSubject();
+  const currentResource = useResource(currentSubject);
+  const [ancestry, setAncestry] = useState<string[]>([]);
+
+  useEffect(() => {
+    store.getResourceAncestry(currentResource).then(result => {
+      setAncestry(result);
+    });
+  }, [store, currentResource]);
 
   return (
     <>
@@ -74,6 +86,7 @@ export function SideBarDrive({
               <ResourceSideBar
                 key={child}
                 subject={child}
+                ancestry={ancestry}
                 handleClose={handleClickItem}
               />
             );

lib/src/resource.ts

@@ -62,6 +62,15 @@ export class Resource {
     this.commitBuilder = new CommitBuilder(subject);
   }
 
+  public get title() {
+    return (
+      this.get(properties.name) ??
+      this.get(properties.shortname) ??
+      this.get(properties.file.filename) ??
+      this.subject
+    );
+  }
+
   /** Checks if the agent has write rights by traversing the graph. Recursive function. */
   public async canWrite(
     store: Store,

lib/src/store.ts

@@ -691,6 +691,34 @@ export class Store {
     return this.client.postCommit(commit, endpoint);
   }
 
+  /**
+   * Returns the ancestry of a resource, starting with the resource itself.
+   */
+  public async getResourceAncestry(resource: Resource): Promise<string[]> {
+    const ancestry: string[] = [resource.getSubject()];
+
+    let lastAncestor: string = resource.get(urls.properties.parent) as string;
+    lastAncestor && ancestry.push(lastAncestor);
+
+    while (lastAncestor) {
+      const lastResource = await this.getResourceAsync(lastAncestor);
+
+      if (lastResource) {
+        lastAncestor = lastResource.get(urls.properties.parent) as string;
+
+        if (ancestry.includes(lastAncestor)) {
+          throw new Error(
+            `Resource ${resource.getSubject()} ancestry is cyclical. ${lastAncestor} is already in the ancestry}`,
+          );
+        }
+
+        ancestry.push(lastAncestor);
+      }
+    }
+
+    return ancestry;
+  }
+
   private randomPart(): string {
     return Math.random().toString(36).substring(2);
   }