import React, { useEffect } from 'react'; import { httpErrorToHuman } from '@/api/http'; import { CSSTransition } from 'react-transition-group'; import Spinner from '@/components/elements/Spinner'; import FileObjectRow from '@/components/server/files/FileObjectRow'; import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs'; import { FileObject } from '@/api/server/files/loadDirectory'; import NewDirectoryButton from '@/components/server/files/NewDirectoryButton'; import { NavLink, useLocation } from 'react-router-dom'; import Can from '@/components/elements/Can'; import { ServerError } from '@/components/elements/ScreenBlock'; import tw from 'twin.macro'; import Button from '@/components/elements/Button'; import { ServerContext } from '@/state/server'; import useFileManagerSwr from '@/plugins/useFileManagerSwr'; import MassActionsBar from '@/components/server/files/MassActionsBar'; import UploadButton from '@/components/server/files/UploadButton'; import ServerContentBlock from '@/components/elements/ServerContentBlock'; import { useStoreActions } from '@/state/hooks'; import ErrorBoundary from '@/components/elements/ErrorBoundary'; import { FileActionCheckbox } from '@/components/server/files/SelectFileCheckbox'; import { hashToPath } from '@/helpers'; const sortFiles = (files: FileObject[]): FileObject[] => { const sortedFiles: FileObject[] = files.sort((a, b) => a.name.localeCompare(b.name)).sort((a, b) => a.isFile === b.isFile ? 0 : (a.isFile ? 1 : -1)); return sortedFiles.filter((file, index) => index === 0 || file.name !== sortedFiles[index - 1].name); }; export default () => { const id = ServerContext.useStoreState(state => state.server.data!.id); const { hash } = useLocation(); const { data: files, error, mutate } = useFileManagerSwr(); const directory = ServerContext.useStoreState(state => state.files.directory); const clearFlashes = useStoreActions(actions => actions.flashes.clearFlashes); const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory); const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles); const selectedFilesLength = ServerContext.useStoreState(state => state.files.selectedFiles.length); useEffect(() => { clearFlashes('files'); setSelectedFiles([]); setDirectory(hashToPath(hash)); }, [ hash ]); useEffect(() => { mutate(); }, [ directory ]); const onSelectAllClick = (e: React.ChangeEvent) => { setSelectedFiles(e.currentTarget.checked ? (files?.map(file => file.name) || []) : []); }; if (error) { return ( mutate()}/> ); } return (
} />
{ !files ? : <> {!files.length ?

This directory seems to be empty.

:
{files.length > 250 &&

This directory is too large to display in the browser, limiting the output to the first 250 files.

} { sortFiles(files.slice(0, 250)).map(file => ( )) }
} }
); };