Use getPartialTree in search

Author: dineshsingh1

apps/webapp/src/Components/Sidebar/Sidebar.views.tsx

@@ -21,11 +21,10 @@ import {
   StyledTreeItem
 } from '@mexit/shared'
 
-import { useViews } from '../../Hooks/useViews'
 import { useViewStore } from '../../Stores/useViewStore'
 import { SortableTree } from '../Tree'
 import { FlattenedItem } from '../Tree/types'
-import { buildTree, flattenTree } from '../Tree/utilities'
+import { buildPartialTree, buildTree, flattenTree } from '../Tree/utilities'
 
 const SidebarViewTree = ({ defaultItems, onClick, onContextMenu }) => {
   const [source, target] = useSingleton()
@@ -41,7 +40,6 @@ const SidebarViewTree = ({ defaultItems, onClick, onContextMenu }) => {
   const [search, setSearch] = useState('')
   const expandSidebar = useLayoutStore((store) => store.expandSidebar)
   const [selected, setSelected] = useState<number>(-1)
-  const { getViewNamedPath } = useViews()
   const onSearchChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     setSearch(e.target.value)
   }
@@ -57,7 +55,8 @@ const SidebarViewTree = ({ defaultItems, onClick, onContextMenu }) => {
           id: view.id,
           parentId: parent,
           properties: {
-            label: view.title
+            label: view.title,
+            path: view.path
           },
           depth: 0,
           index: 0,
@@ -74,12 +73,13 @@ const SidebarViewTree = ({ defaultItems, onClick, onContextMenu }) => {
     if (search !== '') {
       const items = flattenTree(tree)
       const matchedFlatItems = fuzzySearch(items, search, (item) => item.properties.label)
-      const filteredTree = buildTree(matchedFlatItems)
+      const filteredTree = buildPartialTree(matchedFlatItems, items)
+
       setFiltered({ filteredTree, matchedFlatItems })
     } else {
       setFiltered({ filteredTree: undefined, matchedFlatItems: [] })
     }
-  }, [search, tree])
+  }, [search])
 
   const reset = () => {
     setSearch('')

apps/webapp/src/Components/Sidebar/TaskViewList.tsx

@@ -27,7 +27,7 @@ const ViewList = () => {
 
   const handleContextMenu = (id: string, event) => {
     const view = useViewStore.getState().views?.find((view) => view.id === id)
-    console.log('VIEW LIST', { view, id, views: useViewStore.getState().views })
+
     setContextMenu({
       type: ContextMenuType.VIEW_LIST,
       item: { data: view },

apps/webapp/src/Components/Tree/SortableTree.tsx

@@ -51,7 +51,7 @@ export const SortableTree = ({
 
   return (
     <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>
-      {flattenedItems.map(({ id, children, properties, collapsed, depth }) => (
+      {flattenedItems.map(({ id, children, properties, isStub, collapsed, depth }) => (
         <SortableTreeItem
           key={id}
           id={id}
@@ -64,6 +64,7 @@ export const SortableTree = ({
           indentationWidth={indentationWidth}
           indicator={indicator}
           childCount={children.length}
+          isStub={isStub}
           collapsed={Boolean(collapsed && children.length)}
           onCollapse={collapsible && children.length ? () => handleCollapse(id) : undefined}
           activeId={activeId}

apps/webapp/src/Components/Tree/components/TreeItem/TreeItem.tsx

@@ -23,6 +23,7 @@ export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
   childCount?: number
   clone?: boolean
   collapsed?: boolean
+  isStub?: boolean
   depth: number
   disableInteraction?: boolean
   disableSelection?: boolean
@@ -44,6 +45,7 @@ export const TreeItem = forwardRef<HTMLDivElement, Props>(
   (
     {
       childCount,
+      isStub,
       clone,
       depth,
       disableSelection,
@@ -72,6 +74,7 @@ export const TreeItem = forwardRef<HTMLDivElement, Props>(
         ghost={ghost}
         isHighlighted={value.id === highlightedId}
         indicator={indicator}
+        isStub={isStub}
         active={value.id === activeId}
         disableSelection={!!disableSelection}
         onContextMenu={(e) => {

apps/webapp/src/Components/Tree/components/TreeItem/styled.tsx

@@ -6,6 +6,7 @@ export const TreeListItem = styled.li<{
   indicator?: boolean
   disableSelection?: boolean
   active?: boolean
+  isStub?: boolean
   isHighlighted?: boolean
   disableInteraction?: boolean
 }>`
@@ -23,6 +24,17 @@ export const TreeListItem = styled.li<{
       color: ${theme.sidebar.tree.item.wrapper.active.textColor};
     `}
 
+  ${({ isStub }) =>
+    isStub &&
+    css`
+      opacity: 0.8;
+      color: ${({ theme }) => theme.tokens.text.disabled};
+      svg {
+        color: ${({ theme }) => theme.tokens.text.disabled};
+      }
+      background-color: transparent;
+    `}
+
   ${({ active, theme }) =>
     active
       ? css`

apps/webapp/src/Components/Tree/types.ts

@@ -6,6 +6,7 @@ export interface TreeItem {
   id: UniqueIdentifier
   children: TreeItem[]
   collapsed?: boolean
+  isStub?: boolean
   properties?: Record<string, any>
 }
 

apps/webapp/src/Components/Tree/utilities.ts

@@ -1,6 +1,8 @@
 import { UniqueIdentifier } from '@dnd-kit/core'
 import { arrayMove } from '@dnd-kit/sortable'
 
+import { getAllEntities } from '@mexit/core'
+
 import type { FlattenedItem, TreeItem, TreeItems } from './types'
 
 export const iOS = /iPad|iPhone|iPod/.test(navigator.platform)
@@ -86,20 +88,51 @@ export function flattenTree(items: TreeItems): FlattenedItem[] {
   return flatten(items)
 }
 
+const updateNode = (
+  node: FlattenedItem,
+  nodes: Record<string, TreeItem>,
+  allItems: FlattenedItem[],
+  options: Partial<{
+    root: UniqueIdentifier
+    isStub: boolean
+    collapsed: boolean
+  }> = {
+    root: 'root',
+    isStub: false,
+    collapsed: false
+  }
+) => {
+  const id = node.id
+  const parentId = node?.parentId ?? options.root
+  const parent = nodes[parentId] ?? findItem(allItems, parentId)
+
+  if (!nodes[id]) {
+    const updatedNode: TreeItem = {
+      id,
+      children: [],
+      properties: node.properties,
+      isStub: options.isStub,
+      collapsed: options.collapsed
+    }
+
+    nodes[id] = updatedNode
+    parent?.children?.push(updatedNode)
+  }
+}
+
 export function buildPartialTree(items: FlattenedItem[], allItems: FlattenedItem[]) {
   const root: TreeItem = { id: 'root', children: [], properties: {} }
   const nodes: Record<string, TreeItem> = { [root.id]: root }
 
   for (const item of items) {
-    const { id, children } = item
-    const parentId = item.parentId ?? root.id
-    const parent = nodes[parentId] ?? findItem(allItems, parentId)
+    const parents = getAllEntities(item.properties.path)
 
-    nodes[id] = { id, children }
-    if (parent) {
-      console.log('parent', { parent, item, allItems })
-      parent.children.push(item)
+    for (const id of parents) {
+      const node = nodes[id] ?? (findItem(allItems, id) as any)
+      updateNode(node, nodes, allItems, { root: root.id, isStub: true })
     }
+
+    updateNode(item, nodes, allItems)
   }
 
   return root.children
@@ -111,12 +144,14 @@ export function buildTree(flattenedItems: FlattenedItem[]): TreeItems {
   const items = flattenedItems.map((item) => ({ ...item, children: [] }))
 
   for (const item of items) {
-    const { id, children, properties } = item
+    const { id, children } = item
     const parentId = item.parentId ?? root.id
     const parent = nodes[parentId] ?? findItem(items, parentId)
 
-    nodes[id] = { id, children }
-    if (parent) parent.children.push(item)
+    if (!nodes[id]) {
+      nodes[id] = { id, children }
+      parent.children.push(item)
+    }
   }
 
   return root.children

apps/webapp/src/Hooks/useTreeFromLinks.ts

@@ -51,7 +51,5 @@ export const getPartialTreeFromLinks = (matchedLinks: ILink[], allLinks: ILink[]
     .filter((i) => tree.items[i].data.stub === false)
     .map((i) => tree.items[i])
 
-  // mog('Made the partialTree From Links', { matchedLinks, allLinks, tree, treeFlatItems })
-
   return { tree, matchedFlatItems }
 }

apps/webapp/src/Views/Tasks.tsx

@@ -216,12 +216,13 @@ export const StyledTreeItem = styled.div<{
       }
     `}
 
-  ${({ isStub }) =>
+    ${({ isStub }) =>
     isStub &&
     css`
-      color: ${({ theme }) => theme.colors.gray[5]};
+      opacity: 0.8;
+      color: ${({ theme }) => theme.tokens.text.disabled};
       svg {
-        color: ${({ theme }) => theme.colors.gray[5]};
+        color: ${({ theme }) => theme.tokens.text.disabled};
       }
       background-color: transparent;
     `}