Addressed comments

*   useState() instead of direct DOM manipulation
*   backed out eslint changes in favor of suppressing the warning
This commit is contained in:
Ian Flanigan 2022-05-27 09:56:33 +02:00
parent 7bc55ec8ff
commit d78c4b7a73
3 changed files with 9 additions and 13 deletions

View File

@ -113,8 +113,7 @@
"node": true
},
"rules": {
"no-console": 0,
"@typescript-eslint/no-undef": "off",
"no-console": 0
}
},
{

View File

@ -108,7 +108,7 @@ const FilePickerChooser = ({
accept = [ACCEPT_EVERYTHING_TYPE]
}: FilePickerChooserProps) => {
const [busy, setBusy] = useState<boolean>(false);
const filenameSpanRef = useRef<HTMLSpanElement>(null);
const [selectedFilename, setSelectedFilename] = useState<string>();
const fileHandlesRef = useRef<FileSystemFileHandle[]>();
const onClickInternal = useCallback(async () => {
@ -134,15 +134,10 @@ const FilePickerChooser = ({
}, []);
useEffect(() => {
if (!filenameSpanRef.current) {
return;
}
if (fileHandlesRef.current?.length) {
filenameSpanRef.current.textContent = fileHandlesRef.current[0].name;
} else {
filenameSpanRef.current.textContent = 'No file selected';
}
setSelectedFilename(
fileHandlesRef.current?.length
? fileHandlesRef.current[0].name
: 'No file selected');
}, [fileHandlesRef.current]);
return (
@ -151,7 +146,7 @@ const FilePickerChooser = ({
Choose File
</button>
&nbsp;
<span role="label" ref={filenameSpanRef} />
<span role="label">{selectedFilename}</span>
</>
);
};

View File

@ -23,6 +23,7 @@ const FAKE_FILE_HANDLE = {
isDirectory: false,
} as const;
// eslint-disable-next-line no-undef
const EMPTY_FILE_LIST = backdoors.newFileList();
const FAKE_FILE = new File([], 'fake');
@ -57,6 +58,7 @@ describe('FileChooser', () => {
const onChange = jest.fn<ReturnType<FileChooserProps['onChange']>, Parameters<FileChooserProps['onChange']>>();
render(<FileChooser control='input' onChange={onChange} />);
const inputElement = await screen.findByRole('button') as HTMLInputElement;
// eslint-disable-next-line no-undef
inputElement.files = backdoors.newFileList(FAKE_FILE);
fireEvent.change(inputElement);
await waitFor(async () => {