feat: add collapse all notes and view in tree buttons (#116)

Author: tuur29

components/icon-button.tsx

@@ -18,6 +18,7 @@ import {
   ExternalLinkIcon,
   BookmarkAltIcon,
   PuzzleIcon,
+  ChevronDoubleUpIcon
 } from '@heroicons/react/outline'
 
 export const ICONS = {
@@ -38,6 +39,7 @@ export const ICONS = {
   ExternalLink: ExternalLinkIcon,
   BookmarkAlt: BookmarkAltIcon,
   Puzzle: PuzzleIcon,
+  ChevronDoubleUp: ChevronDoubleUpIcon,
 }
 
 const IconButton = forwardRef<

components/note-nav.tsx

@@ -12,6 +12,7 @@ import PortalState from 'libs/web/state/portal'
 import { NOTE_SHARED } from 'libs/shared/meta'
 import useI18n from 'libs/web/hooks/use-i18n'
 import NavButtonGroup from './nav-button-group'
+import { EyeIcon } from '@heroicons/react/outline'
 
 const MenuButton = () => {
   const { sidebar } = UIState.useContainer()
@@ -37,7 +38,7 @@ const NoteNav = () => {
   const { t } = useI18n()
   const { note, loading } = NoteState.useContainer()
   const { ua } = UIState.useContainer()
-  const { getPaths } = NoteTreeState.useContainer()
+  const { getPaths, showItem, checkItemIsShown } = NoteTreeState.useContainer()
   const { share, menu } = PortalState.useContainer()
 
   const handleClickShare = useCallback(
@@ -58,6 +59,11 @@ const NoteNav = () => {
     [note, menu]
   )
 
+  const handleClickOpenInTree = useCallback(() => {
+    if (!note) return
+    showItem(note);
+  }, [note, showItem])
+
   return (
     <nav
       className={classNames(
@@ -92,14 +98,27 @@ const NoteNav = () => {
                   </div>
                 </Tooltip>
               ))}
-            <Tooltip title={note.title}>
-              <span
-                className="title block text-gray-600 text-sm truncate select-none"
-                aria-current="page"
-              >
-                {note.title}
-              </span>
-            </Tooltip>
+            <span>
+              <Tooltip title={note.title}>
+                <span
+                  className="title inline-block text-gray-600 text-sm truncate select-none align-middle"
+                  aria-current="page"
+                >
+                  {note.title}
+                </span>
+              </Tooltip>
+              {!checkItemIsShown(note) && (
+                <Tooltip title={t('Show note in tree')}>
+                  <span>
+                    <EyeIcon
+                      width="20"
+                      className="inline-block cursor-pointer ml-1"
+                      onClick={handleClickOpenInTree}
+                    />
+                  </span>
+                </Tooltip>
+              )}
+            </span>
           </Breadcrumbs>
         )}
         <style jsx>

components/sidebar/sidebar-list.tsx

@@ -6,7 +6,7 @@ import router from 'next/router'
 import HotkeyTooltip from 'components/hotkey-tooltip'
 import IconButton from 'components/icon-button'
 import useI18n from 'libs/web/hooks/use-i18n'
-import { CircularProgress } from '@material-ui/core'
+import { CircularProgress, Tooltip } from '@material-ui/core'
 import { Favorites } from './favorites'
 
 const SideBarList = () => {
@@ -16,6 +16,7 @@ const SideBarList = () => {
     moveItem,
     mutateItem,
     initLoaded,
+    collapseAllItems
   } = NoteTreeState.useContainer()
 
   const onExpand = useCallback(
@@ -66,6 +67,13 @@ const SideBarList = () => {
             <CircularProgress className="ml-4" size="14px" color="inherit" />
           )}
         </div>
+        <Tooltip title={t('Collapse all pages')}>
+          <IconButton
+            icon="ChevronDoubleUp"
+            onClick={collapseAllItems}
+            className="text-gray-700 w-5 h-5 md:w-5 md:h-5"
+          ></IconButton>
+        </Tooltip>
         <HotkeyTooltip
           text={t('Create page')}
           commandKey

libs/web/state/tree.ts

@@ -1,4 +1,4 @@
-import { cloneDeep, forEach, isEmpty, map } from 'lodash'
+import { cloneDeep, forEach, isEmpty, map, reduce } from 'lodash'
 import { genId } from 'libs/shared/id'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createContainer } from 'unstated-next'
@@ -19,6 +19,23 @@ import { uiCache } from '../cache'
 
 const TREE_CACHE_KEY = 'tree'
 
+const findParentTreeItems = (tree: TreeModel, note: NoteModel) => {
+  const parents = [] as TreeItemModel[]
+
+  let tempNote = note
+  while (tempNote.pid && tempNote.pid !== ROOT_ID) {
+    const curData = tree.items[tempNote.pid]
+    if (curData?.data) {
+      tempNote = curData.data
+      parents.push(curData)
+    } else {
+      break
+    }
+  }
+
+  return parents
+}
+
 const useNoteTree = (initData: TreeModel = DEFAULT_TREE) => {
   const { mutate, loading, fetch: fetchTree } = useTreeAPI()
   const [tree, setTree] = useState<TreeModel>(initData)
@@ -146,21 +163,52 @@ const useNoteTree = (initData: TreeModel = DEFAULT_TREE) => {
 
   const getPaths = useCallback((note: NoteModel) => {
     const tree = treeRef.current
-    const paths = [] as NoteModel[]
-
-    while (note.pid && note.pid !== ROOT_ID) {
-      const curData = tree.items[note.pid]?.data
-      if (curData) {
-        note = curData
-        paths.push(note)
-      } else {
-        break
+    return findParentTreeItems(tree, note).map((listItem) => listItem.data!)
+  }, [])
+
+  const setItemsExpandState = useCallback(
+    async (items: TreeItemModel[], newValue: boolean) => {
+      const newTree = reduce(
+        items,
+        (tempTree, item) =>
+          TreeActions.mutateItem(tempTree, item.id, { isExpanded: newValue }),
+        treeRef.current
+      )
+      setTree(newTree)
+
+      for (const item of items) {
+        await mutate({
+          action: 'mutate',
+          data: {
+            isExpanded: newValue,
+            id: item.id,
+          },
+        })
       }
-    }
+    },
+    [mutate]
+  )
+
+  const showItem = useCallback(
+    (note: NoteModel) => {
+      const parents = findParentTreeItems(treeRef.current, note)
+      setItemsExpandState(parents, true)
+    },
+    [setItemsExpandState]
+  )
 
-    return paths
+  const checkItemIsShown = useCallback((note: NoteModel) => {
+    const parents = findParentTreeItems(treeRef.current, note)
+    return reduce(parents, (value, item) => value && !!item.isExpanded, true)
   }, [])
 
+  const collapseAllItems = useCallback(() => {
+    const expandedItems = TreeActions.flattenTree(treeRef.current).filter(
+      (item) => item.isExpanded
+    )
+    setItemsExpandState(expandedItems, false)
+  }, [setItemsExpandState])
+
   const pinnedTree = useMemo(() => {
     const items = cloneDeep(tree.items)
     const pinnedIds: string[] = []
@@ -197,6 +245,9 @@ const useNoteTree = (initData: TreeModel = DEFAULT_TREE) => {
     restoreItem,
     deleteItem,
     getPaths,
+    showItem,
+    checkItemIsShown,
+    collapseAllItems,
     loading,
     initLoaded,
   }