Made the website more interactive by adding alerts on successful and failed attempts when connecting to database. Also, dealt a bit with offline functionality.

1 files changed, 15 insertions, 3 deletions

diff --git a/src/components/mao-forums.js b/src/components/mao-forums.js
index 745c620..d4bee3c 100644
--- a/src/components/mao-forums.js
+++ b/src/components/mao-forums.js
@@ -110,7 +110,8 @@ class MaoForums extends connect(store)(PageViewElement) {
 
         <h2 class="underline">Recent Posts</h2>
 
-        <div class="post-grid" id="posts-grid"></div>
+        <div hidden="${!props.onceOnline}" class="post-grid" id="posts-grid"></div>
+        <div hidden="${props.onceOnline}"><h3>Please connect to internet so we can fetch forums.</h3></div>
 
       </section>
     `;
@@ -119,14 +120,25 @@ class MaoForums extends connect(store)(PageViewElement) {
   static get properties() { return {
     // This is the data from the store.
     signedIn:     Boolean,
-    forumPosts:   Array
+    forumPosts:   Array,
+
+    onceOnline: Boolean
   }}
 
+  constructor() {
+    super();
+
+    this.onceOnline = false;
+  }
+
   _stateChanged(state) {
     this.signedIn     = state.firebaseAuth      .signedIn;
     this.forumPosts   = state.firebaseFirestore .forumPosts;
-
     this.updateSection();
+
+    if(!state.app.offline) {
+      this.onceOnline = true;
+    }
   }
 
   submitForum() {