1 files changed, 54 insertions, 17 deletions

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