Slightly less obtuse way of handling this little checkbox

Author: DaneEveritt

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<string | null>(null);
-    const { params } = useRouteMatch<Record<string, string>>();
     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<HTMLInputElement>) => {
-        setSelectedFiles(e.currentTarget.checked ? (files?.map(file => file.name) || []) : []);
-    };
-
     return (
         <div css={tw`flex flex-grow-0 items-center text-sm text-neutral-500 overflow-x-hidden`}>
-            {(files && files.length > 0 && !params?.action) ?
-                <FileActionCheckbox
-                    type={'checkbox'}
-                    css={tw`mx-4`}
-                    checked={selectedFilesLength === (files ? files.length : -1)}
-                    onChange={onSelectAllClick}
-                />
-                :
-                <div css={tw`w-12`}/>
-            }
+            {renderLeft || <div css={tw`w-12`}/>}
             /<span css={tw`px-1 text-neutral-300`}>home</span>/
             <NavLink
                 to={`/server/${id}/files`}

resources/scripts/components/server/files/FileManagerContainer.tsx

@@ -18,6 +18,7 @@ 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';
 
 const sortFiles = (files: FileObject[]): FileObject[] => {
     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<HTMLInputElement>) => {
+        setSelectedFiles(e.currentTarget.checked ? (files?.map(file => file.name) || []) : []);
+    };
+
     if (error) {
         return (
             <ServerError message={httpErrorToHuman(error)} onRetry={() => mutate()}/>
@@ -53,9 +60,17 @@ export default () => {
         <ServerContentBlock title={'File Manager'} showFlashKey={'files'}>
             <div css={tw`flex flex-wrap-reverse md:flex-no-wrap justify-center mb-4`}>
                 <ErrorBoundary>
-                    <FileManagerBreadcrumbs/>
+                    <FileManagerBreadcrumbs
+                        renderLeft={
+                            <FileActionCheckbox
+                                type={'checkbox'}
+                                css={tw`mx-4`}
+                                checked={selectedFilesLength === (files ? files.length : -1)}
+                                onChange={onSelectAllClick}
+                            />
+                        }
+                    />
                 </ErrorBoundary>
-
                 <Can action={'file.create'}>
                     <ErrorBoundary>
                         <div css={tw`flex flex-shrink-0 flex-wrap-reverse md:flex-no-wrap justify-end mb-4 md:mb-0 ml-0 md:ml-auto`}>

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<FileObject[]>(
         `${uuid}:files:${directory}`,
         () => loadDirectory(uuid, cleanDirectoryPath(directory)),