Update Test Front

src/App.css

@@ -1,41 +1,20 @@
-.App {
-	text-align: center;
+#allform{
+  background-image: url('world.jpg');
+  background-repeat: no-repeat;
+  background-size: 100%;
+  width: 100%;
+  height: 100%;
 }
 
-.App-logo {
-	animation: App-logo-spin infinite 20s linear;
-	height: 40vmin;
-}
-
-.App-header {
-	background-color: #282c34;
-	min-height: 100vh;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	font-size: calc(10px + 2vmin);
-	color: white;
-}
-
-.App-header p,
-.App-header ul {
-	font-size: 17px;
-}
+#form{
+  background-color: #DCDCDC;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 50px;
+  border: 2px solid black;
+  font-style: italic;
+  border-radius: 16px;
 
-.App-header ul {
-	text-align: left;
-}
-
-.App-link {
-	color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
+}

src/App.js

@@ -1,37 +1,49 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React from 'react'
+import { Field, reduxForm } from 'redux-form'
 import './App.css';
 
-const tasks = [
-	"Créer un faux écran de login ( pas de vérification ni d'appel, username et password en dur OK) managé par redux - form",
-	'Créer une autre page ( appelons la CRUDManager) sur laquelle on arrive après le login',
-	'Gérer la persistance du login via redux ( si on recharge après login OK, on arrive sur CRUDMANAGER)',
-	"CRUDManager doit afficher une liste d'éléments managés par redux. Ces éléments sont l'array data dans le fichier src/data.js",
-	"CRUDManager doit permettre l'édition de chacun des éléments. On utilisera l'array countries ( dans src/data.js ) pour proposer un choix des pays via un <select>",
-	'Toutes les modifications effectuées sur un item de cette collection devront être persistées en local.',
-	"Sur une autre page : faire un appel vers l'API de votre choix et manager la réponse via redux également, tout en affichant une partie de son contenu ( on cherche ici à voir le travail via redux )",
-	"le projet devra supporter sass, et l'object spread operator",
-	"un readme est fourni avec les packages recommandés, de même que la liste des tâches mentionnée ici ( pour garder la trace de l'avancement ;)"
-];
+const SimpleForm = props => {
+const { handleSubmit, pristine, submitting } = props
+
+  return (
 
-class App extends Component {
-	render() {
-		return (
-			<div className="App">
-				<header className="App-header">
-					<img src={logo} className="App-logo" alt="logo" />
-					<p>Hello ! Petit exercice donc :</p>
-					<p>Que c'est quoi qu'il faut faire ?</p>
-					<ul>
-						{tasks.map(task => (
-							<li>{task}</li>
-						))}
-					</ul>
-					<p>Il vous reste 6 minutes, top chrono ;)</p>
-				</header>
-			</div>
-		);
-	}
+    <div id='allform'>
+      <form onSubmitSuccess={handleSubmit} action="./CRUDManager">
+      <div id='form'>
+        <h1>Connectez-vous</h1>
+        <div>
+          <label>Username</label>
+          <div>
+            <Field
+              name="username"
+              component="input"
+              type="text"
+              placeholder="Username"
+            />
+          </div>
+        </div>
+        <div>
+          <label>Password</label>
+          <div>
+            <Field
+              name="password"
+              component="input"
+              type="password"
+              placeholder="Password"
+            />
+          </div>
+        </div>
+        <div>
+          <button type="submit" disabled={pristine || submitting}>
+            Submit
+          </button>
+        </div>
+      </div>
+      </form>
+    </div>
+  )
 }
 
-export default App;
+export default reduxForm({
+  form: 'simple'
+})(SimpleForm)

src/CRUDManager.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import { allpays, data } from './data'
+import './Crud.css';
+
+class Selopt extends Component {
+render() {
+    return(
+
+        <div id="allist">
+            <div id="list_sel">
+                <ul id="list">{data.map(function(item, i){
+                    return <li value={i}>{ item }</li>
+                })}</ul>
+            </div>
+            <div>
+        <select>{allpays.map(function(item, i){
+            return <option value={i}>{ item }</option>
+        })}</select>
+            </div>
+        </div>
+    )
+}
+}
+export default Selopt;

src/Crud.css

@@ -0,0 +1,18 @@
+#allist{
+	background-image: url('world2.jpg');
+	background-repeat: no-repeat;
+	background-size: 100%;
+	width: 100%;
+	height: 100%;
+}
+
+#list{
+	margin: 0;
+    color: white;
+    list-style: none;
+    position: absolute;
+    top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 50px;
+}

src/configureStore.js

@@ -0,0 +1,12 @@
+import { createStore, applyMiddleware, compose} from 'redux'
+import storage from 'redux-persist/es/storage'
+import { createLogger } from 'redux-logger'
+import reducers from './reducer'
+import { persistStore, persistCombineReducers } from 'redux-persist'
+
+const reducer = persistCombineReducers({key: 'roor', storage}, reducers)
+const composeEnhancers = window._REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
+let store = createStore(reducer, {}, composeEnhancers(applyMiddleware(createLogger())))
+let persistor = persistStore(store)
+
+export { store, persistor }

src/data.js

@@ -1,59 +1,6 @@
-export const data = [
-	{
-		firstName: 'Jean',
-		lastName: 'Sans peur',
-		address: {
-			streetNumber: 18,
-			streetName: 'rue des oliviers',
-			zipCode: '59800',
-			city: 'Lille',
-			country: 'France'
-		}
-	},
-	{
-		firstName: 'Bernard',
-		lastName: 'Tapissier',
-		address: {
-			streetNumber: 7,
-			streetName: 'avenue des habitués',
-			zipCode: '75015',
-			city: 'Paris',
-			country: 'France'
-		}
-	},
-	{
-		firstName: 'Harry',
-		lastName: 'Thmétik',
-		address: {
-			streetNumber: 42,
-			streetName: 'rue de la réponse',
-			zipCode: '42000',
-			city: 'Pinpon',
-			country: 'France'
-		}
-	},
-	{
-		firstName: 'Hakim',
-		lastName: 'ButBeCareful',
-		address: {
-			streetNumber: 4,
-			streetName: 'rue de la paix',
-			zipCode: '77160',
-			city: 'Provins',
-			country: 'France'
-		}
-	},
-	{
-		firstName: 'Omer',
-		lastName: 'Ta',
-		address: {
-			streetNumber: 1,
-			streetName: 'rue des corses',
-			zipCode: '01225',
-			city: 'Troyes',
-			country: 'France'
-		}
-	}
-];
-
-export const countries = ['France', 'Belgique'];
+const { getNames } = require('country-list');
+const allpays = getNames();
+
+const data = ['Bonjour.', "C'était un plaisir", 'de faire ce projet', 'A trés Bientot,', 'Lopes Ivo']
+
+export { allpays, data }

src/index.js

@@ -1,12 +1,16 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
-
-ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+import React from 'react'
+import { render } from 'react-dom'
+import { createStore } from 'redux'
+import RootReducer from './reducer'
+import { connect } from 'react-redux'
+import Root from './router'
+
+const store = createStore(RootReducer)
+
+render(<Root store={store} />, document.getElementById('root'))
+
+const mapStateToProps = (state) => {
+  return { ...state }
+}
+
+export default connect(mapStateToProps)

src/reducer.js

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux';
+import { reducer as formReducer } from 'redux-form';
+
+export default combineReducers({
+	form: formReducer,
+})

src/router.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+import { PersistGate } from 'redux-persist/lib/integration/react'
+import { Route, BrowserRouter } from 'react-router-dom'
+import { Provider } from 'react-redux'
+import { persistor } from './configureStore'
+import App from './App'
+import Selopt from './CRUDManager'
+
+
+const Root = ({ store }) => (
+ReactDOM.render((
+	<PersistGate persistor={persistor}>
+		<Provider store={store}>
+			<BrowserRouter>
+			<div>
+      			<Route exact path="/" component={App} />
+        		<Route exact path="/CRUDManager" component={Selopt}/>
+    		</div>
+    		</BrowserRouter>
+		</Provider>
+	</PersistGate>
+), document.getElementById('root'))
+)
+
+Root.propTypes = {
+  store: PropTypes.object.isRequired
+}
+
+export default Root