Tablas de resumenes

app/src/components/data/TemperaturePerSeason/index.tsx

@@ -1,50 +1,47 @@
-import React, { FC } from "react";
+import React, { FC, useEffect, useState } from "react";
+import { seasonsSummariesTable } from "../../../api/tables";
+import { Summary } from "../../../types/summary";
 import { TableHeader as Header, TdGroup } from "../shared";
 import * as classes from "../tables.module.css";
 
 const TemperaturePerSeason: FC = () => {
+  const [data, setData] = useState<Summary[] | null>(null);
+
+  useEffect(() => {
+    seasonsSummariesTable("", "", "").then((res) => {
+      setData(JSON.parse(res));
+    });
+  }, []);
+
+  const rows = data?.map((x) => (
+    <tr>
+      <th className={classes.cell}>Temporada 2015-2016 - Vendimia 2016</th>
+      <TdGroup>
+        <td>4,51%</td>
+        <td>17,86%</td>
+        <td>8,84%</td>
+      </TdGroup>
+      <td className={classes.cell}>{x.grados_acumulados}</td>
+      <td className={classes.cell}>{x.amplitud_termica}</td>
+      <td className={classes.cell}>{x.precip_acumulada}</td>
+      <td className={classes.cell}>{x.dias_para_igualar_temporada}</td>
+    </tr>
+  ));
+
   return (
-    <table className={classes.table}>
-      <Header daysToMatchCurrentTemperature={true} />
-      <tbody>
-        <tr>
-          <th className={classes.cell}>Temporada 2015-2016 - Vendimia 2016</th>
-          <TdGroup>
-            <td>4,51%</td>
-            <td>17,86%</td>
-            <td>8,84%</td>
-          </TdGroup>
-          <td className={classes.cell}>2215</td>
-          <td className={classes.cell}>(+)10 días</td>
-          <td className={classes.cell}>15,1</td>
-          <td className={classes.cell}>357</td>
-        </tr>
-        <tr>
-          <th className={classes.cell}>Temporada 2016-2017 - Vendimia 2017</th>
-          <TdGroup>
-            <td>4,51%</td>
-            <td>17,86%</td>
-            <td>8,84%</td>
-          </TdGroup>
-          <td className={classes.cell}>2215</td>
-          <td className={classes.cell}>(+)10 días</td>
-          <td className={classes.cell}>15,1</td>
-          <td className={classes.cell}>357</td>
-        </tr>
-        <tr>
-          <th className={classes.cell}>Temporada 2016-2017 - Vendimia 2017</th>
-          <TdGroup>
-            <td>4,51%</td>
-            <td>17,86%</td>
-            <td>8,84%</td>
-          </TdGroup>
-          <td className={classes.cell}>2215</td>
-          <td className={classes.cell}>(+)10 días</td>
-          <td className={classes.cell}>15,1</td>
-          <td className={classes.cell}>357</td>
-        </tr>
-      </tbody>
-    </table>
+    <>
+      <table className={classes.table}>
+        <Header daysToMatchCurrentTemperature={true} />
+        <tbody>{data && rows}</tbody>
+      </table>
+      {!data && (
+        <div className="d-flex py-3 justify-content-center">
+          <div className="spinner-border" role="status">
+            <span className="visually-hidden">Loading...</span>
+          </div>
+        </div>
+      )}
+    </>
   );
 };
 export default TemperaturePerSeason;

app/src/components/data/TemperaturePerSector/index.tsx

@@ -28,12 +28,15 @@ const TemperaturePerSector: FC = () => {
     </tr>
   ));
 
+  // Tabla
   return (
     <>
       <table className={classes.table}>
         <Header daysToMatchCurrentTemperature={false} />
+        {/* Mostrar las filas si hay data */}
         <tbody>{data && rows}</tbody>
       </table>
+      {/* Si no hay data, mostrar una spinner abajo de la tabla */}
       {!data && (
         <div className="d-flex py-3 justify-content-center">
           <div className="spinner-border" role="status">