eliott/Nimbus
1
0
Fork 0
mirror of https://github.com/nimbusdotstorage/Nimbus synced 2026-04-22 17:45:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): complete file browser redesign using tanstack table

Browse Source
This commit is contained in:
Logan Reeder
2025-07-21 17:21:27 -06:00
parent e58894b575
commit d07b565407
29 changed files with 1128 additions and 1781 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/web/src/hooks/useFileOperations.ts
View File

@@ -1,6 +1,7 @@
import type {
CreateFileSchema,
DeleteFileSchema,
File,
GetFileByIdSchema,
GetFilesSchema,
UpdateFileSchema,
@@ -14,7 +15,7 @@ import { toast } from "sonner";
export function useGetFiles({ parentId, pageSize, pageToken, returnedValues }: GetFilesSchema) {
const { clientPromise, providerId, accountId } = useAccountProvider();
return useQuery({
queryKey: ["files", providerId, accountId, parentId, pageSize, pageToken],
queryKey: ["files", providerId, accountId, parentId],
queryFn: async () => {
const BASE_FILE_CLIENT = await getBaseFileClient(clientPromise);
const response = await BASE_FILE_CLIENT.$get({
@@ -22,7 +23,6 @@ export function useGetFiles({ parentId, pageSize, pageToken, returnedValues }: G
});
return await response.json();
},
staleTime: 5 * 60 * 1000, // 5 minutes
retry: 2,
});
}
@@ -30,23 +30,22 @@ export function useGetFiles({ parentId, pageSize, pageToken, returnedValues }: G
export function useGetFile({ fileId, returnedValues }: GetFileByIdSchema) {
const { clientPromise, providerId, accountId } = useAccountProvider();
return useQuery({
queryKey: ["file", providerId, accountId, fileId, returnedValues],
queryKey: ["file", providerId, accountId, fileId],
queryFn: async () => {
const BASE_FILE_CLIENT = await getBaseFileClient(clientPromise);
const response = await BASE_FILE_CLIENT[":id"].$get({
param: { fileId },
const response = await BASE_FILE_CLIENT[":fileId"].$get({
param: { fileId: fileId },
query: { returnedValues },
});
return await response.json();
},
staleTime: 5 * 60 * 1000, // 5 minutes
retry: 2,
});
}
export function useDeleteFile() {
const queryClient = useQueryClient();
const { clientPromise } = useAccountProvider();
const { clientPromise, providerId, accountId } = useAccountProvider();
return useMutation({
mutationFn: async ({ fileId }: DeleteFileSchema) => {
const BASE_FILE_CLIENT = await getBaseFileClient(clientPromise);
@@ -59,16 +58,18 @@ export function useDeleteFile() {
onMutate: async deletedFile => {
await queryClient.cancelQueries({ queryKey: ["files"] });
const previousFiles = queryClient.getQueryData<_File[]>(["files"]);
const previousFiles = queryClient.getQueryData<File[]>(["files"]);
queryClient.setQueryData(["files"], (old: _File[] = []) => old.filter(file => file.id !== deletedFile.fileId));
queryClient.setQueryData(["files", providerId, accountId], (old: File[] = []) =>
old.filter(file => file.id !== deletedFile.fileId)
);
return { previousFiles };
},
// Handles rollback on error
onError: (_, __, context) => {
if (context?.previousFiles) {
queryClient.setQueryData(["files"], context.previousFiles);
queryClient.setQueryData(["files", providerId, accountId], context.previousFiles);
}
toast.error("Failed to delete file");
},
@@ -80,7 +81,7 @@ export function useDeleteFile() {
export function useUpdateFile() {
const queryClient = useQueryClient();
const { clientPromise } = useAccountProvider();
const { clientPromise, providerId, accountId } = useAccountProvider();
return useMutation({
mutationFn: async ({ fileId, name }: UpdateFileSchema) => {
const BASE_FILE_CLIENT = await getBaseFileClient(clientPromise);
@@ -93,9 +94,9 @@ export function useUpdateFile() {
onMutate: async ({ fileId, ...dataToUpdate }) => {
await queryClient.cancelQueries({ queryKey: ["files"] });
const previousFiles = queryClient.getQueryData<_File[]>(["files"]);
const previousFiles = queryClient.getQueryData<File[]>(["files"]);
queryClient.setQueryData(["files"], (old: _File[] = []) =>
queryClient.setQueryData(["files", providerId, accountId], (old: File[] = []) =>
old.map(file => (file.id === fileId ? { ...file, ...dataToUpdate } : file))
);
@@ -104,7 +105,7 @@ export function useUpdateFile() {
// Handles rollback on error
onError: (_, __, context) => {
if (context?.previousFiles) {
queryClient.setQueryData(["files"], context.previousFiles);
queryClient.setQueryData(["files", providerId, accountId], context.previousFiles);
}
toast.error("Failed to update file");
},