From 7f8bf8a2e2b3424ece6f3263d3211d39514923e6 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Sat, 1 Apr 2017 02:51:15 -0400
Subject: [PATCH] Add Welcome screen

---
 ui/js/component/modal-page.js      | 18 ++++++++++++++++
 ui/js/component/welcome.js         | 24 ++++++++++++++++++++++
 ui/js/page/discover.js             | 19 +++++++++++++++++
 ui/scss/all.scss                   |  1 +
 ui/scss/component/_modal-page.scss | 33 ++++++++++++++++++++++++++++++
 5 files changed, 95 insertions(+)
 create mode 100644 ui/js/component/modal-page.js
 create mode 100644 ui/js/component/welcome.js
 create mode 100644 ui/scss/component/_modal-page.scss

diff --git a/ui/js/component/modal-page.js b/ui/js/component/modal-page.js
new file mode 100644
index 000000000..d0def4b82
--- /dev/null
+++ b/ui/js/component/modal-page.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactModal from 'react-modal';
+
+export const ModalPage = React.createClass({
+  render: function() {
+    return (
+      <ReactModal onCloseRequested={this.props.onAborted || this.props.onConfirmed} {...this.props}
+                  className={(this.props.className || '') + ' modal-page'}
+                  overlayClassName={(this.props.overlayClassName || '') + ' modal-page-overlay'}>
+        <div className="modal-page__content">
+          {this.props.children}
+        </div>
+      </ReactModal>
+    );
+  }
+});
+
+export default ModalPage;
\ No newline at end of file
diff --git a/ui/js/component/welcome.js b/ui/js/component/welcome.js
new file mode 100644
index 000000000..885bfaf3e
--- /dev/null
+++ b/ui/js/component/welcome.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import ModalPage from './modal-page.js';
+import {Link} from '../component/link.js';
+
+export const Welcome = React.createClass({
+  propTypes: {
+    onDone: React.PropTypes.func.isRequired,
+  },
+  handleOKClicked: function() {
+    this.props.onDone();
+  },
+  render: function() {
+    return (
+      <ModalPage contentLabel="Welcome to LBRY" {...this.props}>
+        <h1>Welcome to LBRY</h1>
+        Content will go here...
+        <section>
+          <Link button="primary" label="OK" onClick={this.handleOKClicked} />
+        </section>
+      </ModalPage>
+    );
+  }
+});
+
diff --git a/ui/js/page/discover.js b/ui/js/page/discover.js
index 678310338..a53d55895 100644
--- a/ui/js/page/discover.js
+++ b/ui/js/page/discover.js
@@ -5,6 +5,7 @@ import {FileTile} from '../component/file-tile.js';
 import {Link} from '../component/link.js';
 import {ToolTip} from '../component/tooltip.js';
 import {BusyMessage} from '../component/common.js';
+import {Welcome} from '../component/welcome.js';
 
 var fetchResultsStyle = {
     color: '#888',
@@ -105,6 +106,10 @@ var FeaturedContent = React.createClass({
 var DiscoverPage = React.createClass({
   userTypingTimer: null,
 
+  propTypes: {
+    showWelcome: React.PropTypes.bool.isRequired,
+  },
+
   componentDidUpdate: function() {
     if (this.props.query != this.state.query)
     {
@@ -112,6 +117,12 @@ var DiscoverPage = React.createClass({
     }
   },
 
+  getDefaultProps: function() {
+    return {
+      showWelcome: false,
+    }
+  },
+
   componentWillReceiveProps: function(nextProps, nextState) {
     if (nextProps.query != nextState.query)
     {
@@ -128,6 +139,12 @@ var DiscoverPage = React.createClass({
     lighthouse.search(query).then(this.searchCallback);
   },
 
+  handleWelcomeDone: function() {
+    this.setState({
+      welcomeComplete: true,
+    });
+  },
+
   componentWillMount: function() {
     document.title = "Discover";
     if (this.props.query) {
@@ -138,6 +155,7 @@ var DiscoverPage = React.createClass({
 
   getInitialState: function() {
     return {
+      welcomeComplete: false,
       results: [],
       query: this.props.query,
       searching: ('query' in this.props) && (this.props.query.length > 0)
@@ -161,6 +179,7 @@ var DiscoverPage = React.createClass({
         { !this.state.searching && this.props.query && this.state.results.length ? <SearchResults results={this.state.results} /> : null }
         { !this.state.searching && this.props.query && !this.state.results.length ? <SearchNoResults query={this.props.query} /> : null }
         { !this.props.query && !this.state.searching ? <FeaturedContent /> : null }
+        <Welcome isOpen={this.props.showWelcome && !this.state.welcomeComplete} onDone={this.handleWelcomeDone} />
       </main>
     );
   }
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index 0616bdf4b..0c58b94df 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -11,6 +11,7 @@
 @import "component/_tooltip.scss";
 @import "component/_load-screen.scss";
 @import "component/_channel-indicator.scss";
+@import "component/_modal-page.scss";
 @import "page/_developer.scss";
 @import "page/_watch.scss";
 @import "page/_reward.scss";
diff --git a/ui/scss/component/_modal-page.scss b/ui/scss/component/_modal-page.scss
new file mode 100644
index 000000000..1acc41790
--- /dev/null
+++ b/ui/scss/component/_modal-page.scss
@@ -0,0 +1,33 @@
+.modal-page-overlay {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background-color: rgba(255, 255, 255, 0.74902);
+  z-index: 9999;
+}
+
+.modal-page {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  border: 1px solid rgb(204, 204, 204);
+  background: rgb(255, 255, 255);
+  overflow: auto;
+  border-radius: 4px;
+  outline: none;
+  padding: 36px;
+
+  top: 25px;
+  left: 25px;
+  right: 25px;
+  bottom: 25px;
+}