Merge pull request #5 from TK-data/Frontend_display_registered_cars

Frontend display registered cars

bpdashboard/src/actions/cars.js

@@ -0,0 +1,44 @@
+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) => {
+        if (!response.ok && !response.data) {
+          dispatch(getCarsFailure('oi, Noe gikk galt...'));
+        }
+        dispatch(getCarsSuccess(JSON.stringify(response.data)));
+      })
+      .catch(() => dispatch(getCarsFailure('oi, Noe gikk galt...!')));
+  };
+}

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(
-      <div>
-        <p>Innlogging vellyket</p>
+      <div className="car-container">
+        <div className="car-intro">
+          <p>Registrerte biler</p>
+        </div>
+        <div className="cars-elements">
+          {carFetched.map((data, key) => (<div key= {key} className="car-box">
+            <div className="car-text"><b>RegNr</b>: {data.RegNr}</div>
+            <div className="car-text"><b>Model</b>: {data.Brand}</div>
+          </div>)
+          )}
+        </div>
       </div>
     )
   }
 }
 
-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)

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;

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
 })

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;
+}

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;
 }