web: adapt to the backend refactoring

- Implements the new data model.
- TODO: tests and everything.

Co-Authored-by: iGor milhit <igor@milhit.ch>

web/src/App.jsx

@@ -1,73 +1,228 @@
-import { useState } from 'react';
-import './App.css';
+import { useState } from "react";
+import "./App.css";
 
 function App() {
-  const [data, setData] = useState(null);
+  const [formData, setFormData] = useState({
+    total_flour: "",
+    hydration: "",
+    sourdough_percentage: "",
+    sourdough_flour_parts: "1",
+    sourdough_water_parts: "1",
+    salt: "",
+  });
 
-  async function handleSubmit(e) {
+  const [result, setResult] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async (e) => {
     e.preventDefault();
-    const form = new FormData(e.target);
-    const body = {
-      flour: Number(form.get('flour')),
-      hydration: Number(form.get('hydration')),
-      sourdough_hydration: Number(form.get('sourdough_hydration')),
-      salt_percent: Number(form.get('salt_percent')),
-      sourdough_percent: Number(form.get('sourdough_percent'))
-    };
+    setLoading(true);
+    setError(null);
 
-    const res = await fetch('http://localhost:8000/calculate', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(body)
-    });
-    const json = await res.json();
-    setData(json);
-  }
+    try {
+      // Transform form data to API format
+      const apiData = {
+        total_flour: parseFloat(formData.total_flour),
+        hydration: parseFloat(formData.hydration),
+        sourdough_percentage: parseFloat(formData.sourdough_percentage),
+        sourdough_ratio: {
+          flour_parts: parseFloat(formData.sourdough_flour_parts),
+          water_parts: parseFloat(formData.sourdough_water_parts),
+        },
+        salt: parseFloat(formData.salt),
+      };
+
+      const response = await fetch("http://localhost:8000/calculate", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(apiData),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(
+          errorData.detail || `HTTP error! status: ${response.status}`
+        );
+      }
+
+      const data = await response.json();
+      setResult(data);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
 
   return (
-    <section>
-      <h1>Calculateur de quantités</h1>
-      <p>
-        Calcule les quantités de farine, levain, eau et sel sur la base des
-        informations renseignées dans le formulaire.
-      </p>
+    <div className="container">
+      <h1>Bread Dough Calculator</h1>
+
       <form onSubmit={handleSubmit}>
-        <label>
-          Farine (g) : 
-          <input name="flour" type="number" defaultValue={500} />
-        </label>
-        <label>
-          Hydratation (%) :
-          <input name="hydration" type="number" defaultValue={60} />
-        </label>
-        <label>
-          Hydratation du levain (%) :
-          <input name="sourdough_hydration" type="number"
-                 defaultValue={50} />
-        </label>
-        <label>
-          Sel (%) :
-          <input name="salt_percent" type="number" defaultValue={1.6} />
-        </label>
-        <label>
-          Levain (%) :
-          <input name="sourdough_percent" type="number" defaultValue={20} />
-        </label>
-        <button type="submit">Calculer</button>
+        <div className="form-group">
+          <label htmlFor="total_flour">Total Flour (g):</label>
+          <input
+            type="number"
+            id="total_flour"
+            name="total_flour"
+            value={formData.total_flour}
+            onChange={handleChange}
+            min="1"
+            step="1"
+            required
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="hydration">Hydration (%):</label>
+          <input
+            type="number"
+            id="hydration"
+            name="hydration"
+            value={formData.hydration}
+            onChange={handleChange}
+            min="50"
+            max="100"
+            step="0.1"
+            required
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="sourdough_percentage">Sourdough (% of flour):</label>
+          <input
+            type="number"
+            id="sourdough_percentage"
+            name="sourdough_percentage"
+            value={formData.sourdough_percentage}
+            onChange={handleChange}
+            min="0"
+            max="50"
+            step="0.1"
+            required
+          />
+        </div>
+
+        <fieldset className="ratio-fieldset">
+          <legend>Sourdough Ratio (Flour:Water)</legend>
+
+          <div className="form-group">
+            <label htmlFor="sourdough_flour_parts">Flour parts:</label>
+            <input
+              type="number"
+              id="sourdough_flour_parts"
+              name="sourdough_flour_parts"
+              value={formData.sourdough_flour_parts}
+              onChange={handleChange}
+              min="0.1"
+              step="0.1"
+              required
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="sourdough_water_parts">Water parts:</label>
+            <input
+              type="number"
+              id="sourdough_water_parts"
+              name="sourdough_water_parts"
+              value={formData.sourdough_water_parts}
+              onChange={handleChange}
+              min="0.1"
+              step="0.1"
+              required
+            />
+          </div>
+        </fieldset>
+
+        <div className="form-group">
+          <label htmlFor="salt">Salt (% of flour):</label>
+          <input
+            type="number"
+            id="salt"
+            name="salt"
+            value={formData.salt}
+            onChange={handleChange}
+            min="0"
+            max="5"
+            step="0.1"
+            required
+          />
+        </div>
+
+        <button type="submit" disabled={loading}>
+          {loading ? "Calculating..." : "Calculate"}
+        </button>
       </form>
 
-      {data && (
-        <section>
-          <h2>Quantités pour ton pâton</h2>
-          <ul>
-            <li>Farine : {data.flour} g</li>
-            <li>Eau : {data.water} g</li>
-            <li>Levain : {data.sourdough} g</li>
-            <li>Sel : {data.salt} g</li>
-          </ul>
-        </section>
+      {error && (
+        <div className="error">
+          <h2>Error</h2>
+          <p>{error}</p>
+        </div>
       )}
-    </section>
+
+      {result && (
+        <div className="results">
+          <h2>Ingredients to Add</h2>
+          <div className="result-grid">
+            <div className="result-item">
+              <span className="label">Flour:</span>
+              <span className="value">{result.ingredients_to_add.flour}g</span>
+            </div>
+            <div className="result-item">
+              <span className="label">Water:</span>
+              <span className="value">{result.ingredients_to_add.water}g</span>
+            </div>
+            <div className="result-item">
+              <span className="label">Sourdough:</span>
+              <span className="value">
+                {result.ingredients_to_add.sourdough}g
+              </span>
+            </div>
+            <div className="result-item">
+              <span className="label">Salt:</span>
+              <span className="value">{result.ingredients_to_add.salt}g</span>
+            </div>
+          </div>
+
+          <h3>Recipe Details</h3>
+          <div className="result-grid">
+            <div className="result-item">
+              <span className="label">Total flour:</span>
+              <span className="value">{result.details.total_flour}g</span>
+            </div>
+            <div className="result-item">
+              <span className="label">Total water:</span>
+              <span className="value">{result.details.total_water}g</span>
+            </div>
+            <div className="result-item">
+              <span className="label">Flour in sourdough:</span>
+              <span className="value">
+                {result.details.flour_in_sourdough}g
+              </span>
+            </div>
+            <div className="result-item">
+              <span className="label">Water in sourdough:</span>
+              <span className="value">
+                {result.details.water_in_sourdough}g
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
   );
 }