From 4372b07e488cced7810db2294131d7bdc99028c1 Mon Sep 17 00:00:00 2001
From: Salvatore Giordano <salvatoregiordanoo@gmail.com>
Date: Thu, 28 Apr 2022 14:58:32 +0200
Subject: [PATCH] StreamUserListView

---
 .../stream_channel_list_view.mdx              |   4 +
 .../stream_chat_flutter/user_list_view.mdx    | 113 +++++++++---------
 2 files changed, 63 insertions(+), 54 deletions(-)

diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/stream_channel_list_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/stream_channel_list_view.mdx
index f0835d23..dbb3f266 100644
--- a/docusaurus/docs/Flutter/stream_chat_flutter/stream_channel_list_view.mdx
+++ b/docusaurus/docs/Flutter/stream_chat_flutter/stream_channel_list_view.mdx
@@ -22,6 +22,10 @@ The `StreamChannelListView` widget allows displaying a list of channels to a use
 ONLY the channels that the user is a part of. This section goes into setting up and using a `StreamChannelListView`
 widget.
 
+:::note
+Make sure to check the [StreamChannelListController](./stream_channel_list_controller.mdx) documentation for more information on how to use the controller to manipulate the `StreamChannelListView`.
+:::
+
 ### Basic Example
 
 Here is a basic example of the `StreamChannelListView` widget. It consists of the main widget itself, a `StreamChannelListController` to control the list of channels and a callback to handle the tap of a channel.
diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx
index 61dfbeb4..a37670d3 100644
--- a/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx
+++ b/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx
@@ -1,7 +1,7 @@
 ---
-id: user_list_view
+id: stream_user_list_view
 sidebar_position: 7
-title: UserListView
+title: StreamUserListView
 ---
 
 A Widget For Displaying And Selecting Users
@@ -13,76 +13,81 @@ Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_
 ### Background
 
 A list of users is required for many different purposes: showing a list of users in a Channel,
-selecting users to add in a channel, etc. The `UserListView` displays and allows selection of a list
-of users along with multiple display configurations like a list and grid.
+selecting users to add in a channel, etc. The `StreamUserListView` displays a list
+of users.
+
+:::note
+Make sure to check the [StreamUserListController](./stream_user_list_controller.mdx) documentation for more information on how to use the controller to manipulate the `StreamUserListView`.
+:::
 
 ### Basic Example
 
 Let's take a look at an example where we use the widget to autocomplete user names:
 
 ```dart
-class UsersListPage extends StatelessWidget {
+class UserListPage extends StatefulWidget {
+  const UserListPage({
+    Key? key,
+    required this.client,
+  }) : super(key: key);
+
+  final StreamChatClient client;
+
   @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      body: UsersBloc(
-        child: UsersListView(
-          filter: Filter.notEqual('id', StreamChat.of(context).user!.id),
-          sort: [
-            SortOption(
-              'name',
-              direction: 1,
+  State<UserListPage> createState() => _UserListPageState();
+}
+
+class _UserListPageState extends State<UserListPage> {
+  late final _controller = StreamUserListController(
+    client: widget.client,
+    limit: 25,
+    filter: Filter.and([
+      Filter.notEqual('id', StreamChat.of(context).currentUser!.id),
+    ]),
+    sort: [
+      SortOption(
+        'name',
+        direction: 1,
+      ),
+    ],
+  );
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        body: RefreshIndicator(
+          onRefresh: _controller.refresh,
+          child: StreamChannelListView(
+            controller: _controller,
+            onChannelTap: (channel) => Navigator.push(
+              context,
+              MaterialPageRoute(
+                builder: (_) => StreamChannel(
+                  channel: channel,
+                  child: const ChannelPage(),
+                ),
+              ),
             ),
-          ],
-          pagination: PaginationParams(
-            limit: 25,
           ),
         ),
-      ),
-    );
-  }
+      );
 }
 ```
 
 ### Customize The User Items
 
-You can use your own widget for the user items using the `userItemBuilder` parameter.
+You can use your own widget for the user items using the `itemBuilder` parameter.
 
 ```dart
-UsersListView(
+StreamUsersListView(
   // ...
-  userItemBuilder: (context, user, isSelected) {
-    return Text(user.name);
+  itemBuilder: (context, users, index, defaultWidget) {
+    return Text(user[index].name);
   },
 ),
 ```
-
-### Group Alphabetically
-
-You can group alphabetically using the `groupAlphabetically` parameter:
-
-```dart
-UsersListView(
-    //...
-    groupAlphabetically: true,
-),
-```
-
-### Selecting Users
-
-The `UserListView` widget allows selecting users in a list by supplying a selected users list and callbacks
-for when user items are tapped.
-
-```dart
-Set<User>? selectedUsers = {};
-
-UsersListView(
-    //...
-    selectedUsers: selectedUsers,
-    onUserTap: (user, _) {
-        setState(() {
-            selectedUsers.add(user);
-        });
-    },
-),
-```