Add an about page

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;

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>;
+        var content;
-        if (this.isLoggedIn()) {
+        if (this.state.activeTab.finder) {
-            var playlistsLoading = this.state.playlistsLoading;
             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>

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>