Skip to content

Commit

Permalink
fix(mobile): search page (immich-app#13833)
Browse files Browse the repository at this point in the history
* fix(mobile): search page minor problems

* fix: flashing between search

* restore search size

* remove print statement

* linting
  • Loading branch information
alextran1502 authored and bdavis2-PCTY committed Nov 18, 2024
1 parent d41c102 commit a9bc7c9
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 111 deletions.
37 changes: 37 additions & 0 deletions mobile/lib/models/search/search_result.model.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import 'package:collection/collection.dart';

import 'package:immich_mobile/entities/asset.entity.dart';

class SearchResult {
final List<Asset> assets;
final int? nextPage;

SearchResult({
required this.assets,
this.nextPage,
});

SearchResult copyWith({
List<Asset>? assets,
int? nextPage,
}) {
return SearchResult(
assets: assets ?? this.assets,
nextPage: nextPage ?? this.nextPage,
);
}

@override
String toString() => 'SearchResult(assets: $assets, nextPage: $nextPage)';

@override
bool operator ==(covariant SearchResult other) {
if (identical(this, other)) return true;
final listEquals = const DeepCollectionEquality().equals;

return listEquals(other.assets, assets) && other.nextPage == nextPage;
}

@override
int get hashCode => assets.hashCode ^ nextPage.hashCode;
}
124 changes: 69 additions & 55 deletions mobile/lib/pages/search/search.page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -58,23 +58,22 @@ class SearchPage extends HookConsumerWidget {
final mediaTypeCurrentFilterWidget = useState<Widget?>(null);
final displayOptionCurrentFilterWidget = useState<Widget?>(null);

final currentPage = useState(1);
final searchProvider = ref.watch(paginatedSearchProvider);
final searchResultCount = useState(0);
final isSearching = useState(false);

search() async {
if (prefilter == null && filter.value == previousFilter.value) return;

isSearching.value = true;
ref.watch(paginatedSearchProvider.notifier).clear();

currentPage.value = 1;

final searchResult = await ref
.watch(paginatedSearchProvider.notifier)
.getNextPage(filter.value, currentPage.value);

await ref.watch(paginatedSearchProvider.notifier).search(filter.value);
previousFilter.value = filter.value;
searchResultCount.value = searchResult.length;
isSearching.value = false;
}

loadMoreSearchResult() async {
isSearching.value = true;
await ref.watch(paginatedSearchProvider.notifier).search(filter.value);
isSearching.value = false;
}

searchPrefilter() {
Expand All @@ -97,20 +96,16 @@ class SearchPage extends HookConsumerWidget {

useEffect(
() {
Future.microtask(
() => ref.invalidate(paginatedSearchProvider),
);
searchPrefilter();

return null;
},
[],
);

loadMoreSearchResult() async {
currentPage.value += 1;
final searchResult = await ref
.watch(paginatedSearchProvider.notifier)
.getNextPage(filter.value, currentPage.value);
searchResultCount.value = searchResult.length;
}

showPeoplePicker() {
handleOnSelect(Set<Person> value) {
filter.value = filter.value.copyWith(
Expand Down Expand Up @@ -465,41 +460,6 @@ class SearchPage extends HookConsumerWidget {
search();
}

buildSearchResult() {
return switch (searchProvider) {
AsyncData() => Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: NotificationListener<ScrollEndNotification>(
onNotification: (notification) {
final metrics = notification.metrics;
final shouldLoadMore = searchResultCount.value > 75;
if (metrics.pixels >= metrics.maxScrollExtent &&
shouldLoadMore) {
loadMoreSearchResult();
}
return true;
},
child: MultiselectGrid(
renderListProvider: paginatedSearchRenderListProvider,
archiveEnabled: true,
deleteEnabled: true,
editEnabled: true,
favoriteEnabled: true,
stackEnabled: false,
emptyIndicator: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: SearchEmptyContent(),
),
),
),
),
),
AsyncError(:final error) => Text('Error: $error'),
_ => const Expanded(child: Center(child: CircularProgressIndicator())),
};
}

return Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(
Expand Down Expand Up @@ -635,13 +595,67 @@ class SearchPage extends HookConsumerWidget {
),
),
),
buildSearchResult(),
SearchResultGrid(
onScrollEnd: loadMoreSearchResult,
isSearching: isSearching.value,
),
],
),
);
}
}

class SearchResultGrid extends StatelessWidget {
final VoidCallback onScrollEnd;
final bool isSearching;

const SearchResultGrid({
super.key,
required this.onScrollEnd,
this.isSearching = false,
});

@override
Widget build(BuildContext context) {
return Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: NotificationListener<ScrollEndNotification>(
onNotification: (notification) {
final isBottomSheetNotification = notification.context
?.findAncestorWidgetOfExactType<
DraggableScrollableSheet>() !=
null;

final metrics = notification.metrics;
final isVerticalScroll = metrics.axis == Axis.vertical;

if (metrics.pixels >= metrics.maxScrollExtent &&
isVerticalScroll &&
!isBottomSheetNotification) {
onScrollEnd();
}

return true;
},
child: MultiselectGrid(
renderListProvider: paginatedSearchRenderListProvider,
archiveEnabled: true,
deleteEnabled: true,
editEnabled: true,
favoriteEnabled: true,
stackEnabled: false,
emptyIndicator: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: !isSearching ? SearchEmptyContent() : SizedBox.shrink(),
),
),
),
),
);
}
}

class SearchEmptyContent extends StatelessWidget {
const SearchEmptyContent({super.key});

Expand Down
61 changes: 25 additions & 36 deletions mobile/lib/providers/search/paginated_search.provider.dart
Original file line number Diff line number Diff line change
@@ -1,62 +1,51 @@
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/models/search/search_result.model.dart';
import 'package:immich_mobile/providers/asset_viewer/render_list.provider.dart';
import 'package:immich_mobile/widgets/asset_grid/asset_grid_data_structure.dart';
import 'package:immich_mobile/models/search/search_filter.model.dart';
import 'package:immich_mobile/services/search.service.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'paginated_search.provider.g.dart';

@riverpod
class PaginatedSearch extends _$PaginatedSearch {
Future<List<Asset>?> _search(SearchFilter filter, int page) async {
final service = ref.read(searchServiceProvider);
final result = await service.search(filter, page);

return result;
}
final paginatedSearchProvider =
StateNotifierProvider<PaginatedSearchNotifier, SearchResult>(
(ref) => PaginatedSearchNotifier(ref.watch(searchServiceProvider)),
);

@override
Future<List<Asset>> build() async {
return [];
}
class PaginatedSearchNotifier extends StateNotifier<SearchResult> {
final SearchService _searchService;

Future<List<Asset>> getNextPage(SearchFilter filter, int nextPage) async {
state = const AsyncValue.loading();
PaginatedSearchNotifier(this._searchService)
: super(SearchResult(assets: [], nextPage: 1));

final newState = await AsyncValue.guard(() async {
final assets = await _search(filter, nextPage);
search(SearchFilter filter) async {
if (state.nextPage == null) return;

if (assets != null) {
return [...?state.value, ...assets];
}
});
final result = await _searchService.search(filter, state.nextPage!);

state = newState.valueOrNull == null
? const AsyncValue.data([])
: AsyncValue.data(newState.value!);
if (result == null) return;

return newState.valueOrNull ?? [];
state = SearchResult(
assets: [...state.assets, ...result.assets],
nextPage: result.nextPage,
);
}

clear() {
state = const AsyncValue.data([]);
state = SearchResult(assets: [], nextPage: 1);
}
}

@riverpod
AsyncValue<RenderList> paginatedSearchRenderList(
PaginatedSearchRenderListRef ref,
) {
final assets = ref.watch(paginatedSearchProvider).value;
final result = ref.watch(paginatedSearchProvider);

if (assets != null) {
return ref.watch(
renderListProviderWithGrouping(
(assets, GroupAssetsBy.none),
),
);
} else {
return const AsyncValue.loading();
}
return ref.watch(
renderListProviderWithGrouping(
(result.assets, GroupAssetsBy.none),
),
);
}
18 changes: 1 addition & 17 deletions mobile/lib/providers/search/paginated_search.provider.g.dart

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 9 additions & 3 deletions mobile/lib/services/search.service.dart
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/extensions/string_extensions.dart';
import 'package:immich_mobile/interfaces/asset.interface.dart';
import 'package:immich_mobile/models/search/search_filter.model.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
import 'package:immich_mobile/models/search/search_result.model.dart';
import 'package:immich_mobile/providers/api.provider.dart';
import 'package:immich_mobile/repositories/asset.repository.dart';
import 'package:immich_mobile/services/api.service.dart';
Expand Down Expand Up @@ -44,7 +46,7 @@ class SearchService {
}
}

Future<List<Asset>?> search(SearchFilter filter, int page) async {
Future<SearchResult?> search(SearchFilter filter, int page) async {
try {
SearchResponseDto? response;
AssetTypeEnum? type;
Expand Down Expand Up @@ -103,8 +105,12 @@ class SearchService {
return null;
}

return _assetRepository
.getAllByRemoteId(response.assets.items.map((e) => e.id));
return SearchResult(
assets: await _assetRepository.getAllByRemoteId(
response.assets.items.map((e) => e.id),
),
nextPage: response.assets.nextPage?.toInt(),
);
} catch (error, stackTrace) {
_log.severe("Failed to search for assets", error, stackTrace);
}
Expand Down

0 comments on commit a9bc7c9

Please sign in to comment.