implement infinite list for communities

lib/pages/communities_list.dart

@@ -1,49 +1,85 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:lemmy_api_client/lemmy_api_client.dart';
 
+import '../hooks/infinite_scroll.dart';
 import '../util/extensions/api.dart';
 import '../util/goto.dart';
+import '../widgets/infinite_scroll.dart';
 import '../widgets/markdown_text.dart';
+import '../widgets/post_list_options.dart';
 
 class CommunitiesListPage extends StatelessWidget {
   final String title;
-  final List<CommunityView> communities;
+  final Future<List<CommunityView>> Function(
+    int page,
+    int batchSize,
+    SortType sortType,
+  ) fetcher;
 
-  const CommunitiesListPage({Key key, @required this.communities, this.title})
-      : assert(communities != null),
+  const CommunitiesListPage({Key key, @required this.fetcher, this.title})
+      : assert(fetcher != null),
         super(key: key);
 
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
-    // TODO: abillity to load more, right now its 10 - default page size
     return Scaffold(
-        appBar: AppBar(
-          title: Text(title ?? '', style: theme.textTheme.headline6),
-          centerTitle: true,
-          backgroundColor: theme.cardColor,
-          iconTheme: theme.iconTheme,
-        ),
-        body: ListView.builder(
-          itemBuilder: (context, i) => ListTile(
-            title: Text(communities[i].name),
-            subtitle: communities[i].description != null
+      appBar: AppBar(
+        title: Text(title ?? '', style: theme.textTheme.headline6),
+        centerTitle: true,
+        backgroundColor: theme.cardColor,
+        iconTheme: theme.iconTheme,
+      ),
+      body: InfiniteCommunitiesList(fetcher: fetcher),
+    );
+  }
+}
+
+/// Infinite list of posts
+class InfiniteCommunitiesList extends HookWidget {
+  final Future<List<CommunityView>> Function(
+      int page, int batchSize, SortType sortType) fetcher;
+
+  InfiniteCommunitiesList({@required this.fetcher}) : assert(fetcher != null);
+
+  @override
+  Widget build(BuildContext context) {
+    final isc = useInfiniteScrollController();
+    final sort = useState(SortType.active);
+
+    void changeSorting(SortType newSort) {
+      sort.value = newSort;
+      isc.clear();
+    }
+
+    return InfiniteScroll<CommunityView>(
+      prepend: PostListOptions(
+        onChange: changeSorting,
+        styleButton: false,
+      ),
+      builder: (community) => Column(
+        children: [
+          Divider(),
+          ListTile(
+            title: Text(community.name),
+            subtitle: community.description != null
                 ? Opacity(
                     opacity: 0.5,
                     child: MarkdownText(
-                      communities[i].description,
-                      instanceUrl: communities[i].instanceUrl,
+                      community.description,
+                      instanceUrl: community.instanceUrl,
                     ),
                   )
                 : null,
             onTap: () => goToCommunity.byId(
-                context, communities[i].instanceUrl, communities[i].id),
-            leading: communities[i].icon != null
+                context, community.instanceUrl, community.id),
+            leading: community.icon != null
                 ? CachedNetworkImage(
                     height: 50,
                     width: 50,
-                    imageUrl: communities[i].icon,
+                    imageUrl: community.icon,
                     imageBuilder: (context, imageProvider) => Container(
                       decoration: BoxDecoration(
                         shape: BoxShape.circle,
@@ -56,7 +92,12 @@ class CommunitiesListPage extends StatelessWidget {
                 : SizedBox(width: 50),
             // TODO: add trailing button for un/subscribing to communities
           ),
-          itemCount: communities.length,
-        ));
+        ],
+      ),
+      padding: EdgeInsets.zero,
+      fetchMore: (page, batchSize) => fetcher(page, batchSize, sort.value),
+      controller: isc,
+      batchSize: 20,
+    );
   }
 }

lib/pages/instance.dart

@@ -7,6 +7,7 @@ import 'package:intl/intl.dart';
 import 'package:lemmy_api_client/lemmy_api_client.dart';
 import 'package:url_launcher/url_launcher.dart' as ul;
 
+import '../hooks/stores.dart';
 import '../util/extensions/api.dart';
 import '../util/goto.dart';
 import '../util/text_color.dart';
@@ -288,13 +289,21 @@ class _AboutTab extends HookWidget {
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     final commSnap = useFuture(communitiesFuture);
+    final accStore = useAccountsStore();
 
     void goToCommunities() {
       goTo(
         context,
         (_) => CommunitiesListPage(
-            communities: commSnap.data,
-            title: 'Communities of ${site.site.name}'),
+          fetcher: (page, batchSize, sortType) =>
+              LemmyApi(instanceUrl).v1.listCommunities(
+                    sort: sortType,
+                    limit: batchSize,
+                    page: page,
+                    auth: accStore.defaultTokenFor(instanceUrl)?.raw,
+                  ),
+          title: 'Communities of ${site.site.name}',
+        ),
       );
     }