From 5182f1c1a03172efc581192afd92cc5e2d919847 Mon Sep 17 00:00:00 2001 From: Juani Garay Date: Mon, 29 Jan 2024 12:29:43 -0300 Subject: [PATCH 1/4] add missing dependency to MonthsSlider hook Setters, as all functions in javascript, are values and their pointers can change. If this component were to receive a different setter, it would need to change its callback. Also, this was raising a warning from the linter, and I believe we should address linter warnings. --- src/components/MonthsSlider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MonthsSlider.tsx b/src/components/MonthsSlider.tsx index 7f15792..5389674 100644 --- a/src/components/MonthsSlider.tsx +++ b/src/components/MonthsSlider.tsx @@ -58,7 +58,7 @@ export default function MonthsSlider({ setMonthRange(range); setDates({ min, max }); }, - [], + [globalDates.min, setDates], ); return ( From bac0243b1002b8486bcf1d66fb8afa6f58b2961f Mon Sep 17 00:00:00 2001 From: Juani Garay Date: Mon, 29 Jan 2024 12:30:05 -0300 Subject: [PATCH 2/4] add missing checks to tsconfig --- tsconfig.json | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 640888c..7f3adf6 100644 --- a/tsconfig.json +++ b/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 can return T, but if the index is out of bounds, it returns undefined. + * This option makes the indexed access of Array 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" }] From b70aec142f53e682d4153c097317a2e47185a10f Mon Sep 17 00:00:00 2001 From: Juani Garay Date: Mon, 29 Jan 2024 12:30:16 -0300 Subject: [PATCH 3/4] migrate analisis component to ts When you access tipos.byName[t] you don't have a guarantee that that doesn't evaluate to undefined in Typescript. That's because byName isn't a Record but a Record, which makes it possible to access byName["someString"] and get undefined. That is why Object.keys was rewritten as Object.entries --- src/App.jsx | 2 +- src/components/{Analisis.jsx => Analisis.tsx} | 42 +++++++++++-------- 2 files changed, 25 insertions(+), 19 deletions(-) rename src/components/{Analisis.jsx => Analisis.tsx} (80%) diff --git a/src/App.jsx b/src/App.jsx index d251abd..aa321a1 100644 --- a/src/App.jsx +++ b/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"; diff --git a/src/components/Analisis.jsx b/src/components/Analisis.tsx similarity index 80% rename from src/components/Analisis.jsx rename to src/components/Analisis.tsx index 9a89131..63ce432 100644 --- a/src/components/Analisis.jsx +++ b/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; +}; + +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 */
@@ -27,17 +45,17 @@ export default function Analisis({ min, max, total, tipos, componentes }) {
- {Object.keys(tipos.byName).map((t, i) => ( + {Object.entries(tipos.byName).map(([t, value], i) => (
-

{tipos.byName[t].length}

+

{value.length}

{t}

))} - {Object.keys(componentes.byName).map((t, i) => ( + {Object.entries(componentes.byName).map(([t, value], i) => (
-

{componentes.byName[t].length}

+

{value.length}

{t}

@@ -80,15 +98,3 @@ export default function Analisis({ min, max, total, tipos, componentes }) {
); } - -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, -}; From a7a88504820e2238f0a8561fd1c386796d6e8587 Mon Sep 17 00:00:00 2001 From: Juani Garay Date: Wed, 31 Jan 2024 15:11:03 -0300 Subject: [PATCH 4/4] add --noEmit option to build to make use of Vite ts support --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c42b88f..32a3d69 100644 --- a/package.json +++ b/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" },