Search for stickers

This commit is contained in:
2025-08-22 23:31:31 +08:00
parent cdf2722268
commit 1fe4889460
2 changed files with 149 additions and 44 deletions

View File

@@ -8,6 +8,8 @@ import 'package:island/models/sticker.dart';
import 'package:island/pods/network.dart'; import 'package:island/pods/network.dart';
import 'package:island/widgets/app_scaffold.dart'; import 'package:island/widgets/app_scaffold.dart';
import 'package:material_symbols_icons/symbols.dart'; import 'package:material_symbols_icons/symbols.dart';
import 'dart:async';
import 'package:riverpod_annotation/riverpod_annotation.dart'; import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:riverpod_paging_utils/riverpod_paging_utils.dart'; import 'package:riverpod_paging_utils/riverpod_paging_utils.dart';
@@ -17,7 +19,10 @@ part 'sticker_marketplace.g.dart';
class MarketplaceStickerPacksNotifier extends _$MarketplaceStickerPacksNotifier class MarketplaceStickerPacksNotifier extends _$MarketplaceStickerPacksNotifier
with CursorPagingNotifierMixin<SnStickerPack> { with CursorPagingNotifierMixin<SnStickerPack> {
@override @override
Future<CursorPagingData<SnStickerPack>> build({required bool byUsage}) { Future<CursorPagingData<SnStickerPack>> build({
required String? query,
required bool byUsage,
}) {
return fetch(cursor: null); return fetch(cursor: null);
} }
@@ -34,6 +39,7 @@ class MarketplaceStickerPacksNotifier extends _$MarketplaceStickerPacksNotifier
'offset': offset, 'offset': offset,
'take': 20, 'take': 20,
'order': byUsage ? 'usage' : 'date', 'order': byUsage ? 'usage' : 'date',
if (query != null && query!.isNotEmpty) 'query': query,
}, },
); );
@@ -60,6 +66,25 @@ class MarketplaceStickersScreen extends HookConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final byUsage = useState(true); final byUsage = useState(true);
final query = useState<String?>(null);
final searchController = useTextEditingController();
final focusNode = useFocusNode();
final debounceTimer = useState<Timer?>(null);
// Clear search when query is cleared
useEffect(() {
if (query.value == null || query.value!.isEmpty) {
searchController.clear();
}
return null;
}, [query.value]);
// Clean up timer on dispose
useEffect(() {
return () {
debounceTimer.value?.cancel();
};
}, []);
return AppScaffold( return AppScaffold(
appBar: AppBar( appBar: AppBar(
@@ -84,39 +109,89 @@ class MarketplaceStickersScreen extends HookConsumerWidget {
body: PagingHelperView( body: PagingHelperView(
provider: marketplaceStickerPacksNotifierProvider( provider: marketplaceStickerPacksNotifierProvider(
byUsage: byUsage.value, byUsage: byUsage.value,
query: query.value,
), ),
futureRefreshable: futureRefreshable:
marketplaceStickerPacksNotifierProvider( marketplaceStickerPacksNotifierProvider(
byUsage: byUsage.value, byUsage: byUsage.value,
query: query.value,
).future, ).future,
notifierRefreshable: notifierRefreshable:
marketplaceStickerPacksNotifierProvider( marketplaceStickerPacksNotifierProvider(
byUsage: byUsage.value, byUsage: byUsage.value,
query: query.value,
).notifier, ).notifier,
contentBuilder: contentBuilder:
(data, widgetCount, endItemView) => ListView.builder( (data, widgetCount, endItemView) => Column(
padding: EdgeInsets.zero, children: [
itemCount: widgetCount, // Search bar above the list
itemBuilder: (context, index) { Padding(
if (index == widgetCount - 1) { padding: const EdgeInsets.all(16),
return endItemView; child: SearchBar(
} elevation: WidgetStateProperty.all(4),
controller: searchController,
focusNode: focusNode,
hintText: 'search'.tr(),
leading: const Icon(Symbols.search),
padding: WidgetStateProperty.all(
const EdgeInsets.symmetric(horizontal: 24),
),
onTapOutside:
(_) => FocusManager.instance.primaryFocus?.unfocus(),
trailing: [
if (query.value != null && query.value!.isNotEmpty)
IconButton(
icon: const Icon(Symbols.close),
onPressed: () {
query.value = null;
searchController.clear();
focusNode.unfocus();
},
),
],
onChanged: (value) {
// Debounce search to avoid excessive API calls
debounceTimer.value?.cancel();
debounceTimer.value = Timer(
const Duration(milliseconds: 500),
() {
query.value = value.isEmpty ? null : value;
},
);
},
onSubmitted: (value) {
query.value = value.isEmpty ? null : value;
focusNode.unfocus();
},
),
),
Expanded(
child: ListView.builder(
padding: EdgeInsets.zero,
itemCount: widgetCount,
itemBuilder: (context, index) {
if (index == widgetCount - 1) {
return endItemView;
}
final pack = data.items[index]; final pack = data.items[index];
return ListTile( return ListTile(
title: Text(pack.name), title: Text(pack.name),
subtitle: Text(pack.description), subtitle: Text(pack.description),
trailing: const Icon(Symbols.chevron_right), trailing: const Icon(Symbols.chevron_right),
onTap: () { onTap: () {
// Navigate to user-facing sticker pack detail page. // Navigate to user-facing sticker pack detail page.
// Adjust the route name/parameters if your app uses different ones. // Adjust the route name/parameters if your app uses different ones.
context.pushNamed( context.pushNamed(
'stickerPackDetail', 'stickerPackDetail',
pathParameters: {'packId': pack.id}, pathParameters: {'packId': pack.id},
); );
}, },
); );
}, },
),
),
],
), ),
), ),
); );

View File

@@ -7,7 +7,7 @@ part of 'sticker_marketplace.dart';
// ************************************************************************** // **************************************************************************
String _$marketplaceStickerPacksNotifierHash() => String _$marketplaceStickerPacksNotifierHash() =>
r'7e985cdee651a2ae868c0acb15da2b7a10525ae3'; r'711eafeadf488485521563d0831676c51772d13c';
/// Copied from Dart SDK /// Copied from Dart SDK
class _SystemHash { class _SystemHash {
@@ -32,9 +32,13 @@ class _SystemHash {
abstract class _$MarketplaceStickerPacksNotifier abstract class _$MarketplaceStickerPacksNotifier
extends BuildlessAutoDisposeAsyncNotifier<CursorPagingData<SnStickerPack>> { extends BuildlessAutoDisposeAsyncNotifier<CursorPagingData<SnStickerPack>> {
late final String? query;
late final bool byUsage; late final bool byUsage;
FutureOr<CursorPagingData<SnStickerPack>> build({required bool byUsage}); FutureOr<CursorPagingData<SnStickerPack>> build({
required String? query,
required bool byUsage,
});
} }
/// See also [MarketplaceStickerPacksNotifier]. /// See also [MarketplaceStickerPacksNotifier].
@@ -49,15 +53,21 @@ class MarketplaceStickerPacksNotifierFamily
const MarketplaceStickerPacksNotifierFamily(); const MarketplaceStickerPacksNotifierFamily();
/// See also [MarketplaceStickerPacksNotifier]. /// See also [MarketplaceStickerPacksNotifier].
MarketplaceStickerPacksNotifierProvider call({required bool byUsage}) { MarketplaceStickerPacksNotifierProvider call({
return MarketplaceStickerPacksNotifierProvider(byUsage: byUsage); required String? query,
required bool byUsage,
}) {
return MarketplaceStickerPacksNotifierProvider(
query: query,
byUsage: byUsage,
);
} }
@override @override
MarketplaceStickerPacksNotifierProvider getProviderOverride( MarketplaceStickerPacksNotifierProvider getProviderOverride(
covariant MarketplaceStickerPacksNotifierProvider provider, covariant MarketplaceStickerPacksNotifierProvider provider,
) { ) {
return call(byUsage: provider.byUsage); return call(query: provider.query, byUsage: provider.byUsage);
} }
static const Iterable<ProviderOrFamily>? _dependencies = null; static const Iterable<ProviderOrFamily>? _dependencies = null;
@@ -83,20 +93,26 @@ class MarketplaceStickerPacksNotifierProvider
CursorPagingData<SnStickerPack> CursorPagingData<SnStickerPack>
> { > {
/// See also [MarketplaceStickerPacksNotifier]. /// See also [MarketplaceStickerPacksNotifier].
MarketplaceStickerPacksNotifierProvider({required bool byUsage}) MarketplaceStickerPacksNotifierProvider({
: this._internal( required String? query,
() => MarketplaceStickerPacksNotifier()..byUsage = byUsage, required bool byUsage,
from: marketplaceStickerPacksNotifierProvider, }) : this._internal(
name: r'marketplaceStickerPacksNotifierProvider', () =>
debugGetCreateSourceHash: MarketplaceStickerPacksNotifier()
const bool.fromEnvironment('dart.vm.product') ..query = query
? null ..byUsage = byUsage,
: _$marketplaceStickerPacksNotifierHash, from: marketplaceStickerPacksNotifierProvider,
dependencies: MarketplaceStickerPacksNotifierFamily._dependencies, name: r'marketplaceStickerPacksNotifierProvider',
allTransitiveDependencies: debugGetCreateSourceHash:
MarketplaceStickerPacksNotifierFamily._allTransitiveDependencies, const bool.fromEnvironment('dart.vm.product')
byUsage: byUsage, ? null
); : _$marketplaceStickerPacksNotifierHash,
dependencies: MarketplaceStickerPacksNotifierFamily._dependencies,
allTransitiveDependencies:
MarketplaceStickerPacksNotifierFamily._allTransitiveDependencies,
query: query,
byUsage: byUsage,
);
MarketplaceStickerPacksNotifierProvider._internal( MarketplaceStickerPacksNotifierProvider._internal(
super._createNotifier, { super._createNotifier, {
@@ -105,16 +121,18 @@ class MarketplaceStickerPacksNotifierProvider
required super.allTransitiveDependencies, required super.allTransitiveDependencies,
required super.debugGetCreateSourceHash, required super.debugGetCreateSourceHash,
required super.from, required super.from,
required this.query,
required this.byUsage, required this.byUsage,
}) : super.internal(); }) : super.internal();
final String? query;
final bool byUsage; final bool byUsage;
@override @override
FutureOr<CursorPagingData<SnStickerPack>> runNotifierBuild( FutureOr<CursorPagingData<SnStickerPack>> runNotifierBuild(
covariant MarketplaceStickerPacksNotifier notifier, covariant MarketplaceStickerPacksNotifier notifier,
) { ) {
return notifier.build(byUsage: byUsage); return notifier.build(query: query, byUsage: byUsage);
} }
@override @override
@@ -122,12 +140,16 @@ class MarketplaceStickerPacksNotifierProvider
return ProviderOverride( return ProviderOverride(
origin: this, origin: this,
override: MarketplaceStickerPacksNotifierProvider._internal( override: MarketplaceStickerPacksNotifierProvider._internal(
() => create()..byUsage = byUsage, () =>
create()
..query = query
..byUsage = byUsage,
from: from, from: from,
name: null, name: null,
dependencies: null, dependencies: null,
allTransitiveDependencies: null, allTransitiveDependencies: null,
debugGetCreateSourceHash: null, debugGetCreateSourceHash: null,
query: query,
byUsage: byUsage, byUsage: byUsage,
), ),
); );
@@ -145,12 +167,14 @@ class MarketplaceStickerPacksNotifierProvider
@override @override
bool operator ==(Object other) { bool operator ==(Object other) {
return other is MarketplaceStickerPacksNotifierProvider && return other is MarketplaceStickerPacksNotifierProvider &&
other.query == query &&
other.byUsage == byUsage; other.byUsage == byUsage;
} }
@override @override
int get hashCode { int get hashCode {
var hash = _SystemHash.combine(0, runtimeType.hashCode); var hash = _SystemHash.combine(0, runtimeType.hashCode);
hash = _SystemHash.combine(hash, query.hashCode);
hash = _SystemHash.combine(hash, byUsage.hashCode); hash = _SystemHash.combine(hash, byUsage.hashCode);
return _SystemHash.finish(hash); return _SystemHash.finish(hash);
@@ -161,6 +185,9 @@ class MarketplaceStickerPacksNotifierProvider
// ignore: unused_element // ignore: unused_element
mixin MarketplaceStickerPacksNotifierRef mixin MarketplaceStickerPacksNotifierRef
on AutoDisposeAsyncNotifierProviderRef<CursorPagingData<SnStickerPack>> { on AutoDisposeAsyncNotifierProviderRef<CursorPagingData<SnStickerPack>> {
/// The parameter `query` of this provider.
String? get query;
/// The parameter `byUsage` of this provider. /// The parameter `byUsage` of this provider.
bool get byUsage; bool get byUsage;
} }
@@ -174,6 +201,9 @@ class _MarketplaceStickerPacksNotifierProviderElement
with MarketplaceStickerPacksNotifierRef { with MarketplaceStickerPacksNotifierRef {
_MarketplaceStickerPacksNotifierProviderElement(super.provider); _MarketplaceStickerPacksNotifierProviderElement(super.provider);
@override
String? get query =>
(origin as MarketplaceStickerPacksNotifierProvider).query;
@override @override
bool get byUsage => bool get byUsage =>
(origin as MarketplaceStickerPacksNotifierProvider).byUsage; (origin as MarketplaceStickerPacksNotifierProvider).byUsage;