Merge pull request #12914 from overleaf/mf-sort-file-tree-history-react

Sort react history file tree items with the same rule as the angular history file tree

GitOrigin-RevId: da3d3195fff1f5b05b232b329fc3cf38a65743f6
This commit is contained in:
June Kelly 2023-05-04 09:47:33 +01:00 committed by Copybot
parent 8a0a67e2bb
commit 7d1d34726e
2 changed files with 16 additions and 26 deletions

View file

@ -2,7 +2,6 @@ import classNames from 'classnames'
import HistoryFileTreeDoc from './history-file-tree-doc'
import HistoryFileTreeFolder from './history-file-tree-folder'
import { fileCollator } from '../../../file-tree/util/file-collator'
import type { ReactNode } from 'react'
import type { HistoryFileTree, HistoryDoc } from '../../utils/file-tree'
@ -21,29 +20,18 @@ export default function HistoryFileTreeFolderList({
}: HistoryFileTreeFolderListProps) {
return (
<ul className={classNames('list-unstyled', rootClassName)} role="tree">
{folders.sort(compareFunction).map(folder => {
return (
<HistoryFileTreeFolder
key={folder.name}
name={folder.name}
folders={folder.folders}
docs={folder.docs ?? []}
/>
)
})}
{docs.sort(compareFunction).map(doc => {
return (
<HistoryFileTreeDoc key={doc.pathname} name={doc.name} file={doc} />
)
})}
{folders.map(folder => (
<HistoryFileTreeFolder
key={folder.name}
name={folder.name}
folders={folder.folders}
docs={folder.docs ?? []}
/>
))}
{docs.map(doc => (
<HistoryFileTreeDoc key={doc.pathname} name={doc.name} file={doc} />
))}
{children}
</ul>
)
}
function compareFunction(
one: HistoryFileTree | HistoryDoc,
two: HistoryFileTree | HistoryDoc
) {
return fileCollator.compare(one.name, two.name)
}

View file

@ -1,4 +1,4 @@
import _ from 'lodash'
import { orderBy, reduce } from 'lodash'
import { useHistoryContext } from '../context/history-context'
import {
fileTreeDiffToFileTreeData,
@ -9,9 +9,11 @@ import HistoryFileTreeFolderList from './file-tree/history-file-tree-folder-list
export default function HistoryFileTree() {
const { selection, error } = useHistoryContext()
const fileTree = _.reduce(selection.files, reducePathsToTree, [])
const fileTree = reduce(selection.files, reducePathsToTree, [])
const mappedFileTree = fileTreeDiffToFileTreeData(fileTree)
const sortedFileTree = orderBy(fileTree, ['-type', 'operation', 'name'])
const mappedFileTree = fileTreeDiffToFileTreeData(sortedFileTree)
return error ? null : (
<HistoryFileTreeFolderList