File System

1"use client";
2 
3import * as React from "react";
4import { usePathname, useRouter, useSearchParams } from "next/navigation";
5 
6import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect";
7import { FileSystem } from "@/components/ui/file-system";
8 
9import {
10  collectFileSystemDemoFolderPaths,
11  collectFileSystemDemoItemPaths,
12  DEFAULT_FILE_SYSTEM_DEMO_QUERY,
13  FILE_SYSTEM_DEMO_ITEMS,
14  formatFileSystemDemoState,
15  LARGE_FILE_SYSTEM_DEMO_ITEMS,
16  parseFileSystemDemoState,
17  type FileSystemDemoState,
18} from "./file-system-demo-state";
19 
20const DEFAULT_FILE_SYSTEM_DEMO_STATE: FileSystemDemoState = {
21  path: "",
22  query: DEFAULT_FILE_SYSTEM_DEMO_QUERY,
23  selectedPath: null,
24  view: "list",
25};
26 
27export function FileSystemBlock() {
28  const router = useRouter();
29  const pathname = usePathname();
30  const searchParams = useSearchParams();
31  const isLarge = searchParams.get("large") === "true";
32  const items = isLarge ? LARGE_FILE_SYSTEM_DEMO_ITEMS : FILE_SYSTEM_DEMO_ITEMS;
33  const folderPaths = React.useMemo(
34    () => collectFileSystemDemoFolderPaths(items),
35    [items],
36  );
37  const itemPaths = React.useMemo(
38    () => collectFileSystemDemoItemPaths(items),
39    [items],
40  );
41  const parsedState = React.useMemo(
42    () =>
43      parseFileSystemDemoState(searchParams, {
44        fallbackState: DEFAULT_FILE_SYSTEM_DEMO_STATE,
45        folderPaths,
46        itemPaths,
47      }),
48    [folderPaths, itemPaths, searchParams],
49  );
50  const [state, setState] = React.useState(parsedState);
51  const stateRef = React.useRef(parsedState);
52  const parsedStateKey = React.useMemo(
53    () =>
54      JSON.stringify(
55        formatFileSystemDemoState(parsedState, DEFAULT_FILE_SYSTEM_DEMO_STATE),
56      ),
57    [parsedState],
58  );
59 
60  useKeyedMountEffect(parsedStateKey, () => {
61    stateRef.current = parsedState;
62    setState(parsedState);
63  });
64 
65  const replaceState = React.useCallback(
66    (patch: Partial<FileSystemDemoState>) => {
67      const nextState = { ...stateRef.current, ...patch };
68      const nextParams = new URLSearchParams(
69        formatFileSystemDemoState(nextState, DEFAULT_FILE_SYSTEM_DEMO_STATE),
70      );
71 
72      if (isLarge) nextParams.set("large", "true");
73      stateRef.current = nextState;
74      setState(nextState);
75      router.replace(`${pathname}?${nextParams.toString()}`, {
76        scroll: false,
77      });
78    },
79    [isLarge, pathname, router],
80  );
81 
82  return (
83    <FileSystem
84      className="h-[680px]"
85      items={items}
86// … truncated