From 83fdaf0b4314c05f284b6732bd1c11cb4aae45fd Mon Sep 17 00:00:00 2001 From: gondzo Date: Sun, 25 Dec 2016 14:42:04 +0100 Subject: [PATCH 01/11] update heroku env variables --- README.md | 6 +++++- config/default.js | 1 - config/development.js | 1 - config/production.js | 1 - config/staging.js | 1 - config/test.js | 1 - webpack.config.js | 6 ++++-- 7 files changed, 9 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 0d4c26c..29c28a4 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ ## Configuration -Configuration files are located under `config` dir. +Configuration files are located under `config` and `src/config` directories. See Guild https://github.com/lorenwest/node-config/wiki/Configuration-Files |Name|Description| @@ -18,6 +18,10 @@ See Guild https://github.com/lorenwest/node-config/wiki/Configuration-Files |`PORT`| The port to listen| |`GOOGLE_API_KEY`| The google api key see (https://developers.google.com/maps/documentation/javascript/get-api-key#key)| |`API_BASE_URL`| The base URL for Drone API | +|`REACT_APP_API_BASE_PATH`| The React app api base path`| +|`REACT_APP_SOCKET_URL`| The React app app socket url`| +|`REACT_APP_AUTH0_CLIEND_ID`| The React app auth0 client id`| +|`REACT_APP_AUTH0_DOMAIN`| The React app auth0 domain`| ## Install dependencies diff --git a/config/default.js b/config/default.js index 6bc8230..f1bbbf3 100644 --- a/config/default.js +++ b/config/default.js @@ -8,5 +8,4 @@ module.exports = { // below env variables are visible in frontend GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyCrL-O319wNJK8kk8J_JAYsWgu6yo5YsDI', - API_BASE_PATH: process.env.API_BASE_PATH || 'https://kb-dsp-server-dev.herokuapp.com/', }; diff --git a/config/development.js b/config/development.js index 6bc8230..f1bbbf3 100644 --- a/config/development.js +++ b/config/development.js @@ -8,5 +8,4 @@ module.exports = { // below env variables are visible in frontend GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyCrL-O319wNJK8kk8J_JAYsWgu6yo5YsDI', - API_BASE_PATH: process.env.API_BASE_PATH || 'https://kb-dsp-server-dev.herokuapp.com/', }; diff --git a/config/production.js b/config/production.js index 04e870d..2bdcc33 100644 --- a/config/production.js +++ b/config/production.js @@ -8,5 +8,4 @@ module.exports = { // below env variables are visible in frontend GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyCrL-O319wNJK8kk8J_JAYsWgu6yo5YsDI', - API_BASE_PATH: process.env.API_BASE_PATH || 'https://kb-dsp-server-dev.herokuapp.com/', }; diff --git a/config/staging.js b/config/staging.js index 6bc8230..f1bbbf3 100644 --- a/config/staging.js +++ b/config/staging.js @@ -8,5 +8,4 @@ module.exports = { // below env variables are visible in frontend GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyCrL-O319wNJK8kk8J_JAYsWgu6yo5YsDI', - API_BASE_PATH: process.env.API_BASE_PATH || 'https://kb-dsp-server-dev.herokuapp.com/', }; diff --git a/config/test.js b/config/test.js index 6bc8230..f1bbbf3 100644 --- a/config/test.js +++ b/config/test.js @@ -8,5 +8,4 @@ module.exports = { // below env variables are visible in frontend GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyCrL-O319wNJK8kk8J_JAYsWgu6yo5YsDI', - API_BASE_PATH: process.env.API_BASE_PATH || 'https://kb-dsp-server-dev.herokuapp.com/', }; diff --git a/webpack.config.js b/webpack.config.js index fd8f63f..c7f04d0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,7 +2,6 @@ const path = require('path'); const _ = require('lodash'); -const ip = require('ip'); const webpack = require('webpack'); const config = require('config'); const HtmlWebpackPlugin = require('html-webpack-plugin'); @@ -100,7 +99,10 @@ module.exports = { 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV), GOOGLE_API_KEY: JSON.stringify(process.env.GOOGLE_API_KEY), - API_BASE_URL: JSON.stringify(process.env.API_BASE_URL), + REACT_APP_API_BASE_PATH: JSON.stringify(process.env.REACT_APP_API_BASE_PATH), + REACT_APP_SOCKET_URL: JSON.stringify(process.env.REACT_APP_SOCKET_URL), + REACT_APP_AUTH0_CLIEND_ID: JSON.stringify(process.env.REACT_APP_AUTH0_CLIEND_ID), + REACT_APP_AUTH0_DOMAIN: JSON.stringify(process.env.REACT_APP_AUTH0_DOMAIN), }, }), new HtmlWebpackPlugin({ From eb068ea85eb3484d9ffde983ee1a273a557a24d0 Mon Sep 17 00:00:00 2001 From: gondzo Date: Mon, 26 Dec 2016 20:58:14 +0100 Subject: [PATCH 02/11] change api service config variables --- src/services/APIService.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/services/APIService.js b/src/services/APIService.js index a69c8d2..fdea62a 100644 --- a/src/services/APIService.js +++ b/src/services/APIService.js @@ -3,7 +3,7 @@ import _ from 'lodash'; import superagent from 'superagent'; import superagentPromise from 'superagent-promise'; -import config from '../../config/default'; +import config from '../config/index'; // DEMO: emulate API requests with dummy data for demo purposes @@ -467,13 +467,13 @@ const testUser = { }; const register = () => request - .post(`${config.API_BASE_PATH}/api/v1/register`) + .post(`${config.api.basePath}/api/v1/register`) .send(testUser) .set('Content-Type', 'application/json') .end(); const authorize = () => request - .post(`${config.API_BASE_PATH}/api/v1/login`) + .post(`${config.api.basePath}/api/v1/login`) .set('Content-Type', 'application/json') .send(_.pick(testUser, 'email', 'password')) .end(); @@ -505,12 +505,12 @@ export default class APIService { const accessToken = authRes.body.accessToken; return request - .get(`${config.API_BASE_PATH}/api/v1/missions`) + .get(`${config.api.basePath}/api/v1/missions`) .set('Authorization', `Bearer ${accessToken}`) .end() .then((res) => res.body.items.map((item) => ({ ...item, - downloadLink: `${config.API_BASE_PATH}/api/v1/missions/${item.id}/download?token=${accessToken}`, + downloadLink: `${config.api.basePath}/api/v1/missions/${item.id}/download?token=${accessToken}`, }))); }); } @@ -520,7 +520,7 @@ export default class APIService { const accessToken = authRes.body.accessToken; return request - .get(`${config.API_BASE_PATH}/api/v1/missions/${id}`) + .get(`${config.api.basePath}/api/v1/missions/${id}`) .set('Authorization', `Bearer ${accessToken}`) .end() .then((res) => res.body); @@ -532,7 +532,7 @@ export default class APIService { const accessToken = authRes.body.accessToken; return request - .post(`${config.API_BASE_PATH}/api/v1/missions`) + .post(`${config.api.basePath}/api/v1/missions`) .set('Authorization', `Bearer ${accessToken}`) .send(values) .end() @@ -545,7 +545,7 @@ export default class APIService { const accessToken = authRes.body.accessToken; return request - .put(`${config.API_BASE_PATH}/api/v1/missions/${id}`) + .put(`${config.api.basePath}/api/v1/missions/${id}`) .set('Authorization', `Bearer ${accessToken}`) .send(values) .end() @@ -558,7 +558,7 @@ export default class APIService { const accessToken = authRes.body.accessToken; return request - .del(`${config.API_BASE_PATH}/api/v1/missions/${id}`) + .del(`${config.api.basePath}/api/v1/missions/${id}`) .set('Authorization', `Bearer ${accessToken}`) .end() .then((res) => res.body); @@ -574,7 +574,7 @@ export default class APIService { */ static searchDrones(params) { return request - .get(`${config.API_BASE_PATH}/api/v1/drones`) + .get(`${config.api.basePath}/api/v1/drones`) .query(params) .end(); } From ff07fec3ff733fc3df5fe279dae005af13a1deb1 Mon Sep 17 00:00:00 2001 From: gondzo Date: Mon, 26 Dec 2016 21:36:26 +0100 Subject: [PATCH 03/11] change socket url config variables --- src/routes/DronesMap/modules/DronesMap.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/DronesMap/modules/DronesMap.js b/src/routes/DronesMap/modules/DronesMap.js index 71ac81b..301c0c1 100644 --- a/src/routes/DronesMap/modules/DronesMap.js +++ b/src/routes/DronesMap/modules/DronesMap.js @@ -1,7 +1,7 @@ import {handleActions} from 'redux-actions'; import io from 'socket.io-client'; import APIService from 'services/APIService'; -import config from '../../../../config/default'; +import config from '../../../config/index'; // Drones will be updated and map will be redrawn every 3s // Otherwise if drones are updated with high frequency (e.g. 0.5s), the map will be freezing @@ -32,7 +32,7 @@ export const init = () => async(dispatch) => { const {body: {items: drones}} = await APIService.searchDrones({limit: DRONE_LIMIT}); lastUpdated = new Date().getTime(); dispatch({type: DRONES_LOADED, payload: {drones}}); - socket = io(config.API_BASE_PATH); + socket = io(config.socket.url); socket.on('dronepositionupdate', (drone) => { pendingUpdates[drone.id] = drone; if (updateTimeoutId) { From 5dc78700164559e9045c32ea70cb6888ccf0ead3 Mon Sep 17 00:00:00 2001 From: gondzo Date: Tue, 27 Dec 2016 11:40:33 +0100 Subject: [PATCH 04/11] location history challenge --- README.md | 4 + package.json | 3 +- src/components/Button/Button.jsx | 2 +- src/components/Header/Header.jsx | 2 +- src/components/MapHistory/MapHistory.jsx | 231 ++++++++++++++++++ src/components/MapHistory/MapHistory.scss | 39 +++ src/components/MapHistory/index.js | 3 + src/components/Pagination/Pagination.jsx | 2 +- src/components/StatusIcon/StatusIcon.jsx | 2 +- src/components/Tabs/Tabs.jsx | 2 +- src/layouts/CoreLayout/CoreLayout.jsx | 2 +- .../DashboardRequest/DashboardRequest.jsx | 2 +- .../DashboardStatus/DashboardStatus.jsx | 2 +- .../Dashboard/components/DashboardView.jsx | 4 +- .../NotificationBox/NotificationBox.jsx | 2 +- .../containers/DashboardContainer.js | 2 +- .../DronesMap/components/DronesMapView.jsx | 90 ++++++- .../DronesMap/components/DronesMapView.scss | 35 ++- src/routes/DronesMap/components/Info/Info.jsx | 26 ++ .../DronesMap/components/Info/Info.scss | 35 +++ src/routes/DronesMap/components/Info/index.js | 3 + .../containers/DronesMapContainer.js | 2 +- src/routes/DronesMap/modules/DronesMap.js | 55 ++++- .../components/MissionMap/MissionMap.jsx | 2 +- .../components/MissionPlannerView.jsx | 2 +- .../MissionSidebar/MissionSidebar.spec.jsx | 2 +- .../MissionSidebarItem.spec.jsx | 2 +- .../MissionPlanner/modules/MissionPlanner.js | 4 +- .../modules/MissionPlanner.spec.js | 2 +- .../MyRequestFilter/MyRequestFilter.jsx | 2 +- .../MyRequestItems/MyRequestItems.jsx | 2 +- .../MyRequest/components/MyRequestView.jsx | 4 +- .../RequestDetails/RequestDetails.jsx | 2 +- .../components/RequestItem/RequestItem.jsx | 2 +- .../RequestItemControls.jsx | 2 +- .../containers/MyRequestContainer.js | 2 +- src/services/APIService.js | 20 +- webpack.config.js | 9 +- 38 files changed, 557 insertions(+), 52 deletions(-) create mode 100644 src/components/MapHistory/MapHistory.jsx create mode 100644 src/components/MapHistory/MapHistory.scss create mode 100644 src/components/MapHistory/index.js create mode 100644 src/routes/DronesMap/components/Info/Info.jsx create mode 100644 src/routes/DronesMap/components/Info/Info.scss create mode 100644 src/routes/DronesMap/components/Info/index.js diff --git a/README.md b/README.md index 5eb1f4c..529d857 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,9 @@ ## DSP app +## Challenge 30055967 --- DRONE SERIES - LOCATION HISTORY MAP +verification video url: https://youtu.be/nPOLNBC8yqo +I use a local backend server in this video, thus the data might be different from that heroku version. + ## Requirements * node v6 (https://nodejs.org) diff --git a/package.json b/package.json index c1ea787..75d5137 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "node-sass": "^3.7.0", "postcss-flexboxfixer": "0.0.5", "postcss-loader": "^0.13.0", + "rc-slider": "^5.4.0", "rc-tooltip": "^3.4.2", "react": "^15.3.2", "react-breadcrumbs": "^1.5.1", @@ -56,8 +57,6 @@ "react-dom": "^15.3.2", "react-flexbox-grid": "^0.10.2", "react-google-maps": "^6.0.1", - "react-modal": "^1.5.2", - "react-flexbox-grid": "^0.10.2", "react-highcharts": "^11.0.0", "react-modal": "^1.5.2", "react-redux": "^4.0.0", diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx index 32313c2..4232d1b 100644 --- a/src/components/Button/Button.jsx +++ b/src/components/Button/Button.jsx @@ -4,7 +4,7 @@ import _ from 'lodash'; import cn from 'classnames'; import styles from './Button.scss'; -export const Button = ({children, color, size, ...rest}) => ( +export const Button = ({ children, color, size, ...rest }) => ( diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index b078e08..4800693 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -5,7 +5,7 @@ import SearchInput from '../SearchInput'; import Dropdown from '../Dropdown'; import styles from './Header.scss'; -export const Header = ({location, selectedCategory, categories, user, notifications, routes}) => ( +export const Header = ({ location, selectedCategory, categories, user, notifications, routes }) => (