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

1 files changed, 62 insertions, 26 deletions

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);
+      }
     }
 }