Fixed issues with comment system. Now works but is unstable.

5 files changed, 142 insertions, 72 deletions

diff --git a/src/actions/app.js b/src/actions/app.js
index ef3f18e..aecefc4 100644
--- a/src/actions/app.js
+++ b/src/actions/app.js
@@ -26,8 +26,9 @@ export const navigate = (path) => (dispatch) => {
   dispatch(updateDrawerState(false));
 };
 
-import { snapshotForums } from './firebaseFirestore.js';
-var hasSubscribedPosts  = false;
+import {snapshotForums} from './firebaseFirestore.js';
+
+var isSubscribedForums = false;
 
 const loadPage = (page) => (dispatch) => {
   switch(page) {
@@ -44,12 +45,11 @@ const loadPage = (page) => (dispatch) => {
     break;
 
     case 'forums':
-      import('../components/mao-forums.js').then((module) => {
-        if(!hasSubscribedPosts) {
-          dispatch(snapshotForums());
-          hasSubscribedPosts  = true;
-        }
-      });
+      import('../components/mao-forums.js');
+      if(!isSubscribedForums) {
+        dispatch(snapshotForums());
+        isSubscribedForums = true;
+      }
     break;
 
     case 'account':
diff --git a/src/actions/firebaseFirestore.js b/src/actions/firebaseFirestore.js
index 636c944..feea51e 100644
--- a/src/actions/firebaseFirestore.js
+++ b/src/actions/firebaseFirestore.js
@@ -93,16 +93,8 @@ export const snapshotForums = () => (dispatch) => {
   docRef.onSnapshot((query) => {
     var forumPosts  = [];
     query.forEach((doc) => {
-      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
       });
     });
@@ -204,7 +196,8 @@ export const createForumPost = (_subject, _content) => (dispatch, getState) => {
     docRef.add({
       email:    userEmail,
       subject:  _subject,
-      content:  _content
+      content:  _content,
+      day:      new Date()
     }).then(()=> {
       alert("Successfuly posted forum with subject " + _subject + ".");
     }).catch((error) => {
@@ -213,20 +206,24 @@ export const createForumPost = (_subject, _content) => (dispatch, getState) => {
   }
 }
 
-export const createComment = (postId, subject, content) => (dispatch, getState) => {
+export const createComment = (postId, 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) => {
+    var docRef  = firestore.collection('posts').doc(postId);
+    docRef.get().then((doc) => {
+      var comments = doc.data().comments ? doc.data().comments : [];
+      comments.push({
+        content,
+        user : getState().firebaseAuth.userEmail.replace('@communityschoolnaples.org', ''),
+        date: new Date()
+      });
+      console.log(comments);
+      docRef.update({
+        comments
+      });
+    })
+    .catch((error) => {
       alert(error);
     });
   }
diff --git a/src/components/forum-element.js b/src/components/forum-element.js
index 1c2585b..3177892 100644
--- a/src/components/forum-element.js
+++ b/src/components/forum-element.js
@@ -38,7 +38,8 @@ class ForumElement extends connect(store)(LitElement) {
       }
 
       .card-content > h4 {
-        text-align:   right;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
         font-weight:  lighter;
         font-style:   italic;
         word-break:   break-all;
@@ -57,6 +58,25 @@ class ForumElement extends connect(store)(LitElement) {
           margin-top:   5px;
       }
 
+      .comment-title {
+        text-align: center;
+      }
+
+      .comment-author {
+        text-align:   center;
+        font-weight:  lighter;
+        font-style:   italic;
+        word-break:   break-all;
+      }
+
+      .forum-date {
+        text-align: left;
+      }
+
+      .forum-author {
+        text-align:   right;
+      }
+
       @media (min-width: 460px) {
         .button-grid {
           grid-template-columns: 1fr 1fr;
@@ -76,28 +96,26 @@ class ForumElement extends connect(store)(LitElement) {
       <paper-card
       elevation="0">
         <div class="card-content">
-            <h4>${props.author}</h4>
+            <h4><span class="forum-date">${props.day ? props.day.toDate().toLocaleDateString("en-US"): ""}</span><span class="forum-author">${props.author}</span></h4>
             <h3>${props.subject}</h3>
             <p>${props.content}</p>
         </div>
         <div class="card-actions">
             <div class="button-grid">
-                <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>
+                <paper-button hidden=${props.comments.length == 0} class="info" onclick="${() => this.showComments = !this.showComments}">${this.showComments? "Hide Comments" : "Show Comments"}</paper-button>
+                <paper-button hidden=${!props.signedIn} 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 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>  
+                <h4 class="comment-title">Comments</h4>
+                <div id="comment-area"></div> 
             </div>
         </div>
       </paper-card>
@@ -110,6 +128,7 @@ class ForumElement extends connect(store)(LitElement) {
     author:     String,
     subject:    String,
     content:    String,
+    day:        Date,
     postId:     String,
 
     comments:   Array,
@@ -122,13 +141,16 @@ class ForumElement extends connect(store)(LitElement) {
     this.signedIn = state.firebaseAuth.signedIn;
   }
 
+  _firstRendered() {
+    this.updateComments();
+  }
+
   constructor() {
     super();
 
     this.signedIn   = false;
 
     this.author     = "";
-    this.subject    = "";
     this.content    = "";
     this.postId     = "";
 
@@ -139,23 +161,37 @@ class ForumElement extends connect(store)(LitElement) {
   }
   
     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.');
-            }
-            
+      var commentContent = this.shadowRoot.getElementById('comment-content-field');
+      if( commentContent &&
+          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, commentContent.value.replace('\n','<br>')));
+            commentContent.value = "";
+        }
+      } else {
+          alert('Please fill out comment subject and content fields.');
+      }
+    }
+
+    updateComments() {
+      var commentArea = this.shadowRoot.getElementById('comment-area');
+      commentArea.innerHTML = "";
+
+      for(var i = this.comments.length-1; i >= 0; i--) {
+        var commentElement = document.createElement('div');
+
+        var authorElement = document.createElement('h4');
+        authorElement.classList.add('comment-author');
+        authorElement.innerHTML = this.comments[i].user;
+
+        var contentElement = document.createElement('p');
+        contentElement.innerHTML = this.comments[i].content;
+
+        commentElement.appendChild(authorElement);
+        commentElement.appendChild(contentElement);
+
+        commentArea.appendChild(commentElement);
+      }
     }
 }
 
diff --git a/src/components/mao-admin.js b/src/components/mao-admin.js
index 0e8825e..a8e7435 100644
--- a/src/components/mao-admin.js
+++ b/src/components/mao-admin.js
@@ -73,7 +73,7 @@ class MaoAdmin extends connect(store)(PageViewElement) {
         <div class="main-grid">
           <paper-button raised class="info" id="toggleRequestsBtn" on-tap="${() => this.toggleRequests()}">Show Hours Requests</paper-button>
           <paper-button raised class="info" id="toggleRegistryBtn" on-tap="${() => this.toggleRegistry()}">Show Competitions And Registry</paper-button>
-          <paper-button raised class="info" id="toggleRegistryBtn" on-tap="${() => this.usersHidden = !this.usersHidden}">Show User Data</paper-button>
+          <paper-button raised class="info" id="toggleRegistryBtn" on-tap="${() => props.usersHidden = !props.usersHidden}">${props.usersHidden ? 'Show User Data' : 'Hide User Data'}</paper-button>
         </div>
 
         <br/>
diff --git a/src/components/mao-forums.js b/src/components/mao-forums.js
index 1d1b5f6..b7631d2 100644
--- a/src/components/mao-forums.js
+++ b/src/components/mao-forums.js
@@ -16,7 +16,7 @@ import { connect } from 'pwa-helpers/connect-mixin.js';
 import { store } from '../store.js';
 
 //These are the actions needed by this element.
-import { createForumPost } from '../actions/firebaseFirestore.js';
+import { createForumPost, snapshotForums } from '../actions/firebaseFirestore.js';
 
 // These are the shared styles needed by this element.
 import { SharedStyles }       from './shared-styles.js';
@@ -34,7 +34,7 @@ import '@polymer/paper-button/paper-button.js';
 import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';
 
 //import local customElements
-import './forum-element.js'
+import './forum-element.js';
 
 class MaoForums extends connect(store)(PageViewElement) {
   _render(props) {
@@ -44,6 +44,37 @@ class MaoForums extends connect(store)(PageViewElement) {
 
       <style>
 
+      paper-card {
+        display: block;
+        padding-bottom: 3px;
+      }
+
+      paper-button {
+        display:      block;
+        margin-left:  auto;
+        margin-right: auto;
+      }
+
+      .button-grid {
+        display: grid;
+        grid-template-rows: 1fr;
+      }
+
+      .card-content > h4 {
+        text-align:   right;
+        font-weight:  lighter;
+        font-style:   italic;
+        word-break:   break-all;
+      }
+
+      .card-content > h3 {
+        word-break: break-all;
+      }
+
+      .card-content > h3, p {
+        text-align: center;
+      }
+
       .post-grid {
         display:  grid;
         grid-gap: 10px;
@@ -104,18 +135,25 @@ class MaoForums extends connect(store)(PageViewElement) {
     super();
 
     this.onceOnline = false;
+    this.forumPosts = [];
+    this.signedIn = false;
   }
 
   _stateChanged(state) {
     this.signedIn     = state.firebaseAuth      .signedIn;
     this.forumPosts   = state.firebaseFirestore .forumPosts;
-    this.updateSection();
-
+    if(this.shadowRoot) {
+      this.updateSection();
+    }
+ 
     if(!state.app.offline) {
       this.onceOnline = true;
     }
   }
 
+  _firstRendered() {
+  }
+
   submitForum() {
     if(this.shadowRoot) {
       var subjectElement  = this.shadowRoot.getElementById('subject-field');
@@ -132,7 +170,7 @@ class MaoForums extends connect(store)(PageViewElement) {
             alert("Please fill out all fields when creating a form post.");
           } else {
             if(confirm('Are you sure you want to submit this to the forum page? It will be public to everyone.')) {
-              store.dispatch(createForumPost(subjectElement.value, contentElement.value));
+              store.dispatch(createForumPost(subjectElement.value, contentElement.value.replace('\n','<br>')));
 
               subjectElement.value  = "";
               contentElement.value  = "";
@@ -143,22 +181,21 @@ class MaoForums extends connect(store)(PageViewElement) {
   }
 
   updateSection() {
-    if(this.shadowRoot) {
-      var postsGrid       = this.shadowRoot.getElementById('posts-grid');
-      postsGrid.innerHTML = "";
+    var postsGrid       = this.shadowRoot.getElementById('posts-grid');
+    postsGrid.innerHTML = "";
 
-      for(var i = this.forumPosts.length-1; i >=0; i--) {
-        var forumElement  = document.createElement('forum-element');
+    for(var i = this.forumPosts.length-1; i >=0; i--) {
+      var forumElement  = document.createElement('forum-element');
 
-        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;
+      forumElement.author   = this.forumPosts[i].email  .replace('@communityschoolnaples.org', '');
+      forumElement.subject  = this.forumPosts[i].subject;
+      forumElement.content  = this.forumPosts[i].content;
+      forumElement.day      = this.forumPosts[i].day;
+      forumElement.postId   = this.forumPosts[i].postId;
+      forumElement.comments = this.forumPosts[i].comments ? this.forumPosts[i].comments : [];
 
-        postsGrid.appendChild(forumElement);
+      postsGrid.appendChild(forumElement);
       }
-    }
   }
 
 }