From 9d96ac4ae65c9fe6f5df8b5a95028495f4b00c49 Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Mon, 30 Jul 2018 17:47:26 -0400 Subject: Making big additions to backend and frontend development to fourm system. --- src/actions/app.js | 10 +++- src/actions/firebase.js | 34 ++++++++++++ src/components/mao-fourms.js | 125 +++++++++++++++++++++++++++---------------- src/reducers/firebase.js | 13 ++++- 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; } } -
+ `; @@ -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; } -- cgit v1.2.3-70-g09d2