✨ Search for stickers
This commit is contained in:
@@ -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},
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
@@ -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;
|
||||||
|
Reference in New Issue
Block a user