From b7cc4f1d2e9c55ad78f8c6a27724f1f8a6393d65 Mon Sep 17 00:00:00 2001
From: Michael Foiani <mfoiani2019@communiyschoolnaples.org>
Date: Mon, 17 Sep 2018 19:33:42 -0400
Subject: Stil working on comment feature. Successfully connected the comments
 on posts to forum-elements. Just need to create html to show comments.

---
 src/actions/firebaseFirestore.js | 34 ++++++++++++++++++++++++++++++++--
 src/components/forum-element.js  | 37 +++++++++++++++++++++++++++++++------
 src/components/mao-forums.js     |  2 ++
 3 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/src/actions/firebaseFirestore.js b/src/actions/firebaseFirestore.js
index 1e2296c..636c944 100644
--- a/src/actions/firebaseFirestore.js
+++ b/src/actions/firebaseFirestore.js
@@ -93,7 +93,18 @@ export const snapshotForums = () => (dispatch) => {
   docRef.onSnapshot((query) => {
     var forumPosts  = [];
     query.forEach((doc) => {
-      forumPosts.push(doc.data());
+      var comments = [];
+      docRef.doc(doc.id).collection('comments')
+      .onSnapshot((queryComments)=> {
+        queryComments.forEach((comment) => {
+          comments.push(comment.data());
+        });
+      });
+      forumPosts.push({
+        ...doc.data(),
+        comments,
+        postId: doc.id
+      });
     });
     dispatch(updateForumPosts(forumPosts));
   });
@@ -116,7 +127,7 @@ export const setUserData = (_divison) => (dispatch, getState) => {
 
 export const requestHours = (_time, _trainee, _location, _subject, _date, _pictureName) => (dispatch, getState) => {
   if(getState().app.offline) {
-    alert("Failed to create forum post. Must have internet connection.")
+    alert("Failed to create hour request. Must have internet connection.")
   } else {
     dispatch(updateNotification(false));
     var docRef    = firestore.collection('requests');
@@ -200,5 +211,24 @@ export const createForumPost = (_subject, _content) => (dispatch, getState) => {
       alert(error);
     });
   }
+}
 
+export const createComment = (postId, subject, content) => (dispatch, getState) => {
+  if(getState().app.offline) {
+    alert("Failed to create comment post. Please establish internet connection.")
+  } else {
+    var docRef      = firestore.collection('posts').doc(postId).collection('comments');
+    var user = getState().firebaseAuth.userEmail.replace('@communityschoolnaples.org', '');
+    docRef.add({
+      subject,
+      content,
+      user,
+      date: new Date()
+    }).then(()=> {
+      alert("Successfuly posted comment.");
+    }).catch((error) => {
+      alert(error);
+    });
+  }
 }
+
diff --git a/src/components/forum-element.js b/src/components/forum-element.js
index 138cc6a..1c2585b 100644
--- a/src/components/forum-element.js
+++ b/src/components/forum-element.js
@@ -15,7 +15,7 @@ import { connect } from 'pwa-helpers/connect-mixin.js';
 import { store } from '../store.js';
 
 //These are the actions needed by this element.
-import { adminApproveHours, adminRejectHours } from '../actions/firebaseAdmin.js';
+import { createComment } from '../actions/firebaseFirestore';
 
 // Import button styles
 import { ButtonSharedStyles } from './button-shared-styles.js';
@@ -82,21 +82,21 @@ class ForumElement extends connect(store)(LitElement) {
         </div>
         <div class="card-actions">
             <div class="button-grid">
-                <paper-button class="info" raised onclick="${() => this.showComments = !this.showComments}">Show Comments</paper-button>
-                <paper-button raised onclick="${() => this.postComment  = !this.postComment}">${this.postComment? "Hide Draft" : "Post Comment"}</paper-button>
+                <paper-button class="info" onclick="${() => this.showComments = !this.showComments}">Show Comments</paper-button>
+                <paper-button class="alert" onclick="${() => this.postComment  = !this.postComment}">${this.postComment? "Hide Draft" : "Post Comment"}</paper-button>
             </div>
 
             <div hidden="${!props.postComment}">
                 <hr>
                 <paper-input label="Comment Subject" id="comment-subject-field"></paper-input>
                 <paper-textarea label="Comment Content" id="comment-content-field"></paper-textarea>
-                <paper-button class="success">Submit Comment</paper-comment>
+                <paper-button raised class="success" onclick="${() => this.submitComment()}">Submit Comment</paper-comment>
             </div>
 
             <div hidden="${!props.showComments}">
                 <hr hidden="${!props.showComments && !props.postComment}">
                 <h4>Comments</h4>
-                
+
                 </div>  
             </div>
         </div>
@@ -110,6 +110,9 @@ class ForumElement extends connect(store)(LitElement) {
     author:     String,
     subject:    String,
     content:    String,
+    postId:     String,
+
+    comments:   Array,
 
     showComments:   Boolean,
     postComment:    Boolean
@@ -127,11 +130,33 @@ class ForumElement extends connect(store)(LitElement) {
     this.author     = "";
     this.subject    = "";
     this.content    = "";
+    this.postId     = "";
+
+    this.comments   = [];
 
     this.showComments   = false;
     this.postComment    = false;
   }
-
+  
+    submitComment() {
+        var commentSubject = this.shadowRoot.getElementById('comment-subject-field'); 
+        var commentContent = this.shadowRoot.getElementById('comment-content-field'); 
+        //commentContent.value.replace('\n','<br>')
+        if( commentSubject                          &&
+            commentSubject.value.trim().length > 0  &&
+            commentContent.value.trim().length > 0) {
+                if(confirm('Are you sure you want to submit this comment on ' + this.author + "'s post about " + this.subject + '?')) {
+                    store.dispatch(createComment(this.postId, commentSubject.value, commentContent.value));
+
+                    commentSubject.value = "";
+                    commentContent.value = "";
+                }
+            } else {
+                console.log(this.comments);
+                alert('Please fill out comment subject and content fields.');
+            }
+            
+    }
 }
 
 window.customElements.define('forum-element', ForumElement);
diff --git a/src/components/mao-forums.js b/src/components/mao-forums.js
index b85fa26..1d1b5f6 100644
--- a/src/components/mao-forums.js
+++ b/src/components/mao-forums.js
@@ -153,6 +153,8 @@ class MaoForums extends connect(store)(PageViewElement) {
         forumElement.author   = this.forumPosts[i].email  .replace('@communityschoolnaples.org', '');
         forumElement.subject  = this.forumPosts[i].subject;
         forumElement.content  = this.forumPosts[i].content;
+        forumElement.postId   = this.forumPosts[i].postId;
+        forumElement.comments = this.forumPosts[i].comments;
 
         postsGrid.appendChild(forumElement);
       }
-- 
cgit v1.2.3-70-g09d2