Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-18 20:09:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(interface/settings): remove library dep when updating general settings (#432)

Browse source 
* fix(interface/settings): remove library dep when updating general settings

* LibraryGeneralSettings use react-hook-form

useEffects are cringe

* Fix Typescript errors

Co-authored-by: Oscar Beaumont <oscar@otbeaumont.me>
This commit is contained in:
itschip 2022-10-24 01:16:49 +02:00 committed by GitHub
parent 0c7aed5f86
commit ad28ed4190
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
packages/interface/src/screens/settings/library/LibraryGeneralSettings.tsx
View file

@ -2,7 +2,8 @@ import { useBridgeMutation } from '@sd/client';
import { useCurrentLibrary } from '@sd/client';
import { Button, Input } from '@sd/ui';
import { useEffect, useState } from 'react';
import { useDebounce } from 'use-debounce';
import { useForm } from 'react-hook-form';
import { useDebouncedCallback } from 'use-debounce';
import { Toggle } from '../../../components/primitive';
import { InputContainer } from '../../../components/primitive/InputContainer';
@ -10,51 +11,26 @@ import { SettingsContainer } from '../../../components/settings/SettingsContaine
import { SettingsHeader } from '../../../components/settings/SettingsHeader';
export default function LibraryGeneralSettings() {
const { library, libraries } = useCurrentLibrary();
const { library } = useCurrentLibrary();
const { mutate: editLibrary } = useBridgeMutation('library.edit');
const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [encryptLibrary, setEncryptLibrary] = useState(false);
// prevent auto update when switching library
const [blockAutoUpdate, setBlockAutoUpdate] = useState(false);
const [nameDebounced] = useDebounce(name, 500);
const [descriptionDebounced] = useDebounce(description, 500);
useEffect(() => {
if (library) {
const { name, description } = library.config;
// currentLibrary must be loaded, name must not be empty, and must be different from the current
if (nameDebounced && (nameDebounced !== name || descriptionDebounced !== description)) {
editLibrary({
id: library.uuid!,
name: nameDebounced,
description: descriptionDebounced
});
}
const debounced = useDebouncedCallback((value) => {
editLibrary({
id: library!.uuid,
name: value.name,
description: value.description
});
}, 500);
const { register, watch, getValues } = useForm({
defaultValues: {
name: library?.config.name,
description: library?.config.description
}
}, [nameDebounced, descriptionDebounced, library, editLibrary]);
});
useEffect(() => {
if (library) {
setName(library.config.name);
setDescription(library.config.description);
}
}, [libraries, library]);
watch(debounced); // Listen for form changes
useEffect(() => {
if (library) {
setBlockAutoUpdate(true);
setName(library.config.name);
setDescription(library.config.description);
}
}, [library]);
useEffect(() => {
if (blockAutoUpdate) setBlockAutoUpdate(false);
}, [blockAutoUpdate]);
// This forces the debounce to run when the component is unmounted
useEffect(() => () => debounced.flush(), [debounced]);
return (
<SettingsContainer>
@ -65,21 +41,13 @@ export default function LibraryGeneralSettings() {
<div className="flex flex-row pb-3 space-x-5">
<div className="flex flex-col flex-grow">
<span className="mb-1 text-sm font-medium text-gray-700 dark:text-gray-100">Name</span>
<Input
value={name}
onChange={(e) => setName(e.target.value)}
defaultValue="My Default Library"
/>
<Input {...register('name', { required: true })} defaultValue="My Default Library" />
</div>
<div className="flex flex-col flex-grow">
<span className="mb-1 text-sm font-medium text-gray-700 dark:text-gray-100">
Description
</span>
<Input
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder=""
/>
<Input {...register('description')} placeholder="" />
</div>
</div>
@ -89,7 +57,7 @@ export default function LibraryGeneralSettings() {
description="Enable encryption for this library, this will only encrypt the Spacedrive database, not the files themselves."
>
<div className="flex items-center ml-3">
<Toggle value={encryptLibrary} onChange={setEncryptLibrary} />
<Toggle value={false} />
</div>
</InputContainer>
<InputContainer mini title="Export Library" description="Export this library to a file.">