sort ExplorerNode children alphabetically

This commit is contained in:
Martti Malmi 2023-08-30 20:45:47 +03:00
parent 51ec3c89d4
commit 51ff0e6d7e

View File

@ -3,6 +3,7 @@ import { ChevronRightIcon } from '@heroicons/react/20/solid';
import Show from '@/components/helpers/Show.tsx'; import Show from '@/components/helpers/Show.tsx';
import Node, { DIR_VALUE } from '@/state/Node'; import Node, { DIR_VALUE } from '@/state/Node';
import SortedMap from '@/utils/SortedMap/SortedMap.tsx';
type Props = { type Props = {
node: Node; node: Node;
@ -15,6 +16,8 @@ type Props = {
const VALUE_TRUNCATE_LENGTH = 50; const VALUE_TRUNCATE_LENGTH = 50;
type Child = { node: Node; value: any };
export default function ExplorerNode({ export default function ExplorerNode({
node, node,
value = DIR_VALUE, value = DIR_VALUE,
@ -23,7 +26,7 @@ export default function ExplorerNode({
name, name,
parentCounter = 0, parentCounter = 0,
}: Props) { }: Props) {
const [children, setChildren] = useState<{ [key: string]: { node: Node; value: any } }>({}); const [children, setChildren] = useState<SortedMap<string, Child>>(new SortedMap());
const [isOpen, setIsOpen] = useState(expanded); const [isOpen, setIsOpen] = useState(expanded);
const [showMore, setShowMore] = useState(false); const [showMore, setShowMore] = useState(false);
@ -32,12 +35,13 @@ export default function ExplorerNode({
useEffect(() => { useEffect(() => {
if (!isDirectory) return; if (!isDirectory) return;
return node.map((value, key) => { return node.map((value, key) => {
if (!children[key]) { if (!children.has(key)) {
const childName = key.split('/').pop()!; const childName = key.split('/').pop()!;
setChildren((prev) => ({ setChildren((prev) => {
...prev, const newChildren = new SortedMap(prev);
[key]: { node: node.get(childName), value }, newChildren.set(childName, { node: node.get(childName), value });
})); return newChildren;
});
} }
}); });
}, [node.id, value]); }, [node.id, value]);
@ -90,7 +94,7 @@ export default function ExplorerNode({
</div> </div>
{isOpen ? ( {isOpen ? (
<div> <div>
{Object.values(children).map((child, index) => ( {Array.from(children.values()).map((child, index) => (
<ExplorerNode <ExplorerNode
key={node.id + child.node.id} key={node.id + child.node.id}
node={child.node} node={child.node}