From ff0065ac87ed3704dd4c501a0dcb7416db757742 Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Mon, 24 Sep 2018 17:30:26 -0400 Subject: Fixed issues with comment system. Now works but is unstable. --- src/actions/app.js | 16 ++++---- src/actions/firebaseFirestore.js | 37 ++++++++--------- src/components/forum-element.js | 88 ++++++++++++++++++++++++++++------------ src/components/mao-admin.js | 2 +- src/components/mao-forums.js | 71 ++++++++++++++++++++++++-------- 5 files changed, 142 insertions(+), 72 deletions(-) (limited to 'src') diff --git a/src/actions/app.js b/src/actions/app.js index ef3f18e..aecefc4 100644 --- a/src/actions/app.js +++ b/src/actions/app.js @@ -26,8 +26,9 @@ export const navigate = (path) => (dispatch) => { dispatch(updateDrawerState(false)); }; -import { snapshotForums } from './firebaseFirestore.js'; -var hasSubscribedPosts = false; +import {snapshotForums} from './firebaseFirestore.js'; + +var isSubscribedForums = false; const loadPage = (page) => (dispatch) => { switch(page) { @@ -44,12 +45,11 @@ const loadPage = (page) => (dispatch) => { break; case 'forums': - import('../components/mao-forums.js').then((module) => { - if(!hasSubscribedPosts) { - dispatch(snapshotForums()); - hasSubscribedPosts = true; - } - }); + import('../components/mao-forums.js'); + if(!isSubscribedForums) { + dispatch(snapshotForums()); + isSubscribedForums = true; + } break; case 'account': diff --git a/src/actions/firebaseFirestore.js b/src/actions/firebaseFirestore.js index 636c944..feea51e 100644 --- a/src/actions/firebaseFirestore.js +++ b/src/actions/firebaseFirestore.js @@ -93,16 +93,8 @@ export const snapshotForums = () => (dispatch) => { docRef.onSnapshot((query) => { var forumPosts = []; query.forEach((doc) => { - var comments = []; - docRef.doc(doc.id).collection('comments') - .onSnapshot((queryComments)=> { - queryComments.forEach((comment) => { - comments.push(comment.data()); - }); - }); forumPosts.push({ ...doc.data(), - comments, postId: doc.id }); }); @@ -204,7 +196,8 @@ export const createForumPost = (_subject, _content) => (dispatch, getState) => { docRef.add({ email: userEmail, subject: _subject, - content: _content + content: _content, + day: new Date() }).then(()=> { alert("Successfuly posted forum with subject " + _subject + "."); }).catch((error) => { @@ -213,20 +206,24 @@ export const createForumPost = (_subject, _content) => (dispatch, getState) => { } } -export const createComment = (postId, subject, content) => (dispatch, getState) => { +export const createComment = (postId, content) => (dispatch, getState) => { if(getState().app.offline) { alert("Failed to create comment post. Please establish internet connection.") } else { - var docRef = firestore.collection('posts').doc(postId).collection('comments'); - var user = getState().firebaseAuth.userEmail.replace('@communityschoolnaples.org', ''); - docRef.add({ - subject, - content, - user, - date: new Date() - }).then(()=> { - alert("Successfuly posted comment."); - }).catch((error) => { + var docRef = firestore.collection('posts').doc(postId); + docRef.get().then((doc) => { + var comments = doc.data().comments ? doc.data().comments : []; + comments.push({ + content, + user : getState().firebaseAuth.userEmail.replace('@communityschoolnaples.org', ''), + date: new Date() + }); + console.log(comments); + docRef.update({ + comments + }); + }) + .catch((error) => { alert(error); }); } 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) {
-

${props.author}

+

${props.day ? props.day.toDate().toLocaleDateString("en-US"): ""}${props.author}

${props.subject}

${props.content}

- Show Comments - ${this.postComment? "Hide Draft" : "Post Comment"} + +
+

Comments

+
@@ -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','
') - 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','
'))); + 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); + } } } diff --git a/src/components/mao-admin.js b/src/components/mao-admin.js index 0e8825e..a8e7435 100644 --- a/src/components/mao-admin.js +++ b/src/components/mao-admin.js @@ -73,7 +73,7 @@ class MaoAdmin extends connect(store)(PageViewElement) {
Show Hours Requests Show Competitions And Registry - Show User Data + ${props.usersHidden ? 'Show User Data' : 'Hide User Data'}

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) {