Making big additions to backend and frontend development to fourm system.

1 files changed, 78 insertions, 47 deletions

diff --git a/src/components/mao-fourms.js b/src/components/mao-fourms.js
index e6a2998..66871dd 100644
--- a/src/components/mao-fourms.js
+++ b/src/components/mao-fourms.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 { requestHours } from '../actions/firebase.js';
+import { requestHours, createFourmPost } from '../actions/firebase.js';
 
 // We are lazy loading its reducer.
 import firebase from '../reducers/firebase.js';
@@ -60,37 +60,38 @@ class MaoFourms extends connect(store)(PageViewElement) {
         width: 50%;
       }
 
-      .post-grid {
-        display:  grid;
-        grid-gap: 10px;
-
-        grid-template-areas:
-                        "card1"
-                        "card2"
-                        "card3"
-                        "card4";
+      .card-content > h4 {
+        text-align:   right;
+        font-weight:  lighter;
+        font-style:   italic;
+        word-break: break-all;
       }
 
-      .post1 {
-        grid-area: card1;
+      .card-content > h3, p {
+        word-break: break-all;
       }
 
-      .post2 {
-        grid-area: card2;
+      .card-content > h3, p {
+        text-align: center;
       }
 
 
-      @media (min-width: 460px) {
+      .post-grid {
+        display:  grid;
+        grid-gap: 10px;
+
+        grid-template-columns: 1fr;
+      }
+
+      @media (min-width: 550px) {
         .post-grid {
-          grid-template-areas:
-                          "card1 card2"
-                          "card3 card4";
+          grid-template-columns: 1fr 1fr;
         }
       }
 
       </style>
 
-      <section>
+      <section hidden="${!props.signedIn}">
 
         <paper-card elevation="0">
 
@@ -101,7 +102,12 @@ class MaoFourms extends connect(store)(PageViewElement) {
           </div>
 
           <div class="card-actions">
-            <paper-button raised class="info">Create Post</paper-button>
+            <paper-button
+            raised
+            class   ="info"
+            on-tap  ="${() => this.submitFourm()}">
+              Create Post
+            </paper-button>
           </div>
 
         </paper-card>
@@ -112,24 +118,7 @@ class MaoFourms extends connect(store)(PageViewElement) {
 
         <h2 class="underline">Recent Posts</h2>
 
-        <div class="post-grid">
-
-          <paper-card elevation="0" class="post1">
-            <div class="card-content">
-              <h3>Michael Foiani</h3>
-              <p>Some content here. Lmao.</p>
-            </div>
-          </paper-card>
-
-          <paper-card elevation="0" class="post2">
-            <div class="card-content">
-              <h3>Michael Foiani</h3>
-              <p>Some content here. Lmao.</p>
-            </div>
-          </paper-card>
-
-
-        </div>
+        <div class="post-grid" id="posts-grid"></div>
 
       </section>
     `;
@@ -137,19 +126,61 @@ class MaoFourms extends connect(store)(PageViewElement) {
 
   static get properties() { return {
     // This is the data from the store.
-    signedIn:           Boolean,
-    authMessage:        String,
-    hours:              Number,
-    requestedHours:     Number
+    signedIn:     Boolean,
+    authMessage:  String,
+    fourmPosts:   Array
   }}
 
   _stateChanged(state) {
-    this.hours          = state.firebase.hours;
-    this.requestedHours = state.firebase.requestedHours;
-    this.signedIn       = state.firebase.initialized;
-    this.authMessage    = state.firebase.authMessage;
+    this.signedIn     = state.firebase.signedIn;
+    this.authMessage  = state.firebase.authMessage;
+
+    this.fourmPosts   = state.firebase.fourmPosts;
+    this.updateSection();
+  }
+
+  submitFourm() {
+    if( this.shadowRoot &&
+        confirm('Are you sure you want to submit this to the fourm page? It will be public to everyone.')
+      )
+    {
+      var subjectElement  = this.shadowRoot.getElementById('subject-field');
+      var contentElement  = this.shadowRoot.getElementById('content-field');
+
+      store.dispatch(createFourmPost(subjectElement.value, contentElement.value));
+
+      subjectElement.value  = "";
+      contentElement.value  = "";
+    }
+
+  }
+
+  updateSection() {
+    if(this.shadowRoot) {
+      var postsGrid  = this.shadowRoot.getElementById('posts-grid');
+
+      for(var i = 0; i < this.fourmPosts.length; i++) {
+        var paperCard     = document.createElement('paper-card');
+        var cardContent   = document.createElement('div');
+        var fourmAuthor   = document.createElement('h4');
+        var fourmSubject  = document.createElement('h3');
+        var fourmContent  = document.createElement('p');
+
+        fourmAuthor.innerHTML   = this.fourmPosts[i].uid;
+        fourmSubject.innerHTML  = this.fourmPosts[i].subject;
+        fourmContent.innerHTML  = this.fourmPosts[i].content;
 
-    this.sumbitFieldsOpened = false;
+        cardContent.classList.add('card-content');
+        cardContent.appendChild(  fourmAuthor);
+        cardContent.appendChild(  fourmSubject);
+        cardContent.appendChild(  fourmContent);
+
+        paperCard.elevation     = 0;
+        paperCard.appendChild(  cardContent);
+
+        postsGrid.appendChild(paperCard);
+      }
+    }
   }
 
 }