Merge pull request Fitomo#86 from milkpatron/master

Update

src/components/App/appIndex.js

@@ -1,15 +1,8 @@
 import { connect } from 'react-redux';
 import App from './appPresenter';
 
-function mapStateToProps(state) {
-  const currentUserId = state.user.id;
-  const user = state.user;
-  const auth = state.isAuth;
-  return {
-    currentUserId,
-    user,
-    auth,
-  };
+function mapStateToProps({ user, isAuth }) {
+  return { user, isAuth };
 }
 
 export default connect(mapStateToProps)(App);

src/components/App/appPresenter.js

@@ -12,6 +12,10 @@ import {
   footerActive,
   copyright,
   aboutUs,
+  landing,
+  loginContainer,
+  fitbitLogin,
+  jawboneLogin,
 } from '../../css/main.css';
 
 class App extends Component {
@@ -47,10 +51,10 @@ class App extends Component {
   }
 
   render() {
-    const { auth, children, history } = this.props;
+    const { isAuth, children, history, user } = this.props;
     const { isSticky, isFooter, onFooter } = this;
-    // const authCheck = (auth === 'false'); // disable auth for development purpose; comment this out in production
-    const authCheck = (auth === 'true' || localStorage.getItem('auth') === 'true' && this.props.user.length !== 0); // uncomment this in production
+    // const authCheck = (isAuth === 'false'); // disable auth for development purpose; comment this out in production
+    const authCheck = (isAuth === 'true' || localStorage.getItem('auth') === 'true' && user.length !== 0); // uncomment this in production
     const childrenWithProps = Children.map(children, (child) => cloneElement(child, { isSticky })); // passing props to child components
     const classnames = `${container} ${isSticky}`; // add multiple class names
     return (
@@ -77,9 +81,16 @@ class App extends Component {
           </div>
         }
         {!authCheck &&
-          <div>
-            <a href="/auth/fitbit">Fitbit</a>
-            <a href="/auth/jawbone">Jawbone</a>
+          <div className={landing}>
+            <h1>Welcome to Fitomo</h1>
+            <div className={loginContainer}>
+              <div className={fitbitLogin}>
+                <a href="/auth/fitbit"><div>Sign in with Fitbit</div></a>
+              </div>
+              <div className={jawboneLogin}>
+                <a href="/auth/jawbone"><div>Sign in with Jawbone</div></a>
+              </div>
+            </div>
           </div>
         }
       </div>
@@ -90,7 +101,8 @@ class App extends Component {
 export default App;
 
 App.propTypes = {
-  auth: PropTypes.string.isRequired,
+  isAuth: PropTypes.string.isRequired,
+  user: PropTypes.array.isRequired,
   children: PropTypes.object.isRequired,
   history: PropTypes.object.isRequired,
 };

src/components/HealthBar/healthPresenter.js

@@ -1,39 +1,28 @@
 import React, { Component, PropTypes } from 'react';
-
-let rect = {
-  width: '500px',
-  height: '40px',
-  margin: '20px auto',
-};
-
-let smallrect = {
-  width: '10px',
-  height: '20px',
-  background: 'red',
-  borderStyle: 'solid',
-  borderWidth: '1px',
-  borderRadius: '5px',
-  display: 'inline-block',
-};
-
+import {
+  healthSquare,
+  healthIndicator,
+  healthContainer,
+  detail,
+} from '../../css/main.css';
 
 class HealthBar extends Component {
   render() {
     let healthBlocks = [];
     let hp = 0;
     this.props.type === 'loaded' ? hp = this.props.health2 : hp = this.props.health;
 
-    for (let i = 0; i < hp / 2; i++) {
-      healthBlocks.push(<div key={i} style={smallrect}></div>);
+    for (let i = 0; i < hp / 5.5; i++) {
+      healthBlocks.push(<div key={i} className={healthSquare}></div>);
     }
+
     return (
-      <section>
-        <div>Health: {hp}</div>
-        <div style={rect}> {healthBlocks}</div>
+      <section className={healthContainer}>
+        <div className={detail}>Health: {hp}</div>
+        <div className={healthIndicator}>{healthBlocks}</div>
       </section>
     );
   }
-
 }
 
 export default HealthBar;

src/components/Layout/mainBlockPresenter.js

@@ -3,6 +3,12 @@ import React, { PropTypes } from 'react';
 const MainBlock = ({ mainBlock }) => (
   <section className={mainBlock}>
     <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
   </section>
 );
 

src/components/Navbar/navPresenter.js

@@ -71,9 +71,6 @@ class Navbar extends Component {
           <li className={isActive('tap')} onClick={() => setFilter('tap')}>
             <Link to="tap">Train</Link>
           </li>
-          <li className={isActive('battle')} onClick={() => setFilter('battle')}>
-            <Link to="battle">Battle</Link>
-          </li>
           <li className={isActive('progress')} onClick={() => setFilter('progress')}>
             <Link to="progress">Progress</Link>
           </li>

src/components/Profile/profilePresenter.js

@@ -3,6 +3,14 @@ import HealthBar from '../HealthBar/healthIndex';
 import ProfilePic from '../ProfilePic/picIndex';
 import XPbar from '../XPbar/xpIndex';
 import Modal from 'react-modal';
+import {
+  profileContainer,
+  profileComponents,
+  editProfile,
+  syncXP,
+  detail,
+  currentLevel,
+} from '../../css/main.css';
 
 const customStyles = {
   content: {
@@ -18,54 +26,81 @@ const customStyles = {
 class Profile extends Component {
 
   send(user) {
-    this.props.sendData(user, this._username.value, this._name.value);
+    const { _username, _name } = this;
+    const { sendData } = this.props;
+    sendData(user, _username.value, _name.value);
   }
 
   render() {
-    const data = this.props.userinfo;
+    const { send } = this;
+    const { userinfo, showModal, hideModal, modalinfo, sync } = this.props;
+    const { name, data, username, level } = userinfo;
+    const levelClassName = `${detail} ${currentLevel}`;
     return (
       <section>
-        <h1>Welcome, {this.props.userinfo.name}</h1>
-        <HealthBar />
-        <ProfilePic />
-        <p>Current Level: {this.props.userinfo.level}</p>
-        <XPbar type={'totalXp'} />
-        <div>
-          <button onClick={this.props.showModal}>Edit Profile</button>
-          <button onClick={this.props.sync.bind(this, data)}>SyncXP</button>
-          <Modal
-            isOpen={this.props.modalinfo.modalIsOpen}
-            onRequestClose={this.props.hideModal}
-            style={customStyles}
-          >
-            <div>
-              <button type="button" onClick={this.props.hideModal}>
-                <span aria-hidden="true">&times;</span>
-                <span>Close</span>
-              </button>
-              <h4>Edit Profile</h4>
-            </div>
-            <form>
-              <fieldset>
-                <div>
-                  <label htmlFor="Username">Username</label>
+        <h1>Welcome, {name}</h1>
+        <div className={profileContainer}>
+          <div className={profileComponents}>
+            <ProfilePic />
+            <HealthBar />
+            <div className={levelClassName}>Current Level: {level}</div>
+            <XPbar type={'totalXp'} />
+          </div>
+
+          <div>
+            <button onClick={showModal} id="_editProfile" className={editProfile}></button>
+            <label htmlFor="_editProfile">Edit Profile</label>
+            <button onClick={() => sync(data)} id="_syncXP" className={syncXP}></button>
+            <label htmlFor="_syncXP">Sync XP</label>
+
+            <Modal
+              isOpen={modalinfo.modalIsOpen}
+              onRequestClose={hideModal}
+              style={customStyles}
+            >
+              <div>
+                <button type="button" onClick={hideModal}>
+                  <span aria-hidden="true">&times;</span>
+                  <span>Close</span>
+                </button>
+                <h4>Edit Profile</h4>
+              </div>
+              <form>
+                <fieldset>
                   <div>
-                    <input id="Username" name="Username" type="text" placeholder={this.props.userinfo.username} ref={(c) => this._username = c}></input>
+                    <label htmlFor="Username">Username</label>
+                    <div>
+                      <input
+                        id="Username"
+                        name="Username"
+                        type="text"
+                        placeholder={username}
+                        ref={(c) => this._username = c}
+                      >
+                      </input>
+                    </div>
                   </div>
-                </div>
-                <div>
-                  <label htmlFor="Name">Name</label>
                   <div>
-                    <input id="Name" name="Name" type="text" placeholder={this.props.userinfo.name} ref={(c) => this._name = c}></input>
+                    <label htmlFor="Name">Name</label>
+                    <div>
+                      <input
+                        id="Name"
+                        name="Name"
+                        type="text"
+                        placeholder={name}
+                        ref={(c) => this._name = c}
+                      >
+                      </input>
+                    </div>
                   </div>
-                </div>
-              </fieldset>
-            </form>
-            <div>
-              <button type="button" onClick={this.props.hideModal}>Close</button>
-              <button type="button" onClick={this.send.bind(this, this.props.userinfo)}>Save changes</button>
-            </div>
-          </Modal>
+                </fieldset>
+              </form>
+              <div>
+                <button type="button" onClick={hideModal}>Close</button>
+                <button type="button" onClick={() => send(userinfo)}>Save changes</button>
+              </div>
+            </Modal>
+          </div>
         </div>
       </section>
     );

src/components/ProfilePic/picPresenter.js

@@ -1,14 +1,16 @@
-import React, { Component } from 'react';
+import React from 'react';
+import defaultFitomo from '../../images/fitomo-home.png';
+import {
+  fitomoPic,
+} from '../../css/main.css';
 
-class ProfilePic extends Component {
-  render() {
-    return (
-      <section>
-        <img alt="none" src={this.props.picture}></img>
-      </section>
-    );
-  }
-}
+const ProfilePic = (props) => (
+  <section>
+    {/* <img alt="none" src={props.picture}></img> */}
+    <div className={fitomoPic}>
+      <img src={defaultFitomo} alt="fitomo" />
+    </div>
+  </section>
+);
 
 export default ProfilePic;
-

src/components/Upload/uploadIndex.js

@@ -2,12 +2,8 @@ import Upload from './uploadPresenter';
 import { connect } from 'react-redux';
 import { setPicture, sendPicture } from '../../actions/index';
 
-function mapStateToProps(state) {
-  const { file, src } = state.upload;
-  return {
-    file,
-    src,
-  };
+function mapStateToProps({ upload }) {
+  return { ...upload };
 }
 
 function mapDispatchToProps(dispatch) {

src/components/Upload/uploadPresenter.js

@@ -3,9 +3,10 @@ import {
   inputFile,
   uploadSubmit,
   selected,
+  uploadDone,
 } from '../../css/main.css';
 
-const Upload = ({ file, src, previewPicture, sendPictureToServer }) => {
+const Upload = ({ file, src, previewPicture, sendPictureToServer, isUploaded }) => {
   const handleFile = (e) => {
     e.preventDefault();
 
@@ -55,20 +56,25 @@ const Upload = ({ file, src, previewPicture, sendPictureToServer }) => {
         }
         <img src={src} alt={src} />
       </div>
+      {isUploaded &&
+        <div className={uploadDone}>Uploaded successfully</div>
+      }
     </section>
   );
 };
 
 Upload.defaultProps = {
   file: {},
   src: '',
+  isUploaded: false,
 };
 
 Upload.propTypes = {
   src: PropTypes.string.isRequired,
   file: PropTypes.object.isRequired,
   previewPicture: PropTypes.func.isRequired,
   sendPictureToServer: PropTypes.func.isRequired,
+  isUploaded: PropTypes.bool.isRequired,
 };
 
 export default Upload;