Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(mobile): search page #13833

Merged
merged 5 commits into from
Oct 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading