// App.

js
import React from 'react';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

const initialState = {
t: '',
g: 'h',
res: '',
err: '',
};

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

switch (action.type) {
case 'setT':
return { ...state, t: action.payload };
case 'setG':
return { ...state, g: action.payload };
case 'setRes':
return { ...state, res: action.payload };
case 'setErr':
return { ...state, err: action.payload };
default:
return state;
}
};

const store = createStore(reducer);

const Poid = ({ t, g, res, err, setT, setG, setRes, setErr }) => {

const Error = (t) => {
if (parseInt(t) < 150) {
setErr('Taille inférieure à 150cm');
} else if (isNaN(parseInt(t))) {
setErr('La valeur de la taille doit être un entier');
} else {
setErr('');
}
};

const Image = (g) => {

let img = '';
if (g === 'h') {
img = '/homme.png';
} else {
img = '/femme.png';
}
return <img src={img} alt="myimg" />;
};

const Calcul = () => {

Error(t);
if (!err) {
let resultat = 0;
const taille = parseInt(t);
if (g === 'h') {
resultat = taille - 100 - (taille - 150) / 4;
} else if (g === 'f') {
resultat = taille - 100 - (taille - 150) / 2.5;
 }
setRes(resultat);
}
};

return (
<div className="poids-ideal-container">
<label>Taille en cm :</label>
<br />
<input
type="text"
placeholder="Tapez votre taille"
onChange={(e) => setT(e.target.value)}
value={t}
/>

<br />
<label>Genre :</label>
<select onChange={(e) => setG(e.target.value)} value={g}>
<option value="h">Homme</option>
<option value="f">Femme</option>
</select>
<br />
{Image(g)}
<br />
<label>Poids Idéal :</label>
<br />
<input type="text" value={isNaN(parseInt(t)) ? err : res} readOnly />
<button onClick={Calcul}>Calculer</button>
</div>
);
};

const mapStateToProps = (state) => ({

t: state.t,
g: state.g,
res: state.res,
err: state.err,
});

const mapDispatchToProps = {
setT: (payload) => ({ type: 'setT', payload }),
setG: (payload) => ({ type: 'setG', payload }),
setRes: (payload) => ({ type: 'setRes', payload }),
setErr: (payload) => ({ type: 'setErr', payload }),
};

const ConnectedPoid = connect(mapStateToProps, mapDispatchToProps)(Poid);

const App = () => {

return (
<Provider store={store}>
<ConnectedPoid />
</Provider>
);
};

export default App;

m