refactor: search people

Author: martabal

Diff for: web/src/lib/components/album-page/albums-controls.svelte

@@ -100,7 +100,7 @@
 
 <!-- Search Albums -->
 <div class="hidden xl:block h-10 xl:w-60 2xl:w-80">
-  <SearchBar placeholder="Search albums" bind:name={searchQuery} isSearching={false} />
+  <SearchBar placeholder="Search albums" bind:name={searchQuery} showLoadingSpinner={false} />
 </div>
 
 <!-- Create Album -->

Diff for: web/src/lib/components/elements/search-bar.svelte

@@ -7,7 +7,7 @@
 
   export let name: string;
   export let roundedBottom = true;
-  export let isSearching: boolean;
+  export let showLoadingSpinner: boolean;
   export let placeholder: string;
 
   const dispatch = createEventDispatcher<{ search: SearchOptions; reset: void }>();
@@ -35,7 +35,7 @@
     bind:value={name}
     on:input={() => dispatch('search', { force: false })}
   />
-  {#if isSearching}
+  {#if showLoadingSpinner}
     <div class="flex place-items-center">
       <LoadingSpinner />
     </div>

Diff for: web/src/lib/components/faces-page/assign-face-side-panel.svelte

@@ -1,23 +1,17 @@
 <script lang="ts">
-  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
+  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { photoViewer } from '$lib/stores/assets.store';
   import { getAssetThumbnailUrl, getPeopleThumbnailUrl } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import { getPersonNameWithHiddenValue, searchNameLocal } from '$lib/utils/person';
-  import {
-    AssetTypeEnum,
-    ThumbnailFormat,
-    searchPerson,
-    type AssetFaceResponseDto,
-    type PersonResponseDto,
-  } from '@immich/sdk';
+  import { getPersonNameWithHiddenValue } from '$lib/utils/person';
+  import { AssetTypeEnum, ThumbnailFormat, type AssetFaceResponseDto, type PersonResponseDto } from '@immich/sdk';
   import { mdiArrowLeftThin, mdiClose, mdiMagnify, mdiPlus } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import { linear } from 'svelte/easing';
   import { fly } from 'svelte/transition';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import Icon from '../elements/icon.svelte';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import SearchPeople from '$lib/components/faces-page/search-people.svelte';
 
   export let peopleWithFaces: AssetFaceResponseDto[];
   export let allPeople: PersonResponseDto[];
@@ -31,8 +25,6 @@
 
   // search people
   let searchedPeople: PersonResponseDto[] = [];
-  let searchedPeopleCopy: PersonResponseDto[] = [];
-  let searchWord: string;
   let searchFaces = false;
   let searchName = '';
 
@@ -116,33 +108,6 @@
     isShowLoadingNewPerson = false;
     dispatch('createPerson', newFeaturePhoto);
   };
-
-  const searchPeople = async () => {
-    if ((searchedPeople.length < maximumLengthSearchPeople && searchName.startsWith(searchWord)) || searchName === '') {
-      return;
-    }
-    const timeout = setTimeout(() => (isShowLoadingSearch = true), timeBeforeShowLoadingSpinner);
-    try {
-      const data = await searchPerson({ name: searchName });
-      searchedPeople = data;
-      searchedPeopleCopy = data;
-      searchWord = searchName;
-    } catch (error) {
-      handleError(error, "Can't search people");
-    } finally {
-      clearTimeout(timeout);
-    }
-
-    isShowLoadingSearch = false;
-  };
-
-  $: {
-    searchedPeople = searchNameLocal(searchName, searchedPeopleCopy, 20);
-  }
-
-  const initInput = (element: HTMLInputElement) => {
-    element.focus();
-  };
 </script>
 
 <section
@@ -200,13 +165,11 @@
         </div>
       </button>
       <div class="w-full flex">
-        <input
-          class="w-full gap-2 bg-immich-bg dark:bg-immich-dark-bg"
-          type="text"
-          placeholder="Name or nickname"
-          bind:value={searchName}
-          on:input={searchPeople}
-          use:initInput
+        <SearchPeople
+          type="input"
+          bind:searchName
+          bind:isSearching={isShowLoadingSearch}
+          bind:searchedPeopleLocal={searchedPeople}
         />
         {#if isShowLoadingSearch}
           <div>

Diff for: web/src/lib/components/faces-page/people-list.svelte

@@ -1,66 +1,41 @@
 <script lang="ts">
-  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
-  import { handleError } from '$lib/utils/handle-error';
-  import { searchNameLocal } from '$lib/utils/person';
-  import { searchPerson, type PersonResponseDto } from '@immich/sdk';
+  import { type PersonResponseDto } from '@immich/sdk';
   import { createEventDispatcher } from 'svelte';
   import FaceThumbnail from './face-thumbnail.svelte';
-  import SearchBar from '../elements/search-bar.svelte';
+  import SearchPeople from '$lib/components/faces-page/search-people.svelte';
 
   export let screenHeight: number;
   export let people: PersonResponseDto[];
   export let peopleCopy: PersonResponseDto[];
   export let unselectedPeople: PersonResponseDto[];
 
   let name = '';
-  let searchWord: string;
+  let showPeople: PersonResponseDto[];
   let isSearchingPeople = false;
 
   let dispatch = createEventDispatcher<{
     select: PersonResponseDto;
   }>();
 
   $: {
-    people = peopleCopy.filter(
+    showPeople = people.filter(
       (person) => !unselectedPeople.some((unselectedPerson) => unselectedPerson.id === person.id),
     );
-    if (name) {
-      people = searchNameLocal(name, people, maximumLengthSearchPeople);
-    }
   }
 
-  const searchPeople = async (force: boolean) => {
-    if (name === '') {
-      people = peopleCopy;
-      return;
-    }
-    if (!force && people.length < maximumLengthSearchPeople && name.startsWith(searchWord)) {
-      return;
-    }
-
-    const timeout = setTimeout(() => (isSearchingPeople = true), timeBeforeShowLoadingSpinner);
-    try {
-      people = await searchPerson({ name });
-      searchWord = name;
-    } catch (error) {
-      handleError(error, "Can't search people");
-    } finally {
-      clearTimeout(timeout);
-    }
-
-    isSearchingPeople = false;
+  const handleResetSearch = () => {
+    people = peopleCopy;
   };
 </script>
 
 <div class=" w-40 sm:w-48 md:w-96 h-14 mb-8">
-  <SearchBar
-    bind:name
-    isSearching={isSearchingPeople}
+  <SearchPeople
+    type="searchBar"
     placeholder="Search people"
-    on:reset={() => {
-      people = peopleCopy;
-    }}
-    on:search={({ detail }) => searchPeople(detail.force ?? false)}
+    onReset={handleResetSearch}
+    bind:searchName={name}
+    bind:searchedPeopleLocal={people}
+    bind:isSearching={isSearchingPeople}
   />
 </div>
 
@@ -69,7 +44,7 @@
   style:max-height={screenHeight - 400 + 'px'}
 >
   <div class="grid-col-2 grid gap-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
-    {#each people as person (person.id)}
+    {#each showPeople as person (person.id)}
       <FaceThumbnail
         {person}
         on:click={() => {

Diff for: web/src/lib/components/faces-page/search-people.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import SearchBar from '$lib/components/elements/search-bar.svelte';
+  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
+  import { handleError } from '$lib/utils/handle-error';
+  import { searchNameLocal } from '$lib/utils/person';
+  import { searchPerson, type PersonResponseDto } from '@immich/sdk';
+
+  export let searchName: string;
+  export let searchedPeopleLocal: PersonResponseDto[];
+  export let type: 'searchBar' | 'input';
+  export let showLoadingSpinner: boolean = false;
+  export let isSearching: boolean = false;
+  export let placeholder: string = 'Name or nickname';
+  export let onReset = () => {};
+  export let onSearch = () => {};
+
+  let searchArray: PersonResponseDto[] = [];
+  let searchWord: string;
+  let abortController: AbortController | null = null;
+
+  const search = () => {
+    searchedPeopleLocal = searchNameLocal(searchName, searchArray, maximumLengthSearchPeople);
+  };
+
+  export let handleSearch = async (force?: boolean, name?: string) => {
+    isSearching = true;
+    searchName = name ?? searchName;
+    onSearch();
+    if (searchName === '') {
+      onReset();
+      isSearching = false;
+      return;
+    }
+    if (!force && searchArray.length < maximumLengthSearchPeople && searchName.startsWith(searchWord)) {
+      search();
+      isSearching = false;
+      return;
+    }
+    if (abortController) {
+      abortController.abort();
+    }
+    abortController = new AbortController();
+    const timeout = setTimeout(() => (showLoadingSpinner = true), timeBeforeShowLoadingSpinner);
+    try {
+      const data = await searchPerson({ name: searchName }, { signal: abortController?.signal });
+      abortController = null;
+      searchArray = data;
+      searchWord = searchName;
+    } catch (error) {
+      handleError(error, "Can't search people");
+    } finally {
+      clearTimeout(timeout);
+    }
+    search();
+    isSearching = false;
+    showLoadingSpinner = false;
+  };
+
+  const initInput = (element: HTMLInputElement) => {
+    element.focus();
+  };
+</script>
+
+{#if type === 'searchBar'}
+  <SearchBar
+    bind:name={searchName}
+    {showLoadingSpinner}
+    {placeholder}
+    on:reset={onReset}
+    on:search={({ detail }) => handleSearch(detail.force ?? false)}
+  />
+{:else}
+  <input
+    class="w-full gap-2 bg-immich-bg dark:bg-immich-dark-bg"
+    type="text"
+    {placeholder}
+    bind:value={searchName}
+    on:input={() => handleSearch(false)}
+    use:initInput
+  />
+{/if}

Diff for: web/src/lib/components/shared-components/change-location.svelte

@@ -23,7 +23,7 @@
   let suggestedPlaces: PlacesResponseDto[] = [];
   let searchWord: string;
   let isSearching = false;
-  let showSpinner = false;
+  let showLoadingSpinner = false;
   let suggestionContainer: HTMLDivElement;
   let hideSuggestion = false;
   let addClipMapMarker: (long: number, lat: number) => void;
@@ -73,7 +73,7 @@
 
     // TODO: refactor setTimeout/clearTimeout logic - there are no less than 12 places that duplicate this code
     isSearching = true;
-    const timeout = setTimeout(() => (showSpinner = true), timeBeforeShowLoadingSpinner);
+    const timeout = setTimeout(() => (showLoadingSpinner = true), timeBeforeShowLoadingSpinner);
     try {
       places = await searchPlaces({ name: searchWord });
     } catch (error) {
@@ -82,7 +82,7 @@
     } finally {
       clearTimeout(timeout);
       isSearching = false;
-      showSpinner = false;
+      showLoadingSpinner = false;
     }
   };
 
@@ -111,7 +111,7 @@
         <SearchBar
           placeholder="Search places"
           bind:name={searchWord}
-          isSearching={showSpinner}
+          {showLoadingSpinner}
           on:reset={() => {
             suggestedPlaces = [];
           }}

Diff for: web/src/lib/components/shared-components/search-bar/search-people-section.svelte

@@ -56,7 +56,7 @@
     <div id="people-selection" class="-mb-4">
       <div class="flex items-center w-full justify-between gap-6">
         <p class="immich-form-label py-3">PEOPLE</p>
-        <SearchBar bind:name placeholder="Filter people" isSearching={false} />
+        <SearchBar bind:name placeholder="Filter people" showLoadingSpinner={false} />
       </div>
 
       <div class="flex -mx-1 max-h-64 gap-1 mt-2 flex-wrap overflow-y-auto immich-scrollbar">

Diff for: web/src/routes/(user)/albums/+page.svelte

@@ -29,7 +29,7 @@
       />
     </div>
     <div class="w-60">
-      <SearchBar placeholder="Search albums" bind:name={searchQuery} isSearching={false} />
+      <SearchBar placeholder="Search albums" bind:name={searchQuery} showLoadingSpinner={false} />
     </div>
   </div>