Mise en place des reducers

Author: JoPFullJS

src/actions/index.js

@@ -0,0 +1,71 @@
+//Asyncrone request and Promise based HTTP client for the browser
+import axios from 'axios';
+
+//Liste des actions
+import * from '../constants/actionTypes';
+
+// Point d'entré de notre API
+const ROOT_URI = 'http://localhost:3000';
+
+/*--------  Listes des action du domaine d'intervention -------------*/
+
+export function fetchInterventions() {
+	return dispatch => {
+		dispatch({type:FETCH_INTERVENTIONS});
+		axios.get(`${ROOT_URI}/interventions`,{
+			headers: {accept: 'application/json'}
+		})
+			.then(response =>{
+				dispatch(fetchInterventionsSuccess(response));
+			})
+			.catch(()=>{
+	          	dispatch(fetchCompetencesFailure("Liste des interventions est introuvable !"));
+	        });
+	}
+}
+
+export function fetchInterventionsSuccess(Interventions){
+    return {
+      type:FETCH_INTERVENTIONS_SUCCESS,
+      payload:Interventions
+    };
+}
+
+export function fetchInterventionsFailure(error){
+    return {
+      type:FETCH_INTERVENTIONS_FAILURE,
+      payload:error
+    }
+}
+
+/*--------  Listes des action du domaine de competence -------------*/
+
+export function fetchCompetences() {
+	return dispatch => {
+		dispatch({type:FETCH_COMPETENCES});
+		axios.get(`${ROOT_URI}/competences`,{
+			headers: {accept: 'application/json'}
+		})
+			.then(response =>{
+				dispatch(fetchCompetencesSuccess(response));
+			})
+			.catch(()=>{
+	          	dispatch(fetchCompetencesFailure("Liste des compétences est introuvable !"));
+	        });
+	}
+}
+
+export function fetchCompetencesSuccess(competences){
+    return {
+      type:FETCH_COMPETENCES_SUCCESS,
+      payload:competences
+    };
+}
+
+export function fetchCompetencesFailure(error){
+    return {
+      type:FETCH_COMPETENCES_FAILURE,
+      payload:error
+    }
+}
+

src/components/App.js

@@ -6,13 +6,7 @@ class App extends Component {
   render() {
     return (
       <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
-        </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+         {this.props.children}
       </div>
     );
   }

src/components/competences.js

@@ -1,10 +1,36 @@
 import React, { Component } from 'react';
+//import { Link } from 'react-router';
 
 class Competences extends Component {
+	
+	ComponentWillMount() {
+		this.props.fetchCompetences();
+	}
+
+	renderCompetences(competences) {
+		return competences.map((competence) => {
+			return {
+				<div>
+					<h3>{competence.titre}</h3>
+					<p>{competence.description}</p>
+				</div>
+			};
+		});
+	}
+
 	render() {
+		const { competences, error, loding } = this.props.competencesList;
+
+		if(loding) {
+			return <div className="interventions">Loading...</div>
+		}
+		else if(error) {
+			return <div className="alert">Error : {error}</div>
+		}
 		return (
 			<div>
 				<h2>Divers Competences</h2>
+				{this.renderCompetences(competences)}
 			</div>
 		);
 	}

src/components/interventions.js

@@ -1,10 +1,36 @@
 import React, { Component } from 'react';
+//import { Link } from 'react-router';
 
 class Interventions extends Component {
+	
+	ComponentWillMount() {
+		this.props.fetchInterventions();
+	}
+
+	renderCompetences(interventions) {
+		return interventions.map((intervention) => {
+			return {
+				<div>
+					<h3>{intervention.nom}</h3>
+					<p>{intervention.description}</p>
+				</div>
+			};
+		});
+	}
+
 	render() {
+		const { interventions, error, loding } = this.props.interventionsList;
+
+		if(loding) {
+			return <div className="interventions">Loading...</div>
+		}
+		else if(error) {
+			return <div className="alert">Error : {error}</div>
+		}
 		return (
 			<div>
-				<h2>Domaines Interventions</h2>
+				<h2>Divers Competences</h2>
+				{this.renderInterventions(interventions)}
 			</div>
 		);
 	}

src/reducers/competenceReducer.js

@@ -0,0 +1,17 @@
+//Liste des actions
+import * from '../constants/actionTypes';
+
+const INITIAL_STATE = {
+	competencesList:{competences:[], error:null, loading:false}
+};
+
+export default function (state = INITIAL_STATE, actions){
+	switch (action.type) {
+		case FETCH_COMPETENCES:
+			return {...state, competencesList:{competences:[], error:null, loading:true}};
+		case FETCH_COMPETENCES_SUCCESS:
+			return {...state, competencesList:{competences:action.payload.data, error:null, loading:false}};
+		default:
+        	return state;
+	}
+}

src/reducers/index.js

@@ -0,0 +1,13 @@
+import { combineReducers } from redux;
+
+import interventionReducer from './intervention_reducer';
+import competenceReducer from './competences_reducer';
+
+//import {reducer as form} from 'redux-form';
+
+const rootReducer = combineReducers({
+	intervention:interventionReducer,
+	competence:competenceReducer
+});
+
+export default rootReducer;

src/reducers/interventionReducer.js

@@ -0,0 +1,17 @@
+//Liste des actions
+import * from '../constants/actionTypes';
+
+const INITIAL_STATE = {
+	interventionsList:{interventions:[], error:null, loading:false}
+};
+
+export default function (state = INITIAL_STATE, actions){
+	switch (action.type) {
+		case FETCH_INTERVENTIONS:
+			return {...state, interventionsList:{interventions:[], error:null, loading:true}};
+		case FETCH_INTERVENTIONS_SUCCESS:
+			return {...state, interventionsList:{interventions:action.payload.data, error:null, loading:false}};
+		default:
+        	return state;
+	}
+}