reactive pull conversation data from database - fixes #14

lib/src/ui/widgets/contact_list.dart

@@ -2,6 +2,7 @@ import "package:flutter/material.dart";
 
 import "../../models/user_model.dart";
 import "../../blocs/contact_bloc.dart";
+
 import "contact_item.dart";
 
 class ContactList extends StatefulWidget {

lib/src/ui/widgets/conversation_item.dart

@@ -1,8 +1,40 @@
 import "package:flutter/material.dart";
 
+import "../../models/user_model.dart";
+import "../../models/conversation_model.dart";
+import "../../blocs/conversation_bloc.dart";
+
 import "user_avatar.dart";
 
-class ConversationItem extends StatelessWidget {
+class ConversationItem extends StatefulWidget {
+  final Conversation conversation;
+
+  ConversationItem({@required this.conversation});
+  @override
+  State<StatefulWidget> createState() {
+    return _ConversationItemState(conversation: conversation);
+  }
+}
+
+class _ConversationItemState extends State<ConversationItem> {
+  final bloc;
+  final Conversation conversation;
+
+  _ConversationItemState({@required this.conversation})
+      : bloc = ConversationMembersBloc(conversation.id);
+
+  @override
+  void initState() {
+    super.initState();
+    bloc.fetchConversationMembers();
+  }
+
+  @override
+  void dispose() {
+    bloc.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return ListTile(
@@ -10,7 +42,7 @@ class ConversationItem extends StatelessWidget {
       onTap: () => {},
       contentPadding:
           EdgeInsets.only(top: 0.0, left: 20.0, right: 20.0, bottom: 0.0),
-      title: Text("Family Chat", style: Theme.of(context).textTheme.title),
+      title: Text(conversation.title, style: Theme.of(context).textTheme.title),
       subtitle: Text("Mum I might have forgotten to close the windows",
           maxLines: 2,
           overflow: TextOverflow.ellipsis,
@@ -23,25 +55,28 @@ class ConversationItem extends StatelessWidget {
                 style: Theme.of(context).primaryTextTheme.body1.copyWith(
                     fontWeight: FontWeight.w700,
                     color: Theme.of(context).primaryColorDark)),
-            Row(
+            StreamBuilder(
-                mainAxisSize: MainAxisSize.min,
+                stream: bloc.members,
-                mainAxisAlignment: MainAxisAlignment.end,
+                builder: (context, AsyncSnapshot<List<User>> snapshot) {
-                crossAxisAlignment: CrossAxisAlignment.end,
+                  if (snapshot.hasData) {
-                children: <Widget>[
+                    return membersBuilder(snapshot.data);
-                  UserAvatar(
+                  } else if (snapshot.hasError) {
-                      padding: EdgeInsets.only(top: 10.0, left: 1.0),
+                    return Text(snapshot.error.toString());
-                      active: true,
+                  }
-                      name: "IT"),
+                  return Center(child: CircularProgressIndicator());
-                  UserAvatar(
+                }),
-                      padding: EdgeInsets.only(top: 10.0, left: 10.0),
-                      active: true,
-                      name: "AM"),
-                  UserAvatar(
-                      padding: EdgeInsets.only(top: 10.0, left: 10.0),
-                      active: false,
-                      name: "SU"),
-                ])
           ]),
     );
   }
+
+  Widget membersBuilder(List<User> data) {
+    return Row(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.end,
+        crossAxisAlignment: CrossAxisAlignment.end,
+        children: data
+            .map((user) => UserAvatar(
+                padding: EdgeInsets.only(top: 10.0, left: 1.0), user: user))
+            .toList());
+  }
 }

lib/src/ui/widgets/conversation_list.dart

@@ -1,19 +1,52 @@
 import "package:flutter/material.dart";
 
+import "../../models/conversation_model.dart";
+import "../../blocs/conversation_bloc.dart";
+
 import "conversation_item.dart";
 
-class ConversationList extends StatelessWidget {
+class ConversationList extends StatefulWidget {
-  final List<String> items;
+  @override
+  State<StatefulWidget> createState() {
+    return _ConversationListState();
+  }
+}
 
-  ConversationList({Key key, @required this.items}) : super(key: key);
+class _ConversationListState extends State<ConversationList> {
+  final bloc = ConversationsBloc();
+
+  @override
+  initState() {
+    super.initState();
+    bloc.fetchConversations();
+  }
+
+  @override
+  dispose() {
+    bloc.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
+    return StreamBuilder(
+        stream: bloc.conversations,
+        builder: (context, AsyncSnapshot<List<Conversation>> snapshot) {
+          if (snapshot.hasData) {
+            return buildList(snapshot.data);
+          } else if (snapshot.hasError) {
+            return Text(snapshot.error.toString());
+          }
+          return Center(child: CircularProgressIndicator());
+        });
+  }
+
+  Widget buildList(List<Conversation> data) {
     return ListView.builder(
       padding: EdgeInsets.only(top: 0.0),
-      itemCount: items.length,
+      itemCount: data.length,
       itemBuilder: (context, index) {
-        return ConversationItem();
+        return ConversationItem(conversation: data[index]);
       },
     );
   }

lib/src/ui/widgets/user_avatar.dart

@@ -1,14 +1,14 @@
 import "package:flutter/material.dart";
 
+import "../../models/user_model.dart";
+
 class UserAvatar extends StatelessWidget {
-  final bool active;
+  final User user;
-  final String name;
   final EdgeInsetsGeometry padding;
   final double radius;
 
   UserAvatar(
-      {@required this.active,
+      {@required this.user,
-      @required this.name,
       this.padding: const EdgeInsets.all(0.0),
       this.radius: 20.0});
 
@@ -19,16 +19,16 @@ class UserAvatar extends StatelessWidget {
         child: Stack(alignment: Alignment.bottomRight, children: <Widget>[
           CircleAvatar(
               backgroundColor: Colors.brown.shade800,
-              child: Text(name),
+              child: Text(user.firstName[0] + user.lastName[0]),
               radius: radius),
-          active
+          /*active
               ? Container(
                   width: 12.0,
                   height: 12.0,
                   decoration: BoxDecoration(
                       color: Theme.of(context).indicatorColor,
                       shape: BoxShape.circle))
-              : Container(),
+              : Container(),*/
         ]));
   }
 }