refactor(web): user-settings (immich-app#3700)

* refactor(web): user-settings

* feat: move the logic to the server

* use const

* fix: error 403

* fix: remove console.log

web/src/lib/components/user-settings-page/device-list.svelte

@@ -1,22 +1,17 @@
 <script lang="ts">
   import { api, AuthDeviceResponseDto } from '@api';
-  import { onMount } from 'svelte';
   import { handleError } from '../../utils/handle-error';
   import Button from '../elements/buttons/button.svelte';
   import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
   import { notificationController, NotificationType } from '../shared-components/notification/notification';
   import DeviceCard from './device-card.svelte';
 
-  let devices: AuthDeviceResponseDto[] = [];
+  export let devices: AuthDeviceResponseDto[];
   let deleteDevice: AuthDeviceResponseDto | null = null;
   let deleteAll = false;
 
   const refresh = () => api.authenticationApi.getAuthDevices().then(({ data }) => (devices = data));
 
-  onMount(() => {
-    refresh();
-  });
-
   $: currentDevice = devices.find((device) => device.current);
   $: otherDevices = devices.filter((device) => !device.current);
 

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -5,13 +5,12 @@
   import Button from '../elements/buttons/button.svelte';
   import PartnerSelectionModal from './partner-selection-modal.svelte';
   import { handleError } from '../../utils/handle-error';
-  import { onMount } from 'svelte';
   import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
 
   export let user: UserResponseDto;
 
-  let partners: UserResponseDto[] = [];
+  export let partners: UserResponseDto[];
   let createPartner = false;
   let removePartner: UserResponseDto | null = null;
 
@@ -46,10 +45,6 @@
       handleError(error, 'Unable to add partners');
     }
   };
-
-  onMount(async () => {
-    await refreshPartners();
-  });
 </script>
 
 <section class="my-4">

web/src/lib/components/user-settings-page/user-api-key-list.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { api, APIKeyResponseDto } from '@api';
-  import { onMount } from 'svelte';
   import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
   import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
   import { fade } from 'svelte/transition';
@@ -12,7 +11,7 @@
   import { locale } from '$lib/stores/preferences.store';
   import Button from '../elements/buttons/button.svelte';
 
-  let keys: APIKeyResponseDto[] = [];
+  export let keys: APIKeyResponseDto[];
 
   let newKey: Partial<APIKeyResponseDto> | null = null;
   let editKey: APIKeyResponseDto | null = null;
@@ -25,10 +24,6 @@
     year: 'numeric',
   };
 
-  onMount(() => {
-    refreshKeys();
-  });
-
   async function refreshKeys() {
     const { data } = await api.keyApi.getKeys();
     keys = data;

web/src/lib/components/user-settings-page/user-settings-list.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import { oauth, UserResponseDto } from '@api';
-  import { onMount } from 'svelte';
+  import { APIKeyResponseDto, AuthDeviceResponseDto, oauth, UserResponseDto } from '@api';
   import SettingAccordion from '../admin-page/settings/setting-accordion.svelte';
   import ChangePasswordSettings from './change-password-settings.svelte';
   import DeviceList from './device-list.svelte';
@@ -10,15 +9,19 @@
   import PartnerSettings from './partner-settings.svelte';
   import UserAPIKeyList from './user-api-key-list.svelte';
   import UserProfileSettings from './user-profile-settings.svelte';
+  import { onMount } from 'svelte';
 
   export let user: UserResponseDto;
 
+  export let keys: APIKeyResponseDto[] = [];
+  export let devices: AuthDeviceResponseDto[] = [];
+  export let partners: UserResponseDto[] = [];
+
   let oauthEnabled = false;
   let oauthOpen = false;
 
   onMount(async () => {
     oauthOpen = oauth.isCallback(window.location);
-
     try {
       const { data } = await oauth.getConfig(window.location);
       oauthEnabled = data.enabled;
@@ -33,11 +36,11 @@
 </SettingAccordion>
 
 <SettingAccordion title="API Keys" subtitle="Manage your API keys">
-  <UserAPIKeyList />
+  <UserAPIKeyList bind:keys />
 </SettingAccordion>
 
 <SettingAccordion title="Authorized Devices" subtitle="Manage your logged-in devices">
-  <DeviceList />
+  <DeviceList bind:devices />
 </SettingAccordion>
 
 <SettingAccordion title="Memories" subtitle="Manage what you see in your memories.">
@@ -59,5 +62,5 @@
 </SettingAccordion>
 
 <SettingAccordion title="Sharing" subtitle="Manage sharing with partners">
-  <PartnerSettings {user} />
+  <PartnerSettings {user} bind:partners />
 </SettingAccordion>

web/src/routes/(user)/user-settings/+page.server.ts

@@ -2,13 +2,21 @@ import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
-export const load = (async ({ locals: { user } }) => {
+export const load = (async ({ parent, locals }) => {
+  const { user } = await parent();
   if (!user) {
     throw redirect(302, AppRoute.AUTH_LOGIN);
   }
 
+  const { data: keys } = await locals.api.keyApi.getKeys();
+  const { data: devices } = await locals.api.authenticationApi.getAuthDevices();
+  const { data: partners } = await locals.api.partnerApi.getPartners({ direction: 'shared-by' });
+
   return {
     user,
+    keys,
+    devices,
+    partners,
     meta: {
       title: 'Settings',
     },

web/src/routes/(user)/user-settings/+page.svelte

@@ -9,7 +9,7 @@
 <UserPageLayout user={data.user} title={data.meta.title}>
   <section class="mx-4 flex place-content-center">
     <div class="w-full max-w-3xl">
-      <UserSettingsList user={data.user} />
+      <UserSettingsList user={data.user} keys={data.keys} devices={data.devices} partners={data.partners} />
     </div>
   </section>
 </UserPageLayout>