nav [nfc]: Extract some *PageBody widgets

PIG208 · chrisbobbe · commit 084cb2f0c2c0 · 2024-12-04T11:03:30.000-08:00
These are extracted because we will later make them accessible as bottom tabs on the HomePage. Among those bottom tabs, the "Users" page (not yet implemented) and MessageListPage are skipped. These are out-of-scope of as now. See Figma for the available tabs: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3307-50151&node-type=frame&t=hGZtzX2QTLse81un-0 Signed-off-by: Zixuan James Li <zixuan@zulip.com>
diff --git a/lib/widgets/inbox.dart b/lib/widgets/inbox.dart
@@ -14,7 +14,7 @@ import 'text.dart';
 import 'theme.dart';
 import 'unread_count_badge.dart';
 
-class InboxPage extends StatefulWidget {
+class InboxPage extends StatelessWidget {
   const InboxPage({super.key});
 
   static Route<void> buildRoute({int? accountId, BuildContext? context}) {
@@ -23,10 +23,21 @@ class InboxPage extends StatefulWidget {
   }
 
   @override
-  State<InboxPage> createState() => _InboxPageState();
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: ZulipAppBar(title: const Text('Inbox')),
+      body: const InboxPageBody());
+  }
+}
+
+class InboxPageBody extends StatefulWidget {
+  const InboxPageBody({super.key});
+
+  @override
+  State<InboxPageBody> createState() => _InboxPageState();
 }
 
-class _InboxPageState extends State<InboxPage> with PerAccountStoreAwareStateMixin<InboxPage> {
+class _InboxPageState extends State<InboxPageBody> with PerAccountStoreAwareStateMixin<InboxPageBody> {
   Unreads? unreadsModel;
   RecentDmConversationsView? recentDmConversationsModel;
 
@@ -160,27 +171,25 @@ class _InboxPageState extends State<InboxPage> with PerAccountStoreAwareStateMix
       sections.add(_StreamSectionData(streamId, countInStream, streamHasMention, topicItems));
     }
 
-    return Scaffold(
-      appBar: ZulipAppBar(title: const Text('Inbox')),
-      body: SafeArea(
-        // Don't pad the bottom here; we want the list content to do that.
-        bottom: false,
-        child: StickyHeaderListView.builder(
-          itemCount: sections.length,
-          itemBuilder: (context, index) {
-            final section = sections[index];
-            switch (section) {
-              case _AllDmsSectionData():
-                return _AllDmsSection(
-                  data: section,
-                  collapsed: allDmsCollapsed,
-                  pageState: this,
-                );
-              case _StreamSectionData(:var streamId):
-                final collapsed = collapsedStreamIds.contains(streamId);
-                return _StreamSection(data: section, collapsed: collapsed, pageState: this);
-            }
-          })));
+    return SafeArea(
+      // Don't pad the bottom here; we want the list content to do that.
+      bottom: false,
+      child: StickyHeaderListView.builder(
+        itemCount: sections.length,
+        itemBuilder: (context, index) {
+          final section = sections[index];
+          switch (section) {
+            case _AllDmsSectionData():
+              return _AllDmsSection(
+                data: section,
+                collapsed: allDmsCollapsed,
+                pageState: this,
+              );
+            case _StreamSectionData(:var streamId):
+              final collapsed = collapsedStreamIds.contains(streamId);
+              return _StreamSection(data: section, collapsed: collapsed, pageState: this);
+          }
+        }));
   }
 }
 
diff --git a/lib/widgets/recent_dm_conversations.dart b/lib/widgets/recent_dm_conversations.dart
@@ -13,7 +13,7 @@ import 'store.dart';
 import 'theme.dart';
 import 'unread_count_badge.dart';
 
-class RecentDmConversationsPage extends StatefulWidget {
+class RecentDmConversationsPage extends StatelessWidget {
   const RecentDmConversationsPage({super.key});
 
   static Route<void> buildRoute({int? accountId, BuildContext? context}) {
@@ -22,10 +22,23 @@ class RecentDmConversationsPage extends StatefulWidget {
   }
 
   @override
-  State<RecentDmConversationsPage> createState() => _RecentDmConversationsPageState();
+  Widget build(BuildContext context) {
+    final zulipLocalizations = ZulipLocalizations.of(context);
+    return Scaffold(
+      appBar: ZulipAppBar(
+        title: Text(zulipLocalizations.recentDmConversationsPageTitle)),
+      body: const RecentDmConversationsPageBody());
+  }
+}
+
+class RecentDmConversationsPageBody extends StatefulWidget {
+  const RecentDmConversationsPageBody({super.key});
+
+  @override
+  State<RecentDmConversationsPageBody> createState() => _RecentDmConversationsPageBodyState();
 }
 
-class _RecentDmConversationsPageState extends State<RecentDmConversationsPage> with PerAccountStoreAwareStateMixin<RecentDmConversationsPage> {
+class _RecentDmConversationsPageBodyState extends State<RecentDmConversationsPageBody> with PerAccountStoreAwareStateMixin<RecentDmConversationsPageBody> {
   RecentDmConversationsView? model;
   Unreads? unreadsModel;
 
@@ -56,24 +69,19 @@ class _RecentDmConversationsPageState extends State<RecentDmConversationsPage> w
 
   @override
   Widget build(BuildContext context) {
-    final zulipLocalizations = ZulipLocalizations.of(context);
     final sorted = model!.sorted;
-    return Scaffold(
-      appBar: ZulipAppBar(
-        title: Text(zulipLocalizations.recentDmConversationsPageTitle)),
-      body: SafeArea(
-        // Don't pad the bottom here; we want the list content to do that.
-        bottom: false,
-        child: ListView.builder(
-          itemCount: sorted.length,
-          itemBuilder: (context, index) {
-            final narrow = sorted[index];
-            return RecentDmConversationsItem(
-              narrow: narrow,
-              unreadCount: unreadsModel!.countInDmNarrow(narrow),
-            );
-          }),
-      ));
+    return SafeArea(
+      // Don't pad the bottom here; we want the list content to do that.
+      bottom: false,
+      child: ListView.builder(
+        itemCount: sorted.length,
+        itemBuilder: (context, index) {
+          final narrow = sorted[index];
+          return RecentDmConversationsItem(
+            narrow: narrow,
+            unreadCount: unreadsModel!.countInDmNarrow(narrow),
+          );
+        }));
   }
 }
 
diff --git a/lib/widgets/subscription_list.dart b/lib/widgets/subscription_list.dart
@@ -13,7 +13,7 @@ import 'theme.dart';
 import 'unread_count_badge.dart';
 
 /// Scrollable listing of subscribed streams.
-class SubscriptionListPage extends StatefulWidget {
+class SubscriptionListPage extends StatelessWidget {
   const SubscriptionListPage({super.key});
 
   static Route<void> buildRoute({int? accountId, BuildContext? context}) {
@@ -22,10 +22,21 @@ class SubscriptionListPage extends StatefulWidget {
   }
 
   @override
-  State<SubscriptionListPage> createState() => _SubscriptionListPageState();
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: ZulipAppBar(title: const Text("Channels")),
+      body: const SubscriptionListPageBody());
+  }
+}
+
+class SubscriptionListPageBody extends StatefulWidget {
+  const SubscriptionListPageBody({super.key});
+
+  @override
+  State<SubscriptionListPageBody> createState() => _SubscriptionListPageBodyState();
 }
 
-class _SubscriptionListPageState extends State<SubscriptionListPage> with PerAccountStoreAwareStateMixin<SubscriptionListPage> {
+class _SubscriptionListPageBodyState extends State<SubscriptionListPageBody> with PerAccountStoreAwareStateMixin<SubscriptionListPageBody> {
   Unreads? unreadsModel;
 
   @override
@@ -89,30 +100,27 @@ class _SubscriptionListPageState extends State<SubscriptionListPage> with PerAcc
     _sortSubs(pinned);
     _sortSubs(unpinned);
 
-    return Scaffold(
-      appBar: ZulipAppBar(title: const Text("Channels")),
-      body: SafeArea(
-        // Don't pad the bottom here; we want the list content to do that.
-        bottom: false,
-        child: CustomScrollView(
-          slivers: [
-            if (pinned.isEmpty && unpinned.isEmpty)
-              const _NoSubscriptionsItem(),
-            if (pinned.isNotEmpty) ...[
-              const _SubscriptionListHeader(label: "Pinned"),
-              _SubscriptionList(unreadsModel: unreadsModel, subscriptions: pinned),
-            ],
-            if (unpinned.isNotEmpty) ...[
-              const _SubscriptionListHeader(label: "Unpinned"),
-              _SubscriptionList(unreadsModel: unreadsModel, subscriptions: unpinned),
-            ],
-
-            // TODO(#188): add button leading to "All Streams" page with ability to subscribe
-
-            // This ensures last item in scrollable can settle in an unobstructed area.
-            const SliverSafeArea(sliver: SliverToBoxAdapter(child: SizedBox.shrink())),
-          ]),
-      ));
+    return SafeArea(
+      // Don't pad the bottom here; we want the list content to do that.
+      bottom: false,
+      child: CustomScrollView(
+        slivers: [
+          if (pinned.isEmpty && unpinned.isEmpty)
+            const _NoSubscriptionsItem(),
+          if (pinned.isNotEmpty) ...[
+            const _SubscriptionListHeader(label: "Pinned"),
+            _SubscriptionList(unreadsModel: unreadsModel, subscriptions: pinned),
+          ],
+          if (unpinned.isNotEmpty) ...[
+            const _SubscriptionListHeader(label: "Unpinned"),
+            _SubscriptionList(unreadsModel: unreadsModel, subscriptions: unpinned),
+          ],
+
+          // TODO(#188): add button leading to "All Streams" page with ability to subscribe
+
+          // This ensures last item in scrollable can settle in an unobstructed area.
+          const SliverSafeArea(sliver: SliverToBoxAdapter(child: SizedBox.shrink())),
+        ]));
   }
 }
 
