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

4 files changed, 132 insertions, 50 deletions

diff --git a/src/actions/app.js b/src/actions/app.js
index 3a5f9fb..fce37d7 100644
--- a/src/actions/app.js
+++ b/src/actions/app.js
@@ -26,6 +26,9 @@ export const navigate = (path) => (dispatch) => {
   dispatch(updateDrawerState(false));
 };
 
+import {snapshotFourms} from './firebase.js';
+var hasSubscribedPosts  = false;
+
 const loadPage = (page) => (dispatch) => {
   switch(page) {
     case 'home':
@@ -41,7 +44,12 @@ const loadPage = (page) => (dispatch) => {
       import('../components/mao-tutoring.js');
       break;
     case 'fourms':
-      import('../components/mao-fourms.js');
+      import('../components/mao-fourms.js').then((module) => {
+        if(!hasSubscribedPosts) {
+          dispatch(snapshotFourms());
+          hasSubscribedPosts  = true;
+        }
+      });;
       break;
     case 'account':
       import('../components/mao-account.js');
diff --git a/src/actions/firebase.js b/src/actions/firebase.js
index 2d24908..65278fb 100644
--- a/src/actions/firebase.js
+++ b/src/actions/firebase.js
@@ -174,4 +174,38 @@ export const requestHours = (_time, _trainee, _date) => (dispatch, getState) =>
   });
 }
 
+export const CREATE_FOURM_POST  = 'CREATE_FOURM_POST';
+export const SNAPSHOT_FOURM     = 'SNAPSHOT_FOURM';
+export const UPDATE_FOURM_POSTS = 'UPDATE_FOURM_POSTS';
+
+export const createFourmPost = (_subject, _content) => (dispatch, getState) => {
+  var docRef  = firestore.collection('posts');
+  const _uid  = getState().firebase.uid;
+
+  docRef.add({
+    uid:      _uid,
+    subject:  _subject,
+    content:  _content
+  });
+}
+
+export const snapshotFourms = () => (dispatch) => {
+  var docRef      = firestore.collection('posts');
+
+  docRef.onSnapshot((query) => {
+    var fourmPosts  = [];
+    query.forEach((doc) => {
+      fourmPosts.push(doc.data());
+    });
+    console.log(fourmPosts);
+    dispatch(updateFourmPosts(fourmPosts));
+  });
+}
+
+export const updateFourmPosts = (_fourmPosts) => {
+  return {
+    type:     UPDATE_FOURM_POSTS,
+    payload:  _fourmPosts
+  }
+}
 //End Firebase Firestore
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);
+      }
+    }
   }
 
 }
diff --git a/src/reducers/firebase.js b/src/reducers/firebase.js
index 1721d31..7c25d6c 100644
--- a/src/reducers/firebase.js
+++ b/src/reducers/firebase.js
@@ -13,11 +13,12 @@ import {
   AUTH_SUCCESS,
   AUTH_SIGN_OUT,
   UPDATE_HOURS,
-  UPDATE_REGISTERED_COMPETITIONS
+  UPDATE_REGISTERED_COMPETITIONS,
+  UPDATE_FOURM_POSTS
 }
 from '../actions/firebase.js';
 
-const firebase = (state = {initialized: false, authMessage: "", hours: -1, requestedHours: -1, uid: "", userEmail: "", registeredComps: []}, action) => {
+const firebase = (state = {initialized: false, authMessage: "", hours: -1, requestedHours: -1, uid: "", userEmail: "", registeredComps: [], fourmPosts: []}, action) => {
   switch (action.type) {
     case AUTH_SUCCESS:
       return {
@@ -59,6 +60,14 @@ const firebase = (state = {initialized: false, authMessage: "", hours: -1, reque
       }
     break;
 
+    case UPDATE_FOURM_POSTS:
+      return {
+        ...state,
+        fourmPosts : action.payload
+      }
+    break;
+
+
     default:
       return state;
   }