[MASTERDIET-12]

package.json

@@ -3,10 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reach/slider": "^0.10.3",
+    "@shwilliam/react-rubber-slider": "^0.1.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "bootstrap": "^4.5.0",
+    "d3": "^5.16.0",
     "formik": "^2.1.4",
     "moment": "^2.26.0",
     "react": "^16.13.1",

src/app/App.test.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
-import { BrowserRouter } from 'react-router-dom'
+import {BrowserRouter} from 'react-router-dom'
 
 it('renders without crashing', () => {
   const div = document.createElement('div')

src/common/AppHeader.js

@@ -1,25 +1,25 @@
-import React, { Component } from 'react'
-import { Link, NavLink } from 'react-router-dom'
+import React, {Component} from 'react'
+import {Link, NavLink} from 'react-router-dom'
 import './AppHeader.css'
 
 class AppHeader extends Component {
-  render () {
+  render() {
     return (
-      <header className='app-header'>
-        <div className='container'>
-          <div className='app-branding'>
-            <Link to='/' className='app-title'>Master Diet</Link>
-          </div>
-          <div className='app-options'>
-            <nav className='app-nav'>
-              {this.props.authenticated ? (
-                <ul>
-                  <li>
-                    <NavLink to='/profile'>Profile</NavLink>
-                  </li>
-                  <li>
-                    <NavLink to='/startForm'>Start Form</NavLink>
-                  </li>
+        <header className='app-header'>
+          <div className='container'>
+            <div className='app-branding'>
+              <Link to='/' className='app-title'>Master Diet</Link>
+            </div>
+            <div className='app-options'>
+              <nav className='app-nav'>
+                {this.props.authenticated ? (
+                    <ul>
+                      <li>
+                        <NavLink to='/profile'>Profile</NavLink>
+                      </li>
+                      <li>
+                        <NavLink to='/startForm'>Start Form</NavLink>
+                      </li>
                   <li>
                     <a onClick={this.props.onLogout}>Logout</a>
                   </li>

src/common/NotFound.js

@@ -1,6 +1,6 @@
-import React, { Component } from 'react'
+import React, {Component} from 'react'
 import './NotFound.css'
-import { Link } from 'react-router-dom'
+import {Link} from 'react-router-dom'
 
 class NotFound extends Component {
   render () {

src/form/Start.css

@@ -66,10 +66,10 @@ img {
 }
 .child_div_1 {
     width: 600px;
-    height: 800px;
+    height: 900px;
 }
 .child_div_2 {
-    height: 800px;
+    height: 900px;
 }
 .container  {
     text-align: center;
@@ -80,13 +80,28 @@ img {
 .dateContainer {
     width: 430px;
 }
+
 .block {
     display: inline-block;
     width: 143px;
 }
+
 .pad {
     padding-right: 20px;
 }
-.container2  {
+
+.container2 {
     text-align: center;
+}
+
+.column {
+    float: left;
+    width: 33.33%;
+    padding: 5px;
+}
+
+.row::after {
+    content: "";
+    clear: both;
+    display: table;
 }

src/form/Start.js

@@ -14,9 +14,12 @@ import moment from 'moment'
 import gainGoalImg from '../img/activities/gain-active-img.jpg'
 import loseGoalImg from '../img/activities/lose-goal-img.jpg'
 import stayGoalImg from '../img/activities/stay-goal-img.jpg'
+import fatPercentageImag from '../img/fatPercentage/fatPercentage.jpg'
+import carbohydratesPercentageImag from '../img/fatPercentage/carbohydratesPercentage.jpg'
 import {createPlan} from "../util/APIUtils";
 import Alert from 'react-s-alert'
-
+import RubberSlider from '@shwilliam/react-rubber-slider'
+import '@shwilliam/react-rubber-slider/dist/styles.css'
 
 class Start extends Component {
     constructor(props) {
@@ -70,34 +73,11 @@ class StartForm extends Component {
     }
 
 
-
-     marks = [
-        {
-            value: 0,
-            label: '0°C',
-        },
-        {
-            value: 20,
-            label: '20°C',
-        },
-        {
-            value: 37,
-            label: '37°C',
-        },
-        {
-            value: 100,
-            label: '100°C',
-        },
-    ];
-
-     valuetext(value) {
-        return `${value}°C`;
-    }
-
     state = {
         startDate: new Date("01/01/1990"),
         goal: "LOSE",
-        gender: "MALE"
+        gender: "MALE",
+        slider: 50
     };
 
     handleChange = date => {
@@ -110,15 +90,25 @@ class StartForm extends Component {
             gender: data
         });
     };
+    PROM = 1000
+    MIN = 0.2
+    handleSlider = data => {
+        const fatPercentage = data / this.PROM + this.MIN
+        this.setState({
+            slider: fatPercentage
+        })
+    }
 
-    handleSubmit(values) {
+    handleSubmit(values, setSubmitting) {
         values.userId = this.props.currentUser.id;
-        console.log(this.props.currentUser.id)
+        values.fatPreferencesPercentage = this.state.slider
         createPlan(values)
             .then(response => {
                 Alert.success('You\'re successfully created your first diet plan')
             }).catch(error => {
             Alert.error((error && error.message) || 'Oops! Something went wrong. Please try again!')
+        }).finally(response => {
+            setSubmitting(false)
         })
     }
 
@@ -162,9 +152,8 @@ class StartForm extends Component {
                 }}
                 onSubmit={(values, {setSubmitting}) => {
                     values.birthDate = this.getFormattedDate(this.state.startDate);
-                    values.fatPreferencesPercentage =
-                    this.handleSubmit(values)
-                    setSubmitting(false)
+                    values.fatPreferencesPercentage = this.state.slider;
+                    this.handleSubmit(values, setSubmitting)
                 }}
             >
                 {({touched, errors, isSubmitting}) => (
@@ -265,7 +254,21 @@ class StartForm extends Component {
                                 <option value="LOSE">Weight lose</option>
                             </Field>
                         </div>
-
+                        <div className={"form-group field"}>
+                            <label htmlFor="slider">Which food do you prefer to eat more?</label>
+                        </div>
+                        <div className={"row "}>
+                            <div className={"column"}>
+                                <img src={carbohydratesPercentageImag} width={100} alt={"Carbohydrates"}/>
+                            </div>
+                            <div className={"column"}>
+                                <RubberSlider width={140} value={this.state.slider} onChange={
+                                    this.handleSlider}/>
+                            </div>
+                            <div className={"column"}>
+                                <img src={fatPercentageImag} width={100} alt={"Fats"}/>
+                            </div>
+                        </div>
                         <button
                             type="submit"
                             className="btn btn-primary btn-block"

src/setupTests.js

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom/extend-expect'

src/user/oauth2/OAuth2RedirectHandler.js

@@ -1,9 +1,9 @@
-import React, { Component } from 'react'
-import { ACCESS_TOKEN } from '../../constants'
-import { Redirect } from 'react-router-dom'
+import React, {Component} from 'react'
+import {ACCESS_TOKEN} from '../../constants'
+import {Redirect} from 'react-router-dom'
 
 class OAuth2RedirectHandler extends Component {
-  getUrlParameter (name) {
+  getUrlParameter(name) {
     name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]')
     const regex = new RegExp('[\\?&]' + name + '=([^&#]*)')
 

src/user/profile/Profile.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, {Component} from 'react'
 import './Profile.css'
 
 class Profile extends Component {

src/user/signup/Signup.js

@@ -1,28 +1,28 @@
-import React, { Component } from 'react'
+import React, {Component} from 'react'
 import './Signup.css'
-import { Link, Redirect } from 'react-router-dom'
-import { GOOGLE_AUTH_URL, FACEBOOK_AUTH_URL, GITHUB_AUTH_URL } from '../../constants'
-import { signup } from '../../util/APIUtils'
+import {Link, Redirect} from 'react-router-dom'
+import {FACEBOOK_AUTH_URL, GITHUB_AUTH_URL, GOOGLE_AUTH_URL} from '../../constants'
+import {signup} from '../../util/APIUtils'
 import fbLogo from '../../img/fb-logo.png'
 import googleLogo from '../../img/google-logo.png'
 import githubLogo from '../../img/github-logo.png'
 import Alert from 'react-s-alert'
 
 class Signup extends Component {
-  render () {
-    if (this.props.authenticated) {
-      return <Redirect
-        to={{
-          pathname: '/',
-          state: { from: this.props.location }
-        }}
-      />
-    }
+    render() {
+        if (this.props.authenticated) {
+            return <Redirect
+                to={{
+                    pathname: '/',
+                    state: {from: this.props.location}
+                }}
+            />
+        }
 
-    return (
-      <div className='signup-container'>
-        <div className='signup-content'>
-          <h1 className='signup-title'>Signup with Master Diet</h1>
+        return (
+            <div className='signup-container'>
+                <div className='signup-content'>
+                    <h1 className='signup-title'>Signup with Master Diet</h1>
           <SocialSignup/>
           <div className='or-separator'>
             <span className='or-text'>OR</span>