68 lines
1.7 KiB
JavaScript
68 lines
1.7 KiB
JavaScript
// web/src/pages/Calculator.jsx
|
|
import { useState } from "react";
|
|
import BreadForm from "../components/BreadForm";
|
|
import BreadResult from "../components/BreadResult";
|
|
import ErrorMessage from "../components/ErrorMessage";
|
|
import { calculateBread } from "../services/api";
|
|
|
|
function Calculator() {
|
|
const [result, setResult] = useState(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState(null);
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const formData = new FormData(e.target);
|
|
|
|
const params = {
|
|
total_flour: parseFloat(formData.get("total_flour")),
|
|
hydration: parseFloat(formData.get("hydration")),
|
|
sourdough_percentage: parseFloat(formData.get("sourdough_percentage")),
|
|
sourdough_ratio: {
|
|
flour_parts: parseFloat(formData.get("sourdough_flour_parts")),
|
|
water_parts: parseFloat(formData.get("sourdough_water_parts")),
|
|
},
|
|
salt: parseFloat(formData.get("salt")),
|
|
};
|
|
|
|
try {
|
|
const data = await calculateBread(params);
|
|
setResult(data);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className="container">
|
|
<header>
|
|
<hgroup>
|
|
<h1>Calculatrice de pain</h1>
|
|
<p>Calculez les proportions exactes pour votre recette</p>
|
|
</hgroup>
|
|
</header>
|
|
|
|
<section className="bread-form-result">
|
|
|
|
<BreadForm onSubmit={handleSubmit} loading={loading} />
|
|
|
|
<BreadResult result={result} />
|
|
|
|
</section>
|
|
<section>
|
|
|
|
<ErrorMessage error={error} />
|
|
|
|
</section>
|
|
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default Calculator;
|