nwpie/reiverr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Fix UI state issues with integration settings

Browse Source
This commit is contained in:
Aleksi Lassila
2024-06-14 00:14:46 +03:00
parent f5220e21e0
commit 6cd7d5ffbf
4 changed files with 59 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/lib/components/Integrations/JellyfinIntegration.svelte
View File

@@ -4,31 +4,26 @@
import { createEventDispatcher } from 'svelte';
import SelectField from '../SelectField.svelte';
import { jellyfinApi, type JellyfinUser } from '../../apis/jellyfin/jellyfin-api';
import { get } from 'svelte/store';
import { derived, get } from 'svelte/store';
const dispatch = createEventDispatcher<{
change: { baseUrl: string; apiKey: string; stale: boolean };
'click-user': { user: JellyfinUser | undefined; users: JellyfinUser[] };
}>();
export let baseUrl = '';
export let apiKey = '';
let originalBaseUrl: string | undefined;
let originalApiKey: string | undefined;
export let baseUrl = get(user)?.settings.jellyfin.baseUrl || '';
export let apiKey = get(user)?.settings.jellyfin.apiKey || '';
let originalBaseUrl = derived(user, (user) => user?.settings.jellyfin.baseUrl || '');
let originalApiKey = derived(user, (user) => user?.settings.jellyfin.apiKey || '');
let timeout: ReturnType<typeof setTimeout>;
let error = '';
let jellyfinUsers: Promise<JellyfinUser[]> | undefined = undefined;
export let jellyfinUser: JellyfinUser | undefined;
user.subscribe((user) => {
baseUrl = baseUrl || user?.settings.jellyfin.baseUrl || '';
apiKey = apiKey || user?.settings.jellyfin.apiKey || '';
originalBaseUrl = baseUrl;
originalApiKey = apiKey;
handleChange();
});
$: {
if ($originalBaseUrl !== baseUrl && $originalApiKey !== apiKey) handleChange();
else dispatch('change', { baseUrl, apiKey, stale: false });
}
$: if (jellyfinUser)
dispatch('change', {
@@ -38,6 +33,8 @@
baseUrl && apiKey ? jellyfinUser?.Id !== get(user)?.settings.jellyfin.userId : !jellyfinUser
});
handleChange();
function handleChange() {
clearTimeout(timeout);
error = '';
@@ -50,7 +47,11 @@
dispatch('change', {
baseUrl: '',
apiKey: '',
stale: baseUrl === '' && apiKey === '' && jellyfinUser === undefined
stale:
baseUrl === '' &&
apiKey === '' &&
jellyfinUser === undefined &&
(baseUrl !== $originalBaseUrl || apiKey !== $originalApiKey)
});
if (baseUrlCopy === '' || apiKeyCopy === '') return;
@@ -62,9 +63,9 @@
if (baseUrlCopy !== baseUrl || apiKeyCopy !== apiKey) return;
if (users.length) {
jellyfinUser = users.find((u) => u.Id === get(appState).user?.settings.jellyfin.userId);
jellyfinUser = users.find((u) => u.Id === get(user)?.settings.jellyfin.userId);
const stale =
(baseUrlCopy !== originalBaseUrl || apiKeyCopy !== originalApiKey) &&
(baseUrlCopy !== $originalBaseUrl || apiKeyCopy !== $originalApiKey) &&
jellyfinUser !== undefined;
dispatch('change', { baseUrl: baseUrlCopy, apiKey: apiKeyCopy, stale });
} else {
@@ -91,13 +92,17 @@
<TextField
bind:value={baseUrl}
isValid={jellyfinUsers?.then((u) => !!u?.length)}
on:change={handleChange}>Base Url</TextField
on:change={handleChange}
>
Base Url
</TextField>
<TextField
bind:value={apiKey}
isValid={jellyfinUsers?.then((u) => !!u?.length)}
on:change={handleChange}>API Key</TextField
on:change={handleChange}
>
API Key
</TextField>
</div>
{#await jellyfinUsers then users}

31
src/lib/components/Integrations/RadarrIntegration.svelte
View File

@@ -3,28 +3,26 @@
import { createEventDispatcher } from 'svelte';
import { radarrApi } from '../../apis/radarr/radarr-api';
import { user } from '../../stores/user.store';
import { derived, get } from 'svelte/store';
const dispatch = createEventDispatcher<{
change: { baseUrl: string; apiKey: string; stale: boolean };
}>();
export let baseUrl = '';
export let apiKey = '';
let originalBaseUrl: string | undefined;
let originalApiKey: string | undefined;
export let baseUrl = get(user)?.settings.radarr.baseUrl || '';
export let apiKey = get(user)?.settings.radarr.apiKey || '';
const originalBaseUrl = derived(user, (user) => user?.settings.radarr.baseUrl || '');
const originalApiKey = derived(user, (user) => user?.settings.radarr.apiKey || '');
let timeout: ReturnType<typeof setTimeout>;
let error = '';
let healthCheck: Promise<boolean> | undefined;
user.subscribe((user) => {
baseUrl = baseUrl || user?.settings.radarr.baseUrl || '';
apiKey = apiKey || user?.settings.radarr.apiKey || '';
$: {
if ($originalBaseUrl !== baseUrl && $originalApiKey !== apiKey) handleChange();
else dispatch('change', { baseUrl, apiKey, stale: false });
}
originalBaseUrl = baseUrl;
originalApiKey = apiKey;
handleChange();
});
handleChange();
function handleChange() {
clearTimeout(timeout);
@@ -33,12 +31,12 @@
const baseUrlCopy = baseUrl;
const apiKeyCopy = apiKey;
const stale = baseUrlCopy !== originalBaseUrl || apiKeyCopy !== originalApiKey;
const stale = baseUrlCopy !== $originalBaseUrl || apiKeyCopy !== $originalApiKey;
dispatch('change', {
baseUrl: '',
apiKey: '',
stale: baseUrl === '' && apiKey === ''
stale: baseUrl === '' && apiKey === '' && stale
});
if (baseUrlCopy === '' || apiKeyCopy === '') return;
@@ -66,8 +64,9 @@
</script>
<div class="space-y-4 mb-4">
<TextField bind:value={baseUrl} isValid={healthCheck} on:change={handleChange}>Base Url</TextField
>
<TextField bind:value={baseUrl} isValid={healthCheck} on:change={handleChange}>
Base Url
</TextField>
<TextField bind:value={apiKey} isValid={healthCheck} on:change={handleChange}>API Key</TextField>
</div>

33
src/lib/components/Integrations/SonarrIntegration.svelte
View File

@@ -3,42 +3,42 @@
import { sonarrApi } from '../../apis/sonarr/sonarr-api';
import { createEventDispatcher } from 'svelte';
import { user } from '../../stores/user.store';
import { derived, get } from 'svelte/store';
const dispatch = createEventDispatcher<{
change: { baseUrl: string; apiKey: string; stale: boolean };
}>();
export let baseUrl = '';
export let apiKey = '';
let originalBaseUrl: string | undefined;
let originalApiKey: string | undefined;
export let baseUrl = get(user)?.settings.sonarr.baseUrl || '';
export let apiKey = get(user)?.settings.sonarr.apiKey || '';
const originalBaseUrl = derived(user, (u) => u?.settings.sonarr.baseUrl || '');
const originalApiKey = derived(user, (u) => u?.settings.sonarr.apiKey || '');
let timeout: ReturnType<typeof setTimeout>;
let error = '';
let healthCheck: Promise<boolean> | undefined;
user.subscribe((user) => {
baseUrl = baseUrl || user?.settings.sonarr.baseUrl || '';
apiKey = apiKey || user?.settings.sonarr.apiKey || '';
$: {
if ($originalBaseUrl !== baseUrl && $originalApiKey !== apiKey) handleChange();
else dispatch('change', { baseUrl, apiKey, stale: false });
}
originalBaseUrl = baseUrl;
originalApiKey = apiKey;
handleChange();
});
handleChange();
function handleChange() {
console.log('handleChange', $originalBaseUrl, baseUrl, $originalApiKey, apiKey);
clearTimeout(timeout);
error = '';
healthCheck = undefined;
const baseUrlCopy = baseUrl;
const apiKeyCopy = apiKey;
const stale = baseUrlCopy !== originalBaseUrl || apiKeyCopy !== originalApiKey;
const stale = baseUrlCopy !== $originalBaseUrl || apiKeyCopy !== $originalApiKey;
dispatch('change', {
baseUrl: '',
apiKey: '',
stale: baseUrl === '' && apiKey === ''
stale: baseUrl === '' && apiKey === '' && stale
});
if (baseUrlCopy === '' || apiKeyCopy === '') return;
@@ -66,8 +66,9 @@
</script>
<div class="space-y-4 mb-4">
<TextField bind:value={baseUrl} isValid={healthCheck} on:change={handleChange}>Base Url</TextField
>
<TextField bind:value={baseUrl} isValid={healthCheck} on:change={handleChange}>
Base Url
</TextField>
<TextField bind:value={apiKey} isValid={healthCheck} on:change={handleChange}>API Key</TextField>
</div>

3
src/lib/pages/ManagePage.svelte
View File

@@ -310,6 +310,9 @@
</Tab>
<Tab {...tab} tab={Tabs.About}>
<div>
Version: {REIVERR_VERSION}
</div>
User agent: {window?.navigator?.userAgent}
<div>Last key code: {lastKeyCode}</div>
<div>Last key: {lastKey}</div>