refactor(web) open api client (#7103)

* refactor: person api

* refactor: shared link and others

web/src/lib/components/photos-page/actions/archive-action.svelte

@@ -4,12 +4,12 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import type { OnArchive } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
-  import { api } from '@api';
+  import { updateAssets } from '@immich/sdk';
+  import { mdiArchiveArrowDownOutline, mdiArchiveArrowUpOutline, mdiTimerSand } from '@mdi/js';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { mdiArchiveArrowUpOutline, mdiArchiveArrowDownOutline, mdiTimerSand } from '@mdi/js';
-  import type { OnArchive } from '$lib/utils/actions';
 
   export let onArchive: OnArchive | undefined = undefined;
 
@@ -32,7 +32,7 @@
       const ids = assets.map(({ id }) => id);
 
       if (ids.length > 0) {
-        await api.assetApi.updateAssets({ assetBulkUpdateDto: { ids, isArchived } });
+        await updateAssets({ assetBulkUpdateDto: { ids, isArchived } });
       }
 
       for (const asset of assets) {

web/src/lib/components/photos-page/actions/asset-job-actions.svelte

@@ -4,8 +4,10 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import { getAssetJobMessage, getAssetJobName } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { AssetJobName, AssetTypeEnum, api } from '@api';
+  import { AssetJobName, AssetTypeEnum } from '@api';
+  import { runAssetJobs } from '@immich/sdk';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   export let jobs: AssetJobName[] = [
@@ -21,8 +23,8 @@
   const handleRunJob = async (name: AssetJobName) => {
     try {
       const ids = [...getOwnedAssets()].map(({ id }) => id);
-      await api.assetApi.runAssetJobs({ assetJobsDto: { assetIds: ids, name } });
-      notificationController.show({ message: api.getAssetJobMessage(name), type: NotificationType.Info });
+      await runAssetJobs({ assetJobsDto: { assetIds: ids, name } });
+      notificationController.show({ message: getAssetJobMessage(name), type: NotificationType.Info });
       clearSelect();
     } catch (error) {
       handleError(error, 'Unable to submit job');
@@ -32,6 +34,6 @@
 
 {#each jobs as job}
   {#if isAllVideos || job !== AssetJobName.TranscodeVideo}
-    <MenuOption text={api.getAssetJobName(job)} on:click={() => handleRunJob(job)} />
+    <MenuOption text={getAssetJobName(job)} on:click={() => handleRunJob(job)} />
   {/if}
 {/each}

web/src/lib/components/photos-page/actions/change-date-action.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import ChangeDate from '$lib/components/shared-components/change-date.svelte';
+  import { user } from '$lib/stores/user.store';
+  import { getSelectedAssets } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { api } from '@api';
+  import { updateAssets } from '@immich/sdk';
   import { DateTime } from 'luxon';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { user } from '$lib/stores/user.store';
-  import { getSelectedAssets } from '$lib/utils/asset-utils';
   export let menuItem = false;
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
@@ -17,9 +17,7 @@
     const ids = getSelectedAssets(getOwnedAssets(), $user);
 
     try {
-      await api.assetApi.updateAssets({
-        assetBulkUpdateDto: { ids, dateTimeOriginal },
-      });
+      await updateAssets({ assetBulkUpdateDto: { ids, dateTimeOriginal } });
     } catch (error) {
       handleError(error, 'Unable to change date');
     }

web/src/lib/components/photos-page/actions/change-location-action.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { api } from '@api';
-  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import ChangeLocation from '$lib/components/shared-components/change-location.svelte';
-  import { handleError } from '../../../utils/handle-error';
   import { user } from '$lib/stores/user.store';
   import { getSelectedAssets } from '$lib/utils/asset-utils';
+  import { handleError } from '$lib/utils/handle-error';
+  import { updateAssets } from '@immich/sdk';
+  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   export let menuItem = false;
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
@@ -17,13 +17,7 @@
     const ids = getSelectedAssets(getOwnedAssets(), $user);
 
     try {
-      await api.assetApi.updateAssets({
-        assetBulkUpdateDto: {
-          ids,
-          latitude: point.lat,
-          longitude: point.lng,
-        },
-      });
+      await updateAssets({ assetBulkUpdateDto: { ids, latitude: point.lat, longitude: point.lng } });
     } catch (error) {
       handleError(error, 'Unable to update location');
     }

web/src/lib/components/photos-page/actions/favorite-action.svelte

@@ -5,11 +5,11 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import { handleError } from '$lib/utils/handle-error';
-  import { api } from '@api';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js';
   import type { OnFavorite } from '$lib/utils/actions';
+  import { handleError } from '$lib/utils/handle-error';
+  import { updateAssets } from '@immich/sdk';
+  import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   export let onFavorite: OnFavorite | undefined = undefined;
 
@@ -33,7 +33,7 @@
       const ids = assets.map(({ id }) => id);
 
       if (ids.length > 0) {
-        await api.assetApi.updateAssets({ assetBulkUpdateDto: { ids, isFavorite } });
+        await updateAssets({ assetBulkUpdateDto: { ids, isFavorite } });
       }
 
       for (const asset of assets) {

web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { type SharedLinkResponseDto, api } from '@api';
-  import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { NotificationType, notificationController } from '../../shared-components/notification/notification';
-  import { handleError } from '../../../utils/handle-error';
+  import { getKey } from '$lib/utils';
+  import { handleError } from '$lib/utils/handle-error';
+  import { type SharedLinkResponseDto } from '@api';
+  import { removeSharedLinkAssets } from '@immich/sdk';
   import { mdiDeleteOutline } from '@mdi/js';
+  import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
+  import { NotificationType, notificationController } from '../../shared-components/notification/notification';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   export let sharedLink: SharedLinkResponseDto;
 
@@ -15,12 +17,12 @@
 
   const handleRemove = async () => {
     try {
-      const { data: results } = await api.sharedLinkApi.removeSharedLinkAssets({
+      const results = await removeSharedLinkAssets({
         id: sharedLink.id,
         assetIdsDto: {
           assetIds: [...getAssets()].map((asset) => asset.id),
         },
-        key: api.getKey(),
+        key: getKey(),
       });
 
       for (const result of results) {

web/src/lib/components/photos-page/actions/stack-action.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import { api } from '@api';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import {
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import { handleError } from '$lib/utils/handle-error';
   import type { OnStack } from '$lib/utils/actions';
+  import { handleError } from '$lib/utils/handle-error';
+  import { updateAssets } from '@immich/sdk';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   export let onStack: OnStack | undefined;
 
@@ -26,7 +26,7 @@
       const ids = children.map(({ id }) => id);
 
       if (children.length > 0) {
-        await api.assetApi.updateAssets({ assetBulkUpdateDto: { ids, stackParentId: parent.id } });
+        await updateAssets({ assetBulkUpdateDto: { ids, stackParentId: parent.id } });
       }
 
       let childrenCount = parent.stackCount ?? 0;

web/src/lib/components/photos-page/memory-lane.svelte

@@ -1,22 +1,19 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { api } from '@api';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { memoryStore } from '$lib/stores/memory.store';
   import { goto } from '$app/navigation';
-  import { fade } from 'svelte/transition';
-  import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
+  import Icon from '$lib/components/elements/icon.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
+  import { memoryStore } from '$lib/stores/memory.store';
+  import { getAssetThumbnailUrl } from '$lib/utils';
+  import { getMemoryLane } from '@immich/sdk';
+  import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
+  import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
 
   $: shouldRender = $memoryStore?.length > 0;
 
   onMount(async () => {
     const localTime = new Date();
-    const { data } = await api.assetApi.getMemoryLane({
-      month: localTime.getMonth() + 1,
-      day: localTime.getDate(),
-    });
-    $memoryStore = data;
+    $memoryStore = await getMemoryLane({ month: localTime.getMonth() + 1, day: localTime.getDate() });
   });
 
   let memoryLaneElement: HTMLElement;
@@ -76,7 +73,7 @@
         >
           <img
             class="h-full w-full rounded-xl object-cover"
-            src={api.getAssetThumbnailUrl(memory.assets[0].id, 'JPEG')}
+            src={getAssetThumbnailUrl(memory.assets[0].id, 'JPEG')}
             alt={memory.title}
             draggable="false"
           />