diff --git a/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx b/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx index 9b1596f5c..00dcd949d 100644 --- a/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx +++ b/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx @@ -1,26 +1,20 @@ import React, { useEffect, useState } from 'react'; import { ServerContext } from '@/state/server'; -import { NavLink, useRouteMatch } from 'react-router-dom'; +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 { + renderLeft?: JSX.Element; withinFileEditor?: boolean; isNewFile?: boolean; } -export default ({ withinFileEditor, isNewFile }: Props) => { +export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => { const [ file, setFile ] = useState(null); - const { params } = useRouteMatch>(); 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('/'); @@ -39,22 +33,9 @@ export default ({ withinFileEditor, isNewFile }: Props) => { return { name: 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 > 0 && !params?.action) ? - - : -
- } + {renderLeft ||
} /home/ { return files.sort((a, b) => a.name.localeCompare(b.name)) @@ -31,7 +32,9 @@ export default () => { 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'); @@ -43,6 +46,10 @@ export default () => { mutate(); }, [ directory ]); + const onSelectAllClick = (e: React.ChangeEvent) => { + setSelectedFiles(e.currentTarget.checked ? (files?.map(file => file.name) || []) : []); + }; + if (error) { return ( mutate()}/> @@ -53,9 +60,17 @@ export default () => {
- + + } + /> -
diff --git a/resources/scripts/plugins/useFileManagerSwr.ts b/resources/scripts/plugins/useFileManagerSwr.ts index 390ce839b..7d1bb7edc 100644 --- a/resources/scripts/plugins/useFileManagerSwr.ts +++ b/resources/scripts/plugins/useFileManagerSwr.ts @@ -7,6 +7,8 @@ export default () => { const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); const directory = ServerContext.useStoreState(state => state.files.directory); + console.log('firing'); + return useSWR( `${uuid}:files:${directory}`, () => loadDirectory(uuid, cleanDirectoryPath(directory)),