refactor(web): drop axios (#7490)

* refactor: downloadApi

* refactor: assetApi

* chore: drop axios

* chore: tidy up

* chore: fix exports

* fix: show notification when download starts

web/src/lib/components/album-page/__tests__/album-card.spec.ts

@@ -1,14 +1,18 @@
 import { createObjectURLMock } from '$lib/__mocks__/jsdom-url.mock';
-import { api } from '$lib/api';
-import { ThumbnailFormat } from '@immich/sdk';
+import sdk, { ThumbnailFormat } from '@immich/sdk';
 import { albumFactory } from '@test-data';
 import '@testing-library/jest-dom';
 import { fireEvent, render, waitFor, type RenderResult } from '@testing-library/svelte';
 import type { MockedObject } from 'vitest';
 import AlbumCard from '../album-card.svelte';
 
-vi.mock('$lib/api');
-const apiMock: MockedObject<typeof api> = api as MockedObject<typeof api>;
+vi.mock('@immich/sdk', async (originalImport) => {
+  const module = await originalImport<typeof import('@immich/sdk')>();
+  const mock = { ...module, getAssetThumbnail: vi.fn() };
+  return { ...mock, default: mock };
+});
+
+const sdkMock: MockedObject<typeof sdk> = sdk as MockedObject<typeof sdk>;
 
 describe('AlbumCard component', () => {
   let sut: RenderResult<AlbumCard>;
@@ -48,7 +52,7 @@ describe('AlbumCard component', () => {
     await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
 
     expect(albumImgElement).toHaveAttribute('alt', album.id);
-    expect(apiMock.assetApi.getAssetThumbnail).not.toHaveBeenCalled();
+    expect(sdkMock.getAssetThumbnail).not.toHaveBeenCalled();
 
     expect(albumNameElement).toHaveTextContent(album.albumName);
     expect(albumDetailsElement).toHaveTextContent(new RegExp(detailsText));
@@ -57,17 +61,7 @@ describe('AlbumCard component', () => {
   it('shows album data and loads the thumbnail image when available', async () => {
     const thumbnailFile = new File([new Blob()], 'fileThumbnail');
     const thumbnailUrl = 'blob:thumbnailUrlOne';
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //  @ts-ignore
-    // TODO: there needs to be a more robust mock of the @api to avoid mockResolvedValueOnce ts error
-    //       this is a workaround to make ts checks not fail but the test will pass as expected
-    apiMock.assetApi.getAssetThumbnail.mockResolvedValue({
-      data: thumbnailFile,
-      config: {},
-      headers: {},
-      status: 200,
-      statusText: '',
-    });
+    sdkMock.getAssetThumbnail.mockResolvedValue(thumbnailFile);
     createObjectURLMock.mockReturnValueOnce(thumbnailUrl);
 
     const album = albumFactory.build({
@@ -85,14 +79,11 @@ describe('AlbumCard component', () => {
     await waitFor(() => expect(albumImgElement).toHaveAttribute('src', thumbnailUrl));
 
     expect(albumImgElement).toHaveAttribute('alt', album.id);
-    expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledTimes(1);
-    expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledWith(
-      {
-        id: 'thumbnailIdOne',
-        format: ThumbnailFormat.Jpeg,
-      },
-      { responseType: 'blob' },
-    );
+    expect(sdkMock.getAssetThumbnail).toHaveBeenCalledTimes(1);
+    expect(sdkMock.getAssetThumbnail).toHaveBeenCalledWith({
+      id: 'thumbnailIdOne',
+      format: ThumbnailFormat.Jpeg,
+    });
     expect(createObjectURLMock).toHaveBeenCalledWith(thumbnailFile);
 
     expect(albumNameElement).toHaveTextContent('some album name');

web/src/lib/components/album-page/album-card.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import { api } from '$lib/api';
   import Icon from '$lib/components/elements/icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { user } from '$lib/stores/user.store';
   import { getAssetThumbnailUrl } from '$lib/utils';
-  import { ThumbnailFormat, getUserById, type AlbumResponseDto } from '@immich/sdk';
+  import { ThumbnailFormat, getAssetThumbnail, getUserById, type AlbumResponseDto } from '@immich/sdk';
   import { mdiDotsVertical } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
   import { getContextMenuPosition } from '../../utils/context-menu';
@@ -25,24 +24,13 @@
   const dispatchClick = createEventDispatcher<OnClick>();
   const dispatchShowContextMenu = createEventDispatcher<OnShowContextMenu>();
 
-  const loadHighQualityThumbnail = async (thubmnailId: string | null) => {
-    if (thubmnailId == undefined) {
+  const loadHighQualityThumbnail = async (assetId: string | null) => {
+    if (!assetId) {
       return;
     }
 
-    const { data } = await api.assetApi.getAssetThumbnail(
-      {
-        id: thubmnailId,
-        format: ThumbnailFormat.Jpeg,
-      },
-      {
-        responseType: 'blob',
-      },
-    );
-
-    if (data instanceof Blob) {
-      return URL.createObjectURL(data);
-    }
+    const data = await getAssetThumbnail({ id: assetId, format: ThumbnailFormat.Jpeg });
+    return URL.createObjectURL(data);
   };
 
   const showAlbumContextMenu = (e: MouseEvent) =>

web/src/lib/components/asset-viewer/panorama-viewer.svelte

@@ -1,22 +1,13 @@
 <script lang="ts">
-  import { api } from '$lib/api';
-  import { getKey } from '$lib/utils';
-  import { type AssetResponseDto } from '@immich/sdk';
+  import { serveFile, type AssetResponseDto } from '@immich/sdk';
   import { fade } from 'svelte/transition';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 
   export let asset: AssetResponseDto;
 
   const loadAssetData = async () => {
-    const { data } = await api.assetApi.serveFile(
-      { id: asset.id, isThumb: false, isWeb: false, key: getKey() },
-      { responseType: 'blob' },
-    );
-    if (data instanceof Blob) {
-      return URL.createObjectURL(data);
-    } else {
-      throw new TypeError('Invalid data format');
-    }
+    const data = await serveFile({ id: asset.id, isWeb: false, isThumb: false });
+    return URL.createObjectURL(data);
   };
 </script>
 

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import { api } from '$lib/api';
   import { photoViewer } from '$lib/stores/assets.store';
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
-  import { getKey, handlePromiseError } from '$lib/utils';
+  import { downloadRequest, getAssetFileUrl, handlePromiseError } from '$lib/utils';
   import { isWebCompatibleImage } from '$lib/utils/asset-utils';
   import { getBoundingBox } from '$lib/utils/people-utils';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
@@ -51,17 +50,11 @@
       abortController?.abort();
       abortController = new AbortController();
 
-      const { data } = await api.assetApi.serveFile(
-        { id: asset.id, isThumb: false, isWeb: !loadOriginal, key: getKey() },
-        {
-          responseType: 'blob',
-          signal: abortController.signal,
-        },
-      );
-
-      if (!(data instanceof Blob)) {
-        return;
-      }
+      // TODO: Use sdk once it supports signals
+      const { data } = await downloadRequest({
+        url: getAssetFileUrl(asset.id, !loadOriginal, false),
+        signal: abortController.signal,
+      });
 
       assetData = URL.createObjectURL(data);
     } catch {

web/src/lib/components/forms/library-import-paths-form.svelte

@@ -6,7 +6,7 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import { mdiAlertOutline, mdiCheckCircleOutline, mdiPencilOutline, mdiRefresh } from '@mdi/js';
   import { validate, type LibraryResponseDto } from '@immich/sdk';
-  import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk/axios';
+  import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
 
   export let library: LibraryResponseDto;

web/src/lib/components/forms/login-form.svelte

@@ -35,7 +35,7 @@
         return;
       } catch (error) {
         console.error('Error [login-form] [oauth.callback]', error);
-        oauthError = (await getServerErrorMessage(error)) || 'Unable to complete OAuth login';
+        oauthError = getServerErrorMessage(error) || 'Unable to complete OAuth login';
         oauthLoading = false;
       }
     }
@@ -73,7 +73,7 @@
       await onSuccess();
       return;
     } catch (error) {
-      errorMessage = (await getServerErrorMessage(error)) || 'Incorrect email or password';
+      errorMessage = getServerErrorMessage(error) || 'Incorrect email or password';
       loading = false;
       return;
     }