EFM REGIONAL REACT

PARTIE 1:
QUESTION 1:

<BrowserRouter>
<Layout />
</BrowserRouter>

QUESTION 2:

import Home from './Home';

import Contact from './Contact';
import Article from './Article';
import Form from './Form';
import NoPage from './NoPage';
import { Link, Route, Routes } from 'react-router-dom';

function Layout() {
return (
<div>
<ul>
<li>
<Link to='/'>Home</Link>
</li>
<li>
<Link to='/contact'>Contact</Link>
</li>
<li>
<Link to='/form'>Form</Link>
</li>
<li>
<Link to='/article'>Article</Link>
</li>
</ul>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/contact' element={<Contact />} />
<Route path='/form' element={<Form />} />
<Route path='/article' element={<Article />} />
<Route path='*' element={<NoPage />} />
</Routes>
</div>
);
}

export default Layout;

QUESTION 3:
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const Article = () => {

const [products, setProducts] = useState([]);

useEffect(() => {
axios.get('https://fakestoreapi.com/products').then((res) =>
setProducts(res.data));
}, []);
return (
<div>
<ul>
{
products.map((p) => {
return (
<li key={p.id}>
<img src={p.image} alt="" style={{
maxWidth: '400px',
}} />
<p>{p.title}</p>
<p><b>PRIX: {p.price} MAD</b></p>
</li>)
})
}
</ul>
</div>
)
}

export default Article

QUESTION 4:

import React, { useEffect, useState } from 'react'

const Form = () => {

const [email, setEmail] = useState('');
const [motDePasse, setMotDePasse] = useState('');
const [pays, setPays] = useState('');
const [genre, setGenre] = useState('male');

const [paysData, setPaysData] = useState([]);

useEffect(() => {
fetch('https://countriesnow.space/api/v0.1/countries').then(res =>
res.json()).then(res => setPaysData(res.data));
}, [])

const handleSubmit = (e) => {

e.preventDefault();
console.log({
 email,
motDePasse,
pays,
genre
})
}

return (
<div>
<form onSubmit={handleSubmit}>
<div>
<label>Email</label>
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div>
<label>motDePasse</label>
<input type="password" value={motDePasse} onChange={(e) =>
setMotDePasse(e.target.value)} />
</div>
<div>
<label>Pays</label>
<select value={pays} onChange={(e) => setPays(e.target.value)}>
<option value="">-- select pays --</option>
{
paysData.map((p, index) => (
<option key={index} value={p.iso2}>{p.country}</option>
))
}
</select>
</div>
<div>
<label>Genre </label>
<br />
<label>
<input type="radio" name="genre" value='male' onChange={(e) =>
setGenre(e.target.value)} checked={genre === 'male'} />
Male
</label>
<label>
<input type="radio" name="genre" value='female' onChange={(e) =>
setGenre(e.target.value)} checked={genre === 'female'} />
Female
</label>
</div>
<button>Valider</button>
</form>
</div>
)
}

export default Form

PARTIE 1:

QUESTION 1:

npm install redux react-redux

QUESTION 2:
index.js

import React from 'react';

import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux'
import store from './store'
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<Provider store={store}>
<App />
</Provider>
);

QUESTION 3:

import { createStore } from "redux";

const store = createStore(panierReducer);

export default store;

QUESTION 4 et 5:

// Q4:
export const ADDARTICLE = 'ADDARTICLE';
// Q5:
export const REMOVEARTICLE = 'REMOVEARTICLE';

QUESTION 6 et 7:

const initialState = {
panier: []
};

const panierReducer = (state = initialState, action) => {

switch(action.type) {
case ADDARTICLE:
return {...state, panier: [...state.panier, action.payload.id]};
// QESTION 7
case REMOVEARTICLE:
return {...state, panier: state.panier.filter(p => p !== action.payload)}
 //
default: return state
}
}

QUESTION 8:

import React, { useEffect, useState } from 'react';

import axios from 'axios';
import { useSelector, useDispatch } from 'react-redux'
import { ADDARTICLE, REMOVEARTICLE } from '../actionTypes';

const Article = () => {

const [products, setProducts] = useState([]);
const dispatch = useDispatch();
const panier = useSelector((state) => state.panier)
console.log(panier);
useEffect(() => {
axios.get('https://fakestoreapi.com/products').then((res) =>
setProducts(res.data));
}, []);
return (
<div>
<ul>
{
products.map((p) => {
return (
<li key={p.id}>
<img src={p.image} alt="" style={{
maxWidth: '400px',
}} />
<p>{p.title}</p>
<p><b>PRIX: {p.price} MAD</b></p>
{
panier.includes(p.id) ? (
<button
onClick={() => dispatch({
type:REMOVEARTICLE,
payload: p.id
})}
>Supprimer</button>
) : (
<button onClick={() => dispatch({
type: ADDARTICLE,
payload: p
})}>Ajouter</button>
)
}
</li>)
})
}
</ul>
 </div>
)
}

export default Article