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 loadDirectory, { FileObject } from '@/api/server/files/loadDirectory'; import NewDirectoryButton from '@/components/server/files/NewDirectoryButton'; import { Link, useLocation } from 'react-router-dom'; import Can from '@/components/elements/Can'; import PageContentBlock from '@/components/elements/PageContentBlock'; import ServerError from '@/components/screens/ServerError'; import tw from 'twin.macro'; import Button from '@/components/elements/Button'; import useSWR from 'swr'; import useServer from '@/plugins/useServer'; import { cleanDirectoryPath } from '@/helpers'; import { ServerContext } from '@/state/server'; const sortFiles = (files: FileObject[]): FileObject[] => { return files.sort((a, b) => a.name.localeCompare(b.name)) .sort((a, b) => a.isFile === b.isFile ? 0 : (a.isFile ? 1 : -1)); }; export default () => { const { hash } = useLocation(); const { id, uuid } = useServer(); const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory); const { data: files, error, mutate } = useSWR( `${uuid}:files:${hash}`, () => loadDirectory(uuid, cleanDirectoryPath(window.location.hash)), ); useEffect(() => { setDirectory(hash.length > 0 ? hash : '/'); }, [ hash ]); 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 => ( )) }
}
}
); };