### Repository

https://github.com/enyason/Syde

<center>![SPLASH SCREEN.png](https://cdn.steemitimages.com/DQma5umohSERmjPHNnk9ZvG1gKJmnrJWEGtUd1hCAMNi6ft/SPLASH%20SCREEN.png)</center>
### History

- ##### [Implementing Syde An online Forum in Flutter (Update 2 : Post A Story, Retrieve All Stories)](https://steemit.com/utopian-io/@ideba/implementing-syde-an-online-forum-in-flutter-update-2--post-a-story-retrieve-all-stories-)

- [Implementing Syde An online Forum in Flutter (Update : Authenticate With Google)](https://steemit.com/utopian-io/@ideba/implementing-syde-an-online-forum-in-flutter-update--authenticate-with-google)

- [Implementing Syde(An online Forum) in Flutter](https://steemit.com/utopian-io/@ideba/implementing-sydean-online-forum-in-flutter)

  







### New Features

- **Add  comments to a story**
- **UI Update**
  

### Add comments to a story

Beyond creating a story on the platform, users can also comment on a specific story. This feature which is part of the back-end implementation is Handled by Fire-base. 

***Implementation***

- **Create a Comment Object**

  ```
  class Comment {
  
    String commentBody, commentId, userId, timeStamp;
    Comment({this.commentBody, this.commentId, this.userId, this.timeStamp});
  
    factory Comment.fromMap(Map comment) {
      return Comment(
        commentBody: comment["comment_body"],
        commentId: comment["comment_id"],
        timeStamp: comment["time_stamp"],
        userId: comment["user_id"],
      );
    }
  
    Map<String, dynamic> toMap() {
      return {
        "comment_body": commentBody,
        "comment_id": commentId,
        "time_stamp": timeStamp,
        "user_id": userId
      };
    }
  }
  ```

  - This class shows a basic structure of the comment object

- **Add a Comment**

  ```
  addComment(){
  
      Map<String, dynamic> data = Comment(
          commentBody: _controller.value.text,
          commentId: "na",
          userId: _user.uid,
          timeStamp: DateTime.now()
              .millisecondsSinceEpoch
              .toString())
          .toMap();
  
      _controller.clear();
      _commentRef.add(data).then((docRef) {
  
  
        _commentRef
            .document(docRef.documentID)
            .updateData({"comment_id": docRef.documentID});
  
        incrementComment(widget.story.storyId);
  
      }
  
      );
      
    }
  ```

  - This method takes the users message from the text-field  and adds it to the lists of comments

- **Increment Comment Count**

  ```
  incrementComment(String docRef) async {
      //use transaction on the fire store instance to prevent race condition
      Firestore.instance.runTransaction((transaction) async {
        //get a document snapshot at the current position
        DocumentSnapshot snapshot =
        await transaction.get(Firestore.instance.collection("all_post").document(docRef));
  
        //increment comment count for the story
        await transaction.update(snapshot.reference,
            {"comment_count": snapshot.data["comment_count"] + 1});
  
      });
    }
  ```

  - To Keep track of the number of comments, I have a field called "comment_count"
  - This method gets the document reference and increments the number by 1

- **Listen to  Comment Count** 

  ```
  StreamBuilder(
  	stream: Firestore.instance                                      	   .collection("all_post")                                         .document(document.data.documents[index]                                         ["post_id"]).snapshots(), builder: (BuildContext context,
   AsyncSnapshot snapshot) {
  	return Padding(
     		 padding: const EdgeInsets.only(right: 20.0),
      	 child: Row(
                      children: <Widget>[
                    		 Icon(Icons.chat_bubble_outline,
                       	   color: Colors.grey, size: 18.0),
            				  Text(      snapshot.data == null
                                                    ? "0"
                                                    : snapshot
                                                        .data["comment_count"]
                                                        .toString(),
                                                style: TextStyle(
                                                    color: Colors.grey,
                                                    fontSize: 10.0),
                                              ),
                                            ],
                                          ),
                                        );
                                      },
                                    )),
  ```

  - With the stream builder widget, I listen to the node that carries the "comment_count" filed. With this, there is a real-time update of the number of comments made on a particular story



<center>
<p float="left">
  <img src="/https://steemitimages.com/p/2bP4pJr4wVimqCWjYimXJe2cnCgn9eVrBqRBsERBjX4?format=match&mode=fit&width=640&height=600.png"  />
  <img src="/https://steemitimages.com/p/4W3i2hyrJTVfeKM2gnkYJZVrfqSuqn15iebdkSwKmQKMDjDNH96?format=match&mode=fit&width=640&height=600" /> 

</p>
</center>





### More UI Layouts

<center>
<p float="left">
  <img src="/https://steemitimages.com/p/2bP4pJr4wVimqCWjYimXJe2cnCgnLqBAjKPbziY55LS?format=match&mode=fit&width=640&height=500.png" width="100" />
  <img src="/https://steemitimages.com/p/2bP4pJr4wVimqCWjYimXJe2cnCgnKZrVqgFdDdpfZ3L?format=match&mode=fit&width=640&height=500.png" width="100" /> 
  <img src="/https://steemitimages.com/p/2ADPRBseKViToZTQ1BqZsv9HK2WaGBarbJx3Xi6yVy74uarn7oJeYLfuccytGk3WE6rPvXHwN6KRg4tKPWyZAPS7m6TVphoSXEg5WLhT8EYYEm2gW6oLRaUn6AVVe1wcL1QfzFfhVQJX3jMPftezDtB7wTZPS29cu8ia2XkrCVJ86kFqs5ecys6PMwfHQmN1PVWBpmuYU3R6xk3ekayQaAmLmzYefjzfTLKwVFeXzcUL5gaaTGUja6z5oK6GM2KWk6GAxaKJj29KupzRJTGf1JtifkgmjgAGPk8RGZYgxYezSA3hkLrddKkSz3H93QNCVMLKKfNyk6yowSXrgmMjp3xM869qbSH43KCqT9KLVqHQHtwTtsMrnChjSptxUwsmgzHWy7bWR3ZsdhSoMEmSikkFR4M23LToes7m?format=match&mode=fit&width=640&height=500" width="100" />
</p>
</center>

Minor modifications have been made, as specified by my designer. Link to complete UI design https://www.figma.com/file/Rb5CIpYQoOtFI52awQrC6Yo7/SydeTeam 



**N/B**

Other functionalities stated in the GitHub commits are still in a basic structure. As these functionalities are updated to work fully, I will duly write about them.  

### IMPORTANT RESOURCES

*Github *: https://github.com/enyason/Syde



### Road Map

- ~~Authenticate User~~
- ~~Persisting user post~~
- ~~Displaying all post~~
- ~~Detailed screen implementation~~
- ~~Story Reaction Implementation (like and unlike a story)~~
- ~~Adding Comments to a story~~
- Searching all posts
- ~~Providing different layouts~~
- ToDo for users to track their daily progress
- Push Notifications
- Posts sharing
- Users dashboard
- Searching all users
- Direct Messaging with Users
- ChatGroup
- Bookmarking post


### How to contribute?

You can reach me by commenting on this post or send a message via enyasonjnr@gmail.com.
If you want to make this application better, you can make a Pull Request. [Github](https://github.com/enyason/Syde)