import React, { useEffect, useState } from 'react'; import { ServerContext } from '@/state/server'; import { NavLink } from 'react-router-dom'; import { cleanDirectoryPath } from '@/helpers'; import tw from 'twin.macro'; import { FileActionCheckbox } from '@/components/server/files/SelectFileCheckbox'; import useFileManagerSwr from '@/plugins/useFileManagerSwr'; interface Props { withinFileEditor?: boolean; isNewFile?: boolean; } export default ({ withinFileEditor, isNewFile }: Props) => { const [ file, setFile ] = useState(null); const id = ServerContext.useStoreState(state => state.server.data!.id); const directory = ServerContext.useStoreState(state => state.files.directory); const { data: files } = useFileManagerSwr(); const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles); const selectedFilesLength = ServerContext.useStoreState(state => state.files.selectedFiles.length); useEffect(() => { const parts = cleanDirectoryPath(window.location.hash).split('/'); if (withinFileEditor && !isNewFile) { setFile(parts.pop() || null); } }, [ withinFileEditor, isNewFile ]); const breadcrumbs = (): { name: string; path?: string }[] => directory.split('/') .filter(directory => !!directory) .map((directory, index, dirs) => { if (!withinFileEditor && index === dirs.length - 1) { return { name: decodeURIComponent(directory) }; } return { name: decodeURIComponent(directory), path: `/${dirs.slice(0, index + 1).join('/')}` }; }); const onSelectAllClick = (e: React.ChangeEvent) => { setSelectedFiles(e.currentTarget.checked ? (files?.map(file => file.name) || []) : []); }; return (
{!!(files && files.length) && } /home/ container / { breadcrumbs().map((crumb, index) => ( crumb.path ? {crumb.name} / : {crumb.name} )) } {file && {decodeURIComponent(file)} }
); };