From 6e154af8c38bab1e0ffbda509407fcbcd9cd64a8 Mon Sep 17 00:00:00 2001 From: oystpoyst Date: Fri, 11 May 2018 17:52:41 +0200 Subject: [PATCH 1/4] [Feature] Showing all registered cars - TKDATA-215 --- bpdashboard/src/actions/cars.js | 46 +++++++++++++++++++++++++ bpdashboard/src/components/cars/Cars.js | 45 +++++++++++++++++++----- bpdashboard/src/reducers/cars.js | 25 ++++++++++++++ bpdashboard/src/reducers/index.js | 4 ++- bpdashboard/src/styles/cars.css | 33 ++++++++++++++++++ bpdashboard/src/styles/index.css | 3 +- 6 files changed, 146 insertions(+), 10 deletions(-) create mode 100644 bpdashboard/src/actions/cars.js create mode 100644 bpdashboard/src/reducers/cars.js create mode 100644 bpdashboard/src/styles/cars.css diff --git a/bpdashboard/src/actions/cars.js b/bpdashboard/src/actions/cars.js new file mode 100644 index 0000000..3448315 --- /dev/null +++ b/bpdashboard/src/actions/cars.js @@ -0,0 +1,46 @@ +import {API_ADDRESS} from '../config/connections'; + +export const GET_CARS_REQUEST = '_CARS_REQUEST'; +export const GET_CARS_SUCCESS = 'GET_CARS_SUCCESS'; +export const GET_CARS_FAILURE = 'GET_CARS_FAILURE'; + +const axios = require('axios'); + +axios.defaults.withCredentials = true; + +export function getCarsFailure(message) { + return { + type: 'GET_CARS_FAILURE', + hasErrored: message, + }; +} + +export function getCarsLoading(bool){ + return { + type: 'GET_CARS_REQUEST', + isLoading: bool, + } +} + +export function getCarsSuccess(carsObj) { + return { + type: 'GET_CARS_SUCCESS', + cars: carsObj, + }; +} + +export function getCars() { + return (dispatch) => { + dispatch(getCarsLoading(true)); + return axios.get(API_ADDRESS + '/api/car') + .then((response) => { + console.log(response); + if (!response.ok && !response.data) { + dispatch(getCarsFailure('oi, Noe gikk galt...')); + } + dispatch(getCarsSuccess(JSON.stringify(response.data))); + }) + .catch(() => dispatch(getCarsFailure('oi, Noe gikk galt...!'))); + }; +} +// dispatch(getCarsSuccess(JSON.stringify(response.data))); diff --git a/bpdashboard/src/components/cars/Cars.js b/bpdashboard/src/components/cars/Cars.js index 77c92b9..26263fd 100644 --- a/bpdashboard/src/components/cars/Cars.js +++ b/bpdashboard/src/components/cars/Cars.js @@ -1,26 +1,55 @@ import React from 'react'; import { push } from 'react-router-redux' -import { bindActionCreators } from 'redux' +// import { bindActionCreators } from 'redux' +import { getCars } from '../../actions/cars'; import { connect } from 'react-redux' -import './../../styles/login.css'; +import './../../styles/cars.css'; class Cars extends React.Component { + async componentWillMount(){ + //console.log(this.props.carFetched); + await this.props.getCars(); + } render(){ + let carFetched = this.props.carFetched; + if (carFetched.length !== 0) { + carFetched = JSON.parse(this.props.carFetched) + } return( -
-

Innlogging vellyket

+
+
+

Registrerte biler

+
+
+ {carFetched.map((data, key) => (
+
RegNr: {data.RegNr}
+
Model: {data.Brand}
+
) + )} +
) } } -const mapDispatchToProps = dispatch => bindActionCreators({ - changePage: () => push('/') -}, dispatch) +const mapStateToProps = (state) => { + return { + user: state.auth.user, + hasErrored: state.auth.hasErrored, + carFetched: state.carsFetched.cars, + }; +}; + +const mapDispatchToProps = dispatch => { + return { + changePage: () => push('/'), + getCars: () => dispatch(getCars()), + } +}; export default connect( - null, + mapStateToProps, mapDispatchToProps )(Cars) diff --git a/bpdashboard/src/reducers/cars.js b/bpdashboard/src/reducers/cars.js new file mode 100644 index 0000000..ddc86a2 --- /dev/null +++ b/bpdashboard/src/reducers/cars.js @@ -0,0 +1,25 @@ +import { GET_CARS_REQUEST, GET_CARS_SUCCESS, GET_CARS_FAILURE } from '../actions/cars'; + +function carsFetched(state = {cars: []}, action) { + switch (action.type) { + case GET_CARS_FAILURE: + return { + hasErrored: action.hasErrored, + cars: [], + }; + case GET_CARS_REQUEST: + return { + hasErrored: '', + cars: [], + isLoading: action.isLoading, + }; + case GET_CARS_SUCCESS: + return { + hasErrored: '', + cars: action.cars, + }; + default: + return state; + } +} +export default carsFetched; diff --git a/bpdashboard/src/reducers/index.js b/bpdashboard/src/reducers/index.js index 8096557..bce5650 100644 --- a/bpdashboard/src/reducers/index.js +++ b/bpdashboard/src/reducers/index.js @@ -1,8 +1,10 @@ import { combineReducers } from 'redux' import { routerReducer } from 'react-router-redux' import auth from './auth'; +import carsFetched from './cars'; export default combineReducers({ routing: routerReducer, - auth + auth, + carsFetched }) diff --git a/bpdashboard/src/styles/cars.css b/bpdashboard/src/styles/cars.css new file mode 100644 index 0000000..9314ea5 --- /dev/null +++ b/bpdashboard/src/styles/cars.css @@ -0,0 +1,33 @@ +.car-container{ + display: flex; + flex-direction: column; + align-items: center; +} +.car-intro{ + font-size: 50px; + color: white; + font-family: Roboto, sans-serif; + font-weight: bold; + margin-top: 20px; +} +.cars-elements{ + width: 100vw; + height: 60vh; + display: flex; + flex-direction: row; + flex-flow: wrap; + justify-content: center; + align-items: center; +} +.car-box{ + width: 250px; + height: 200px; + background-color: white; + display: flex; + justify-content: center; + flex-direction: column; + margin: 6px; +} +.car-text{ + margin-left: 40px; +} diff --git a/bpdashboard/src/styles/index.css b/bpdashboard/src/styles/index.css index 58248bd..866da07 100644 --- a/bpdashboard/src/styles/index.css +++ b/bpdashboard/src/styles/index.css @@ -1,6 +1,7 @@ -body { +body, html { margin: 0; padding: 0; font-family: sans-serif; background-color: rgb(000,039,118); + height: 100vh; } From 9b250ee0e23d92ec5d30af0c1da0e0ad7c678209 Mon Sep 17 00:00:00 2001 From: oystpoyst Date: Fri, 11 May 2018 17:53:50 +0200 Subject: [PATCH 2/4] [Tweak] removed comments - TKDATA-215 --- bpdashboard/src/actions/cars.js | 1 - 1 file changed, 1 deletion(-) diff --git a/bpdashboard/src/actions/cars.js b/bpdashboard/src/actions/cars.js index 3448315..87bfb71 100644 --- a/bpdashboard/src/actions/cars.js +++ b/bpdashboard/src/actions/cars.js @@ -43,4 +43,3 @@ export function getCars() { .catch(() => dispatch(getCarsFailure('oi, Noe gikk galt...!'))); }; } -// dispatch(getCarsSuccess(JSON.stringify(response.data))); From fbda0bf938d167147bd2bb8fe8276a59a05432dd Mon Sep 17 00:00:00 2001 From: oystpoyst Date: Fri, 11 May 2018 18:02:12 +0200 Subject: [PATCH 3/4] [Tweak] Some small adjustment - TKDATA-215 --- .../_tests_/__snapshots__/App.test.js.snap | 98 ++++++++----------- bpdashboard/src/actions/cars.js | 2 +- 2 files changed, 44 insertions(+), 56 deletions(-) diff --git a/bpdashboard/src/_tests_/__snapshots__/App.test.js.snap b/bpdashboard/src/_tests_/__snapshots__/App.test.js.snap index 3525e29..48586b2 100644 --- a/bpdashboard/src/_tests_/__snapshots__/App.test.js.snap +++ b/bpdashboard/src/_tests_/__snapshots__/App.test.js.snap @@ -4,65 +4,53 @@ exports[`AppComponent should render 1`] = `
-
- logo -

- Velkommen til Bilparken! -

-
-
-
- - Home - - - About - -
-
- - +
+ logo +

+ Velkommen til Bilparken! +

+
+
-
- -
+
+ Logg inn +
+ +
+
`; diff --git a/bpdashboard/src/actions/cars.js b/bpdashboard/src/actions/cars.js index 87bfb71..2579381 100644 --- a/bpdashboard/src/actions/cars.js +++ b/bpdashboard/src/actions/cars.js @@ -1,4 +1,4 @@ -import {API_ADDRESS} from '../config/connections'; +import { API_ADDRESS } from '../config/connections'; export const GET_CARS_REQUEST = '_CARS_REQUEST'; export const GET_CARS_SUCCESS = 'GET_CARS_SUCCESS'; From 2730ea95d99ec44b74711b7e33bc250e93d6e604 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emil=20Schr=C3=B8der?= Date: Fri, 11 May 2018 18:31:18 +0200 Subject: [PATCH 4/4] [Tweak] Removed console.log - TKDATA-215 --- bpdashboard/src/actions/cars.js | 1 - 1 file changed, 1 deletion(-) diff --git a/bpdashboard/src/actions/cars.js b/bpdashboard/src/actions/cars.js index 2579381..7cb6708 100644 --- a/bpdashboard/src/actions/cars.js +++ b/bpdashboard/src/actions/cars.js @@ -34,7 +34,6 @@ export function getCars() { dispatch(getCarsLoading(true)); return axios.get(API_ADDRESS + '/api/car') .then((response) => { - console.log(response); if (!response.ok && !response.data) { dispatch(getCarsFailure('oi, Noe gikk galt...')); }