danvics/telegram-files
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ feat: Refactored file list to use local storage to preserve row height and filter settings.

Browse source
This commit is contained in:
jarvis2f 2024-12-27 15:32:31 +08:00
parent 523d333fa4
commit f9818cbbbd
2 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
web/src/components/file-list.tsx
View file

@ -31,7 +31,7 @@ import { useFiles } from "@/hooks/use-files";
import { FileFilters } from "@/components/file-filters"; import { FileFilters } from "@/components/file-filters";
import { import {
getRowHeightTailwindClass, getRowHeightTailwindClass,
type RowHeight, useRowHeightLocalStorage,
} from "@/components/table-row-height-switch"; } from "@/components/table-row-height-switch";
import { type Column } from "@/components/table-column-filter"; import { type Column } from "@/components/table-column-filter";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -106,9 +106,10 @@ export function FileList({ accountId, chatId }: FileListProps) {
const [selectedFiles, setSelectedFiles] = useState<Set<number>>(new Set()); const [selectedFiles, setSelectedFiles] = useState<Set<number>>(new Set());
const observerTarget = useRef(null); const observerTarget = useRef(null);
const [columns, setColumns] = useState<Column[]>(COLUMNS); const [columns, setColumns] = useState<Column[]>(COLUMNS);
// const [rowHeight, setRowHeight] = useRowHeightLocalStorage("fileList", "m"); const [rowHeight, setRowHeight] = useRowHeightLocalStorage(
const [rowHeight, setRowHeight] = useState<RowHeight>("m"); "telegramFileList",
"m",
);
const { filters, handleFilterChange, isLoading, files, handleLoadMore } = const { filters, handleFilterChange, isLoading, files, handleLoadMore } =
useFiles(accountId, chatId); useFiles(accountId, chatId);

6
web/src/hooks/use-files.ts
View file

@ -7,6 +7,7 @@ import {
import useSWRInfinite from "swr/infinite"; import useSWRInfinite from "swr/infinite";
import { useWebsocket } from "@/hooks/use-websocket"; import { useWebsocket } from "@/hooks/use-websocket";
import { WebSocketMessageType } from "@/lib/websocket-types"; import { WebSocketMessageType } from "@/lib/websocket-types";
import useLocalStorage from "@/hooks/use-local-storage";
const DEFAULT_FILTERS: FileFilter = { const DEFAULT_FILTERS: FileFilter = {
search: "", search: "",
@ -31,7 +32,10 @@ export function useFiles(accountId: string, chatId: string) {
} }
> >
>({}); >({});
const [filters, setFilters] = useState<FileFilter>(DEFAULT_FILTERS); const [filters, setFilters, clearFilters] = useLocalStorage<FileFilter>(
"telegramFileListFilter",
DEFAULT_FILTERS,
);
const getKey = (page: number, previousPageData: FileResponse) => { const getKey = (page: number, previousPageData: FileResponse) => {
if (page === 0) { if (page === 0) {
return `/telegram/${accountId}/chat/${chatId}/files?search=${filters.search}&type=${filters.type}&status=${filters.status}`; return `/telegram/${accountId}/chat/${chatId}/files?search=${filters.search}&type=${filters.type}&status=${filters.status}`;