optimize select dialog

Author: jrief

client/browser/FileSelectDialog.tsx

@@ -89,8 +89,8 @@ const FilesList = memo((props: any) => {
 });
 
 
-const FileSelectDialog = forwardRef(function (props: any, forwardedRef) {
-	const {ambit, baseUrl, selectedFolderId, mimeTypes, csrfToken} = props;
+const FileSelectDialog = forwardRef(function FileSelectDialog(props: any, forwardedRef) {
+	const {ambit, baseUrl, selectedFolderId, selectedFileId, mimeTypes, csrfToken} = props;
 	const [structure, setStructure] = useState({
 		root_folder: null,
 		last_folder: null,
@@ -195,6 +195,9 @@ const FileSelectDialog = forwardRef(function (props: any, forwardedRef) {
 		if (selectedFolderId) {
 			params.append('folder', selectedFolderId);
 		}
+		if (selectedFileId) {
+			params.append('file', selectedFileId);
+		}
 		mimeTypes?.forEach(type => params.append('mimetypes', type));
 		setDirty(false);
 		const response = await fetch(`${baseUrl}structure/${ambit}${params.size === 0 ? '' : `?${params.toString()}`}`);
@@ -340,7 +343,7 @@ const FileSelectDialog = forwardRef(function (props: any, forwardedRef) {
 							setDirty={setDirty}
 							isDirty={isDirty}
 							selectFile={selectFile}
-							selectedFileId={props.selectedFileId}
+							selectedFileId={selectedFileId}
 							webAudio={webAudio}
 						/>
 						:

client/browser/FinderFileSelect.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState, useCallback} from 'react';
 import FileSelectDialog from './FileSelectDialog';
 
 
@@ -55,6 +55,17 @@ function parseDataset(dataset: string|object) : SelectedFile|null {
 	return null;
 }
 
+function getCSRFToken(shadowRoot) {
+	const csrfToken = shadowRoot.host.closest('form')?.querySelector('input[name="csrfmiddlewaretoken"]')?.value;
+	if (csrfToken)
+		return csrfToken;
+	const parts = `; ${document.cookie}`.split('; csrftoken=');
+	if (parts.length === 2)
+		return parts.pop().split(';').shift();
+}
+
+
+const uuid5Regex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 
 export default function FinderFileSelect(props) {
 	const shadowRoot = props.container;
@@ -65,7 +76,7 @@ export default function FinderFileSelect(props) {
 	const slotRef = useRef(null);
 	const dialogRef = useRef(null);
 	const [selectedFile, setSelectedFile] = useState<SelectedFile>(null);
-	const csrfToken = getCSRFToken();
+	const csrfToken = getCSRFToken(shadowRoot);
 	const uuid5Regex = new RegExp(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i);
 
 	useEffect(() => {
@@ -126,15 +137,6 @@ export default function FinderFileSelect(props) {
 		}
 	}
 
-	function getCSRFToken() {
-		const csrfToken = shadowRoot.host.closest('form')?.querySelector('input[name="csrfmiddlewaretoken"]')?.value;
-		if (csrfToken)
-			return csrfToken;
-		const parts = `; ${document.cookie}`.split('; csrftoken=');
-		if (parts.length === 2)
-			return parts.pop().split(';').shift();
-	}
-
 	function openDialog() {
 		dialogRef.current.showModal();
 		selectRef.current.scrollToCurrentFolder();
@@ -172,7 +174,7 @@ export default function FinderFileSelect(props) {
 		<div className="finder-file-select">
 			<figure>{selectedFile ? <>
 				<div>
-					<img src={selectedFile.thumbnail_url} onClick={openDialog} onDragEnter={openDialog} />
+					<img src={selectedFile.thumbnail_url} alt={selectedFile.name} onClick={openDialog} onDragEnter={openDialog} />
 				</div>
 				<figcaption>
 					<dl>

client/scss/finder-browser.scss

@@ -11,7 +11,8 @@
 		display: inline-flex;
 		margin: 0.25rem 0;
 		padding: 0;
-		outline: gray thin dotted;
+		outline: gray 2px dashed;
+		border-radius: 4px;
 
 		>div {
 			width: 180px;