refactor(web): use new open api client (#7097)

* refactor(web): use new open api client

* refactor: remove activity api

* refactor: trash, oauth, and partner apis

* refactor: job api

* refactor: face, library, system config

* refactor: user api

* refactor: album api

web/src/lib/components/admin-page/delete-confirm-dialoge.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { api, type UserResponseDto } from '@api';
-  import { createEventDispatcher } from 'svelte';
   import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-  import { handleError } from '../../utils/handle-error';
+  import { handleError } from '$lib/utils/handle-error';
+  import { deleteUser, type UserResponseDto } from '@immich/sdk';
+  import { createEventDispatcher } from 'svelte';
 
   export let user: UserResponseDto;
 
@@ -11,10 +11,10 @@
     fail: void;
   }>();
 
-  const deleteUser = async () => {
+  const handleDeleteUser = async () => {
     try {
-      const deletedUser = await api.userApi.deleteUser({ id: user.id });
-      if (deletedUser.data.deletedAt == undefined) {
+      const { deletedAt } = await deleteUser({ id: user.id });
+      if (deletedAt == undefined) {
         dispatch('fail');
       } else {
         dispatch('success');
@@ -26,7 +26,7 @@
   };
 </script>
 
-<ConfirmDialogue title="Delete User" confirmText="Delete" on:confirm={deleteUser} on:cancel>
+<ConfirmDialogue title="Delete User" confirmText="Delete" on:confirm={handleDeleteUser} on:cancel>
   <svelte:fragment slot="prompt">
     <div class="flex flex-col gap-4">
       <p>

web/src/lib/components/admin-page/jobs/jobs-panel.svelte

@@ -21,6 +21,7 @@
   import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
   import JobTile from './job-tile.svelte';
   import StorageMigrationDescription from './storage-migration-description.svelte';
+  import { sendJobCommand } from '@immich/sdk';
 
   export let jobs: AllJobStatusResponseDto;
 
@@ -127,8 +128,7 @@
     const title = jobDetails[jobId]?.title;
 
     try {
-      const { data } = await api.jobApi.sendJobCommand({ id: jobId, jobCommandDto: jobCommand });
-      jobs[jobId] = data;
+      jobs[jobId] = await sendJobCommand({ id: jobId, jobCommandDto: jobCommand });
 
       switch (jobCommand.command) {
         case JobCommand.Empty: {

web/src/lib/components/admin-page/restore-dialoge.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { api, type UserResponseDto } from '@api';
-  import { createEventDispatcher } from 'svelte';
   import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import { restoreUser, type UserResponseDto } from '@immich/sdk';
+  import { createEventDispatcher } from 'svelte';
 
   export let user: UserResponseDto;
 
@@ -10,9 +10,9 @@
     fail: void;
   }>();
 
-  const restoreUser = async () => {
-    const restoredUser = await api.userApi.restoreUser({ id: user.id });
-    if (restoredUser.data.deletedAt == undefined) {
+  const handleRestoreUser = async () => {
+    const { deletedAt } = await restoreUser({ id: user.id });
+    if (deletedAt == undefined) {
       dispatch('success');
     } else {
       dispatch('fail');
@@ -20,7 +20,13 @@
   };
 </script>
 
-<ConfirmDialogue title="Restore User" confirmText="Continue" confirmColor="green" on:confirm={restoreUser} on:cancel>
+<ConfirmDialogue
+  title="Restore User"
+  confirmText="Continue"
+  confirmColor="green"
+  on:confirm={handleRestoreUser}
+  on:cancel
+>
   <svelte:fragment slot="prompt">
     <p><b>{user.name}</b>'s account will be restored.</p>
   </svelte:fragment>

web/src/lib/components/admin-page/settings/admin-settings.svelte

@@ -1,15 +1,15 @@
 <svelte:options accessors />
 
 <script lang="ts">
-  import { type SystemConfigDto, api } from '@api';
   import {
-    notificationController,
     NotificationType,
+    notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { handleError } from '$lib/utils/handle-error';
-  import type { SettingsEventType } from './admin-settings';
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { getConfig, getConfigDefaults, updateConfig, type SystemConfigDto } from '@immich/sdk';
   import { cloneDeep } from 'lodash-es';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import type { SettingsEventType } from './admin-settings';
 
   export let config: SystemConfigDto;
 
@@ -24,7 +24,7 @@
 
   const handleSave = async (update: Partial<SystemConfigDto>) => {
     try {
-      const { data: newConfig } = await api.systemConfigApi.updateConfig({
+      const newConfig = await updateConfig({
         systemConfigDto: {
           ...savedConfig,
           ...update,
@@ -42,7 +42,7 @@
   };
 
   const reset = async (configKeys: Array<keyof SystemConfigDto>) => {
-    const { data: resetConfig } = await api.systemConfigApi.getConfig();
+    const resetConfig = await getConfig();
 
     for (const key of configKeys) {
       config = { ...config, [key]: resetConfig[key] };
@@ -66,10 +66,7 @@
   };
 
   onMount(async () => {
-    [savedConfig, defaultConfig] = await Promise.all([
-      api.systemConfigApi.getConfig().then((res) => res.data),
-      api.systemConfigApi.getConfigDefaults().then((res) => res.data),
-    ]);
+    [savedConfig, defaultConfig] = await Promise.all([getConfig(), getConfigDefaults()]);
   });
 </script>
 

web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import { AppRoute } from '$lib/constants';
   import { user } from '$lib/stores/user.store';
-  import { api, type SystemConfigDto, type SystemConfigTemplateStorageOptionDto } from '@api';
+  import {
+    getStorageTemplateOptions,
+    type SystemConfigDto,
+    type SystemConfigTemplateStorageOptionDto,
+  } from '@immich/sdk';
   import handlebar from 'handlebars';
   import { isEqual } from 'lodash-es';
   import * as luxon from 'luxon';
@@ -13,7 +18,6 @@
   import SettingSwitch from '../setting-switch.svelte';
   import SupportedDatetimePanel from './supported-datetime-panel.svelte';
   import SupportedVariablesPanel from './supported-variables-panel.svelte';
-  import { AppRoute } from '$lib/constants';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;
@@ -26,14 +30,11 @@
   let selectedPreset = '';
 
   const getTemplateOptions = async () => {
-    templateOptions = await api.systemConfigApi.getStorageTemplateOptions().then((res) => res.data);
+    templateOptions = await getStorageTemplateOptions();
     selectedPreset = savedConfig.storageTemplate.template;
   };
 
-  const getSupportDateTimeFormat = async () => {
-    const { data } = await api.systemConfigApi.getStorageTemplateOptions();
-    return data;
-  };
+  const getSupportDateTimeFormat = () => getStorageTemplateOptions();
 
   $: parsedTemplate = () => {
     try {