From b25914c2a50487ba4d774c655a57ba7ba8e5939a Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Mon, 31 Mar 2025 07:15:52 -0700 Subject: [PATCH] chore: use writable derived in more places (#17248) chore(web): use writable derived in more places --- .../lib/components/album-page/album-title.svelte | 6 +----- web/src/lib/components/elements/date-input.svelte | 5 +---- .../shared-components/autogrow-textarea.svelte | 5 +---- .../components/shared-components/combobox.svelte | 6 +----- .../components/shared-components/star-rating.svelte | 6 +----- .../components/shared-components/tree/tree.svelte | 13 +++++-------- web/src/routes/auth/register/+page.svelte | 10 ++++------ 7 files changed, 14 insertions(+), 37 deletions(-) diff --git a/web/src/lib/components/album-page/album-title.svelte b/web/src/lib/components/album-page/album-title.svelte index 74786c1ea4..0c712e426c 100644 --- a/web/src/lib/components/album-page/album-title.svelte +++ b/web/src/lib/components/album-page/album-title.svelte @@ -13,11 +13,7 @@ let { id, albumName = $bindable(), isOwned, onUpdate }: Props = $props(); - let newAlbumName = $state(albumName); - - $effect(() => { - newAlbumName = albumName; - }); + let newAlbumName = $derived(albumName); const handleUpdateName = async () => { if (newAlbumName === albumName) { diff --git a/web/src/lib/components/elements/date-input.svelte b/web/src/lib/components/elements/date-input.svelte index 687e9442e7..30f404079c 100644 --- a/web/src/lib/components/elements/date-input.svelte +++ b/web/src/lib/components/elements/date-input.svelte @@ -16,10 +16,7 @@ // Updating `value` directly causes the date input to reset itself or // interfere with user changes. - let updatedValue = $state(); - $effect(() => { - updatedValue = value; - }); + let updatedValue = $derived(value); null, placeholder = '' }: Props = $props(); - let newContent = $state(content); - $effect(() => { - newContent = content; - }); + let newContent = $derived(content); const updateContent = () => { if (content === newContent) { diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte index c2284ebb0c..3b70b0e859 100644 --- a/web/src/lib/components/shared-components/combobox.svelte +++ b/web/src/lib/components/shared-components/combobox.svelte @@ -71,7 +71,7 @@ * Keeps track of whether the combobox is actively being used. */ let isActive = $state(false); - let searchQuery = $state(selectedOption?.label || ''); + let searchQuery = $derived(selectedOption?.label || ''); let selectedIndex: number | undefined = $state(); let optionRefs: HTMLElement[] = $state([]); let input = $state(); @@ -228,10 +228,6 @@ const getInputPosition = () => input?.getBoundingClientRect(); - $effect(() => { - searchQuery = selectedOption ? selectedOption.label : ''; - }); - let filteredOptions = $derived.by(() => { const _options = options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())); diff --git a/web/src/lib/components/shared-components/star-rating.svelte b/web/src/lib/components/shared-components/star-rating.svelte index bf9e5fbcaf..8dfd3af1f3 100644 --- a/web/src/lib/components/shared-components/star-rating.svelte +++ b/web/src/lib/components/shared-components/star-rating.svelte @@ -14,15 +14,11 @@ let { count = 5, rating, readOnly = false, onRating }: Props = $props(); - let ratingSelection = $state(rating); + let ratingSelection = $derived(rating); let hoverRating = $state(0); let focusRating = $state(0); let timeoutId: ReturnType | undefined; - $effect(() => { - ratingSelection = rating; - }); - const starIcon = 'M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z'; const id = generateId(); diff --git a/web/src/lib/components/shared-components/tree/tree.svelte b/web/src/lib/components/shared-components/tree/tree.svelte index ccc4181abe..33f9d14a13 100644 --- a/web/src/lib/components/shared-components/tree/tree.svelte +++ b/web/src/lib/components/shared-components/tree/tree.svelte @@ -16,14 +16,11 @@ let { tree, parent, value, active = '', icons, getLink, getColor }: Props = $props(); - let path = $derived(normalizeTreePath(`${parent}/${value}`)); - let isActive = $derived(active === path || active.startsWith(`${path}/`)); - let isOpen = $state(false); - $effect(() => { - isOpen = isActive; - }); - let isTarget = $derived(active === path); - let color = $derived(getColor(path)); + const path = $derived(normalizeTreePath(`${parent}/${value}`)); + const isActive = $derived(active === path || active.startsWith(`${path}/`)); + const isTarget = $derived(active === path); + const color = $derived(getColor(path)); + let isOpen = $derived(isActive); const onclick = (event: MouseEvent) => { event.preventDefault(); diff --git a/web/src/routes/auth/register/+page.svelte b/web/src/routes/auth/register/+page.svelte index f3bc494d95..4ec1b9718e 100644 --- a/web/src/routes/auth/register/+page.svelte +++ b/web/src/routes/auth/register/+page.svelte @@ -13,8 +13,10 @@ let password = $state(''); let confirmPassword = $state(''); let name = $state(''); - let errorMessage = $state(''); - let valid = $derived(password === confirmPassword && confirmPassword.length > 0); + let errorMessage = $derived( + password === confirmPassword || confirmPassword.length === 0 ? '' : $t('password_does_not_match'), + ); + const valid = $derived(password === confirmPassword && confirmPassword.length > 0); interface Props { data: PageData; @@ -22,10 +24,6 @@ let { data }: Props = $props(); - $effect(() => { - errorMessage = password === confirmPassword || confirmPassword.length === 0 ? '' : $t('password_does_not_match'); - }); - const onSubmit = async (event: Event) => { event.preventDefault();