refactor(web): search people #9082
Conversation
Deploying immich with
|
| Latest commit: |
f4ca564
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://0b7f0693.immich.pages.dev |
| Branch Preview URL: | https://fix-refactor-search-people.immich.pages.dev |
martabal
force-pushed
the
fix/refactor-search-people
branch
4 times, most recently
from
f459ddd
to
18cfb55
Compare
martabal
force-pushed
the
fix/refactor-search-people
branch
from
18cfb55
to
5f80630
Compare
| searchedPeopleLocal = searchNameLocal(searchName, searchedPeople, numberPeopleToSearch); | ||
| }; | ||
|
|
||
| export let handleSearch = async (force?: boolean, name?: string) => { |
There was a problem hiding this comment.
Why does this method accept a name? I don't see any place where that's passed. Actually, I don't even see the point why that method should be exported in the first place
There was a problem hiding this comment.
I also personally find this method quite hard to read. I'm not 100% sure why that is; I think it's just many ifs for a method I'd expect to be simple :D
There was a problem hiding this comment.
It's because of
onMount(async () => {
const getSearchedPeople = $page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
if (getSearchedPeople) {
searchName = getSearchedPeople;
await handleSearchPeople(true, searchName);
}
});The search is saved in a query parameter so onMount, if you don't have that handleSearchPeople, you don't trigger the search and searchName in the search-people component is not yet binded to the searchName from its parent.
The issue with that component is that it's doing the search for every components. It was implemented 4 times with different features and bugs, I prefer to have one which is doing everything well.
There was a problem hiding this comment.
But handleSearchPeople is a different method, no? I'm confused...
There was a problem hiding this comment.
Nope, it's binded to handleSearch like that :
<SearchPeople
type="searchBar"
placeholder="Search people"
onReset={onResetSearchBar}
onSearch={handleSearch}
bind:searchName
bind:searchedPeopleLocal
bind:isSearching={isSearchingPeople}
bind:handleSearch={handleSearchPeople}
/>so the parent component can interact with the child method.
| import { searchNameLocal } from '$lib/utils/person'; | ||
| import { searchPerson, type PersonResponseDto } from '@immich/sdk'; | ||
|
|
||
| export let searchName: string; |
There was a problem hiding this comment.
Does this actually need to be exported?
There was a problem hiding this comment.
Yep, so the parent component know what's the user input, it allowed me to simplify that part thanks to that :
$: showPeople = searchName ? searchedPeopleLocal : people.filter((person) => !person.isHidden)There was a problem hiding this comment.
Oh now it's starting to make sense to me....
There was a problem hiding this comment.
Yeah at the end, parent components "just" get a nice searchbar and a list of suggested people, they can do whatever they want with that list (most of the time filtering) and searchName is a nice way to know when the user is searching a person or not
| use:initInput | ||
| <SearchPeople | ||
| type="input" | ||
| bind:searchName |
There was a problem hiding this comment.
I don't think you need to bind the name since SearchPeople won't update it
There was a problem hiding this comment.
Same as before, but I can probably simplify with something like that 15c1e89
martabal
force-pushed
the
fix/refactor-search-people
branch
from
26e4009
to
830f8ad
Compare
martabal
force-pushed
the
fix/refactor-search-people
branch
from
830f8ad
to
daa24cc
Compare
There was a problem hiding this comment.
Can we rename this component to something more descriptive? Is it a UI element? which type of element is it?
There was a problem hiding this comment.
UI + handlers to avoid useless API requests. I renamed it people-search to follow the same pattern as the other files
There was a problem hiding this comment.
Is this search bar component only used for people's searches?
There was a problem hiding this comment.
No, it's used for the album search too
|
|
||
| export let screenHeight: number; | ||
| export let people: PersonResponseDto[]; | ||
| export let peopleCopy: PersonResponseDto[]; | ||
| export let unselectedPeople: PersonResponseDto[]; | ||
|
|
||
| let name = ''; | ||
| let searchWord: string; | ||
| let isSearchingPeople = false; | ||
| let showPeople: PersonResponseDto[]; |
There was a problem hiding this comment.
Does this showPeople mean search result?
There was a problem hiding this comment.
Yes, it's for the people shown to the users.
|
Yes, the logic is complex, we can probably optimize it but we will probably hit some limits. I prefer to have one complex component rather than writing the same component/handler multiple times. |
This PR aims to simplify and reduce bugs with search people. Currently there are multiple implementations for the same search, this PR creates a new modal for all person search.
fix #5571