mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-14 06:34:04 +00:00
reduce note debounce time + flush on unmount (#809)
This commit is contained in:
parent
3c1696f833
commit
a3facb4598
|
@ -1,4 +1,4 @@
|
|||
import { useCallback, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
import { Object as SDObject, useLibraryMutation } from '@sd/client';
|
||||
import { Divider, TextArea } from '@sd/ui';
|
||||
|
@ -9,35 +9,19 @@ interface Props {
|
|||
}
|
||||
|
||||
export default function Note(props: Props) {
|
||||
// notes are cached in a store by their file id
|
||||
// this is so we can ensure every note has been sent to Rust even
|
||||
// when quickly navigating files, which cancels update function
|
||||
const [note, setNote] = useState(props.data.note || '');
|
||||
const setNote = useLibraryMutation('files.setNote');
|
||||
|
||||
const { mutate: fileSetNote } = useLibraryMutation('files.setNote');
|
||||
|
||||
const debounce = useDebouncedCallback(
|
||||
(note: string) =>
|
||||
fileSetNote({
|
||||
const debouncedSetNote = useDebouncedCallback((note: string) => {
|
||||
setNote.mutate({
|
||||
id: props.data.id,
|
||||
note
|
||||
}),
|
||||
2000
|
||||
);
|
||||
});
|
||||
}, 500);
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
const debouncedNote = useCallback(
|
||||
(note: string) => debounce(note),
|
||||
[props.data.id, fileSetNote]
|
||||
);
|
||||
// Force update when component unmounts
|
||||
useEffect(() => () => debouncedSetNote.flush(), []);
|
||||
|
||||
// when input is updated, cache note
|
||||
function handleNoteUpdate(e: React.ChangeEvent<HTMLTextAreaElement>) {
|
||||
if (e.target.value !== note) {
|
||||
setNote(e.target.value);
|
||||
debouncedNote(e.target.value);
|
||||
}
|
||||
}
|
||||
const [cachedNote, setCachedNote] = useState(props.data.note);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -46,9 +30,12 @@ export default function Note(props: Props) {
|
|||
<MetaTitle>Note</MetaTitle>
|
||||
<TextArea
|
||||
className="mb-1 mt-2 !py-2 text-xs leading-snug"
|
||||
value={note || ''}
|
||||
onChange={handleNoteUpdate}
|
||||
/>{' '}
|
||||
value={cachedNote ?? ''}
|
||||
onChange={(e) => {
|
||||
setCachedNote(e.target.value);
|
||||
debouncedSetNote(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</MetaContainer>
|
||||
</>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue