Working on creating admin page. Having issues with keeping the page hidden in the toolbar.

2 files changed, 91 insertions, 2 deletions

diff --git a/src/components/mao-admin.js b/src/components/mao-admin.js
new file mode 100644
index 0000000..8cc93ca
--- /dev/null
+++ b/src/components/mao-admin.js
@@ -0,0 +1,72 @@
+/**
+@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 {} 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-slider/paper-slider.js';
+import '@polymer/paper-button/paper-button.js';
+
+class MaoAdmin extends connect(store)(PageViewElement) {
+  _render(props) {
+    return html`
+      ${SharedStyles}
+      ${ButtonSharedStyles}
+
+      <style>
+
+      </style>
+
+
+
+      <section hidden="${!props.isAdmin}">
+
+      Admin Stuff
+
+      </section>
+    `;
+  }
+
+  static get properties() { return {
+    // This is the data from the store.
+    signedIn: Boolean,
+    isAdmin:  Boolean
+  }}
+
+  _stateChanged(state) {
+    this.signedIn = state.firebase.initialized;
+    this.isAdmin  = state.firebase.isAdmin;
+  }
+
+
+}
+
+window.customElements.define('mao-admin', MaoAdmin);
diff --git a/src/components/mao-app.js b/src/components/mao-app.js
index 55e27b6..5101ab7 100644
--- a/src/components/mao-app.js
+++ b/src/components/mao-app.js
@@ -27,6 +27,13 @@ import {
   updateLayout
 } from '../actions/app.js';
 
+// We are lazy loading its reducer.
+import firebase from '../reducers/firebase.js';
+
+store.addReducers({
+  firebase
+});
+
 // These are the elements needed by this element.
 import '@polymer/app-layout/app-drawer/app-drawer.js';
 import '@polymer/app-layout/app-header/app-header.js';
@@ -36,7 +43,7 @@ import { menuIcon } from './my-icons.js';
 import './snack-bar.js';
 
 class MaoApp extends connect(store)(LitElement) {
-  _render({appTitle, _page, _drawerOpened, _snackbarOpened, _offline}) {
+  _render({appTitle, _page, _drawerOpened, _snackbarOpened, _offline, _isAdmin}) {
     // Anything that's related to rendering should be done in here.
     return html`
     <style>
@@ -200,6 +207,8 @@ class MaoApp extends connect(store)(LitElement) {
         <a selected?="${_page === 'compete'}" href="/compete">Compete</a>
         <a selected?="${_page === 'fourms'}" href="/fourms">Fourms</a>
         <a selected?="${_page === 'account'}" href="/account">Account</a>
+        <a hidden="${!_isAdmin}"
+           selected?="${_page === 'admin'}" href="/admin">Admin</a>
       </nav>
     </app-header>
 
@@ -212,6 +221,8 @@ class MaoApp extends connect(store)(LitElement) {
         <a selected?="${_page === 'compete'}" href="/compete">Compete</a>
         <a selected?="${_page === 'fourms'}" href="/fourms">Fourms</a>
         <a selected?="${_page === 'account'}" href="/account">Account</a>
+        <a hidden="${!_isAdmin}"
+           selected?="${_page === 'admin'}" href="/admin">Admin</a>
       </nav>
     </app-drawer>
 
@@ -222,6 +233,8 @@ class MaoApp extends connect(store)(LitElement) {
       <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>
+      <mao-admin hidden="${!_isAdmin}"
+                  class="page" active?="${_page === 'admin'}"></mao-admin>
       <my-view404 class="page" active?="${_page === 'view404'}"></my-view404>
     </main>
 
@@ -240,7 +253,9 @@ class MaoApp extends connect(store)(LitElement) {
       _page: String,
       _drawerOpened: Boolean,
       _snackbarOpened: Boolean,
-      _offline: Boolean
+      _offline: Boolean,
+
+      _isAdmin: Boolean
     }
   }
 
@@ -274,6 +289,8 @@ class MaoApp extends connect(store)(LitElement) {
     this._offline = state.app.offline;
     this._snackbarOpened = state.app.snackbarOpened;
     this._drawerOpened = state.app.drawerOpened;
+
+    this._isAdmin  = state.firebase.isAdmin;
   }
 }