Created fourm page and itnegrated it. Also,

4 files changed, 154 insertions, 1 deletions

diff --git a/src/actions/app.js b/src/actions/app.js
index d58c7ff..3a5f9fb 100644
--- a/src/actions/app.js
+++ b/src/actions/app.js
@@ -40,6 +40,9 @@ const loadPage = (page) => (dispatch) => {
     case 'tutor':
       import('../components/mao-tutoring.js');
       break;
+    case 'fourms':
+      import('../components/mao-fourms.js');
+      break;
     case 'account':
       import('../components/mao-account.js');
       break;
diff --git a/src/components/mao-app.js b/src/components/mao-app.js
index f1c0c57..5a02542 100644
--- a/src/components/mao-app.js
+++ b/src/components/mao-app.js
@@ -198,6 +198,7 @@ class MaoApp extends connect(store)(LitElement) {
         <a selected?="${_page === 'home'}" href="/home">Home</a>
         <a selected?="${_page === 'tutor'}" href="/tutor">Tutoring</a>
         <a selected?="${_page === 'compete'}" href="/compete">Compete</a>
+        <a selected?="${_page === 'fourms'}" href="/fourms">Fourms</a>
         <a selected?="${_page === 'account'}" href="/account">Account</a>
       </nav>
     </app-header>
@@ -209,6 +210,8 @@ class MaoApp extends connect(store)(LitElement) {
         <a selected?="${_page === 'home'}" href="/home">Home</a>
         <a selected?="${_page === 'tutor'}" href="/tutor">Tutoring</a>
         <a selected?="${_page === 'compete'}" href="/compete">Compete</a>
+        <a selected?="${_page === 'compete'}" href="/compete">Compete</a>
+        <a selected?="${_page === 'fourms'}" href="/fourms">Fourms</a>
         <a selected?="${_page === 'account'}" href="/account">Account</a>
       </nav>
     </app-drawer>
@@ -219,6 +222,7 @@ class MaoApp extends connect(store)(LitElement) {
       <mao-tutoring class="page" active?="${_page === 'tutor'}"></mao-tutoring>
       <mao-competitions class="page" active?="${_page === 'compete'}"></mao-competitions>
       <mao-account class="page" active?="${_page === 'account'}"></mao-account>
+      <mao-fourms class="page" active?="${_page === 'fourms'}"></mao-fourms>
       <my-view404 class="page" active?="${_page === 'view404'}"></my-view404>
     </main>
 
diff --git a/src/components/mao-fourms.js b/src/components/mao-fourms.js
new file mode 100644
index 0000000..c0fd509
--- /dev/null
+++ b/src/components/mao-fourms.js
@@ -0,0 +1,146 @@
+/**
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+import { html } from '@polymer/lit-element';
+import { PageViewElement } from './page-view-element.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+
+// This element is connected to the Redux store.
+import { store } from '../store.js';
+
+//These are the actions needed by this element.
+import { requestHours } from '../actions/firebase.js';
+
+// We are lazy loading its reducer.
+import firebase from '../reducers/firebase.js';
+
+store.addReducers({
+  firebase
+});
+
+// These are the shared styles needed by this element.
+import { SharedStyles }       from './shared-styles.js';
+import { ButtonSharedStyles } from './button-shared-styles.js'
+
+// Import paper elements
+import '@polymer/paper-input/paper-input.js';
+import '@polymer/paper-card/paper-card.js';
+import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
+import '@polymer/paper-item/paper-item.js';
+import '@polymer/paper-slider/paper-slider.js';
+import '@polymer/paper-button/paper-button.js';
+
+// Import other customElements
+import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';
+
+class MaoFourms extends connect(store)(PageViewElement) {
+  _render(props) {
+    return html`
+      ${SharedStyles}
+      ${ButtonSharedStyles}
+
+      <style>
+      .title {
+        grid-area: title;
+      }
+
+      .tutorCard, .hoursCard {
+        background-color: #f7f7f7;
+        padding:          1px;
+      }
+
+      .hours-grid {
+        display:  grid;
+        grid-gap: 10px;
+
+        grid-template-areas:
+                        "title"
+                        "item1"
+                        "item2";
+      }
+
+      .approved-card {
+        grid-area:  item1;
+
+        background-color: #b7e1cd;
+        margin:           1px;
+        padding:          0 10px 15px 10px;
+      }
+
+      .unapproved-card {
+        grid-area:  item2;
+
+        background-color: #fce8b2;
+        margin:           1px;
+        padding:          0 10px 15px 10px;
+      }
+
+      .submit-hours {
+        width: 100%;
+      }
+
+      paper-card {
+        --paper-card-background-color: #f7f7f7;
+        display: block;
+      }
+
+      paper-button {
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+      }
+
+      h3 {
+        text-align: center;
+      }
+
+      #datePicker {
+        margin-top: 10px;
+      }
+
+      @media (min-width: 460px) {
+        .hours-grid {
+          grid-template-areas:
+                          "title    title"
+                          "item1    item2";
+        }
+
+        .tutorCard, .hoursCard {
+          padding:  1em;
+        }
+      }
+
+      </style>
+
+      <section>
+      </section>
+    `;
+  }
+
+  static get properties() { return {
+    // This is the data from the store.
+    signedIn:           Boolean,
+    authMessage:        String,
+    hours:              Number,
+    requestedHours:     Number
+  }}
+
+  _stateChanged(state) {
+    this.hours          = state.firebase.hours;
+    this.requestedHours = state.firebase.requestedHours;
+    this.signedIn       = state.firebase.initialized;
+    this.authMessage    = state.firebase.authMessage;
+
+    this.sumbitFieldsOpened = false;
+  }
+
+}
+
+window.customElements.define('mao-fourms', MaoFourms);
diff --git a/src/components/mao-tutoring.js b/src/components/mao-tutoring.js
index 04b7b1d..e325f36 100644
--- a/src/components/mao-tutoring.js
+++ b/src/components/mao-tutoring.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 { signIn, signOut, requestHours } from '../actions/firebase.js';
+import { requestHours } from '../actions/firebase.js';
 
 // We are lazy loading its reducer.
 import firebase from '../reducers/firebase.js';