import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faFileImport } from '@fortawesome/free-solid-svg-icons/faFileImport'; import { faFileAlt } from '@fortawesome/free-solid-svg-icons/faFileAlt'; import { faFolder } from '@fortawesome/free-solid-svg-icons/faFolder'; import { bytesToHuman } from '@/helpers'; import differenceInHours from 'date-fns/difference_in_hours'; import format from 'date-fns/format'; import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; import React from 'react'; import { FileObject } from '@/api/server/files/loadDirectory'; import FileDropdownMenu from '@/components/server/files/FileDropdownMenu'; import { ServerContext } from '@/state/server'; import { NavLink } from 'react-router-dom'; import useRouter from 'use-react-router'; export default ({ file }: { file: FileObject }) => { const directory = ServerContext.useStoreState(state => state.files.directory); const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory); const { match } = useRouter(); return (
{ // Don't rely on the onClick to work with the generated URL. Because of the way this // component re-renders you'll get redirected into a nested directory structure since // it'll cause the directory variable to update right away when you click. // // Just trust me future me, leave this be. if (!file.isFile) { e.preventDefault(); window.location.hash = `#${directory}/${file.name}`; setDirectory(`${directory}/${file.name}`); } }} >
{file.isFile ? : }
{file.name}
{file.isFile &&
{bytesToHuman(file.size)}
}
{Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48 ? format(file.modifiedAt, 'MMM Do, YYYY h:mma') : distanceInWordsToNow(file.modifiedAt, { addSuffix: true }) }
); };