From 50d3359e23c838ad02922e5257374a3eafc4445e Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Sat, 23 Apr 2016 16:18:41 +0200
Subject: [PATCH] Add an about page

---
 public/components/about.js        | 15 +++++++++
 public/components/app.js          | 51 +++++++++++++++++++++++++++----
 public/components/authenticate.js |  3 +-
 3 files changed, 62 insertions(+), 7 deletions(-)
 create mode 100644 public/components/about.js

diff --git a/public/components/about.js b/public/components/about.js
new file mode 100644
index 0000000..5f0fed0
--- /dev/null
+++ b/public/components/about.js
@@ -0,0 +1,15 @@
+'use strict';
+var React = require('react');
+
+var About = React.createClass({
+    render: function () {
+        return (
+            <div>
+                <h2>About</h2>
+                <p>This is an about page.</p>
+            </div>
+        );
+    }
+});
+
+module.exports = About;
diff --git a/public/components/app.js b/public/components/app.js
index 7b86cdc..6cbe617 100644
--- a/public/components/app.js
+++ b/public/components/app.js
@@ -4,6 +4,7 @@ var $ = require('jquery');
 
 var DuplicateFinderBox = require('./duplicate-finder-box');
 var Authenticate = require('./authenticate');
+var About = require('./about');
 
 /**
  * Obtains parameters from the hash of the URL
@@ -29,7 +30,11 @@ var App = React.createClass({
             access_token: access_token,
             refresh_token: refresh_token,
             playlists: null,
-            playlistsLoading: true
+            playlistsLoading: true,
+            activeTab: {
+                finder: true,
+                about: false
+            }
         };
     },
     getPlaylists: function () {
@@ -72,22 +77,56 @@ var App = React.createClass({
             this.getPlaylists();
         }
     },
+    showFinder: function (e) {
+        e.preventDefault();
+        this.setState({
+            activeTab: {
+                finder: true,
+                about: false
+            }
+        });
+    },
+    showAbout: function (e) {
+        e.preventDefault();
+        this.setState({
+            activeTab: {
+                finder: false,
+                about: true
+            }
+        });
+    },
     render: function () {
         var auth = {
             access_token: this.state.access_token,
             refresh_token: this.state.refresh_token
         };
-        var content = <p>Please log in with Spotify :)</p>;
-        if (this.isLoggedIn()) {
-            var playlistsLoading = this.state.playlistsLoading;
+        var content;
+        if (this.state.activeTab.finder) {
             content = (
-                <DuplicateFinderBox playlistsLoading={playlistsLoading} auth={auth} playlists={this.state.playlists}/>
+                <div>
+                    <h1>Login</h1>
+                    <p>Please <a href="/login">login with Spotify</a> first :)</p>
+                </div>
             );
+            if (this.isLoggedIn()) {
+                var playlistsLoading = this.state.playlistsLoading;
+                content = (
+                    <DuplicateFinderBox playlistsLoading={playlistsLoading} auth={auth}
+                                        playlists={this.state.playlists}/>
+                );
+            }
+        }
+        else if (this.state.activeTab.about) {
+            content = (<About />);
+        }
+        else {
+            content = <p>Error...</p>
         }
 
         return (
             <div>
-                <Authenticate auth={auth} refreshAuth={this.refreshAuth}/>
+                <Authenticate activeTab={this.state.activeTab} showFinder={this.showFinder} showAbout={this.showAbout}
+                              auth={auth} refreshAuth={this.refreshAuth}/>
                 <div className="container-fluid">
                     {content}
                 </div>
diff --git a/public/components/authenticate.js b/public/components/authenticate.js
index 623e494..7e30cac 100644
--- a/public/components/authenticate.js
+++ b/public/components/authenticate.js
@@ -56,7 +56,8 @@ var Authenticate = React.createClass({
                 </Navbar.Header>
                 <Navbar.Collapse>
                     <Nav>
-                        <NavItem eventKey={1} href="/" active>Finder</NavItem>
+                        <NavItem eventKey={1} href="#" active={this.props.activeTab.finder} onClick={this.props.showFinder}>Finder</NavItem>
+                        <NavItem eventKey={1} href="#" active={this.props.activeTab.about} onClick={this.props.showAbout}>About</NavItem>
                     </Nav>
                     {auth}
                 </Navbar.Collapse>