added: docs to all components and jsx files

frontend/src/components/App.jsx

@@ -5,6 +5,24 @@ import 'bootstrap/dist/js/bootstrap.bundle.min.js'
 
 import Home from '../pages/Home.jsx'
 
+/**
+ * App.jsx
+ * 
+ * Este archivo define el componente App, que es el componente principal de la aplicación.
+ * 
+ * Importaciones:
+ * - '../css/App.css': Archivo CSS que contiene los estilos globales de la aplicación.
+ * - 'leaflet/dist/leaflet.css': Archivo CSS que contiene los estilos para los mapas de Leaflet.
+ * - 'bootstrap/dist/css/bootstrap.min.css': Archivo CSS que contiene los estilos de Bootstrap.
+ * - 'bootstrap/dist/js/bootstrap.bundle.min.js': Archivo JS que contiene los scripts de Bootstrap.
+ * - Home: Componente que representa la página principal de la aplicación.
+ * 
+ * Funcionalidad:
+ * - App: Componente principal que renderiza la página Home.
+ *   - Planea añadir un React Router en el futuro.
+ * 
+ */
+
 const App = () => {
   return (
     <>

frontend/src/components/Card.jsx

@@ -3,6 +3,31 @@ import { useState, useEffect, useRef } from "react";
 import "../css/Card.css";
 import { useTheme } from "../contexts/ThemeContext";
 
+/**
+ * Card.jsx
+ * 
+ * Este archivo define el componente Card, que representa una tarjeta individual con un título, estado y contenido.
+ * 
+ * Importaciones:
+ * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React.
+ * - useState, useEffect, useRef: Hooks de React para manejar estados, efectos secundarios y referencias.
+ * - "../css/Card.css": Archivo CSS que contiene los estilos para las tarjetas.
+ * - useTheme: Hook personalizado para acceder al contexto del tema.
+ * 
+ * Funcionalidad:
+ * - Card: Componente que renderiza una tarjeta con un título, estado y contenido.
+ *   - Utiliza el hook `useTheme` para aplicar la clase correspondiente al tema actual.
+ *   - Ajusta el título de la tarjeta según el tamaño de la tarjeta.
+ * 
+ * PropTypes:
+ * - Card espera una propiedad `title` que es un string requerido.
+ * - Card espera una propiedad `status` que es un string requerido.
+ * - Card espera una propiedad `children` que es un nodo de React requerido.
+ * - Card espera una propiedad `styleMode` que es opcional y puede ser "override" o una cadena vacía.
+ * - Card espera una propiedad `className` que es un string opcional.
+ * 
+ */
+
 const Card = ({ title, status, children, styleMode, className }) => {
     const cardRef = useRef(null);
     const [shortTitle, setShortTitle] = useState(title);

frontend/src/components/CardContainer.jsx

@@ -1,6 +1,25 @@
 import Card from "./Card.jsx";
 import PropTypes from "prop-types";
 
+/**
+ * CardContainer.jsx
+ * 
+ * Este archivo define el componente CardContainer, que actúa como contenedor para múltiples componentes Card.
+ * 
+ * Importaciones:
+ * - Card: Componente que representa una tarjeta individual.
+ * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React.
+ * 
+ * Funcionalidad:
+ * - CardContainer: Componente que renderiza un contenedor (`div`) con una fila de tarjetas (`Card`).
+ *   - Utiliza `props.cards` para mapear y renderizar cada tarjeta con su contenido.
+ * 
+ * PropTypes:
+ * - CardContainer espera una propiedad `cards` que es un array de objetos con las propiedades `title`, `content` y `status`.
+ * - CardContainer espera una propiedad `className` que es un string opcional.
+ * 
+ */
+
 const CardContainer = ({ cards, className }) => {
     return (
         <div className={`row justify-content-center g-0 ${className}`}>

frontend/src/components/Dashboard.jsx

@@ -1,5 +1,21 @@
 import PropTypes from 'prop-types';
 
+/**
+ * Dashboard.jsx
+ * 
+ * Este archivo define el componente Dashboard, que actúa como contenedor para los componentes principales de la página.
+ * 
+ * Importaciones:
+ * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React.
+ * 
+ * Funcionalidad:
+ * - Dashboard: Componente que renderiza un contenedor principal (`main`) con los componentes hijos pasados como `props.children`.
+ * 
+ * PropTypes:
+ * - Dashboard espera una propiedad `children` que es un nodo de React.
+ * 
+ */
+
 const Dashboard = (props) => {
     return (
         <main className='container justify-content-center'> 

frontend/src/components/Header.jsx

@@ -2,6 +2,25 @@ import PropTypes from 'prop-types';
 import '../css/Header.css';
 import { useTheme } from "../contexts/ThemeContext";
 
+/**
+ * Header.jsx
+ * 
+ * Este archivo define el componente Header, que muestra el encabezado de la página con un título y un subtítulo.
+ * 
+ * Importaciones:
+ * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React.
+ * - "../css/Header.css": Archivo CSS que contiene los estilos para el encabezado.
+ * - useTheme: Hook personalizado para acceder al contexto del tema.
+ * 
+ * Funcionalidad:
+ * - Header: Componente que renderiza un encabezado con un título y un subtítulo.
+ *   - Utiliza el hook `useTheme` para aplicar la clase correspondiente al tema actual.
+ * 
+ * PropTypes:
+ * - Header espera una propiedad `title` que es un string requerido.
+ * - Header espera una propiedad `subtitle` que es un string opcional.
+ * 
+ */
 
 const Header = (props) => {
     const { theme } = useTheme();

frontend/src/components/HistoryCharts.jsx

@@ -8,6 +8,33 @@ import { useTheme } from "../contexts/ThemeContext.jsx";
 import { DataProvider, useData } from "../contexts/DataContext.jsx";
 import { useConfig } from "../contexts/ConfigContext.jsx";
 
+/**
+ * HistoryCharts.jsx
+ * 
+ * Este archivo define el componente HistoryCharts, que muestra gráficos históricos de datos obtenidos de sensores.
+ * 
+ * Importaciones:
+ * - Line: Componente de react-chartjs-2 para renderizar gráficos de líneas.
+ * - ChartJS, LineElement, PointElement, LinearScale, CategoryScale, Filler: Módulos de chart.js para configurar y registrar los elementos del gráfico.
+ * - CardContainer: Componente que actúa como contenedor para las tarjetas.
+ * - "../css/HistoryCharts.css": Archivo CSS que contiene los estilos para los gráficos históricos.
+ * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React.
+ * - useTheme: Hook personalizado para acceder al contexto del tema.
+ * - DataProvider, useData: Funciones del contexto de datos para obtener y manejar datos.
+ * - useConfig: Hook personalizado para acceder al contexto de configuración.
+ * 
+ * Funcionalidad:
+ * - HistoryCharts: Componente que configura la solicitud de datos y utiliza el DataProvider para obtener datos de sensores.
+ *   - Muestra mensajes de carga y error según el estado de la configuración.
+ * - HistoryChartsContent: Componente que procesa los datos obtenidos y renderiza los gráficos históricos.
+ *   - Utiliza el hook `useData` para acceder a los datos de sensores.
+ *   - Renderiza gráficos de líneas con diferentes colores según el tipo de dato (temperatura, humedad, contaminación).
+ * 
+ * PropTypes:
+ * - HistoryChartsContent espera propiedades `options` (objeto), `timeLabels` (array) y `data` (array).
+ * 
+ */
+
 ChartJS.register(LineElement, PointElement, LinearScale, CategoryScale, Filler);
 
 const HistoryCharts = () => {

frontend/src/components/PollutionMap.jsx

@@ -5,6 +5,25 @@ import { useConfig } from '../contexts/ConfigContext.jsx';
 import { DataProvider } from '../contexts/DataContext.jsx';
 import { useData } from '../contexts/DataContext.jsx';
 
+/**
+ * PollutionMap.jsx
+ * 
+ * Este archivo define el componente PollutionMap, que muestra un mapa con los niveles de contaminación en diferentes ubicaciones.
+ * 
+ * Importaciones:
+ * - MapContainer, TileLayer, Circle, Popup: Componentes de react-leaflet para renderizar el mapa y los círculos de contaminación.
+ * - useConfig: Hook personalizado para acceder al contexto de configuración.
+ * - DataProvider, useData: Funciones del contexto de datos para obtener y manejar datos.
+ * 
+ * Funcionalidad:
+ * - PollutionMap: Componente que configura la solicitud de datos y utiliza el DataProvider para obtener datos de sensores.
+ *   - Muestra mensajes de carga y error según el estado de la configuración.
+ * - PollutionMapContent: Componente que procesa los datos obtenidos y renderiza los círculos de contaminación en el mapa.
+ *   - Utiliza el hook `useData` para acceder a los datos de sensores.
+ *   - Renderiza círculos de diferentes colores y tamaños según el nivel de contaminación.
+ * 
+ */
+
 const PollutionCircles = ({ data }) => {
   return data.map(({ lat, lng, level }, index) => {
     const baseColor = level < 20 ? '#00FF85' : level < 60 ? '#FFA500' : '#FF0000';

frontend/src/components/SummaryCards.jsx

@@ -6,6 +6,29 @@ import { useData } from '../contexts/DataContext';
 
 import { useConfig } from '../contexts/ConfigContext';
 
+/**
+ * SummaryCards.jsx
+ * 
+ * Este archivo define el componente SummaryCards, que muestra tarjetas resumen con información relevante obtenida de sensores.
+ * 
+ * Importaciones:
+ * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React.
+ * - CardContainer: Componente que actúa como contenedor para las tarjetas.
+ * - DataProvider, useData: Funciones del contexto de datos para obtener y manejar datos.
+ * - useConfig: Hook personalizado para acceder al contexto de configuración.
+ * 
+ * Funcionalidad:
+ * - SummaryCards: Componente que configura la solicitud de datos y utiliza el DataProvider para obtener datos de sensores.
+ *   - Muestra mensajes de carga y error según el estado de la configuración.
+ * - SummaryCardsContent: Componente que procesa los datos obtenidos y actualiza el contenido de las tarjetas.
+ *   - Utiliza el hook `useData` para acceder a los datos de sensores.
+ *   - Actualiza el contenido y estado de las tarjetas según los datos obtenidos.
+ * 
+ * PropTypes:
+ * - SummaryCards espera una propiedad `data` que es un array.
+ * 
+ */
+
 const SummaryCards = () => {
     const { config, configLoading, configError } = useConfig();
 

frontend/src/components/ThemeButton.jsx

@@ -1,6 +1,22 @@
 import { useTheme } from "../contexts/ThemeContext.jsx";
 import "../css/ThemeButton.css";
 
+/**
+ * ThemeButton.jsx
+ * 
+ * Este archivo define el componente ThemeButton, que permite a los usuarios cambiar entre temas claro y oscuro.
+ * 
+ * Importaciones:
+ * - useTheme: Hook personalizado para acceder al contexto del tema.
+ * - "../css/ThemeButton.css": Archivo CSS que contiene los estilos para el botón de cambio de tema.
+ * 
+ * Funcionalidad:
+ * - ThemeButton: Componente que renderiza un botón para alternar entre temas claro y oscuro.
+ *   - Utiliza el hook `useTheme` para acceder al tema actual y la función para cambiarlo.
+ *   - El botón muestra un icono de sol (☀️) si el tema actual es oscuro, y un icono de luna (🌙) si el tema actual es claro.
+ * 
+ */
+
 export default function ThemeButton() {
     const { theme, toggleTheme } = useTheme();
 

frontend/src/contexts/ConfigContext.jsx

@@ -1,6 +1,27 @@
 import { createContext, useContext, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 
+/**
+ * ConfigContext.jsx
+ * 
+ * Este archivo define el contexto de configuración para la aplicación, permitiendo cargar y manejar la configuración desde un archivo externo.
+ * 
+ * Importaciones:
+ * - createContext, useContext, useState, useEffect: Funciones de React para crear y utilizar contextos, manejar estados y efectos secundarios.
+ * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React.
+ * 
+ * Funcionalidad:
+ * - ConfigContext: Contexto que almacena la configuración cargada, el estado de carga y cualquier error ocurrido durante la carga de la configuración.
+ * - ConfigProvider: Proveedor de contexto que maneja la carga de la configuración y proporciona el estado de la configuración a los componentes hijos.
+ *   - Utiliza `fetch` para cargar la configuración desde un archivo JSON.
+ *   - Maneja el estado de carga y errores durante la carga de la configuración.
+ * - useConfig: Hook personalizado para acceder al contexto de configuración.
+ * 
+ * PropTypes:
+ * - ConfigProvider espera un único hijo (`children`) que es requerido y debe ser un nodo de React.
+ * 
+ */
+
 const ConfigContext = createContext();
 
 export const ConfigProvider = ({ children }) => {

frontend/src/contexts/DataContext.jsx

@@ -1,6 +1,28 @@
 import { createContext, useContext, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 
+/**
+ * DataContext.jsx
+ * 
+ * Este archivo define el contexto de datos para la aplicación, permitiendo obtener y manejar datos de una fuente externa.
+ * 
+ * Importaciones:
+ * - createContext, useContext, useState, useEffect: Funciones de React para crear y utilizar contextos, manejar estados y efectos secundarios.
+ * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React.
+ * 
+ * Funcionalidad:
+ * - DataContext: Contexto que almacena los datos obtenidos, el estado de carga y cualquier error ocurrido durante la obtención de datos.
+ * - DataProvider: Proveedor de contexto que maneja la obtención de datos y proporciona el estado de los datos a los componentes hijos.
+ *   - Utiliza `fetch` para obtener datos de una URL construida a partir de la configuración proporcionada.
+ *   - Maneja el estado de carga y errores durante la obtención de datos.
+ * - useData: Hook personalizado para acceder al contexto de datos.
+ * 
+ * PropTypes:
+ * - DataProvider espera un único hijo (`children`) que es requerido y debe ser un nodo de React.
+ * - DataProvider también espera una configuración (`config`) que debe incluir `baseUrl` (string) y opcionalmente `params` (objeto).
+ * 
+ */
+
 const DataContext = createContext();
 
 export const DataProvider = ({ children, config }) => {

frontend/src/contexts/ThemeContext.jsx

@@ -1,6 +1,27 @@
 import { createContext, useContext, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 
+/**
+ * ThemeContext.jsx
+ * 
+ * Este archivo define el contexto de tema para la aplicación, permitiendo cambiar entre temas claro y oscuro.
+ * 
+ * Importaciones:
+ * - createContext, useContext, useEffect, useState: Funciones de React para crear y utilizar contextos, manejar efectos secundarios y estados.
+ * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React.
+ * 
+ * Funcionalidad:
+ * - ThemeContext: Contexto que almacena el tema actual y la función para cambiarlo.
+ * - ThemeProvider: Proveedor de contexto que maneja el estado del tema y proporciona la función para alternar entre temas.
+ *   - Utiliza `localStorage` para persistir el tema seleccionado.
+ *   - Aplica la clase correspondiente al `body` del documento para reflejar el tema actual.
+ * - useTheme: Hook personalizado para acceder al contexto del tema.
+ * 
+ * PropTypes:
+ * - ThemeProvider espera un único hijo (`children`) que es requerido y debe ser un nodo de React.
+ * 
+ */
+
 const ThemeContext = createContext();
 
 export function ThemeProvider({ children }) {

frontend/src/main.jsx

@@ -6,6 +6,25 @@ import App from './components/App.jsx'
 import { ThemeProvider } from './contexts/ThemeContext.jsx'
 import { ConfigProvider } from './contexts/ConfigContext.jsx'
 
+/**
+ * main.jsx
+ * 
+ * Este archivo es el punto de entrada principal de la aplicación React.
+ * 
+ * Importaciones:
+ * - StrictMode: Un componente de React que ayuda a identificar problemas potenciales en la aplicación.
+ * - createRoot: Una función de ReactDOM que crea una raíz para renderizar la aplicación.
+ * - './css/index.css': Archivo CSS que contiene los estilos globales de la aplicación.
+ * - App: El componente principal de la aplicación.
+ * - ThemeProvider: Un proveedor de contexto que maneja el tema de la aplicación.
+ * - ConfigProvider: Un proveedor de contexto que maneja la configuración de la aplicación.
+ * 
+ * Funcionalidad:
+ * - El archivo utiliza `createRoot` para obtener el elemento con el id 'root' del DOM y renderizar la aplicación React dentro de él.
+ * - La aplicación se envuelve en `StrictMode` para ayudar a detectar problemas potenciales.
+ * - `ThemeProvider` y `ConfigProvider` envuelven el componente `App` para proporcionar los contextos de tema y configuración a toda la aplicación.
+ */
+
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <ThemeProvider>

frontend/src/pages/Home.jsx

@@ -5,6 +5,27 @@ import HistoryCharts from '../components/HistoryCharts.jsx'
 import ThemeButton from '../components/ThemeButton.jsx'
 import SummaryCards from '../components/SummaryCards.jsx'
 
+/**
+ * Home.jsx
+ * 
+ * Este archivo define el componente Home, que es una página principal de la aplicación.
+ * 
+ * Importaciones:
+ * - Header: Un componente que muestra el encabezado de la página.
+ * - Dashboard: Un componente que actúa como contenedor para los componentes principales de la página.
+ * - PollutionMap: Un componente que muestra un mapa de la contaminación.
+ * - HistoryCharts: Un componente que muestra gráficos históricos de la contaminación.
+ * - ThemeButton: Un componente que permite cambiar el tema de la aplicación.
+ * - SummaryCards: Un componente que muestra tarjetas resumen con información relevante.
+ * 
+ * Funcionalidad:
+ * - El componente Home utiliza una estructura de JSX para organizar y renderizar los componentes importados.
+ * - El componente Header muestra el título y subtítulo de la página.
+ * - El componente Dashboard contiene los componentes SummaryCards, PollutionMap y HistoryCharts.
+ * - El componente ThemeButton se renderiza al final para permitir el cambio de tema.
+ * 
+ */
+
 const Home = () => {
     return (
         <>