Merge pull request #56 from edipoarg/chana/migrate-analisis-component…

…-to-ts

Chana/migrate analisis component to ts

package.json

@@ -8,7 +8,7 @@
     "dev": "vite",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist",
-    "build": "node services/google-sheets.js > public/data/casos.json && tsc && vite build",
+    "build": "node services/google-sheets.js > public/data/casos.json && tsc --noEmit && vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

src/App.jsx

@@ -19,7 +19,7 @@ import { Markers } from "./components/Markers.jsx";
 import Main2 from "./components/Main2.jsx";
 import Popup from "./components/Popup.jsx";
 import Filtros from "./components/Filtros.jsx"; // Cambia la ruta a tu formulario
-import Analisis from "./components/Analisis.jsx";
+import Analisis from "./components/Analisis.tsx";
 
 import mystyle from "./mystyle.json";
 import MonthsSlider from "./components/MonthsSlider.tsx";

src/components/Analisis.jsx → src/components/Analisis.tsx

@@ -1,8 +1,26 @@
 import styles from "./Analisis.module.css";
 import { Link as ScrollLink } from "react-scroll";
-import PropTypes from "prop-types";
 
-export default function Analisis({ min, max, total, tipos, componentes }) {
+type PropWithByName = {
+  // TODO: These strings are constant and could be narrowed down to a union
+  byName: Record<string, number[]>;
+};
+
+interface Props {
+  min: Date;
+  max: Date;
+  total: number;
+  tipos: PropWithByName;
+  componentes: PropWithByName;
+}
+
+export default function Analisis({
+  min,
+  max,
+  total,
+  tipos,
+  componentes,
+}: Props) {
   return (
     /* TODO: extract this ID, "analisis", which is also used in Main2 and App, to a constant */
     <div id="analisis" className={styles.analisis}>
@@ -27,17 +45,17 @@ export default function Analisis({ min, max, total, tipos, componentes }) {
       </div>
 
       <div className={styles.analisisDatos}>
-        {Object.keys(tipos.byName).map((t, i) => (
+        {Object.entries(tipos.byName).map(([t, value], i) => (
           <div className={styles.datos1} key={i}>
-            <h1 className={styles.datoN1}>{tipos.byName[t].length}</h1>
+            <h1 className={styles.datoN1}>{value.length}</h1>
             <div>
               <p className={styles.textAnalisis}>{t}</p>
             </div>
           </div>
         ))}
-        {Object.keys(componentes.byName).map((t, i) => (
+        {Object.entries(componentes.byName).map(([t, value], i) => (
           <div className={styles.datos2} key={i}>
-            <h1 className={styles.datoN2}>{componentes.byName[t].length}</h1>
+            <h1 className={styles.datoN2}>{value.length}</h1>
             <div>
               <p className={styles.textAnalisis}>{t}</p>
             </div>
@@ -80,15 +98,3 @@ export default function Analisis({ min, max, total, tipos, componentes }) {
     </div>
   );
 }
-
-const PropWithByName = PropTypes.shape({
-  byName: PropTypes.array.isRequired,
-}).isRequired;
-
-Analisis.propTypes = {
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  total: PropTypes.number.isRequired,
-  tipos: PropWithByName,
-  componentes: PropWithByName,
-};

src/components/MonthsSlider.tsx

@@ -58,7 +58,7 @@ export default function MonthsSlider({
       setMonthRange(range);
       setDates({ min, max });
     },
-    [],
+    [globalDates.min, setDates],
   );
 
   return (

tsconfig.json

@@ -14,7 +14,19 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "plugins": [{ "name": "typescript-plugin-css-modules" }]
+    "plugins": [{ "name": "typescript-plugin-css-modules" }],
+    // https://www.typescriptlang.org/tsconfig#strictNullChecks
+    "strictNullChecks": true,
+    /* Indexed access of an Array<T> can return T, but if the index is out of bounds, it returns undefined.
+     * This option makes the indexed access of Array<T> to evaluate to T | undefined. 
+     * 
+     * const numbers: Array = [];
+     * // this should fail, type of test should be number | undefined
+     * const test = numbers[0].toFixed();
+     *
+     */
+    // https://www.typescriptlang.org/tsconfig#noUncheckedIndexedAccess
+    "noUncheckedIndexedAccess": true
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]