feat : MessageSearchListView
Signed-off-by: xsahil03x <[email protected]>
This commit is contained in:
@@ -0,0 +1,109 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:rxdart/rxdart.dart';
|
||||
import 'package:stream_chat/stream_chat.dart';
|
||||
|
||||
import 'stream_chat.dart';
|
||||
|
||||
/// Widget dedicated to the management of a message list with pagination
|
||||
class MessageSearchBloc extends StatefulWidget {
|
||||
/// The widget child
|
||||
final Widget child;
|
||||
|
||||
/// Instantiate a new MessageSearchBloc
|
||||
const MessageSearchBloc({
|
||||
Key key,
|
||||
@required this.child,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
MessageSearchBlocState createState() => MessageSearchBlocState();
|
||||
|
||||
/// Use this method to get the current [MessageSearchBlocState] instance
|
||||
static MessageSearchBlocState of(BuildContext context) {
|
||||
MessageSearchBlocState state;
|
||||
|
||||
state = context.findAncestorStateOfType<MessageSearchBlocState>();
|
||||
|
||||
if (state == null) {
|
||||
throw Exception('You must have a MessageSearchBloc widget as ancestor');
|
||||
}
|
||||
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
/// The current state of the [MessageSearchBloc]
|
||||
class MessageSearchBlocState extends State<MessageSearchBloc>
|
||||
with AutomaticKeepAliveClientMixin {
|
||||
/// The current messages list
|
||||
List<Message> get messages => _messagesController.value;
|
||||
|
||||
/// The current messages list as a stream
|
||||
Stream<List<Message>> get messagesStream => _messagesController.stream;
|
||||
|
||||
final BehaviorSubject<List<Message>> _messagesController = BehaviorSubject();
|
||||
|
||||
final BehaviorSubject<bool> _queryMessagesLoadingController =
|
||||
BehaviorSubject.seeded(false);
|
||||
|
||||
/// The stream notifying the state of queryUsers call
|
||||
Stream<bool> get queryMessagesLoading =>
|
||||
_queryMessagesLoadingController.stream;
|
||||
|
||||
/// Calls [Client.search] updating [queryMessagesLoading] stream
|
||||
Future<void> search({
|
||||
Map<String, dynamic> filter,
|
||||
List<SortOption> sort,
|
||||
String query,
|
||||
PaginationParams pagination,
|
||||
}) async {
|
||||
final client = StreamChat.of(context).client;
|
||||
|
||||
if (client.state?.user == null ||
|
||||
_queryMessagesLoadingController.value == true) {
|
||||
return;
|
||||
}
|
||||
_queryMessagesLoadingController.add(true);
|
||||
try {
|
||||
final clear = pagination == null ||
|
||||
pagination.offset == null ||
|
||||
pagination.offset == 0;
|
||||
|
||||
final oldMessages = List<Message>.from(messages ?? []);
|
||||
|
||||
final messageResponse = await client.search(
|
||||
filter,
|
||||
sort,
|
||||
query,
|
||||
pagination,
|
||||
);
|
||||
|
||||
if (clear) {
|
||||
_messagesController.add(messageResponse.results);
|
||||
} else {
|
||||
final temp = oldMessages + messageResponse.results;
|
||||
_messagesController.add(temp);
|
||||
}
|
||||
|
||||
_queryMessagesLoadingController.add(false);
|
||||
} catch (err, stackTrace) {
|
||||
_queryMessagesLoadingController.addError(err, stackTrace);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
super.build(context);
|
||||
return widget.child;
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_messagesController.close();
|
||||
_queryMessagesLoadingController.close();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
bool get wantKeepAlive => true;
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:jiffy/jiffy.dart';
|
||||
import 'package:stream_chat/stream_chat.dart';
|
||||
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
|
||||
|
||||
class MessageSearchItem extends StatelessWidget {
|
||||
final Message message;
|
||||
|
||||
const MessageSearchItem({
|
||||
Key key,
|
||||
@required this.message,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final data = Message.fromJson(message.extraData['message']);
|
||||
final user = data.user;
|
||||
debugPrint(message.toJson().toString());
|
||||
return ListTile(
|
||||
leading: UserAvatar(
|
||||
user: user,
|
||||
constraints: BoxConstraints.tightFor(
|
||||
height: 40,
|
||||
width: 40,
|
||||
),
|
||||
),
|
||||
title: Text(
|
||||
user.name,
|
||||
style: StreamChatTheme.of(context).channelPreviewTheme.title,
|
||||
),
|
||||
subtitle: Row(
|
||||
children: [
|
||||
Expanded(child: _buildSubtitle(context, data)),
|
||||
_buildDate(context, data),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDate(BuildContext context, Message message) {
|
||||
final lastUpdatedAt = message.updatedAt;
|
||||
String stringDate;
|
||||
final now = DateTime.now();
|
||||
|
||||
if (now.year != lastUpdatedAt.year ||
|
||||
now.month != lastUpdatedAt.month ||
|
||||
now.day != lastUpdatedAt.day) {
|
||||
stringDate = Jiffy(lastUpdatedAt.toLocal()).format('dd/MM/yyyy');
|
||||
} else {
|
||||
stringDate = Jiffy(lastUpdatedAt.toLocal()).format('HH:mm');
|
||||
}
|
||||
|
||||
return Text(
|
||||
stringDate,
|
||||
style: StreamChatTheme.of(context).channelPreviewTheme.lastMessageAt,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSubtitle(BuildContext context, Message message) {
|
||||
if (message == null) {
|
||||
return SizedBox();
|
||||
}
|
||||
|
||||
var text = message.text;
|
||||
if (message.isDeleted) {
|
||||
text = 'This message was deleted.';
|
||||
} else if (message.attachments != null) {
|
||||
final parts = <String>[
|
||||
...message.attachments.map((e) {
|
||||
if (e.type == 'image') {
|
||||
return '📷';
|
||||
} else if (e.type == 'video') {
|
||||
return '🎬';
|
||||
} else if (e.type == 'giphy') {
|
||||
return '[GIF]';
|
||||
}
|
||||
return null;
|
||||
}).where((e) => e != null),
|
||||
message.text ?? '',
|
||||
];
|
||||
|
||||
text = parts.join(' ');
|
||||
}
|
||||
|
||||
return Text(
|
||||
text,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: StreamChatTheme.of(context).channelPreviewTheme.subtitle.copyWith(
|
||||
color:
|
||||
StreamChatTheme.of(context).channelPreviewTheme.subtitle.color,
|
||||
fontStyle: (message.isSystem || message.isDeleted)
|
||||
? FontStyle.italic
|
||||
: FontStyle.normal,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,305 @@
|
||||
import 'dart:convert';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:stream_chat/stream_chat.dart';
|
||||
import 'package:stream_chat_flutter/src/message_search_item.dart';
|
||||
|
||||
import 'lazy_load_scroll_view.dart';
|
||||
import 'message_search_bloc.dart';
|
||||
|
||||
class MessageSearchListView extends StatefulWidget {
|
||||
final String messageQuery;
|
||||
final Map<String, dynamic> filters;
|
||||
final List<SortOption> sortOptions;
|
||||
final PaginationParams paginationParams;
|
||||
final bool pullToRefresh;
|
||||
|
||||
/// The builder used when the channel list is empty.
|
||||
final WidgetBuilder emptyBuilder;
|
||||
|
||||
/// The builder that will be used in case of error
|
||||
final Widget Function(Error error) errorBuilder;
|
||||
|
||||
/// Builder used to create a custom item separator
|
||||
final IndexedWidgetBuilder separatorBuilder;
|
||||
|
||||
const MessageSearchListView({
|
||||
Key key,
|
||||
@required this.messageQuery,
|
||||
@required this.filters,
|
||||
this.sortOptions,
|
||||
this.paginationParams,
|
||||
this.emptyBuilder,
|
||||
this.errorBuilder,
|
||||
this.separatorBuilder,
|
||||
this.pullToRefresh = true,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
_MessageSearchListViewState createState() => _MessageSearchListViewState();
|
||||
}
|
||||
|
||||
class _MessageSearchListViewState extends State<MessageSearchListView> {
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
final messageSearchBloc = MessageSearchBloc.of(context);
|
||||
messageSearchBloc.search(
|
||||
filter: widget.filters,
|
||||
sort: widget.sortOptions,
|
||||
query: widget.messageQuery,
|
||||
pagination: widget.paginationParams,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final messageSearchBloc = MessageSearchBloc.of(context);
|
||||
|
||||
if (!widget.pullToRefresh) {
|
||||
return _buildListView(messageSearchBloc);
|
||||
}
|
||||
|
||||
return RefreshIndicator(
|
||||
onRefresh: () async {
|
||||
return messageSearchBloc.search(
|
||||
filter: widget.filters,
|
||||
sort: widget.sortOptions,
|
||||
query: widget.messageQuery,
|
||||
pagination: widget.paginationParams,
|
||||
);
|
||||
},
|
||||
child: _buildListView(messageSearchBloc),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _separatorBuilder(BuildContext context, int index) {
|
||||
return Container(
|
||||
height: 1,
|
||||
color: Theme.of(context).brightness == Brightness.dark
|
||||
? Colors.white.withOpacity(0.1)
|
||||
: Colors.black.withOpacity(0.1),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _listItemBuilder(BuildContext context, Message message) {
|
||||
return MessageSearchItem(message: message);
|
||||
}
|
||||
|
||||
Widget _buildQueryProgressIndicator(
|
||||
context, MessageSearchBlocState messageSearchBloc) {
|
||||
return StreamBuilder<bool>(
|
||||
stream: messageSearchBloc.queryMessagesLoading,
|
||||
initialData: false,
|
||||
builder: (context, snapshot) {
|
||||
if (snapshot.hasError) {
|
||||
return Container(
|
||||
color: Color(0xffd0021B).withAlpha(26),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 16.0),
|
||||
child: Center(
|
||||
child: Text('Error loading messages'),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
return Container(
|
||||
height: 100,
|
||||
padding: EdgeInsets.all(32),
|
||||
child: Center(
|
||||
child: snapshot.data ? CircularProgressIndicator() : Container(),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
Widget _buildListView(MessageSearchBlocState messageSearchBloc) {
|
||||
return StreamBuilder<List<Message>>(
|
||||
stream: messageSearchBloc.messagesStream,
|
||||
builder: (context, snapshot) {
|
||||
if (snapshot.hasError) {
|
||||
if (snapshot.error is Error) {
|
||||
print((snapshot.error as Error).stackTrace);
|
||||
}
|
||||
|
||||
if (widget.errorBuilder != null) {
|
||||
return widget.errorBuilder(snapshot.error);
|
||||
}
|
||||
|
||||
var message = snapshot.error.toString();
|
||||
if (snapshot.error is DioError) {
|
||||
final dioError = snapshot.error as DioError;
|
||||
if (dioError.type == DioErrorType.RESPONSE) {
|
||||
message = dioError.message;
|
||||
} else {
|
||||
message = 'Check your connection and retry';
|
||||
}
|
||||
}
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
Text.rich(
|
||||
TextSpan(
|
||||
children: [
|
||||
WidgetSpan(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
right: 2.0,
|
||||
),
|
||||
child: Icon(Icons.error_outline),
|
||||
),
|
||||
),
|
||||
TextSpan(text: 'Error loading messages'),
|
||||
],
|
||||
),
|
||||
style: Theme.of(context).textTheme.headline6,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
top: 16.0,
|
||||
),
|
||||
child: Text(message),
|
||||
),
|
||||
FlatButton(
|
||||
onPressed: () {
|
||||
messageSearchBloc.search(
|
||||
filter: widget.filters,
|
||||
sort: widget.sortOptions,
|
||||
query: widget.messageQuery,
|
||||
pagination: widget.paginationParams,
|
||||
);
|
||||
},
|
||||
child: Text('Retry'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (!snapshot.hasData) {
|
||||
return LayoutBuilder(
|
||||
builder: (context, viewportConstraints) {
|
||||
return SingleChildScrollView(
|
||||
physics: AlwaysScrollableScrollPhysics(),
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
minHeight: viewportConstraints.maxHeight,
|
||||
),
|
||||
child: Center(
|
||||
child: CircularProgressIndicator(),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
final items = snapshot.data;
|
||||
|
||||
if (items.isEmpty && widget.emptyBuilder != null) {
|
||||
return widget.emptyBuilder(context);
|
||||
}
|
||||
|
||||
if (items.isEmpty && widget.emptyBuilder == null) {
|
||||
return LayoutBuilder(
|
||||
builder: (context, viewportConstraints) {
|
||||
return SingleChildScrollView(
|
||||
physics: AlwaysScrollableScrollPhysics(),
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
minHeight: viewportConstraints.maxHeight,
|
||||
),
|
||||
child: Center(
|
||||
child: Text('There are no messages currently'),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget child;
|
||||
child = LazyLoadScrollView(
|
||||
onEndOfPage: () => messageSearchBloc.search(
|
||||
filter: widget.filters,
|
||||
sort: widget.sortOptions,
|
||||
pagination: widget.paginationParams.copyWith(
|
||||
offset: messageSearchBloc.messages?.length ?? 0,
|
||||
),
|
||||
query: widget.messageQuery,
|
||||
),
|
||||
child: ListView.separated(
|
||||
physics: AlwaysScrollableScrollPhysics(),
|
||||
itemCount: items.isNotEmpty ? items.length + 1 : items.length,
|
||||
separatorBuilder: (_, index) {
|
||||
if (widget.separatorBuilder != null) {
|
||||
return widget.separatorBuilder(context, index);
|
||||
}
|
||||
return _separatorBuilder(context, index);
|
||||
},
|
||||
itemBuilder: (context, index) {
|
||||
if (index < items.length) {
|
||||
return _listItemBuilder(context, items[index]);
|
||||
}
|
||||
return _buildQueryProgressIndicator(context, messageSearchBloc);
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
if (true) {
|
||||
child = Column(
|
||||
children: [
|
||||
Container(
|
||||
width: double.maxFinite,
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.centerLeft,
|
||||
end: Alignment.centerRight,
|
||||
colors: [
|
||||
Colors.black.withOpacity(0.02),
|
||||
Colors.white.withOpacity(0.05),
|
||||
],
|
||||
stops: [0, 1],
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 8,
|
||||
horizontal: 8,
|
||||
),
|
||||
child: Text(
|
||||
'${items.length} results',
|
||||
style: TextStyle(
|
||||
color: Colors.black.withOpacity(0.5),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(child: child),
|
||||
],
|
||||
);
|
||||
}
|
||||
return child;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(MessageSearchListView oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
if (widget.filters?.toString() != oldWidget.filters?.toString() ||
|
||||
jsonEncode(widget.sortOptions) != jsonEncode(oldWidget.sortOptions) ||
|
||||
widget.paginationParams?.toJson()?.toString() !=
|
||||
oldWidget.paginationParams?.toJson()?.toString() ||
|
||||
widget.messageQuery?.toString() != oldWidget.messageQuery?.toString()) {
|
||||
final messageSearchBloc = MessageSearchBloc.of(context);
|
||||
messageSearchBloc.search(
|
||||
filter: widget.filters,
|
||||
sort: widget.sortOptions,
|
||||
query: widget.messageQuery,
|
||||
pagination: widget.paginationParams,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -245,6 +245,7 @@ class StreamChatThemeData {
|
||||
title: TextStyle(
|
||||
fontSize: 14,
|
||||
color: isDark ? Colors.white : Colors.black,
|
||||
fontWeight: FontWeight.bold
|
||||
),
|
||||
subtitle: TextStyle(
|
||||
fontSize: 12.5,
|
||||
|
||||
Reference in New Issue
Block a user