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

4 files changed, 115 insertions, 62 deletions

diff --git a/src/actions/firebaseFirestore.js b/src/actions/firebaseFirestore.js
index 7e65eec..701a0c3 100644
--- a/src/actions/firebaseFirestore.js
+++ b/src/actions/firebaseFirestore.js
@@ -44,6 +44,7 @@ export const fetchDivison = () => (dispatch, getState) => {
   });
 }
 
+var isAdminUpdate = false;
 export const snapshotHours = () => (dispatch, getState) => {
   const currentAuthState  = getState().firebaseAuth;
   if(currentAuthState.signedIn) {
@@ -53,11 +54,15 @@ export const snapshotHours = () => (dispatch, getState) => {
     docRefUsers.onSnapshot((doc) => {
       totalHours  = doc.data().hours;
       docRefReq.onSnapshot((query) => {
+        if(isAdminUpdate) {
+          alert("One of your hours requests has been approved or denied.\nGo to dashboard to see changes.")
+        }
         var requestedHours  = 0;
         query.forEach((docs) => {
           requestedHours  += docs.data().time;
         });
         dispatch(updateHours(totalHours, requestedHours));
+        isAdminUpdate = true;
       });
     });
   }
@@ -101,58 +106,90 @@ export const setUserData = (_divison) => (dispatch, getState) => {
 }
 
 export const requestHours = (_time, _trainee, _location, _subject, _date, _pictureName) => (dispatch, getState) => {
-  var docRef    = firestore.collection('requests');
-  const _uid    = getState().firebaseAuth.uid;
-  const _email  = getState().firebaseAuth.userEmail;
-  const _path   = 'requests/' + _uid + '/' + _pictureName;
-
-  var fireStorageRef  = fireStorage.ref().child(_path);
-  fireStorageRef.getDownloadURL().then((url) => {
-    docRef.add({
-      time:     _time,
-      trainee:  _trainee,
-      location: _location,
-      subject:  _subject,
-      day:      _date,
-      imgUrl:   url,
-      path:     _path,
-      uid:      _uid,
-      email:    _email
+  if(getState().app.offline) {
+    alert("Failed to create forum post. Must have internet connection.")
+  } else {
+    isAdminUpdate = false;
+    var docRef    = firestore.collection('requests');
+    const _uid    = getState().firebaseAuth.uid;
+    const _email  = getState().firebaseAuth.userEmail;
+    const _path   = 'requests/' + _uid + '/' + _pictureName;
+  
+    var fireStorageRef  = fireStorage.ref().child(_path);
+    fireStorageRef.getDownloadURL().then((url) => {
+      docRef.add({
+        time:     _time,
+        trainee:  _trainee,
+        location: _location,
+        subject:  _subject,
+        day:      _date,
+        imgUrl:   url,
+        path:     _path,
+        uid:      _uid,
+        email:    _email
+      }).then(()=> {
+        alert("Successfuly sent hours request for " + _time*60 + " minutes.\n"
+              + "If it is approved, it will update on your dashboard.");
+      }).catch((error) => {
+        alert(error);
+      });
     });
-  });
-
+  }
 }
 
 export const registerComp = (compName) => (dispatch, getState) => {
-  var docRef  = firestore.collection('competitions').doc(compName);
-  var uid     = getState().firebaseAuth.uid;
-  var email   = getState().firebaseAuth.userEmail;
-  docRef.get().then((doc) => {
-    if(doc.exists) {
-      var uidArr    = doc.data().uids;
-      var emailArr  = doc.data().emails;
-      uidArr.push(uid);
-      emailArr.push(email);
-      docRef.set({
-        uids:   uidArr,
-        emails: emailArr
-      });
-    } else {
-      docRef.set({
-        uids  : [uid],
-        emails: [email]
-      });
-    }
-  });
+  if(getState().app.offline) {
+    alert("Failed to register. Please establish internet connection.")
+  } else {
+    var docRef  = firestore.collection('competitions').doc(compName);
+    var uid     = getState().firebaseAuth.uid;
+    var email   = getState().firebaseAuth.userEmail;
+    docRef.get().then((doc) => {
+      if(doc.exists) {
+        var uidArr    = doc.data().uids;
+        var emailArr  = doc.data().emails;
+        uidArr.push(uid);
+        emailArr.push(email);
+        docRef.set({
+          uids:   uidArr,
+          emails: emailArr
+        }).then(()=> {
+          alert("Successfuly registered for " + compName + ".");
+        }).catch((error) => {
+          alert(error);
+        });
+      } else {
+        docRef.set({
+          uids  : [uid],
+          emails: [email]
+        }).then(()=> {
+          alert("Successfuly registered for " + compName + ".");
+        }).catch((error) => {
+          alert(error);
+        });
+      }
+    }).catch((error) => {
+      alert(error);
+    });
+  }
 }
 
 
 export const createForumPost = (_subject, _content) => (dispatch, getState) => {
-  var docRef      = firestore.collection('posts');
-  const userEmail = getState().firebaseAuth.userEmail;
-  docRef.add({
-    email:    userEmail,
-    subject:  _subject,
-    content:  _content
-  });
+  if(getState().app.offline) {
+    alert("Failed to create forum post. Please establish internet connection.")
+  } else {
+    var docRef      = firestore.collection('posts');
+    const userEmail = getState().firebaseAuth.userEmail;
+    docRef.add({
+      email:    userEmail,
+      subject:  _subject,
+      content:  _content
+    }).then(()=> {
+      alert("Successfuly posted forum with subject " + _subject + ".");
+    }).catch((error) => {
+      alert(error);
+    });
+  }
+
 }
diff --git a/src/actions/firebaseStorage.js b/src/actions/firebaseStorage.js
index 6828344..ad158f8 100644
--- a/src/actions/firebaseStorage.js
+++ b/src/actions/firebaseStorage.js
@@ -3,18 +3,22 @@ import { fireStorage } from '../firebase.js';
 export const UPDATE_PICTURE = 'UPDATE_PICTURE';
 
 export const uploadPicture = (file, uploader) => (dispatch, getState) => {
-    if(file) {
-      var fireStorageRef  =   fireStorage.ref('requests/' + getState().firebaseAuth.uid + '/' + file.name);
-
-      var task = fireStorageRef.put(file);
-    
-      task.on('state_changed', function(snapshot) {
-        var percentage  = (snapshot.bytesTransferred /
-        snapshot.totalBytes) * 100;
-        uploader.value  = percentage;
-      });
-
-      dispatch(updatePicture(file.name));
+    if(getState().app.offline) {
+        alert("Failed to upload image.\t Please establish internet connection and retry to upload photo.")
+    } else {
+        if(file) {
+            var fireStorageRef  =   fireStorage.ref('requests/' + getState().firebaseAuth.uid + '/' + file.name);
+      
+            var task = fireStorageRef.put(file);
+          
+            task.on('state_changed', function(snapshot) {
+              var percentage  = (snapshot.bytesTransferred /
+              snapshot.totalBytes) * 100;
+              uploader.value  = percentage;
+            });
+      
+            dispatch(updatePicture(file.name));
+          }
     }
 }
 
diff --git a/src/components/competition-element.js b/src/components/competition-element.js
index 67cc668..730b48e 100644
--- a/src/components/competition-element.js
+++ b/src/components/competition-element.js
@@ -84,7 +84,7 @@ class CompetitionElement extends LitElement {
   }
 
   registerComp() {
-    if(confirm('Are you sure you want to register for ' + this.name + '?')) {
+    if(confirm('Are you sure you want to register for ' + this.name.replace(/[0-9]/g, '') + '?')) {
       this.dispatchEvent(new CustomEvent('register-comp'));
     }
   }
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() {