Profile page!

quran · Aug 18, 2016 · 468597e · 468597e
1 parent ef0545e
commit 468597e
Show file tree

Hide file tree

Showing 18 changed files with 294 additions and 79 deletions.
diff --git a/src/client.js b/src/client.js
@@ -50,7 +50,7 @@ if (typeof window !== 'undefined') {
   });
 }
 
-match({ history, routes: routes() }, (error, redirectLocation, renderProps) => {
+match({ history, routes: routes(store) }, (error, redirectLocation, renderProps) => {
   const component = (
     <Router
       {...renderProps}

diff --git a/src/components/FacebookButton/index.js b/src/components/FacebookButton/index.js
@@ -39,7 +39,7 @@ export default class FacebookLogin extends Component {
     size: 'md',
     fields: 'first_name,name,picture',
     cssClass: 'btn btn-facebook btn-',
-    version: '2.5'
+    version: '2.7'
   };
 
   componentDidMount() {

diff --git a/src/components/IndexHeader/Nav/index.js b/src/components/IndexHeader/Nav/index.js
@@ -1,9 +1,11 @@
 import React, { Component, PropTypes } from 'react';
 import Link from 'react-router/lib/Link';
+import { connect } from 'react-redux';
 
-class IndexHeaderNav extends Component {
+
+export class IndexHeaderNav extends Component {
   static propTypes = {
-    navlink: PropTypes.bool
+    user: PropTypes.object
   };
 
   state = {
@@ -17,33 +19,9 @@ class IndexHeaderNav extends Component {
   }
 
   links() {
+    const { user } = this.props;
     let classNames = `links ${this.state.open ? 'open' : ''}`;
 
-    if (this.props.navlink === false) {
-      return (
-        <ul className={classNames}>
-          <li>
-            <Link to="/apps" data-metrics-event-name="IndexHeader:Link:Mobile">
-              Mobile
-            </Link>
-          </li>
-          <li>
-            <a href="https://quran.zendesk.com/hc/en-us/articles/210090626-Development-help" target="_blank" data-metrics-event-name="IndexHeader:Link:Developer">
-              Developers
-            </a>
-          </li>
-          <li>
-            <a href="http://legacy.quran.com" data-metrics-event-name="IndexHeader:Link:Legacy">Legacy Quran.com</a>
-          </li>
-          <li>
-            <a href="https://quran.zendesk.com/hc/en-us" data-metrics-event-name="IndexHeader:Link:Contact">
-              Contact us
-            </a>
-          </li>
-        </ul>
-      );
-    }
-
     return (
       <ul className={classNames}>
         <li>
@@ -69,6 +47,14 @@ class IndexHeaderNav extends Component {
             Contact us
           </a>
         </li>
+        {
+          user &&
+            <li>
+              <Link to="/profile" data-metrics-event-name="IndexHeader:Link:Profile">
+                {user.firstName}
+              </Link>
+            </li>
+        }
       </ul>
     );
   }
@@ -82,4 +68,8 @@ class IndexHeaderNav extends Component {
   }
 }
 
-export default IndexHeaderNav;
+export default connect(
+  state => ({
+    user: state.auth.user
+  })
+)(IndexHeaderNav);
diff --git a/src/components/IndexHeader/index.js b/src/components/IndexHeader/index.js
@@ -2,16 +2,15 @@ import React, { Component, PropTypes } from 'react';
 import Link from 'react-router/lib/Link';
 
 import SearchInput from '../SearchInput';
-import IndexHeaderNav from './Nav';
+import Nav from './Nav';
 
 import debug from '../../helpers/debug';
 
 const logo = require('../../../static/images/logo-lg-w.png');
 
 export default class IndexHeader extends Component {
   static propTypes = {
-    noSearch: PropTypes.bool,
-    navlink: PropTypes.any
+    noSearch: PropTypes.bool
   };
 
   renderSearch() {
@@ -29,7 +28,7 @@ export default class IndexHeader extends Component {
 
     return (
       <div className="index-header" style={{backgroundColor: '#2CA4AB'}}>
-        <IndexHeaderNav navlink={this.props.navlink} />
+        <Nav />
         <div className="container">
           <div className="row">
             <div className="col-md-10 col-md-offset-1 text-center">

diff --git a/src/components/QuranNav/index.js b/src/components/QuranNav/index.js
@@ -0,0 +1,76 @@
+import React, { PropTypes } from 'react';
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
+import Navbar from 'react-bootstrap/lib/Navbar';
+import Nav from 'react-bootstrap/lib/Nav';
+import NavDropdown from 'react-bootstrap/lib/NavDropdown';
+import MenuItem from 'react-bootstrap/lib/MenuItem';
+import NavItem from 'react-bootstrap/lib/NavItem';
+import Image from 'react-bootstrap/lib/Image';
+const Header = Navbar.Header;
+const Collapse = Navbar.Collapse;
+const Toggle = Navbar.Toggle;
+import { connect } from 'react-redux';
+
+const styles = require('./style.scss');
+
+export const QuranNav = ({ user }) => (
+  <Navbar inverse fluid className={styles.nav}>
+    <Header>
+      <Toggle />
+    </Header>
+    <Collapse>
+      <Nav />
+      <Nav pullRight>
+        <LinkContainer to="/apps" data-metrics-event-name="IndexHeader:Link:Mobile">
+          <NavItem>
+            Mobile
+          </NavItem>
+        </LinkContainer>
+        <NavItem href="https://quran.zendesk.com/hc/en-us/articles/210090626-Development-help" target="_blank" data-metrics-event-name="IndexHeader:Link:Developer">
+          Developers
+        </NavItem>
+        <NavItem href="http://legacy.quran.com" data-metrics-event-name="IndexHeader:Link:Legacy">
+          Legacy Quran.com
+        </NavItem>
+        <LinkContainer to="/donations" data-metrics-event-name="IndexHeader:Link:Contribute">
+          <NavItem>
+            Contribute
+          </NavItem>
+        </LinkContainer>
+        <NavItem href="https://quran.zendesk.com/hc/en-us" data-metrics-event-name="IndexHeader:Link:Contact">
+          Contact us
+        </NavItem>
+        {
+          user &&
+            <NavDropdown
+              title={
+                <span className={styles.name}>
+                  <Image src={user.image} className={styles.image} circle />
+                  {user.firstName}
+                </span>
+              }
+              id="user-dropdown"
+            >
+              <LinkContainer
+                to="/profile"
+                data-metrics-event-name="IndexHeader:Link:Profile"
+              >
+                <MenuItem eventKey={3.1}>Profile</MenuItem>
+              </LinkContainer>
+              <MenuItem eventKey={3.3}>Logout</MenuItem>
+            </NavDropdown>
+        }
+      </Nav>
+    </Collapse>
+  </Navbar>
+);
+
+QuranNav.propTypes = {
+  user: PropTypes.object
+};
+
+export default connect(
+  state => ({
+    user: state.auth.user
+  })
+)(QuranNav);
diff --git a/src/components/QuranNav/style.scss b/src/components/QuranNav/style.scss
@@ -0,0 +1,27 @@
+$navbar-height: 40px;
+.nav {
+  min-height: $navbar-height;
+  border-radius: 0px;
+  margin-bottom: 0px;
+
+  :global(.navbar-nav > li > a) {
+    padding-top: ($navbar-height - 20) / 2;
+    padding-bottom: ($navbar-height - 20) / 2;
+  }
+
+  &.transparent{
+    background: transparent;
+  }
+}
+
+.name{
+  padding-left: 25px;
+}
+
+.image{
+  width: 30px;
+  position: absolute;
+  left: 5px;
+  top: 50%;
+  transform: translateY(-50%);
+}
diff --git a/src/containers/Profile/index.js b/src/containers/Profile/index.js
@@ -0,0 +1,45 @@
+import React, { Component, PropTypes } from 'react';
+import Helmet from 'react-helmet';
+import { connect } from 'react-redux';
+import Grid from 'react-bootstrap/lib/Grid';
+import Row from 'react-bootstrap/lib/Row';
+import Col from 'react-bootstrap/lib/Col';
+import Image from 'react-bootstrap/lib/Image';
+
+import QuranNav from 'components/QuranNav';
+
+const styles = require('./style.scss');
+
+@connect(
+  state => ({
+    user: state.auth.user
+  })
+)
+export default class Profile extends Component {
+  static propTypes = {
+    user: PropTypes.object
+  };
+
+  something() {}
+  render() {
+    const { user } = this.props;
+
+    return (
+      <div>
+        <Helmet title="The Noble Quran - القرآن الكريم" titleTemplate="%s" />
+        <QuranNav />
+        <div className={styles.header} />
+        <Grid>
+          <Row>
+            <Col md={12} className="text-center">
+              <Image src={`${user.image}?type=large`} circle className={styles.image} />
+              <h2>
+                {user.name}
+              </h2>
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+    );
+  }
+}
diff --git a/src/containers/Profile/style.scss b/src/containers/Profile/style.scss
@@ -0,0 +1,13 @@
+@import '../../styles/variables.scss';
+
+.header{
+  background: $brand-primary;
+  height: 7rem;
+  padding-top: 15px;
+}
+
+.image{
+  margin: -70px auto 40px;
+  display: block;
+  height: 10rem;
+}
diff --git a/src/containers/Surah/Header/index.js b/src/containers/Surah/Header/index.js
@@ -14,7 +14,7 @@ const SurahHeader = ({ surah, children }) => {
   debug('component:SurahHeader', 'Render');
 
   return (
-    <Navbar className="montserrat" fixedTop fluid>
+    <Navbar className="montserrat surah" fixedTop fluid>
       <Header>
         <Brand>
           <Title surah={surah} />

diff --git a/src/helpers/ApiClient.js b/src/helpers/ApiClient.js
@@ -1,6 +1,7 @@
 import superagent from 'superagent';
 import qs from 'qs';
 import { decamelizeKeys } from 'humps';
+import cookie from 'react-cookie';
 
 import config from '../config';
 
@@ -33,6 +34,10 @@ export default class {
           }));
         }
 
+        if (cookie.load('accessToken')) {
+          request.set('Authorization', `Bearer ${cookie.load('accessToken')}`);
+        }
+
         if (__SERVER__ && req.get('cookie')) {
           request.set('cookie', req.get('cookie'));
         }

diff --git a/src/redux/actions/auth.js b/src/redux/actions/auth.js
@@ -1,15 +1,25 @@
-import { FACEBOOK, FACEBOOK_SUCCESS, FACEBOOK_FAILURE, LOGOUT_SUCCESS } from '../constants/auth';
+import cookie from 'react-cookie';
+
+import {
+  FACEBOOK,
+  FACEBOOK_SUCCESS,
+  FACEBOOK_FAILURE,
+  LOGOUT_SUCCESS,
+  LOAD,
+  LOAD_SUCCESS,
+  LOAD_FAILURE
+} from '../constants/auth';
 
 export function isLoaded(globalState) {
   return globalState.auth && globalState.auth.loaded;
 }
 
-// export function load() {
-//   return {
-//     types: [LOAD, LOAD_SUCCESS, LOAD_FAIL],
-//     promise: (client) => client.get('/users/load_user')
-//   };
-// }
+export function load() {
+  return {
+    types: [LOAD, LOAD_SUCCESS, LOAD_FAILURE],
+    promise: (client) => client.get('/onequran/api/v1/auth/current')
+  };
+}
 
 export function facebook() {
   return {
@@ -23,7 +33,7 @@ export function logout() {
     type: LOGOUT_SUCCESS
   };
 }
-//
-// export function hasAccessToken() {
-//   return !!cookie.load('accessToken');
-// }
+
+export function hasAccessToken() {
+  return !!cookie.load('accessToken');
+}
diff --git a/src/redux/constants/auth.js b/src/redux/constants/auth.js
@@ -2,3 +2,6 @@ export const FACEBOOK = '@@quran/auth/FACEBOOK';
 export const FACEBOOK_SUCCESS = '@@quran/auth/FACEBOOK_SUCCESS';
 export const FACEBOOK_FAILURE = '@@quran/auth/FACEBOOK_FAILURE';
 export const LOGOUT_SUCCESS = '@@quran/auth/LOGOUT_SUCCESS';
+export const LOAD = '@@quran/auth/LOAD';
+export const LOAD_SUCCESS = '@@quran/auth/LOAD_SUCCESS';
+export const LOAD_FAILURE = '@@quran/auth/LOAD_FAILURE';