├── src
    ├── global
    │   ├── styles
    │   │   ├── utilities.css
    │   │   └── variables.css
    │   ├── reducer
    │   │   └── index.js
    │   ├── graphql
    │   │   └── index.js
    │   └── store
    │   │   └── index.js
    ├── Main
    │   ├── actions
    │   │   ├── index.js
    │   │   └── creators
    │   │   │   └── index.js
    │   ├── reducer
    │   │   └── index.js
    │   ├── index.js
    │   ├── Main.js
    │   ├── General
    │   │   ├── sections
    │   │   │   ├── DailyCycling.js
    │   │   │   ├── DailySteps.js
    │   │   │   ├── DailyWeight.js
    │   │   │   ├── DailySleep.js
    │   │   │   ├── WeeklySteps.js
    │   │   │   ├── WeeklyWeight.js
    │   │   │   ├── WeeklyHeartRate.js
    │   │   │   ├── WeeklySleep.js
    │   │   │   ├── styles.css
    │   │   │   └── DailyHeartRate.js
    │   │   ├── styles.css
    │   │   └── index.js
    │   └── config
    │   │   └── index.js
    ├── components
    │   ├── Tooltip
    │   │   ├── styles.css
    │   │   └── index.js
    │   ├── BarShape
    │   │   └── index.js
    │   └── Health2LinesGraph
    │   │   └── index.js
    └── index.js
├── .gitignore
├── static.json
├── .gitmodules
├── docker-compose.yml
├── public
    ├── manifest.json
    └── index.html
├── README-REACT-CREATE-APP.md
├── config
    ├── jest
    │   ├── fileTransform.js
    │   └── cssTransform.js
    ├── polyfills.js
    ├── paths.js
    ├── env.js
    ├── webpackDevServer.config.js
    ├── webpack.config.dev.js
    └── webpack.config.prod.js
├── scripts
    ├── test.js
    ├── start.js
    └── build.js
├── README.md
├── Dockerfile
└── package.json


/src/global/styles/utilities.css:
--------------------------------------------------------------------------------
1 | @import "./variables.css";


--------------------------------------------------------------------------------
/src/Main/actions/index.js:
--------------------------------------------------------------------------------
1 | export const SAMPLE_ACTION = 'SAMPLE_ACTION';
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | dist
4 | go/.cache
5 | server
6 | .vscode


--------------------------------------------------------------------------------
/src/Main/actions/creators/index.js:
--------------------------------------------------------------------------------
1 | import { createAction } from 'redux-actions';
2 | 
3 | 


--------------------------------------------------------------------------------
/static.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"proxies": {
3 |     "/api/": {
4 |       "origin": "${API_URL}"
5 |     }
6 |   }
7 | }


--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "go/src/server/vendor/gopkg.in/mgo.v2"]
2 |     path = go/src/server/vendor/gopkg.in/mgo.v2
3 |     url = http://gopkg.in/mgo.v2


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: '3'
 2 | 
 3 | services:
 4 |   healthdashboard:
 5 |     image: maximeheckel/healthdashboard:latest
 6 |     links:
 7 |       - "mongodb"
 8 |     ports:
 9 |       - "8000:8000"
10 |   mongodb:
11 |     image: mongo:3.0


--------------------------------------------------------------------------------
/src/global/reducer/index.js:
--------------------------------------------------------------------------------
 1 | import { combineReducers } from 'redux';
 2 | import main from '../../Main/reducer';
 3 | import { client } from '../graphql';
 4 | 
 5 | const rootReducer = combineReducers({
 6 |   main,
 7 |   apollo: client.reducer(),
 8 | });
 9 | 
10 | export default rootReducer;
11 | 


--------------------------------------------------------------------------------
/src/global/graphql/index.js:
--------------------------------------------------------------------------------
 1 | import ApolloClient, { createNetworkInterface } from 'apollo-client';
 2 | 
 3 | const host = process.env.HOSTNAME || '';
 4 | 
 5 | export const client = new ApolloClient({
 6 |   networkInterface:
 7 |     createNetworkInterface({ uri: `${host}/api/v1/health/graphql` }),
 8 |   shouldBatch: true,
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/components/Tooltip/styles.css:
--------------------------------------------------------------------------------
 1 | @import "global/styles/utilities.css";
 2 | 
 3 | .wrapper {
 4 |   color: $color-white;
 5 |   background-color: $color-black;
 6 |   font-size: $font-size-text;
 7 |   padding: $space-xs $space-sm;
 8 |   border-radius: $border-radius-default;
 9 | }
10 | 
11 | .tooltipData {
12 |   margin-top: $space-sm;
13 | }


--------------------------------------------------------------------------------
/src/Main/reducer/index.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   SAMPLE_ACTION,
 3 | } from '../actions';
 4 | 
 5 | const INITIAL = {};
 6 | 
 7 | export default function landing(state = INITIAL, action) {
 8 |   switch (action.type) {
 9 |     case SAMPLE_ACTION:
10 |       console.log('Sample action');
11 |       return state;
12 |     default:
13 |       return state;
14 |   }
15 | }
16 | 
17 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/README-REACT-CREATE-APP.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
2 | 
3 | Below you will find some information on how to perform common tasks.<br>
4 | You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
5 | 
6 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/src/Main/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {
 3 |   Switch,
 4 |   Route,
 5 |   Redirect,
 6 | } from 'react-router-dom';
 7 | import General from './General';
 8 | 
 9 | const Main = () => {
10 |   return (
11 |     <Switch>
12 |       <Route path="/entry/:date" component={General}/>
13 |       <Redirect from="/" to="/entry/today"/>
14 |     </Switch>
15 |   );
16 | }
17 | 
18 | export default Main;
19 | 


--------------------------------------------------------------------------------
/src/Main/Main.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react';
 2 | 
 3 | class Main extends Component {
 4 | 
 5 |   static propTypes = {
 6 |     children: PropTypes.element,
 7 |   }
 8 | 
 9 |   render() {
10 |     // eslint-disable-next-line no-use-before-define
11 |     const { children, ...attributes } = this.props;
12 |     return (
13 |       <div id="module-main" {...attributes}>
14 |         HELLO
15 |       </div>
16 |     );
17 |   }
18 | }
19 | 
20 | export default Main;
21 | 


--------------------------------------------------------------------------------
/src/components/BarShape/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types'; 
 3 | 
 4 | const BarShape = (props) => {
 5 |   const { fill, x, y, width, height, coeffHeight } = props;
 6 |   return (
 7 |     <rect
 8 |       id="barShape-1"
 9 |       x={x} y={y}
10 |       width={width}
11 |       height={height * coeffHeight}
12 |       rx="5"
13 |       fill={fill}
14 |     ></rect>
15 |   );
16 | };
17 | 
18 | BarShape.propTypes = {
19 |   fill: PropTypes.string,
20 |   x: PropTypes.number,
21 |   y: PropTypes.number,
22 |   width: PropTypes.number,
23 |   height: PropTypes.number,
24 |   coeffHeight: PropTypes.number.isRequired,
25 | };
26 | 
27 | 
28 | export default BarShape;
29 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/src/Main/General/sections/DailyCycling.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types'; 
 3 | import css from './styles.css';
 4 | 
 5 | const DailyCycling = ({ dataCycling = {} }) => {
 6 |   const { value: valueCycling } = dataCycling;
 7 |   return (
 8 |     <div className={`${css.card} ${css.cyclingCard}`}>
 9 |       <div className={css.centeredColumn}>
10 |         <div className={css.cycleData}>
11 |           { valueCycling / 1000 || 0 } km
12 |         </div>
13 |         <div className={css.dataLabel}> Cycled </div>
14 |       </div>
15 |     </div>
16 |   );
17 | };
18 | 
19 | DailyCycling.propTypes = {
20 |   dataCycling: PropTypes.object,
21 | };
22 | 
23 | export default DailyCycling;
24 | 


--------------------------------------------------------------------------------
/src/global/store/index.js:
--------------------------------------------------------------------------------
 1 | import { createStore, applyMiddleware } from 'redux';
 2 | import promiseMiddleware from 'redux-promise-middleware';
 3 | import { createLogger } from 'redux-logger';
 4 | import rootReducer from '../reducer';
 5 | 
 6 | const loggerMiddleware = createLogger();
 7 | 
 8 | let middlewares = applyMiddleware(
 9 |   promiseMiddleware()
10 | );
11 | 
12 | if (process.env.NODE_ENV === 'development') {
13 |   middlewares = applyMiddleware(
14 |     promiseMiddleware(),
15 |     loggerMiddleware
16 |   );
17 | }
18 | 
19 | export default function configureStore(initialState) {
20 |   const store = createStore(
21 |     rootReducer,
22 |     initialState,
23 |     middlewares,
24 |   );
25 | 
26 |   return store;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import { ApolloProvider } from 'react-apollo';
 4 | import {
 5 |   BrowserRouter as Router,
 6 |   Route,
 7 | } from 'react-router-dom';
 8 | import configureStore from './global/store';
 9 | import { client } from './global/graphql';
10 | import Main from './Main';
11 | 
12 | const store = configureStore();
13 | 
14 | ReactDOM.render(
15 |   <ApolloProvider store={store} client={client}>
16 |     <Router>
17 |       <div>
18 |         <Route
19 |           exact
20 |           path="/"
21 |           component={Main}
22 |         />
23 |         <Route path="/entry" component={Main}/>
24 |       </div>
25 |     </Router>
26 |   </ApolloProvider>,
27 |   document.getElementById('root')
28 | );
29 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/src/components/Tooltip/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types'; 
 3 | import moment from 'moment';
 4 | import css from './styles.css';
 5 | 
 6 | const CustomTooltip = ({ payload }) => {
 7 |   return (
 8 |     <div className={css.wrapper}>
 9 |       <div>
10 |         {payload[0] ? moment(payload[0].payload.startDate).format('LL') || null : null}
11 |         <div className={css.tooltipData}>
12 |           <div>
13 |             {payload[0] ? payload[0].value : ''} {payload[0] ? payload[0].unit : ''}
14 |           </div>
15 |           <div>
16 |             {`${payload[1] ? payload[1].value : ''}
17 |             ${payload[1] ? payload[1].unit : ''}`}
18 |           </div>
19 |         </div>
20 |       </div>
21 |     </div>
22 |   );
23 | };
24 | 
25 | CustomTooltip.propTypes = {
26 |   payload: PropTypes.array,
27 | };
28 | 
29 | export default CustomTooltip;
30 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Apple Health Web Dashboard
 2 | 
 3 | NOTE: Apple Health Web Dashboard is a clone of https://github.com/MaximeHeckel/health-dashboard
 4 | 
 5 | ## Description: 
 6 | 
 7 | Apple Health Web Dashboard provides a daily view of your Apple Health data, like steps, sleep, etc. 
 8 | 
 9 | Apple Health Web Dashboard is a react web app (bootstrapped with React Create App). It pulls data from a backend server and displays it. See: https://github.com/markwk/apple-health-sync-backend
10 | 
11 | ## Dependencies
12 | * Should have installed [create-react-app](https://github.com/facebookincubator/create-react-app) globally
13 |   npm install -g create-react-app
14 | * To make a build version, should have installed yarn globally
15 | 
16 | ## Installation and Setup 
17 | 
18 | * Install dependencies by running $ npm install 
19 | * Set your backend url by editing config/webpackDevServer.config.js to proxy target. It's currently set to target: 'http://localhost:8000',
20 | * To test, run $ npm start
21 | 


--------------------------------------------------------------------------------
/src/Main/General/sections/DailySteps.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types'; 
 3 | import css from './styles.css';
 4 | 
 5 | const DailySteps = ({ dataSteps = {}, dataDistance = {} }) => {
 6 |   const { value: valueSteps } = dataSteps;
 7 |   const { value: valueDistance } = dataDistance;
 8 |   return (
 9 |     <div className={`${css.card} ${css.stepCard}`}>
10 |       <div className={css.centeredColumn}>
11 |         <div className={css.stepData}>
12 |           { valueSteps || 0 } steps
13 |         </div>
14 |         <div className={css.stepData}>
15 |            — or —
16 |         </div>
17 |         <div className={css.distanceData}>
18 |           { valueDistance / 1000 || 0 } km
19 |         </div>
20 |         <div className={css.dataLabel}> Walked / Ran </div>
21 |       </div>
22 |     </div>
23 |   );
24 | };
25 | 
26 | DailySteps.propTypes = {
27 |   dataSteps: PropTypes.object,
28 |   dataDistance: PropTypes.object,
29 | };
30 | 
31 | export default DailySteps;
32 | 


--------------------------------------------------------------------------------
/src/Main/General/sections/DailyWeight.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types'; 
 3 | import css from './styles.css';
 4 | 
 5 | const DailyWeight = ({ dataWeight = {}, dataBmi = {}, dataBF = {} }) => {
 6 |   const { value: valueWeight } = dataWeight;
 7 |   const { value: valueBmi } = dataBmi;
 8 |   const { value: valueBF } = dataBF;
 9 |   return (
10 |     <div className={`${css.card} ${css.weightCard}`}>
11 |       <div className={css.centeredColumn}>
12 |         <div className={css.weightData}>
13 |           { valueWeight / 1000 || 0 } kg
14 |         </div>
15 |         <div className={css.dataLabel}> Mass </div>
16 |         <div className={css.weightData}>
17 |           { valueBmi || 0 }
18 |         </div>
19 |         <div className={css.dataLabel}> BMI </div>
20 |         <div className={css.bfData}>
21 |           { valueBF || 0 } %
22 |         </div>
23 |         <div className={css.dataLabel}> Bodyfat </div>
24 |       </div>
25 |     </div>
26 |   );
27 | };
28 | 
29 | DailyWeight.propTypes = {
30 |   dataWeight: PropTypes.object,
31 |   dataBmi: PropTypes.object,
32 |   dataBF: PropTypes.object,
33 | };
34 | 
35 | export default DailyWeight;
36 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="description" content="Mark Koester's health dashboard'">
 6 |     <meta name="robots" content="index, follow">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta name="theme-color" content="#F6F5FA">
 9 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
10 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
11 |     <title>Mark Koester - Health Dashboard</title>
12 |   </head>
13 |   <body>
14 |     <noscript>
15 |       You need to enable JavaScript to run this app.
16 |     </noscript>
17 |     <div id="root"></div>
18 |     <script>
19 | 	      /* eslint-disable */
20 | 		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
21 | 		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
22 | 		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
23 | 		  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
24 | 
25 | 		  ga('create', 'UA-56475503-2', 'auto');
26 | 		  ga('send', 'pageview');
27 | 		</script>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/src/Main/General/sections/DailySleep.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types'; 
 3 | import moment from 'moment';
 4 | import forEach from 'lodash/forEach';
 5 | import css from './styles.css';
 6 | 
 7 | class DailySleep extends Component {
 8 |   static propTypes = {
 9 |     dataSleep: PropTypes.array,
10 |   }
11 | 
12 |   normalizeData(entries) {
13 |     let normalizedOutput = 0;
14 | 
15 |     forEach(entries, (entry) => {
16 |       if (entry.value === 'INBED') {
17 |         normalizedOutput += moment(entry.endDate) - moment(entry.startDate);
18 |       }
19 |     });
20 | 
21 |     return normalizedOutput;
22 |   }
23 | 
24 |   render() {
25 |     const {
26 |       dataSleep,
27 |     } = this.props;
28 |     const sleepTime = this.normalizeData(dataSleep);
29 | 
30 |     return (
31 |       <div className={`${css.card} ${css.sleepCard}`}>
32 |         <div className={css.centeredColumn}>
33 |           <div className={css.sleepData}>
34 |              {(sleepTime / 3600 / 1000).toFixed(2)} h
35 |           </div>
36 |           <div className={css.dataLabel}> Slept </div>
37 |         </div>
38 |       </div>
39 |     );
40 |   }
41 | }
42 | 
43 | export default DailySleep;
44 | 


--------------------------------------------------------------------------------
/src/Main/General/sections/WeeklySteps.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types'; 
 3 | import forEach from 'lodash/forEach';
 4 | import Health2LinesGraph from '../../../components/Health2LinesGraph';
 5 | import css from './styles.css';
 6 | 
 7 | const WeeklySteps = ({ dataSteps = [], dataCycling = [] }) => {
 8 |   const weeklyData = [];
 9 |   forEach(dataSteps, (entry, i) => {
10 |     weeklyData.push({ valueWalking: dataSteps[i].value, valueCycling: dataCycling[i].value / 1000 });
11 |   });
12 | 
13 |   return (
14 |     <div>
15 |       <div className={css.graphWrapper}>
16 |         <Health2LinesGraph
17 |           data={weeklyData}
18 |           value1="valueWalking"
19 |           value2="valueCycling"
20 |           color1="#24B9F0"
21 |           color2="#30E2DD"
22 |           unit1="steps walked/ran"
23 |           unit2="km cycled"
24 |           width={400}
25 |           height={120}
26 |         />
27 |       </div>
28 |       <div className={css.graphFooter}>
29 |         <div className={css.dataLabel}>
30 |           Weekly walking and cycling distance
31 |           <span><hr /></span>
32 |         </div>
33 |       </div>
34 |     </div>
35 |   );
36 | };
37 | 
38 | WeeklySteps.propTypes = {
39 |   dataSteps: PropTypes.array,
40 |   dataCycling: PropTypes.array,
41 | };
42 | 
43 | export default WeeklySteps;
44 | 


--------------------------------------------------------------------------------
/src/Main/General/sections/WeeklyWeight.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types'; 
 3 | import forEach from 'lodash/forEach';
 4 | import Health2LinesGraph from '../../../components/Health2LinesGraph';
 5 | import css from './styles.css';
 6 | 
 7 | const WeeklyWeight = ({ dataWeight = [], dataBF = [] }) => {
 8 |   const weeklyData = [];
 9 |   forEach(dataWeight, (entry, i) => {
10 |     weeklyData.push({ valueWeight: dataWeight[i].value / 1000, valueBF: dataBF[i].value });
11 |   });
12 | 
13 |   return (
14 |     <div>
15 |       <div className={css.graphWrapper}>
16 |         <Health2LinesGraph
17 |           data={weeklyData}
18 |           value1="valueWeight"
19 |           value2="valueBF"
20 |           color1="#FF9D13"
21 |           color2="#FDC62E"
22 |           unit1="kg"
23 |           unit2="% of bodyfat"
24 |           domain1={[55, 85]}
25 |           domain2={[0, 30]}
26 |           width={400}
27 |           height={120}
28 |         />
29 |       </div>
30 |       <div className={css.graphFooter}>
31 |         <div className={css.dataLabel}>
32 |           Weekly weight and bodyfat percentage
33 |           <span><hr /></span>
34 |         </div>
35 |       </div>
36 |     </div>
37 |   );
38 | };
39 | 
40 | WeeklyWeight.propTypes = {
41 |   dataWeight: PropTypes.array,
42 |   dataBF: PropTypes.array,
43 | };
44 | 
45 | export default WeeklyWeight;
46 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM golang:latest as serverbuilder
 2 | 
 3 | ADD ./go /go/src/github.com/MaximeHeckel/healthDashboard/go/
 4 | WORKDIR /go/src/github.com/MaximeHeckel/healthDashboard/go/src/server
 5 | RUN CGO_ENABLED=0 GOOS=linux go build -ldflags '-s' -a -installsuffix cgo -v -o server
 6 | 
 7 | ###################################
 8 | 
 9 | FROM node:7.4-alpine as appbuilder
10 | 
11 | RUN apk --update add git bash curl tar \
12 |   && rm -rf /var/cache/apk/* \
13 |   && touch ~/.bashrc \
14 |   && curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 0.22.0
15 | ENV NPM_CONFIG_LOGLEVEL=warn \
16 |     PATH=/root/.yarn/bin:${PATH}
17 | 
18 | ADD . ./app
19 | WORKDIR /app
20 | RUN yarn install --ignore-engines
21 | ENV NODE_ENV=production
22 | RUN yarn build
23 | 
24 | ##################################
25 | 
26 | FROM alpine:latest
27 | 
28 | COPY --from=serverbuilder /go/src/github.com/MaximeHeckel/healthDashboard/go/src/server/server ./app/
29 | COPY --from=appbuilder /app/build/index.html ./app/
30 | COPY --from=appbuilder /app/build/manifest.json ./app/
31 | COPY --from=appbuilder /app/build/asset-manifest.json ./app/
32 | COPY --from=appbuilder /app/build/static/js/* ./app/static/js/
33 | COPY --from=appbuilder /app/build/static/css/* ./app/static/css/
34 | WORKDIR /app
35 | RUN apk --update add ca-certificates && chmod +x server
36 | 
37 | EXPOSE 8000
38 | ENTRYPOINT ["./server", "-static=./"]


--------------------------------------------------------------------------------
/src/Main/General/sections/WeeklyHeartRate.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types'; 
 3 | import {
 4 |   BarChart,
 5 |   Bar,
 6 |   YAxis,
 7 |   Tooltip,
 8 | } from 'recharts';
 9 | import CustomTooltip from '../../../components/Tooltip';
10 | import BarShape from '../../../components/BarShape';
11 | import css from './styles.css';
12 | 
13 | const WeeklyHeartRate = ({ dataHR = [] }) => {
14 |   return (
15 |     <div>
16 |       <div className={css.graphWrapper}>
17 |         <BarChart width={350} height={120} data={dataHR}>
18 |           <YAxis
19 |             axisLine={false}
20 |             tick={false}
21 |             tickLine={false}
22 |           />
23 |           <Bar
24 |             unit="bpm MAX"
25 |             dataKey="max"
26 |             stackId="a"
27 |             fill="#F52A64"
28 |             barSize={8}
29 |             shape={<BarShape coeffHeight={1.3} />}
30 |           />
31 |           <Bar
32 |             unit="bpm MIN"
33 |             dataKey="min"
34 |             stackId="a"
35 |             fill="#F52A64"
36 |             barSize={8}
37 |             fillOpacity={0}
38 |           />
39 |           <Tooltip content={<CustomTooltip />} />
40 |         </BarChart>
41 |       </div>
42 |       <div className={css.graphFooter}>
43 |         <div className={css.dataLabel}>
44 |           Weekly heart rate range
45 |           <span><hr /></span>
46 |         </div>
47 |       </div>
48 |     </div>
49 |   );
50 | };
51 | 
52 | WeeklyHeartRate.propTypes = {
53 |   dataHR: PropTypes.array,
54 | };
55 | 
56 | export default WeeklyHeartRate;
57 | 


--------------------------------------------------------------------------------
/src/components/Health2LinesGraph/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types'; 
 3 | import {
 4 |   LineChart,
 5 |   Line,
 6 |   Tooltip,
 7 |   YAxis,
 8 | } from 'recharts';
 9 | import CustomTooltip from '../../components/Tooltip';
10 | 
11 | const Health2LinesGraph = ({
12 |   data,
13 |   domain1,
14 |   domain2,
15 |   value1,
16 |   value2,
17 |   color1,
18 |   color2,
19 |   unit1,
20 |   unit2,
21 |   height,
22 |   width,
23 | }) => {
24 |   return (
25 |     <LineChart width={width} height={height} data={data}>
26 |       <YAxis
27 |         yAxisId="left"
28 |         type="number"
29 |         domain={domain1}
30 |         axisLine={false}
31 |         tick={false}
32 |         tickLine={false}
33 |       />
34 |       <YAxis
35 |         yAxisId="right"
36 |         type="number"
37 |         domain={domain2}
38 |         axisLine={false}
39 |         tick={false}
40 |         tickLine={false}
41 |         orientation="right"
42 |       />
43 |       <Line
44 |         yAxisId="left"
45 |         type="monotone"
46 |         dataKey={value1}
47 |         stroke={color1}
48 |         fill={color1}
49 |         unit={unit1}
50 |         strokeWidth="3"
51 |       />
52 |       <Line
53 |         yAxisId="right"
54 |         type="monotone"
55 |         dataKey={value2}
56 |         stroke={color2}
57 |         fill={color2}
58 |         unit={unit2}
59 |         strokeWidth="3"
60 |       />
61 |       <Tooltip content={<CustomTooltip />} />
62 |     </LineChart>
63 |   );
64 | };
65 | 
66 | Health2LinesGraph.propTypes = {
67 |   data: PropTypes.array,
68 |   value1: PropTypes.string,
69 |   value2: PropTypes.string,
70 |   color1: PropTypes.string,
71 |   color2: PropTypes.string,
72 |   unit1: PropTypes.string,
73 |   unit2: PropTypes.string,
74 |   height: PropTypes.number,
75 |   width: PropTypes.number,
76 |   xDataKey: PropTypes.string,
77 |   domain1: PropTypes.array,
78 |   domain2: PropTypes.array,
79 | };
80 | 
81 | export default Health2LinesGraph;
82 | 


--------------------------------------------------------------------------------
/src/global/styles/variables.css:
--------------------------------------------------------------------------------
 1 | /* COLORS */
 2 | $color-white: #FFFFFF;
 3 | $color-black: #212222;
 4 | $color-tuna: #4A4B4D;
 5 | $color-metal-blue-clear: #4362CB;
 6 | $color-metal-blue-dark: #16275E;
 7 | $color-data-green: #30E2DD;
 8 | $color-data-blue: #24B9F0;
 9 | $color-data-violet: #AEBDFC;
10 | $color-data-red: #F52A64;
11 | $color-data-orange:	#FF9D13;
12 | $color-data-yellow: #FDC62E;
13 | 
14 | $color-grey: #F6F5FA;
15 | 
16 | /* SCREEN SIZES */
17 | 
18 | /* media queries */
19 | $screen-xs: 480px;
20 | 
21 | @custom-media --xs (width <= $screen-xs);
22 | @custom-media --gt-xs (width > $screen-xs);
23 | 
24 | $screen-sm: 600px;
25 | 
26 | @custom-media --sm ( $screen-xs < width <= $screen-sm);
27 | @custom-media --lt-sm (width <= $screen-sm);
28 | @custom-media --gt-sm (width > $screen-sm);
29 | 
30 | $screen-md: 700px;
31 | 
32 | @custom-media --md ( $screen-sm < width <= $screen-md);
33 | @custom-media --lt-md (width <= $screen-md);
34 | @custom-media --gt-md (width > $screen-md);
35 | 
36 | $screen-lg: 1300px;
37 | 
38 | @custom-media --lg ( $screen-md < width <= $screen-lg);
39 | @custom-media --lt-lg (width <= $screen-lg);
40 | @custom-media --gt-lg (width > $screen-lg);
41 | 
42 | $screen-xl: 1500px;
43 | 
44 | @custom-media --lt-xl (width <= $screen-xl);
45 | @custom-media --xl (width > $screen-xl);
46 | 
47 | /* SPACING */
48 | 
49 | $space-xxs: 4px;
50 | $space-xs: 8px;
51 | $space-sm: 12px;
52 | $space-md: 16px;
53 | $space-lg: 20px;
54 | $space-xl: 24px;
55 | $space-xxl: 32px;
56 | $space-xxxl: 40px;
57 | $space-xxxxl: 48px;
58 | $space-xxxxxl: 56px;
59 | 
60 | /* RADIUS */
61 | 
62 | $border-radius-default: 3px;
63 | 
64 | /* FONTS */
65 | 
66 | $font-size-text: 12px;
67 | $line-height-text: 17px;
68 | 
69 | $font-size-button: 12px;
70 | 
71 | $font-size-subtitle-small: 16px;
72 | $line-height-subtitle-small: 22px;
73 | 
74 | $font-size-subtitle: 22px;
75 | $line-height-subtitle: 31px;
76 | 
77 | $font-size-title-small: 30px;
78 | $line-height-headline: 42px;
79 | 
80 | $font-size-title: 34px;
81 | $line-height-title: 48px;
82 | 
83 | 


--------------------------------------------------------------------------------
/src/Main/General/sections/WeeklySleep.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types'; 
 3 | import moment from 'moment';
 4 | import {
 5 |   BarChart,
 6 |   Bar,
 7 |   YAxis,
 8 |   Tooltip,
 9 | } from 'recharts';
10 | import forEach from 'lodash/forEach';
11 | import CustomTooltip from '../../../components/Tooltip';
12 | import BarShape from '../../../components/BarShape';
13 | import css from './styles.css';
14 | 
15 | function normalizeData(entries) {
16 |   let entryDate = null;
17 |   if (entries.length > 0) {
18 |     entryDate = entries[entries.length - 1].startDate;
19 |   }
20 |   let normalizedOutput = 0;
21 | 
22 |   forEach(entries, (entry) => {
23 |     if (entry.value === 'INBED') {
24 |       normalizedOutput += moment(entry.endDate) - moment(entry.startDate);
25 |     }
26 |   });
27 | 
28 |   normalizedOutput = (normalizedOutput / 3600 / 1000).toFixed(2);
29 |   return {
30 |     value: parseInt(normalizedOutput, 10),
31 |     startDate: entryDate,
32 |   };
33 | }
34 | 
35 | const WeeklySleep = ({ dataSleep = [] }) => {
36 |   const weeklySleep = [];
37 |   forEach(dataSleep, (entries) => {
38 |     weeklySleep.push(normalizeData(entries));
39 |   });
40 | 
41 |   return (
42 |     <div>
43 |       <div className={css.graphWrapper}>
44 |         <BarChart width={350} height={120} data={weeklySleep}>
45 |           <YAxis
46 |             axisLine={false}
47 |             tick={false}
48 |             tickLine={false}
49 |           />
50 |           <Bar
51 |             unit="hours slept"
52 |             dataKey="value"
53 |             fill="#AEBDFC"
54 |             barSize={8}
55 |             shape={<BarShape coeffHeight={1} />}
56 |           />
57 |           <Tooltip content={<CustomTooltip />} />
58 |         </BarChart>
59 |       </div>
60 |       <div className={css.graphFooter}>
61 |         <div className={css.dataLabel}>
62 |           Weekly sleep hours
63 |           <span><hr /></span>
64 |         </div>
65 |       </div>
66 |     </div>
67 |   );
68 | };
69 | 
70 | WeeklySleep.propTypes = {
71 |   dataSleep: PropTypes.array,
72 | };
73 | 
74 | export default WeeklySleep;
75 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl = envPublicUrl ||
37 |     (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/src/Main/General/styles.css:
--------------------------------------------------------------------------------
  1 | @import "global/styles/utilities.css";
  2 | 
  3 | html { 
  4 |   -webkit-font-smoothing: antialiased;
  5 | }
  6 | 
  7 | body {
  8 |   font-family: 'Helvetica';
  9 |   padding: 0;
 10 |   margin: 0;
 11 | }
 12 | 
 13 | i {
 14 |   margin-left: $space-xxs;
 15 |   margin-right: $space-xxs;
 16 | }
 17 | 
 18 | .mainHeader {
 19 |   box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.15);
 20 |   height: 400px;
 21 | }
 22 | 
 23 | .wrapper {
 24 |   max-width: 900px;
 25 |   margin: 0 auto;
 26 | }
 27 | 
 28 | .mainTitle {
 29 |   color: $color-black;
 30 |   font-size: $font-size-title;
 31 |   line-height: $line-height-title;
 32 |   font-weight: 700;
 33 |   padding-top: 50px;
 34 | }
 35 | 
 36 | .subTitleBlock {
 37 |   margin-top: $space-xxs;
 38 |   color: $color-tuna;
 39 | }
 40 | 
 41 | .emphasize {
 42 |   color: $color-black;
 43 |   font-weight: 700;
 44 |   margin-bottom: $space-md;
 45 | }
 46 | 
 47 | .buttonWrapper {
 48 |   margin-left: $space-sm;
 49 | }
 50 | 
 51 | .buttons {
 52 |   margin-right: $space-xs;
 53 |   display: inline;
 54 |   text-decoration: underline;
 55 |   font-size: $font-size-text;
 56 |   color: $color-tuna;
 57 |   cursor: pointer;
 58 | }
 59 | 
 60 | .section {
 61 |   margin-top: $space-xxxl;
 62 | }
 63 | 
 64 | .sectionTitle {
 65 |   font-size: $font-size-subtitle-small;
 66 |   font-weight: 700;
 67 | }
 68 | 
 69 | .dataRow {
 70 |   display: flex;
 71 | }
 72 | 
 73 | .graphRow {
 74 |   margin-top: $space-xxxl;
 75 | }
 76 | 
 77 | .dataItem {
 78 |   flex-grow: 1;
 79 | }
 80 | 
 81 | @media (--lt-md) {
 82 |   .mainHeader {
 83 |     height: 900px;
 84 |     box-shadow: none;
 85 |   }
 86 | 
 87 |   .titleSection {
 88 |     text-align: center;
 89 |   }
 90 | 
 91 |   .section {
 92 |     margin-top: $space-xxxl;
 93 |   }
 94 | 
 95 |   .sectionTop {
 96 |     margin-left: $space-md;
 97 |   }
 98 | 
 99 |   .dataRow {
100 |     display: block;
101 |     margin: $space-lg auto;
102 |   }
103 | 
104 |   .dataItem {
105 |     display: inline-block;
106 |     vertical-align: middle;
107 |     margin-top: $space-md;
108 |     margin-right: $space-xxs;
109 |     margin-left: $space-xs;
110 |   }
111 | 
112 |   .hrDataRow {
113 |     margin: 0 auto;
114 |   }
115 | }
116 | 


--------------------------------------------------------------------------------
/src/Main/General/sections/styles.css:
--------------------------------------------------------------------------------
  1 | @import "global/styles/utilities.css";
  2 | 
  3 | .dataLabel {
  4 |   color: $color-white;
  5 |   font-size: $font-size-text;
  6 |   font-weight: 700;
  7 | }
  8 | 
  9 | .card {
 10 |   border-radius: 8px;
 11 | }
 12 | 
 13 | .heartCard {
 14 |   width: 400px;
 15 |   height: 175px;
 16 |   box-shadow: 3px 5px 10px 0 rgba(0,0,0,0.16);
 17 |   background-image: linear-gradient(90deg, #FCA9BF 0%, #FF4A6F 100%);
 18 | }
 19 | 
 20 | .weightCard {
 21 |   width: 150px;
 22 |   height: 175px;
 23 |   box-shadow: 3px 5px 10px 0 rgba(0,0,0,0.16);
 24 |   background-image: linear-gradient(90deg, #FEA6A4 0%, #FB6E6D 100%);
 25 | }
 26 | 
 27 | .stepCard {
 28 |   width: 150px;
 29 |   height: 175px;
 30 |   box-shadow: 3px 5px 10px 0 rgba(0,0,0,0.16);
 31 |   background-image: linear-gradient(90deg, #94D8FA 0%, #6C8CF3 100%);
 32 | }
 33 | 
 34 | .cyclingCard {
 35 |   width: 150px;
 36 |   height: 75px;
 37 |   box-shadow: 3px 5px 10px 0 rgba(0,0,0,0.16);
 38 |   background-image: linear-gradient(90deg, #AFF7F3 0%, #73E8F8 100%);
 39 | }
 40 | 
 41 | .sleepCard {
 42 |   width: 150px;
 43 |   height: 75px;
 44 |   box-shadow: 3px 5px 10px 0 rgba(0,0,0,0.16);
 45 |   background-image: linear-gradient(90deg, #7D88EB 0%,#4C52A7 100%);
 46 |   margin-top: 25px;
 47 | }
 48 | 
 49 | .graphWrapper {
 50 |   margin-left: -45px;
 51 | }
 52 | 
 53 | .graphFooter {
 54 |   width: 85%;
 55 |   margin-top: $space-xs;
 56 | }
 57 | 
 58 | .hrDataRow {
 59 |   display: flex;
 60 |   width: 375px;
 61 |   margin-left: 8px;
 62 | }
 63 | 
 64 | .hrDataItem {
 65 |   flex-grow: 1;
 66 |   text-align: center;
 67 |   color: $color-white;
 68 |   font-weight: 700;
 69 | }
 70 | 
 71 | .hrDataItem:not(:last-child) {
 72 |   border-right: 1px solid $color-white;
 73 | }
 74 | 
 75 | .stepDataWrapper {
 76 |   height: 100%;
 77 |   text-align: center;
 78 |   color: $color-tuna;
 79 | }
 80 | 
 81 | .centeredColumn {
 82 |   height: 90%;
 83 |   display: flex;
 84 |   flex-direction: column;
 85 |   justify-content: center;
 86 |   margin-left: 35px;
 87 | }
 88 | 
 89 | .stepData {
 90 |   font-weight: 700;
 91 |   color: $color-white;
 92 |   margin-bottom: $space-xs;
 93 | }
 94 | 
 95 | .distanceData {
 96 |   font-weight: 700;
 97 |   color: $color-white;
 98 |   margin-top: $space-xs;
 99 | }
100 | 
101 | .weightData {
102 |   font-weight: 700;
103 |   color: $color-white;
104 |   margin-top: $space-xs;
105 |   margin-bottom: $space-xs;
106 | }
107 | 
108 | .bfData {
109 |   font-weight: 700;
110 |   color: $color-white;
111 |   margin-top: $space-xs;
112 |   margin-bottom: $space-xs;
113 | }
114 | 
115 | .cycleData {
116 |   font-weight: 700;
117 |   color: $color-white;
118 |   margin-top: $space-xs;
119 |   margin-bottom: $space-xs;
120 | }
121 | 
122 | .sleepData {
123 |   font-weight: 700;
124 |   color: $color-white;
125 |   margin-top: $space-xs;
126 |   margin-bottom: $space-xs;
127 | }
128 | 
129 | @media (--lt-md) {
130 |   .heartCard {
131 |     width: 320px !important;
132 |     display: inline-block;
133 |   }
134 | 
135 |   .hrDataRow {
136 |     display: flex;
137 |     width: 100%;
138 |     margin-left: 0px;
139 |   }
140 | }
141 | 


--------------------------------------------------------------------------------
/src/Main/General/sections/DailyHeartRate.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types'; 
  3 | import moment from 'moment';
  4 | import forEach from 'lodash/forEach';
  5 | import cloneDeep from 'lodash/cloneDeep';
  6 | import reverse from 'lodash/reverse';
  7 | import css from './styles.css';
  8 | import {
  9 |   LineChart,
 10 |   Line,
 11 |   YAxis,
 12 | } from 'recharts';
 13 | 
 14 | class DailyHeartRate extends Component {
 15 |   static propTypes = {
 16 |     data: PropTypes.array,
 17 |     min: PropTypes.number,
 18 |     max: PropTypes.number,
 19 |     today: PropTypes.bool,
 20 |   }
 21 | 
 22 |   normalizeData(entries) {
 23 |     const paddedData = new Array(150).fill({ value: NaN });
 24 |     const normalizedData = [];
 25 | 
 26 |     forEach(entries, (entry, i) => {
 27 |       if (normalizedData.length === 0 || i === entries.length) {
 28 |         normalizedData.push(entry);
 29 |       } else {
 30 |         const datea =
 31 |           moment(entry.startDate);
 32 |         const dateb =
 33 |           moment(normalizedData[normalizedData.length - 1].startDate);
 34 |         if ((datea - dateb) / 1000 > 120) {
 35 |           normalizedData.push(entry);
 36 |         }
 37 |       }
 38 |     });
 39 |     paddedData.splice
 40 |       .apply(paddedData, [0, normalizedData.length].concat(normalizedData));
 41 |     return paddedData;
 42 |   }
 43 | 
 44 |   render() {
 45 |     const {
 46 |       data,
 47 |       today,
 48 |       min,
 49 |       max,
 50 |     } = this.props;
 51 |     const copiedData = cloneDeep(data);
 52 |     const hrData = this.normalizeData(reverse(copiedData));
 53 |     return (
 54 |       <div className={`${css.card} ${css.heartCard}`}>
 55 |         <div className={css.graphWrapper}>
 56 |           <div>
 57 |             <LineChart
 58 |               width={350}
 59 |               height={120}
 60 |               data={hrData}
 61 |               margin={{ left: 0 }}
 62 |             >
 63 |               <Line
 64 |                 type="monotone"
 65 |                 dataKey="value"
 66 |                 stroke="#FFF"
 67 |                 strokeWidth="3"
 68 |                 dot={false}
 69 |                 unit="bpm"
 70 |               />
 71 |               <YAxis
 72 |                 unit="bpm"
 73 |                 type="number"
 74 |                 domain={[30, 200]}
 75 |                 axisLine={false}
 76 |                 tick={false}
 77 |                 tickLine={false}
 78 |               />
 79 |             </LineChart>
 80 |           </div>
 81 |         </div>
 82 |         <div className={css.hrDataRow}>
 83 |           { today ?
 84 |           (
 85 |             <div className={css.hrDataItem}>
 86 |               {
 87 |                 `${data.length > 0 ? data[data.length - 1].value : 0}
 88 |                 bpm `
 89 |               }
 90 |               <div className={css.dataLabel}>Heart Rate</div>
 91 |             </div>
 92 |             ) : null
 93 |           }
 94 |           <div className={css.hrDataItem}>
 95 |             {min || 0} bpm
 96 |             <div className={css.dataLabel}>Min. Heart Rate</div>
 97 |           </div>
 98 |           <div className={css.hrDataItem}>
 99 |             {max || 0} bpm
100 |             <div className={css.dataLabel}>Max. Heart Rate</div>
101 |           </div>
102 |         </div>
103 |       </div>
104 |     );
105 |   }
106 | }
107 | 
108 | export default DailyHeartRate;
109 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "healthdashboard",
  3 |   "version": "0.5.0",
  4 |   "private": true,
  5 |   "proxy": "https://health-backend-go.herokuapp.com:8000",
  6 |   "devDependencies": {
  7 |     "autoprefixer": "7.1.0",
  8 |     "babel-core": "6.24.1",
  9 |     "babel-eslint": "7.2.3",
 10 |     "babel-jest": "20.0.3",
 11 |     "babel-loader": "7.0.0",
 12 |     "babel-plugin-transform-decorators-legacy": "^1.3.4",
 13 |     "babel-preset-react-app": "^3.0.0",
 14 |     "babel-runtime": "6.23.0",
 15 |     "case-sensitive-paths-webpack-plugin": "1.1.4",
 16 |     "chalk": "1.1.3",
 17 |     "css-loader": "0.28.1",
 18 |     "dotenv": "4.0.0",
 19 |     "eslint": "3.19.0",
 20 |     "eslint-config-react-app": "^1.0.4",
 21 |     "eslint-loader": "1.7.1",
 22 |     "eslint-plugin-flowtype": "2.33.0",
 23 |     "eslint-plugin-import": "2.2.0",
 24 |     "eslint-plugin-jsx-a11y": "5.0.3",
 25 |     "eslint-plugin-react": "7.0.1",
 26 |     "extract-text-webpack-plugin": "2.1.0",
 27 |     "file-loader": "0.11.1",
 28 |     "fs-extra": "3.0.1",
 29 |     "html-webpack-plugin": "2.28.0",
 30 |     "jest": "20.0.3",
 31 |     "object-assign": "4.1.1",
 32 |     "postcss-custom-media": "^6.0.0",
 33 |     "postcss-flexbugs-fixes": "3.0.0",
 34 |     "postcss-import": "^10.0.0",
 35 |     "postcss-loader": "2.0.5",
 36 |     "postcss-media-minmax": "^3.0.0",
 37 |     "postcss-nested": "^2.0.2",
 38 |     "postcss-simple-vars": "^4.0.0",
 39 |     "promise": "7.1.1",
 40 |     "react-dev-utils": "^3.0.0",
 41 |     "react-error-overlay": "^1.0.7",
 42 |     "style-loader": "0.17.0",
 43 |     "sw-precache-webpack-plugin": "0.9.1",
 44 |     "url-loader": "0.5.8",
 45 |     "webpack": "2.6.1",
 46 |     "webpack-dev-server": "2.4.5",
 47 |     "webpack-manifest-plugin": "1.1.0",
 48 |     "whatwg-fetch": "2.0.3"
 49 |   },
 50 |   "dependencies": {
 51 |     "apollo-client": "^1.4.0",
 52 |     "graphql": "^0.10.1",
 53 |     "graphql-tag": "^2.2.1",
 54 |     "moment": "^2.18.1",
 55 |     "prop-types": "^15.5.10",
 56 |     "react": "^15.5.4",
 57 |     "react-apollo": "^1.4.2",
 58 |     "react-dom": "^15.5.4",
 59 |     "react-redux": "^5.0.5",
 60 |     "react-router": "^4.1.1",
 61 |     "react-router-dom": "^4.1.1",
 62 |     "recharts": "^0.22.4",
 63 |     "redux": "^3.6.0",
 64 |     "redux-logger": "^3.0.6",
 65 |     "redux-promise-middleware": "^4.3.0"
 66 |   },
 67 |   "scripts": {
 68 |     "start": "node scripts/start.js",
 69 |     "build": "node scripts/build.js",
 70 |     "test": "node scripts/test.js --env=jsdom"
 71 |   },
 72 |   "jest": {
 73 |     "collectCoverageFrom": [
 74 |       "src/**/*.{js,jsx}"
 75 |     ],
 76 |     "setupFiles": [
 77 |       "<rootDir>/config/polyfills.js"
 78 |     ],
 79 |     "testMatch": [
 80 |       "<rootDir>/src/**/__tests__/**/*.js?(x)",
 81 |       "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
 82 |     ],
 83 |     "testEnvironment": "node",
 84 |     "testURL": "http://localhost",
 85 |     "transform": {
 86 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
 87 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
 88 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
 89 |     },
 90 |     "transformIgnorePatterns": [
 91 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
 92 |     ],
 93 |     "moduleNameMapper": {
 94 |       "^react-native$": "react-native-web"
 95 |     }
 96 |   },
 97 |   "babel": {
 98 |     "plugins": [
 99 |       "transform-decorators-legacy"
100 |     ],
101 |     "presets": [
102 |       "react-app"
103 |     ]
104 |   },
105 |   "eslintConfig": {
106 |     "extends": "react-app"
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce(
82 |       (env, key) => {
83 |         env[key] = JSON.stringify(raw[key]);
84 |         return env;
85 |       },
86 |       {}
87 |     ),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const fs = require('fs');
 18 | const chalk = require('chalk');
 19 | const webpack = require('webpack');
 20 | const WebpackDevServer = require('webpack-dev-server');
 21 | const clearConsole = require('react-dev-utils/clearConsole');
 22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 23 | const {
 24 |   choosePort,
 25 |   createCompiler,
 26 |   prepareProxy,
 27 |   prepareUrls,
 28 | } = require('react-dev-utils/WebpackDevServerUtils');
 29 | const openBrowser = require('react-dev-utils/openBrowser');
 30 | const paths = require('../config/paths');
 31 | const config = require('../config/webpack.config.dev');
 32 | const createDevServerConfig = require('../config/webpackDevServer.config');
 33 | 
 34 | const exec = require('child_process').exec;
 35 | 
 36 | const useYarn = fs.existsSync(paths.yarnLockFile);
 37 | const isInteractive = process.stdout.isTTY;
 38 | 
 39 | // Warn and crash if required files are missing
 40 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 41 |   process.exit(1);
 42 | }
 43 | 
 44 | // Tools like Cloud9 rely on this.
 45 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 46 | const HOST = process.env.HOST || '0.0.0.0';
 47 | 
 48 | const cmd = 'go run -v go/src/server/main.go -entry=./index.html -static=./'
 49 | 
 50 | console.log('Starting Go server')
 51 | const runServer = exec(cmd);
 52 | 
 53 | runServer.stdout.on( 'data', data => {
 54 |     console.log( `${data}` );
 55 | });
 56 | 
 57 | runServer.stderr.on( 'data', data => {
 58 |     console.log( `${data}` );
 59 | });
 60 | 
 61 | runServer.on( 'close', code => {
 62 |     console.log( `child process exited with code ${code}` );
 63 | });
 64 | 
 65 | // We attempt to use the default port but if it is busy, we offer the user to
 66 | // run on a different port. `detect()` Promise resolves to the next free port.
 67 | choosePort(HOST, DEFAULT_PORT)
 68 |   .then(port => {
 69 |     if (port == null) {
 70 |       // We have not found a port.
 71 |       return;
 72 |     }
 73 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 74 |     const appName = require(paths.appPackageJson).name;
 75 |     const urls = prepareUrls(protocol, HOST, port);
 76 |     // Create a webpack compiler that is configured with custom messages.
 77 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
 78 |     // Load proxy config
 79 |     const proxySetting = require(paths.appPackageJson).proxy;
 80 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
 81 |     // Serve webpack assets generated by the compiler over a web sever.
 82 |     const serverConfig = createDevServerConfig(
 83 |       proxyConfig,
 84 |       urls.lanUrlForConfig
 85 |     );
 86 |     const devServer = new WebpackDevServer(compiler, serverConfig);
 87 |     // Launch WebpackDevServer.
 88 |     devServer.listen(port, HOST, err => {
 89 |       if (err) {
 90 |         return console.log(err);
 91 |       }
 92 |       if (isInteractive) {
 93 |         clearConsole();
 94 |       }
 95 |       console.log(chalk.cyan('Starting the development server...\n'));
 96 |       openBrowser(urls.localUrlForBrowser);
 97 |     });
 98 | 
 99 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
100 |       process.on(sig, function() {
101 |         devServer.close();
102 |         process.exit();
103 |       });
104 |     });
105 |   })
106 |   .catch(err => {
107 |     if (err && err.message) {
108 |       console.log(err.message);
109 |     }
110 |     process.exit(1);
111 |   });
112 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const path = require('path');
 18 | const chalk = require('chalk');
 19 | const fs = require('fs-extra');
 20 | const webpack = require('webpack');
 21 | const config = require('../config/webpack.config.prod');
 22 | const paths = require('../config/paths');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 25 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 26 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 27 | 
 28 | const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;
 29 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 30 | const useYarn = fs.existsSync(paths.yarnLockFile);
 31 | 
 32 | // Warn and crash if required files are missing
 33 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 34 |   process.exit(1);
 35 | }
 36 | 
 37 | // First, read the current file sizes in build directory.
 38 | // This lets us display how much they changed later.
 39 | measureFileSizesBeforeBuild(paths.appBuild)
 40 |   .then(previousFileSizes => {
 41 |     // Remove all content but keep the directory so that
 42 |     // if you're in it, you don't end up in Trash
 43 |     fs.emptyDirSync(paths.appBuild);
 44 |     // Merge with the public folder
 45 |     copyPublicFolder();
 46 |     // Start the webpack build
 47 |     return build(previousFileSizes);
 48 |   })
 49 |   .then(
 50 |     ({ stats, previousFileSizes, warnings }) => {
 51 |       if (warnings.length) {
 52 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 53 |         console.log(warnings.join('\n\n'));
 54 |         console.log(
 55 |           '\nSearch for the ' +
 56 |             chalk.underline(chalk.yellow('keywords')) +
 57 |             ' to learn more about each warning.'
 58 |         );
 59 |         console.log(
 60 |           'To ignore, add ' +
 61 |             chalk.cyan('// eslint-disable-next-line') +
 62 |             ' to the line before.\n'
 63 |         );
 64 |       } else {
 65 |         console.log(chalk.green('Compiled successfully.\n'));
 66 |       }
 67 | 
 68 |       console.log('File sizes after gzip:\n');
 69 |       printFileSizesAfterBuild(stats, previousFileSizes, paths.appBuild);
 70 |       console.log();
 71 | 
 72 |       const appPackage = require(paths.appPackageJson);
 73 |       const publicUrl = paths.publicUrl;
 74 |       const publicPath = config.output.publicPath;
 75 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
 76 |       printHostingInstructions(
 77 |         appPackage,
 78 |         publicUrl,
 79 |         publicPath,
 80 |         buildFolder,
 81 |         useYarn
 82 |       );
 83 |     },
 84 |     err => {
 85 |       console.log(chalk.red('Failed to compile.\n'));
 86 |       console.log((err.message || err) + '\n');
 87 |       process.exit(1);
 88 |     }
 89 |   );
 90 | 
 91 | // Create the production build and print the deployment instructions.
 92 | function build(previousFileSizes) {
 93 |   console.log('Creating an optimized production build...');
 94 | 
 95 |   let compiler = webpack(config);
 96 |   return new Promise((resolve, reject) => {
 97 |     compiler.run((err, stats) => {
 98 |       if (err) {
 99 |         return reject(err);
100 |       }
101 |       const messages = formatWebpackMessages(stats.toJson({}, true));
102 |       if (messages.errors.length) {
103 |         return reject(new Error(messages.errors.join('\n\n')));
104 |       }
105 |       if (process.env.CI && messages.warnings.length) {
106 |         console.log(
107 |           chalk.yellow(
108 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
109 |               'Most CI servers set it automatically.\n'
110 |           )
111 |         );
112 |         return reject(new Error(messages.warnings.join('\n\n')));
113 |       }
114 |       return resolve({
115 |         stats,
116 |         previousFileSizes,
117 |         warnings: messages.warnings,
118 |       });
119 |     });
120 |   });
121 | }
122 | 
123 | function copyPublicFolder() {
124 |   fs.copySync(paths.appPublic, paths.appBuild, {
125 |     dereference: true,
126 |     filter: file => file !== paths.appHtml,
127 |   });
128 | }
129 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 
  2 | 'use strict';
  3 | 
  4 | const errorOverlayMiddleware = require('react-error-overlay/middleware');
  5 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  6 | const config = require('./webpack.config.dev');
  7 | const paths = require('./paths');
  8 | 
  9 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 10 | const host = process.env.HOST || '0.0.0.0';
 11 | 
 12 | module.exports = function(proxy, allowedHost) {
 13 |   return {
 14 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 15 |     // websites from potentially accessing local content through DNS rebinding:
 16 |     // https://github.com/webpack/webpack-dev-server/issues/887
 17 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 18 |     // However, it made several existing use cases such as development in cloud
 19 |     // environment or subdomains in development significantly more complicated:
 20 |     // https://github.com/facebookincubator/create-react-app/issues/2271
 21 |     // https://github.com/facebookincubator/create-react-app/issues/2233
 22 |     // While we're investigating better solutions, for now we will take a
 23 |     // compromise. Since our WDS configuration only serves files in the `public`
 24 |     // folder we won't consider accessing them a vulnerability. However, if you
 25 |     // use the `proxy` feature, it gets more dangerous because it can expose
 26 |     // remote code execution vulnerabilities in backends like Django and Rails.
 27 |     // So we will disable the host check normally, but enable it if you have
 28 |     // specified the `proxy` setting. Finally, we let you override it if you
 29 |     // really know what you're doing with a special environment variable.
 30 |     disableHostCheck: !proxy ||
 31 |       process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 32 |     // Enable gzip compression of generated files.
 33 |     compress: true,
 34 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 35 |     // It will still show compile warnings and errors with this setting.
 36 |     clientLogLevel: 'none',
 37 |     // By default WebpackDevServer serves physical files from current directory
 38 |     // in addition to all the virtual build products that it serves from memory.
 39 |     // This is confusing because those files won’t automatically be available in
 40 |     // production build folder unless we copy them. However, copying the whole
 41 |     // project directory is dangerous because we may expose sensitive files.
 42 |     // Instead, we establish a convention that only files in `public` directory
 43 |     // get served. Our build script will copy `public` into the `build` folder.
 44 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 45 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 46 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 47 |     // Note that we only recommend to use `public` folder as an escape hatch
 48 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 49 |     // for some reason broken when imported through Webpack. If you just want to
 50 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 51 |     contentBase: paths.appPublic,
 52 |     // By default files from `contentBase` will not trigger a page reload.
 53 |     watchContentBase: true,
 54 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
 55 |     // for the WebpackDevServer client so it can learn when the files were
 56 |     // updated. The WebpackDevServer client is included as an entry point
 57 |     // in the Webpack development configuration. Note that only changes
 58 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 59 |     hot: true,
 60 |     // It is important to tell WebpackDevServer to use the same "root" path
 61 |     // as we specified in the config. In development, we always serve from /.
 62 |     publicPath: config.output.publicPath,
 63 |     // WebpackDevServer is noisy by default so we emit custom message instead
 64 |     // by listening to the compiler events with `compiler.plugin` calls above.
 65 |     quiet: true,
 66 |     // Reportedly, this avoids CPU overload on some systems.
 67 |     // https://github.com/facebookincubator/create-react-app/issues/293
 68 |     watchOptions: {
 69 |       ignored: /node_modules/,
 70 |     },
 71 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 72 |     https: protocol === 'https',
 73 |     host: host,
 74 |     overlay: false,
 75 |     historyApiFallback: {
 76 |       // Paths with dots should still use the history fallback.
 77 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
 78 |       disableDotRule: true,
 79 |     },
 80 |     public: allowedHost,
 81 |     proxy: {
 82 |       '/api': {
 83 |         target: 'http://localhost:8000',
 84 |         //target: 'https://calm-badlands-15515.herokuapp.com:8000',
 85 |         secure: true
 86 |       }
 87 |     },
 88 |     setup(app) {
 89 |       // This lets us open files from the runtime error overlay.
 90 |       app.use(errorOverlayMiddleware());
 91 |       // This service worker file is effectively a 'no-op' that will reset any
 92 |       // previous service worker registered for the same host:port combination.
 93 |       // We do this in development to avoid hitting the production cache if
 94 |       // it used the same host and port.
 95 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
 96 |       app.use(noopServiceWorkerMiddleware());
 97 |     },
 98 |   };
 99 | };
100 | 


--------------------------------------------------------------------------------
/src/Main/config/index.js:
--------------------------------------------------------------------------------
  1 | export const query = `query HealthData (
  2 |   $date: String!,
  3 |   $date1: String!,
  4 |   $date2: String!,
  5 |   $date3: String!,
  6 |   $date4: String!,
  7 |   $date5: String!,
  8 |   $date6: String!){
  9 |     HeartRate(date: $date)
 10 |       {
 11 |         startDate,
 12 |         value,
 13 |         endDate
 14 |       }
 15 |     CyclingDistance(date: $date)
 16 |       {
 17 |         startDate,
 18 |         value,
 19 |         endDate
 20 |       }
 21 |     MinMaxHeartRate(date: $date)
 22 |       {
 23 |         min,
 24 |         max
 25 |       }
 26 |     WalkingRunningDistance(date: $date)
 27 |       {
 28 |         startDate,
 29 |         value,
 30 |         endDate
 31 |       }
 32 |     StepCount(date: $date)
 33 |       {
 34 |         startDate,
 35 |         value,
 36 |         endDate
 37 |       }
 38 |     SleepAnalysis(date: $date)
 39 |       {
 40 |         startDate,
 41 |         value,
 42 |         endDate
 43 |       }
 44 |     Weight(date: $date)
 45 |       {
 46 |         startDate,
 47 |         value,
 48 |         endDate
 49 |       }
 50 |     BodyFatPercentage(date: $date)
 51 |       {
 52 |         startDate,
 53 |         value,
 54 |         endDate
 55 |       }
 56 |     BMI(date: $date)
 57 |       {
 58 |         startDate,
 59 |         value,
 60 |         endDate
 61 |       }
 62 |     MinMaxHeartRateDate1: MinMaxHeartRate(date: $date1)
 63 |       {
 64 |         min,
 65 |         max
 66 |       }
 67 |     MinMaxHeartRateDate2: MinMaxHeartRate(date: $date2)
 68 |       {
 69 |         min,
 70 |         max
 71 |       }
 72 |     MinMaxHeartRateDate3: MinMaxHeartRate(date: $date3)
 73 |       {
 74 |         min,
 75 |         max
 76 |       }
 77 |     MinMaxHeartRateDate4: MinMaxHeartRate(date: $date4)
 78 |       {
 79 |         min,
 80 |         max
 81 |       }
 82 |     MinMaxHeartRateDate5: MinMaxHeartRate(date: $date5)
 83 |       {
 84 |         min,
 85 |         max
 86 |       }
 87 |     MinMaxHeartRateDate6: MinMaxHeartRate(date: $date6)
 88 |       {
 89 |         min,
 90 |         max
 91 |       }
 92 |     SleepAnalysisDate1: SleepAnalysis(date: $date1)
 93 |       {
 94 |         startDate,
 95 |         value,
 96 |         endDate,
 97 |       }
 98 |     SleepAnalysisDate2: SleepAnalysis(date: $date2)
 99 |       {
100 |         endDate,
101 |         startDate,
102 |         value,
103 |       }
104 |     SleepAnalysisDate3: SleepAnalysis(date: $date3)
105 |       {
106 |         startDate,
107 |         value,
108 |         endDate,
109 |       }
110 |     SleepAnalysisDate4: SleepAnalysis(date: $date4)
111 |       {
112 |         startDate,
113 |         value,
114 |         endDate,
115 |       }
116 |     SleepAnalysisDate5: SleepAnalysis(date: $date5)
117 |       {
118 |         startDate,
119 |         value,
120 |         endDate,
121 |       }
122 |     SleepAnalysisDate6: SleepAnalysis(date: $date6)
123 |       {
124 |         startDate
125 |         value,
126 |         endDate,
127 |       }
128 |     StepCountDate1: StepCount(date: $date1)
129 |       {
130 |         startDate,
131 |         value,
132 |       }
133 |     StepCountDate2: StepCount(date: $date2)
134 |       {
135 |         startDate,
136 |         value,
137 |       }
138 |     StepCountDate3: StepCount(date: $date3)
139 |       {
140 |         startDate,
141 |         value,
142 |       }
143 |     StepCountDate4: StepCount(date: $date4)
144 |       {
145 |         startDate,
146 |         value,
147 |       }
148 |     StepCountDate5: StepCount(date: $date5)
149 |       {
150 |         startDate,
151 |         value,
152 |       }
153 |     StepCountDate6: StepCount(date: $date6)
154 |       {
155 |         startDate,
156 |         value,
157 |       }
158 |     CyclingDate1: CyclingDistance(date: $date1)
159 |       {
160 |         startDate
161 |         value,
162 |       }
163 |     CyclingDate2: CyclingDistance(date: $date2)
164 |       {
165 |         startDate,
166 |         value,
167 |       }
168 |     CyclingDate3: CyclingDistance(date: $date3)
169 |       {
170 |         startDate,
171 |         value,
172 |       }
173 |     CyclingDate4: CyclingDistance(date: $date4)
174 |       {
175 |         startDate,
176 |         value,
177 |       }
178 |     CyclingDate5: CyclingDistance(date: $date5)
179 |       {
180 |         startDate,
181 |         value,
182 |       }
183 |     CyclingDate6: CyclingDistance(date: $date6)
184 |       {
185 |         startDate,
186 |         value,
187 |       }
188 |     WeightDate1: Weight(date: $date1)
189 |       {
190 |         startDate
191 |         value,
192 |       }
193 |     WeightDate2: Weight(date: $date2)
194 |       {
195 |         startDate,
196 |         value,
197 |       }
198 |     WeightDate3: Weight(date: $date3)
199 |       {
200 |         startDate,
201 |         value,
202 |       }
203 |     WeightDate4: Weight(date: $date4)
204 |       {
205 |         startDate,
206 |         value,
207 |       }
208 |     WeightDate5: Weight(date: $date5)
209 |       {
210 |         startDate,
211 |         value,
212 |       }
213 |     WeightDate6: Weight(date: $date6)
214 |       {
215 |         startDate,
216 |         value,
217 |       }
218 |     BodyFatPercentage1: BodyFatPercentage(date: $date1)
219 |       {
220 |         startDate
221 |         value,
222 |       }
223 |     BodyFatPercentage2: BodyFatPercentage(date: $date2)
224 |       {
225 |         startDate,
226 |         value,
227 |       }
228 |     BodyFatPercentage3: BodyFatPercentage(date: $date3)
229 |       {
230 |         startDate,
231 |         value,
232 |       }
233 |     BodyFatPercentage4: BodyFatPercentage(date: $date4)
234 |       {
235 |         startDate,
236 |         value,
237 |       }
238 |     BodyFatPercentage5: BodyFatPercentage(date: $date5)
239 |       {
240 |         startDate,
241 |         value,
242 |       }
243 |     BodyFatPercentage6: BodyFatPercentage(date: $date6)
244 |       {
245 |         startDate,
246 |         value,
247 |       }
248 |     }`;
249 | 


--------------------------------------------------------------------------------
/src/Main/General/index.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types'; 
  3 | import { connect } from 'react-redux';
  4 | import { graphql } from 'react-apollo';
  5 | import { withRouter } from 'react-router-dom';
  6 | import moment from 'moment';
  7 | import gql from 'graphql-tag';
  8 | import { query } from '../config';
  9 | import css from './styles.css';
 10 | 
 11 | import DailyHeartRate from './sections/DailyHeartRate';
 12 | import DailySteps from './sections/DailySteps';
 13 | import DailyWeight from './sections/DailyWeight';
 14 | import DailyCycling from './sections/DailyCycling';
 15 | import DailySleep from './sections/DailySleep';
 16 | 
 17 | import WeeklySteps from './sections/WeeklySteps';
 18 | import WeeklyWeight from './sections/WeeklyWeight';
 19 | import WeeklyHeartRate from './sections/WeeklyHeartRate';
 20 | import WeeklySleep from './sections/WeeklySleep';
 21 | 
 22 | const healthQuery =
 23 |   gql`${query}`;
 24 | 
 25 | @withRouter
 26 | @graphql(healthQuery, {
 27 |   options: props => ({
 28 |     variables: {
 29 |       date: props.match.params.date === 'today' ?
 30 |         moment().format('YYYYMMDD') : props.match.params.date,
 31 |       date1: props.match.params.date === 'today'
 32 |         ? moment().add(-1, 'days').format('YYYYMMDD') :
 33 |         moment(props.match.params.date).add(-1, 'days').format('YYYYMMDD'),
 34 |       date2: props.match.params.date === 'today'
 35 |         ? moment().add(-2, 'days').format('YYYYMMDD') :
 36 |         moment(props.match.params.date).add(-2, 'days').format('YYYYMMDD'),
 37 |       date3: props.match.params.date === 'today'
 38 |         ? moment().add(-3, 'days').format('YYYYMMDD') :
 39 |         moment(props.match.params.date).add(-3, 'days').format('YYYYMMDD'),
 40 |       date4: props.match.params.date === 'today'
 41 |         ? moment().add(-4, 'days').format('YYYYMMDD') :
 42 |         moment(props.match.params.date).add(-4, 'days').format('YYYYMMDD'),
 43 |       date5: props.match.params.date === 'today'
 44 |         ? moment().add(-5, 'days').format('YYYYMMDD') :
 45 |         moment(props.match.params.date).add(-5, 'days').format('YYYYMMDD'),
 46 |       date6: props.match.params.date === 'today'
 47 |         ? moment().add(-6, 'days').format('YYYYMMDD') :
 48 |         moment(props.match.params.date).add(-6, 'days').format('YYYYMMDD'),
 49 |     },
 50 |   }),
 51 | })
 52 | class General extends Component {
 53 |   static propTypes = {
 54 |     dispatch: PropTypes.func,
 55 |     params: PropTypes.object,
 56 |     data: PropTypes.shape({
 57 |       isLoading: PropTypes.bool,
 58 |       CyclingDistance: PropTypes.object,
 59 |       HeartRate: PropTypes.array,
 60 |       MinMaxHeartRate: PropTypes.object,
 61 |     }),
 62 |     location: PropTypes.shape({
 63 |       pathname: PropTypes.string.isRequired,
 64 |     }).isRequired,
 65 |   }
 66 | 
 67 |   componentWillMount() {
 68 |     const { match } = this.props;
 69 |     const { params } = match;
 70 |     if (params.date !== 'today' && !moment(params.date).isValid()) {
 71 |       this.props.history
 72 |         .push('/entry/today');
 73 |     }
 74 |   }
 75 | 
 76 |   goToPreviousDay() {
 77 |     const previousDate = this.props.match.params.date === 'today' ?
 78 |             moment().add(-1, 'days').format('YYYYMMDD') :
 79 |             moment(this.props.match.params.date).add(-1, 'days').format('YYYYMMDD');
 80 |     this.props.history
 81 |       .push(`/entry/${previousDate}`);
 82 |   }
 83 | 
 84 |   goToNextDay() {
 85 |     const nextDate = this.props.match.params.date === 'today' ?
 86 |             moment().add(1, 'days').format('YYYYMMDD') :
 87 |             moment(this.props.match.params.date).add(1, 'days').format('YYYYMMDD');
 88 |     this.props.history
 89 |       .push(`/entry/${nextDate}`);
 90 |   }
 91 | 
 92 |   render() {
 93 |     const { data = {}, match } = this.props;
 94 |     const { params } = match;
 95 |     const today = moment().format('LL');
 96 |     const {
 97 |       HeartRate = [],
 98 |       MinMaxHeartRate = {},
 99 |       StepCount = {},
100 |       WalkingRunningDistance = {},
101 |       Weight = {},
102 |       BMI = {},
103 |       BodyFatPercentage = {},
104 |       CyclingDistance = {},
105 |       SleepAnalysis = {},
106 |       StepCountDate6 = {},
107 |       StepCountDate5 = {},
108 |       StepCountDate4 = {},
109 |       StepCountDate3 = {},
110 |       StepCountDate2 = {},
111 |       StepCountDate1 = {},
112 |       MinMaxHeartRateDate6 = {},
113 |       MinMaxHeartRateDate5 = {},
114 |       MinMaxHeartRateDate4 = {},
115 |       MinMaxHeartRateDate3 = {},
116 |       MinMaxHeartRateDate2 = {},
117 |       MinMaxHeartRateDate1 = {},
118 |       SleepAnalysisDate6 = {},
119 |       SleepAnalysisDate5 = {},
120 |       SleepAnalysisDate4 = {},
121 |       SleepAnalysisDate3 = {},
122 |       SleepAnalysisDate2 = {},
123 |       SleepAnalysisDate1 = {},
124 |       CyclingDate6 = {},
125 |       CyclingDate5 = {},
126 |       CyclingDate4 = {},
127 |       CyclingDate3 = {},
128 |       CyclingDate2 = {},
129 |       CyclingDate1 = {},
130 |       WeightDate6 = {},
131 |       WeightDate5 = {},
132 |       WeightDate4 = {},
133 |       WeightDate3 = {},
134 |       WeightDate2 = {},
135 |       WeightDate1 = {},
136 |       BodyFatPercentage6 = {},
137 |       BodyFatPercentage5 = {},
138 |       BodyFatPercentage4 = {},
139 |       BodyFatPercentage3 = {},
140 |       BodyFatPercentage2 = {},
141 |       BodyFatPercentage1 = {},
142 |     } = data;
143 | 
144 |     const stepWeeklyData = [
145 |       StepCountDate6,
146 |       StepCountDate5,
147 |       StepCountDate4,
148 |       StepCountDate3,
149 |       StepCountDate2,
150 |       StepCountDate1,
151 |       StepCount,
152 |     ];
153 | 
154 |     const cyclingWeeklyData = [
155 |       CyclingDate6,
156 |       CyclingDate5,
157 |       CyclingDate4,
158 |       CyclingDate3,
159 |       CyclingDate2,
160 |       CyclingDate1,
161 |       CyclingDistance,
162 |     ];
163 | 
164 |     const weightWeeklyData = [
165 |       WeightDate6,
166 |       WeightDate5,
167 |       WeightDate4,
168 |       WeightDate3,
169 |       WeightDate2,
170 |       WeightDate1,
171 |       Weight,
172 |     ];
173 | 
174 |     const bodyfatWeeklyData = [
175 |       BodyFatPercentage6,
176 |       BodyFatPercentage5,
177 |       BodyFatPercentage4,
178 |       BodyFatPercentage3,
179 |       BodyFatPercentage2,
180 |       BodyFatPercentage1,
181 |       BodyFatPercentage,
182 |     ];
183 | 
184 |     const heartRateWeeklyData = [
185 |       MinMaxHeartRateDate6,
186 |       MinMaxHeartRateDate5,
187 |       MinMaxHeartRateDate4,
188 |       MinMaxHeartRateDate3,
189 |       MinMaxHeartRateDate2,
190 |       MinMaxHeartRateDate1,
191 |       MinMaxHeartRate,
192 |     ];
193 | 
194 |     const sleepWeeklyData = [
195 |       SleepAnalysisDate6,
196 |       SleepAnalysisDate5,
197 |       SleepAnalysisDate4,
198 |       SleepAnalysisDate3,
199 |       SleepAnalysisDate2,
200 |       SleepAnalysisDate1,
201 |       SleepAnalysis,
202 |     ];
203 | 
204 |     return (
205 |       <div id="main-layout">
206 |         <div className={css.mainHeader}>
207 |           <div className={css.wrapper}>
208 |             <div className={css.titleSection}>
209 |               <div className={css.mainTitle}>
210 |                 Health Dashboard
211 |               </div>
212 |               <div className={css.subTitleBlock}>
213 |                 Mark Koester—
214 |                 <span className={css.emphasize}>
215 |                   <i className="fa fa-map-marker"
216 |                     aria-hidden="true"
217 |                   >
218 |                   </i>
219 |                   Data-Driven
220 |                 </span>
221 |               </div>
222 |             </div>
223 |             <div className={css.section}>
224 |               <div className={css.sectionTop} >
225 |                 <div className={css.sectionTitle}>
226 |                   {params.date === 'today' ?
227 |                     'Today\'s data' : 'Detailed data'
228 |                   }
229 |                 </div>
230 |                 <div className={css.emphasize}>
231 |                   {params.date === 'today' ?
232 |                     today : moment(params.date).format('LL')
233 |                   }
234 |                   <span className={css.buttonWrapper}>
235 |                     <div
236 |                       className={css.buttons}
237 |                       onClick={() => this.goToPreviousDay()}
238 |                     >
239 |                       Previous
240 |                     </div>
241 |                     <div
242 |                       className={css.buttons}
243 |                       onClick={() => this.goToNextDay()}
244 |                     >
245 |                       Next
246 |                     </div>
247 |                   </span>
248 |                 </div>
249 |               </div>
250 |               <div className={css.dataRow}>
251 |                 <div className={css.dataItem}>
252 |                   <DailyHeartRate
253 |                     data={HeartRate}
254 |                     min={MinMaxHeartRate.min}
255 |                     max={MinMaxHeartRate.max}
256 |                     today={params.date === 'today'}
257 |                   />
258 |                 </div>
259 |                 <div className={css.dataItem}>
260 |                   <DailyWeight
261 |                     dataWeight={Weight}
262 |                     dataBmi={BMI}
263 |                     dataBF={BodyFatPercentage}
264 |                   />
265 |                 </div>
266 |                 <div className={css.dataItem}>
267 |                   <DailySteps
268 |                     dataSteps={StepCount}
269 |                     dataDistance={WalkingRunningDistance}
270 |                   />
271 |                 </div>
272 |                 <div className={css.dataItem}>
273 |                   <DailyCycling
274 |                     dataCycling={CyclingDistance}
275 |                   />
276 |                   <DailySleep
277 |                     dataSleep={SleepAnalysis}
278 |                   />
279 |                 </div>
280 |               </div>
281 |             </div>
282 |           </div>
283 |           <div className={css.wrapper}>
284 |             <div className={css.section}>
285 |               <div className={css.sectionTop} >
286 |                 <div className={css.sectionTitle}>
287 |                   Weekly data
288 |                 </div>
289 |                 <div className={css.emphasize}>
290 |                   {params.date === 'today' ?
291 |                     `${moment().add(-6, 'days').format('LL')}
292 |                     – ${today}`
293 |                     :
294 |                     `${moment(params.date).add(-6, 'days').format('LL')}
295 |                     – ${moment(params.date).format('LL')}`
296 |                   }
297 |                 </div>
298 |               </div>
299 |               <div className={`${css.dataRow} ${css.graphRow}`}>
300 |                 <div className={css.dataItem}>
301 |                   <WeeklySteps
302 |                     dataSteps={stepWeeklyData}
303 |                     dataCycling={cyclingWeeklyData}
304 |                   />
305 |                 </div>
306 |                 <div className={css.dataItem}>
307 |                   <WeeklyWeight
308 |                     dataWeight={weightWeeklyData}
309 |                     dataBF={bodyfatWeeklyData}
310 |                   />
311 |                 </div>
312 |               </div>
313 |               <div className={`${css.dataRow} ${css.graphRow}`}>
314 |                 <div className={css.dataItem}>
315 |                   <WeeklyHeartRate
316 |                     dataHR={heartRateWeeklyData}
317 |                   />
318 |                 </div>
319 |                 <div className={css.dataItem}>
320 |                   <WeeklySleep
321 |                     dataSleep={sleepWeeklyData}
322 |                   />
323 |                 </div>
324 |               </div>
325 |             </div>
326 |           </div>
327 |         </div>
328 |       </div>
329 |     );
330 |   }
331 | }
332 | 
333 | export default connect(null, null)(General);
334 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  8 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  9 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 10 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 11 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 12 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 13 | 
 14 | const getClientEnvironment = require('./env');
 15 | const paths = require('./paths');
 16 | 
 17 | // Webpack uses `publicPath` to determine where the app is being served from.
 18 | // In development, we always serve from the root. This makes config easier.
 19 | const publicPath = '/';
 20 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 21 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 22 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 23 | const publicUrl = '';
 24 | // Get environment variables to inject into our app.
 25 | const env = getClientEnvironment(publicUrl);
 26 | 
 27 | // This is the development configuration.
 28 | // It is focused on developer experience and fast rebuilds.
 29 | // The production configuration is different and lives in a separate file.
 30 | module.exports = {
 31 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 32 |   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 33 |   devtool: 'cheap-module-source-map',
 34 |   // These are the "entry points" to our application.
 35 |   // This means they will be the "root" imports that are included in JS bundle.
 36 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 37 |   entry: [
 38 |     // Include an alternative client for WebpackDevServer. A client's job is to
 39 |     // connect to WebpackDevServer by a socket and get notified about changes.
 40 |     // When you save a file, the client will either apply hot updates (in case
 41 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 42 |     // make a syntax error, this client will display a syntax error overlay.
 43 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 44 |     // to bring better experience for Create React App users. You can replace
 45 |     // the line below with these two lines if you prefer the stock client:
 46 |     // require.resolve('webpack-dev-server/client') + '?/',
 47 |     // require.resolve('webpack/hot/dev-server'),
 48 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 49 |     // We ship a few polyfills by default:
 50 |     require.resolve('./polyfills'),
 51 |     // Errors should be considered fatal in development
 52 |     require.resolve('react-error-overlay'),
 53 |     // Finally, this is your app's code:
 54 |     paths.appIndexJs,
 55 |     // We include the app code last so that if there is a runtime error during
 56 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 57 |     // changing JS code would still trigger a refresh.
 58 |   ],
 59 |   output: {
 60 |     // Next line is not used in dev but WebpackDevServer crashes without it:
 61 |     path: paths.appBuild,
 62 |     // Add /* filename */ comments to generated require()s in the output.
 63 |     pathinfo: true,
 64 |     // This does not produce a real file. It's just the virtual path that is
 65 |     // served by WebpackDevServer in development. This is the JS bundle
 66 |     // containing code from all our entry points, and the Webpack runtime.
 67 |     filename: 'static/js/bundle.js',
 68 |     // There are also additional JS chunk files if you use code splitting.
 69 |     chunkFilename: 'static/js/[name].chunk.js',
 70 |     // This is the URL that app is served from. We use "/" in development.
 71 |     publicPath: publicPath,
 72 |     // Point sourcemap entries to original disk location
 73 |     devtoolModuleFilenameTemplate: info =>
 74 |       path.resolve(info.absoluteResourcePath),
 75 |   },
 76 |   resolve: {
 77 |     // This allows you to set a fallback for where Webpack should look for modules.
 78 |     // We placed these paths second because we want `node_modules` to "win"
 79 |     // if there are any conflicts. This matches Node resolution mechanism.
 80 |     // https://github.com/facebookincubator/create-react-app/issues/253
 81 |     modules: ['node_modules', paths.appNodeModules].concat(
 82 |       // It is guaranteed to exist because we tweak it in `env.js`
 83 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 84 |     ),
 85 |     // These are the reasonable defaults supported by the Node ecosystem.
 86 |     // We also include JSX as a common component filename extension to support
 87 |     // some tools, although we do not recommend using it, see:
 88 |     // https://github.com/facebookincubator/create-react-app/issues/290
 89 |     extensions: ['.js', '.json', '.jsx'],
 90 |     alias: {
 91 |       
 92 |       // Support React Native Web
 93 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 94 |       'react-native': 'react-native-web',
 95 |     },
 96 |     plugins: [
 97 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 98 |       // This often causes confusion because we only process files within src/ with babel.
 99 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
100 |       // please link the files into your node_modules/ and let module-resolution kick in.
101 |       // Make sure your source files are compiled, as they will not be processed in any way.
102 |       new ModuleScopePlugin(paths.appSrc),
103 |     ],
104 |   },
105 |   module: {
106 |     strictExportPresence: true,
107 |     rules: [
108 |       // TODO: Disable require.ensure as it's not a standard language feature.
109 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
110 |       // { parser: { requireEnsure: false } },
111 | 
112 |       // First, run the linter.
113 |       // It's important to do this before Babel processes the JS.
114 |       {
115 |         test: /\.(js|jsx)$/,
116 |         enforce: 'pre',
117 |         use: [
118 |           {
119 |             options: {
120 |               formatter: eslintFormatter,
121 |               
122 |             },
123 |             loader: require.resolve('eslint-loader'),
124 |           },
125 |         ],
126 |         include: paths.appSrc,
127 |       },
128 |       // ** ADDING/UPDATING LOADERS **
129 |       // The "file" loader handles all assets unless explicitly excluded.
130 |       // The `exclude` list *must* be updated with every change to loader extensions.
131 |       // When adding a new loader, you must add its `test`
132 |       // as a new entry in the `exclude` list for "file" loader.
133 | 
134 |       // "file" loader makes sure those assets get served by WebpackDevServer.
135 |       // When you `import` an asset, you get its (virtual) filename.
136 |       // In production, they would get copied to the `build` folder.
137 |       {
138 |         exclude: [
139 |           /\.html$/,
140 |           /\.(js|jsx)$/,
141 |           /\.css$/,
142 |           /\.json$/,
143 |           /\.bmp$/,
144 |           /\.gif$/,
145 |           /\.jpe?g$/,
146 |           /\.png$/,
147 |         ],
148 |         loader: require.resolve('file-loader'),
149 |         options: {
150 |           name: 'static/media/[name].[hash:8].[ext]',
151 |         },
152 |       },
153 |       // "url" loader works like "file" loader except that it embeds assets
154 |       // smaller than specified limit in bytes as data URLs to avoid requests.
155 |       // A missing `test` is equivalent to a match.
156 |       {
157 |         test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
158 |         loader: require.resolve('url-loader'),
159 |         options: {
160 |           limit: 10000,
161 |           name: 'static/media/[name].[hash:8].[ext]',
162 |         },
163 |       },
164 |       // Process JS with Babel.
165 |       {
166 |         test: /\.(js|jsx)$/,
167 |         include: paths.appSrc,
168 |         loader: require.resolve('babel-loader'),
169 |         options: {
170 |           
171 |           // This is a feature of `babel-loader` for webpack (not Babel itself).
172 |           // It enables caching results in ./node_modules/.cache/babel-loader/
173 |           // directory for faster rebuilds.
174 |           cacheDirectory: true,
175 |         },
176 |       },
177 |       // "postcss" loader applies autoprefixer to our CSS.
178 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
179 |       // "style" loader turns CSS into JS modules that inject <style> tags.
180 |       // In production, we use a plugin to extract that CSS to a file, but
181 |       // in development "style" loader enables hot editing of CSS.
182 |       {
183 |         test: /\.css$/,
184 |         exclude: /(github-markdown|normalize|react-select)\.css$/,
185 |         use: [
186 |           require.resolve('style-loader'),
187 |           {
188 |             loader: require.resolve('css-loader'),
189 |             options: {
190 |               importLoaders: 1,
191 |               modules: true,
192 |               localIdentName: '[hash:base64:5]',
193 |               minify: true,
194 |             },
195 |           },
196 |           {
197 |             loader: require.resolve('postcss-loader'),
198 |             options: {
199 |               ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
200 |               plugins: () => [
201 |                 require('postcss-import')({
202 |                   path: ['node_modules', './src'],
203 |                 }),
204 |                 require('postcss-simple-vars'),
205 |                 require('postcss-custom-media'),
206 |                 require('postcss-nested'),
207 |                 require('postcss-media-minmax'),
208 |                 require('postcss-flexbugs-fixes'),
209 |                 autoprefixer({
210 |                   browsers: [
211 |                     '>1%',
212 |                     'last 4 versions',
213 |                     'Firefox ESR',
214 |                     'not ie < 9', // React doesn't support IE8 anyway
215 |                   ],
216 |                   flexbox: 'no-2009',
217 |                 }),
218 |               ],
219 |             },
220 |           },
221 |         ],
222 |       },
223 |       // ** STOP ** Are you adding a new loader?
224 |       // Remember to add the new extension(s) to the "file" loader exclusion list.
225 |     ],
226 |   },
227 |   plugins: [
228 |     // Makes some environment variables available in index.html.
229 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
230 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
231 |     // In development, this will be an empty string.
232 |     new InterpolateHtmlPlugin(env.raw),
233 |     // Generates an `index.html` file with the <script> injected.
234 |     new HtmlWebpackPlugin({
235 |       inject: true,
236 |       template: paths.appHtml,
237 |     }),
238 |     // Makes some environment variables available to the JS code, for example:
239 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
240 |     new webpack.DefinePlugin(env.stringified),
241 |     // This is necessary to emit hot updates (currently CSS only):
242 |     new webpack.HotModuleReplacementPlugin(),
243 |     // Watcher doesn't work well if you mistype casing in a path so we use
244 |     // a plugin that prints an error when you attempt to do this.
245 |     // See https://github.com/facebookincubator/create-react-app/issues/240
246 |     new CaseSensitivePathsPlugin(),
247 |     // If you require a missing module and then `npm install` it, you still have
248 |     // to restart the development server for Webpack to discover it. This plugin
249 |     // makes the discovery automatic so you don't have to restart.
250 |     // See https://github.com/facebookincubator/create-react-app/issues/186
251 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
252 |     // Moment.js is an extremely popular library that bundles large locale files
253 |     // by default due to how Webpack interprets its code. This is a practical
254 |     // solution that requires the user to opt into importing specific locales.
255 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
256 |     // You can remove this if you don't use Moment.js:
257 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
258 |     new ExtractTextPlugin("styles.css"),
259 |   ],
260 |   // Some libraries import Node modules but don't use them in the browser.
261 |   // Tell Webpack to provide empty mocks for them so importing them works.
262 |   node: {
263 |     fs: 'empty',
264 |     net: 'empty',
265 |     tls: 'empty',
266 |   },
267 | 
268 |   // Turn off performance hints during development because we don't do any
269 |   // splitting or minification in interest of speed. These warnings become
270 |   // cumbersome.
271 |   performance: {
272 |     hints: false,
273 |   },
274 | };
275 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  8 | const ManifestPlugin = require('webpack-manifest-plugin');
  9 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 10 | const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 11 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 12 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 13 | const paths = require('./paths');
 14 | const getClientEnvironment = require('./env');
 15 | 
 16 | // Webpack uses `publicPath` to determine where the app is being served from.
 17 | // It requires a trailing slash, or the file assets will get an incorrect path.
 18 | const publicPath = paths.servedPath;
 19 | // Some apps do not use client-side routing with pushState.
 20 | // For these, "homepage" can be set to "." to enable relative asset paths.
 21 | const shouldUseRelativeAssetPaths = publicPath === './';
 22 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 23 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 24 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 25 | const publicUrl = publicPath.slice(0, -1);
 26 | // Get environment variables to inject into our app.
 27 | const env = getClientEnvironment(publicUrl);
 28 | 
 29 | // Assert this just to be safe.
 30 | // Development builds of React are slow and not intended for production.
 31 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 32 |   throw new Error('Production builds must have NODE_ENV=production.');
 33 | }
 34 | 
 35 | // Note: defined here because it will be used more than once.
 36 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 37 | 
 38 | // ExtractTextPlugin expects the build output to be flat.
 39 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 40 | // However, our output is structured with css, js and media folders.
 41 | // To have this structure working with relative paths, we have to use custom options.
 42 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 43 |   ? // Making sure that the publicPath goes back to to build folder.
 44 |     { publicPath: Array(cssFilename.split('/').length).join('../') }
 45 |   : {};
 46 | 
 47 | // This is the production configuration.
 48 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 49 | // The development configuration is different and lives in a separate file.
 50 | module.exports = {
 51 |   // Don't attempt to continue if there are any errors.
 52 |   bail: true,
 53 |   // We generate sourcemaps in production. This is slow but gives good results.
 54 |   // You can exclude the *.map files from the build during deployment.
 55 |   devtool: 'source-map',
 56 |   // In production, we only want to load the polyfills and the app code.
 57 |   entry: [require.resolve('./polyfills'), paths.appIndexJs],
 58 |   output: {
 59 |     // The build folder.
 60 |     path: paths.appBuild,
 61 |     // Generated JS file names (with nested folders).
 62 |     // There will be one main bundle, and one file per asynchronous chunk.
 63 |     // We don't currently advertise code splitting but Webpack supports it.
 64 |     filename: 'static/js/[name].[chunkhash:8].js',
 65 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 66 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 67 |     publicPath: publicPath,
 68 |     // Point sourcemap entries to original disk location
 69 |     devtoolModuleFilenameTemplate: info =>
 70 |       path.relative(paths.appSrc, info.absoluteResourcePath),
 71 |   },
 72 |   resolve: {
 73 |     // This allows you to set a fallback for where Webpack should look for modules.
 74 |     // We placed these paths second because we want `node_modules` to "win"
 75 |     // if there are any conflicts. This matches Node resolution mechanism.
 76 |     // https://github.com/facebookincubator/create-react-app/issues/253
 77 |     modules: ['node_modules', paths.appNodeModules].concat(
 78 |       // It is guaranteed to exist because we tweak it in `env.js`
 79 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 80 |     ),
 81 |     // These are the reasonable defaults supported by the Node ecosystem.
 82 |     // We also include JSX as a common component filename extension to support
 83 |     // some tools, although we do not recommend using it, see:
 84 |     // https://github.com/facebookincubator/create-react-app/issues/290
 85 |     extensions: ['.js', '.json', '.jsx'],
 86 |     alias: {
 87 |       
 88 |       // Support React Native Web
 89 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 90 |       'react-native': 'react-native-web',
 91 |     },
 92 |     plugins: [
 93 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 94 |       // This often causes confusion because we only process files within src/ with babel.
 95 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 96 |       // please link the files into your node_modules/ and let module-resolution kick in.
 97 |       // Make sure your source files are compiled, as they will not be processed in any way.
 98 |       new ModuleScopePlugin(paths.appSrc),
 99 |     ],
100 |   },
101 |   module: {
102 |     strictExportPresence: true,
103 |     rules: [
104 |       // TODO: Disable require.ensure as it's not a standard language feature.
105 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
106 |       // { parser: { requireEnsure: false } },
107 | 
108 |       // First, run the linter.
109 |       // It's important to do this before Babel processes the JS.
110 |       {
111 |         test: /\.(js|jsx)$/,
112 |         enforce: 'pre',
113 |         use: [
114 |           {
115 |             options: {
116 |               formatter: eslintFormatter,
117 |               
118 |             },
119 |             loader: require.resolve('eslint-loader'),
120 |           },
121 |         ],
122 |         include: paths.appSrc,
123 |       },
124 |       // ** ADDING/UPDATING LOADERS **
125 |       // The "file" loader handles all assets unless explicitly excluded.
126 |       // The `exclude` list *must* be updated with every change to loader extensions.
127 |       // When adding a new loader, you must add its `test`
128 |       // as a new entry in the `exclude` list in the "file" loader.
129 | 
130 |       // "file" loader makes sure those assets end up in the `build` folder.
131 |       // When you `import` an asset, you get its filename.
132 |       {
133 |         exclude: [
134 |           /\.html$/,
135 |           /\.(js|jsx)$/,
136 |           /\.css$/,
137 |           /\.json$/,
138 |           /\.bmp$/,
139 |           /\.gif$/,
140 |           /\.jpe?g$/,
141 |           /\.png$/,
142 |         ],
143 |         loader: require.resolve('file-loader'),
144 |         options: {
145 |           name: 'static/media/[name].[hash:8].[ext]',
146 |         },
147 |       },
148 |       // "url" loader works just like "file" loader but it also embeds
149 |       // assets smaller than specified size as data URLs to avoid requests.
150 |       {
151 |         test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
152 |         loader: require.resolve('url-loader'),
153 |         options: {
154 |           limit: 10000,
155 |           name: 'static/media/[name].[hash:8].[ext]',
156 |         },
157 |       },
158 |       // Process JS with Babel.
159 |       {
160 |         test: /\.(js|jsx)$/,
161 |         include: paths.appSrc,
162 |         loader: require.resolve('babel-loader'),
163 |         
164 |       },
165 |       // The notation here is somewhat confusing.
166 |       // "postcss" loader applies autoprefixer to our CSS.
167 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
168 |       // "style" loader normally turns CSS into JS modules injecting <style>,
169 |       // but unlike in development configuration, we do something different.
170 |       // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
171 |       // (second argument), then grabs the result CSS and puts it into a
172 |       // separate file in our build process. This way we actually ship
173 |       // a single CSS file in production instead of JS code injecting <style>
174 |       // tags. If you use code splitting, however, any async bundles will still
175 |       // use the "style" loader inside the async code so CSS from them won't be
176 |       // in the main CSS file.
177 |       {
178 |         test: /\.css$/,
179 |         loader: ExtractTextPlugin.extract(
180 |           Object.assign(
181 |             {
182 |               fallback: require.resolve('style-loader'),
183 |               use: [
184 |                 {
185 |                   loader: require.resolve('css-loader'),
186 |                   options: {
187 |                     importLoaders: 1,
188 |                     modules: true,
189 |                     localIdentName: '[hash:base64:5]',
190 |                     minimize: true,
191 |                     sourceMap: true,
192 |                   },
193 |                 },
194 |                 {
195 |                   loader: require.resolve('postcss-loader'),
196 |                   options: {
197 |                     ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
198 |                     plugins: () => [
199 |                       require('postcss-import')({
200 |                         path: ['node_modules', './src'],
201 |                       }),
202 |                       require('postcss-simple-vars'),
203 |                       require('postcss-custom-media'),
204 |                       require('postcss-nested'),
205 |                       require('postcss-media-minmax'),
206 |                       require('postcss-flexbugs-fixes'),
207 |                       require('postcss-flexbugs-fixes'),
208 |                       autoprefixer({
209 |                         browsers: [
210 |                           '>1%',
211 |                           'last 4 versions',
212 |                           'Firefox ESR',
213 |                           'not ie < 9', // React doesn't support IE8 anyway
214 |                         ],
215 |                         flexbox: 'no-2009',
216 |                       }),
217 |                     ],
218 |                   },
219 |                 },
220 |               ],
221 |             },
222 |             extractTextPluginOptions
223 |           )
224 |         ),
225 |         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
226 |       },
227 |       // ** STOP ** Are you adding a new loader?
228 |       // Remember to add the new extension(s) to the "file" loader exclusion list.
229 |     ],
230 |   },
231 |   plugins: [
232 |     // Makes some environment variables available in index.html.
233 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
234 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
235 |     // In production, it will be an empty string unless you specify "homepage"
236 |     // in `package.json`, in which case it will be the pathname of that URL.
237 |     new InterpolateHtmlPlugin(env.raw),
238 |     // Generates an `index.html` file with the <script> injected.
239 |     new HtmlWebpackPlugin({
240 |       inject: true,
241 |       template: paths.appHtml,
242 |       minify: {
243 |         removeComments: true,
244 |         collapseWhitespace: true,
245 |         removeRedundantAttributes: true,
246 |         useShortDoctype: true,
247 |         removeEmptyAttributes: true,
248 |         removeStyleLinkTypeAttributes: true,
249 |         keepClosingSlash: true,
250 |         minifyJS: true,
251 |         minifyCSS: true,
252 |         minifyURLs: true,
253 |       },
254 |     }),
255 |     // Makes some environment variables available to the JS code, for example:
256 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
257 |     // It is absolutely essential that NODE_ENV was set to production here.
258 |     // Otherwise React will be compiled in the very slow development mode.
259 |     new webpack.DefinePlugin(env.stringified),
260 |     // Minify the code.
261 |     new webpack.optimize.UglifyJsPlugin({
262 |       compress: {
263 |         warnings: false,
264 |         // Disabled because of an issue with Uglify breaking seemingly valid code:
265 |         // https://github.com/facebookincubator/create-react-app/issues/2376
266 |         // Pending further investigation:
267 |         // https://github.com/mishoo/UglifyJS2/issues/2011
268 |         comparisons: false,
269 |       },
270 |       output: {
271 |         comments: false,
272 |       },
273 |       sourceMap: true,
274 |     }),
275 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
276 |     new ExtractTextPlugin({
277 |       filename: cssFilename,
278 |     }),
279 |     // Generate a manifest file which contains a mapping of all asset filenames
280 |     // to their corresponding output file so that tools can pick it up without
281 |     // having to parse `index.html`.
282 |     new ManifestPlugin({
283 |       fileName: 'asset-manifest.json',
284 |     }),
285 |     // Generate a service worker script that will precache, and keep up to date,
286 |     // the HTML & assets that are part of the Webpack build.
287 |     new SWPrecacheWebpackPlugin({
288 |       // By default, a cache-busting query parameter is appended to requests
289 |       // used to populate the caches, to ensure the responses are fresh.
290 |       // If a URL is already hashed by Webpack, then there is no concern
291 |       // about it being stale, and the cache-busting can be skipped.
292 |       dontCacheBustUrlsMatching: /\.\w{8}\./,
293 |       filename: 'service-worker.js',
294 |       logger(message) {
295 |         if (message.indexOf('Total precache size is') === 0) {
296 |           // This message occurs for every build and is a bit too noisy.
297 |           return;
298 |         }
299 |         console.log(message);
300 |       },
301 |       minify: true,
302 |       // For unknown URLs, fallback to the index page
303 |       navigateFallback: publicUrl + '/index.html',
304 |       // Ignores URLs starting from /__ (useful for Firebase):
305 |       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
306 |       navigateFallbackWhitelist: [/^(?!\/__).*/],
307 |       // Don't precache sourcemaps (they're large) and build asset manifest:
308 |       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
309 |       // Work around Windows path issue in SWPrecacheWebpackPlugin:
310 |       // https://github.com/facebookincubator/create-react-app/issues/2235
311 |       stripPrefix: paths.appBuild.replace(/\\/g, '/') + '/',
312 |     }),
313 |     // Moment.js is an extremely popular library that bundles large locale files
314 |     // by default due to how Webpack interprets its code. This is a practical
315 |     // solution that requires the user to opt into importing specific locales.
316 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
317 |     // You can remove this if you don't use Moment.js:
318 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
319 |   ],
320 |   // Some libraries import Node modules but don't use them in the browser.
321 |   // Tell Webpack to provide empty mocks for them so importing them works.
322 |   node: {
323 |     fs: 'empty',
324 |     net: 'empty',
325 |     tls: 'empty',
326 |   },
327 | };
328 | 


--------------------------------------------------------------------------------