119 lines
3.2 KiB
TypeScript
119 lines
3.2 KiB
TypeScript
import { useCallback } from "react";
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { listSnapshotFilesOptions } from "~/client/api-client/@tanstack/react-query.gen";
|
|
import { FileBrowser, type FileBrowserUiProps } from "~/client/components/file-browsers/file-browser";
|
|
import { useFileBrowser } from "~/client/hooks/use-file-browser";
|
|
import { parseError } from "~/client/lib/errors";
|
|
|
|
const normalizeAbsolutePath = (path?: string): string => {
|
|
if (!path) return "/";
|
|
const withLeadingSlash = path.startsWith("/") ? path : `/${path}`;
|
|
const trimmed = withLeadingSlash.replace(/\/+$/, "");
|
|
return trimmed || "/";
|
|
};
|
|
|
|
type SnapshotTreeBrowserProps = FileBrowserUiProps & {
|
|
repositoryId: string;
|
|
snapshotId: string;
|
|
basePath?: string;
|
|
pageSize?: number;
|
|
enabled?: boolean;
|
|
};
|
|
|
|
export const SnapshotTreeBrowser = ({
|
|
repositoryId,
|
|
snapshotId,
|
|
basePath = "/",
|
|
pageSize = 500,
|
|
enabled = true,
|
|
...uiProps
|
|
}: SnapshotTreeBrowserProps) => {
|
|
const queryClient = useQueryClient();
|
|
const normalizedBasePath = normalizeAbsolutePath(basePath);
|
|
|
|
const { data, isLoading, error } = useQuery({
|
|
...listSnapshotFilesOptions({
|
|
path: { id: repositoryId, snapshotId },
|
|
query: { path: normalizedBasePath },
|
|
}),
|
|
enabled,
|
|
});
|
|
|
|
const stripBasePath = useCallback(
|
|
(path: string): string => {
|
|
if (normalizedBasePath === "/") return path;
|
|
if (path === normalizedBasePath) return "/";
|
|
if (path.startsWith(`${normalizedBasePath}/`)) {
|
|
return path.slice(normalizedBasePath.length);
|
|
}
|
|
return path;
|
|
},
|
|
[normalizedBasePath],
|
|
);
|
|
|
|
const addBasePath = useCallback(
|
|
(displayPath: string): string => {
|
|
if (normalizedBasePath === "/") return displayPath;
|
|
if (displayPath === "/") return normalizedBasePath;
|
|
return `${normalizedBasePath}${displayPath}`;
|
|
},
|
|
[normalizedBasePath],
|
|
);
|
|
|
|
const fileBrowser = useFileBrowser({
|
|
initialData: data,
|
|
isLoading,
|
|
fetchFolder: async (path, offset = 0) => {
|
|
return await queryClient.ensureQueryData(
|
|
listSnapshotFilesOptions({
|
|
path: { id: repositoryId, snapshotId },
|
|
query: {
|
|
path,
|
|
offset: offset.toString(),
|
|
limit: pageSize.toString(),
|
|
},
|
|
}),
|
|
);
|
|
},
|
|
prefetchFolder: (path) => {
|
|
void queryClient.prefetchQuery(
|
|
listSnapshotFilesOptions({
|
|
path: { id: repositoryId, snapshotId },
|
|
query: {
|
|
path,
|
|
offset: "0",
|
|
limit: pageSize.toString(),
|
|
},
|
|
}),
|
|
);
|
|
},
|
|
pathTransform: {
|
|
strip: stripBasePath,
|
|
add: addBasePath,
|
|
},
|
|
});
|
|
|
|
const errorDetails = parseError(error)?.message;
|
|
const errorMessage = errorDetails
|
|
? `Failed to load files: ${errorDetails}`
|
|
: error
|
|
? "Failed to load files"
|
|
: undefined;
|
|
|
|
return (
|
|
<FileBrowser
|
|
{...uiProps}
|
|
fileArray={fileBrowser.fileArray}
|
|
expandedFolders={fileBrowser.expandedFolders}
|
|
loadingFolders={fileBrowser.loadingFolders}
|
|
onFolderExpand={fileBrowser.handleFolderExpand}
|
|
onFolderHover={fileBrowser.handleFolderHover}
|
|
onLoadMore={fileBrowser.handleLoadMore}
|
|
getFolderPagination={fileBrowser.getFolderPagination}
|
|
isLoading={fileBrowser.isLoading}
|
|
isEmpty={fileBrowser.isEmpty}
|
|
errorMessage={errorMessage}
|
|
loadingMessage={uiProps.loadingMessage ?? "Loading files..."}
|
|
/>
|
|
);
|
|
};
|