From 4e96d92616f45ffdab6227eadfb5727924cf7ce8 Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Thu, 7 Feb 2019 12:21:23 +0000
Subject: [PATCH] Add example cover

---
 example.config.js                               |  2 +-
 src/components/Dashboard.jsx                    |  4 +++-
 src/components/presentational/covers/Default.js | 16 ++++++++++++++++
 src/js/utilities.js                             |  2 +-
 src/scss/cover.scss                             |  8 ++++++++
 5 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 src/components/presentational/covers/Default.js

diff --git a/example.config.js b/example.config.js
index 176e5e2..27ae9e4 100644
--- a/example.config.js
+++ b/example.config.js
@@ -11,7 +11,7 @@ module.exports = {
   INCOMING_DATETIME_FORMAT: '%m/%d/%YT%H:%M',
   MAPBOX_TOKEN: 'pk.EXAMPLE_MAPBOX_TOKEN',
   features: {
-    USE_COVER: true,
+    USE_COVER: false,
     USE_TAGS: false,
     USE_SEARCH: false,
     USE_SITES: true,
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 778d1a4..3f971f8 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -14,6 +14,7 @@ import InfoPopUp from './InfoPopup.jsx'
 import Timeline from './Timeline.jsx'
 import Notification from './Notification.jsx'
 import StaticPage from './StaticPage'
+import DefaultCover from './presentational/covers/Default'
 
 import { parseDate } from '../js/utilities'
 
@@ -160,8 +161,9 @@ class Dashboard extends React.Component {
         ) : null}
         {process.env.features.USE_COVER && (
           <StaticPage showing={app.flags.isCover}>
-            {/* enable USE_COVER in config.js features, and put content here if you want a header */}
+            {/* enable USE_COVER in config.js features, and customise your header */}
             {/* pass 'actions.toggleCover' as a prop to your custom header */}
+            <DefaultCover showAppHandler={actions.toggleCover} />
           </StaticPage>
         )}
         <LoadingOverlay
diff --git a/src/components/presentational/covers/Default.js b/src/components/presentational/covers/Default.js
new file mode 100644
index 0000000..e8b042d
--- /dev/null
+++ b/src/components/presentational/covers/Default.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default ({ showAppHandler }) => (
+  <div className='default-cover-container'>
+    <h3>Here's an example cover.</h3>
+    <p>Replace it with a more descriptive one:</p>
+    <ul>
+      <li>Create a new component in <code>components/presentational/covers</code>.</li>
+      <li>Import in in <code>components/Dashboard.jsx</code> in the <code>render</code> function.</li>
+    </ul>
+    <br /><br />
+    <div>
+      <button onClick={showAppHandler}>Go to app</button>
+    </div>
+  </div>
+)
diff --git a/src/js/utilities.js b/src/js/utilities.js
index b739bae..8d04788 100644
--- a/src/js/utilities.js
+++ b/src/js/utilities.js
@@ -132,7 +132,7 @@ export function toggleFlagAC (flag) {
     ...appState,
     flags: {
       ...appState.flags,
-      isCover: !appState.flags[flag]
+      [flag]: !appState.flags[flag]
     }
   })
 }
diff --git a/src/scss/cover.scss b/src/scss/cover.scss
index ab1d94a..a033eb7 100644
--- a/src/scss/cover.scss
+++ b/src/scss/cover.scss
@@ -15,4 +15,12 @@
     top: 0;
     left: 0;
   }
+}
+
+.default-cover-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
 }
\ No newline at end of file