Guía 13

Guía 13

DAWM / Proyecto03

Objetivo general

Desarrollar un dashboard interactivo y visualmente intuitivo utilizando tecnologías web modernas, como React, que permita a los usuarios monitorear en tiempo real métricas clave del clima.

Actividades previas

Revise la explicación en React Hooks – Tutorial.

Fuente: React Hooks – Tutorial

Actividades en clases

  1. Clona localmente tu repositorio dashboard.

Componente ControlWeather: evento onChange

  1. En src/components/ControlWeather.tsx:

    • Importe la interfaz SelectChangeEvent.
     {/* Interfaz SelectChangeEvent */}
 import Select, { SelectChangeEvent } from '@mui/material/Select';
    • Agregue la función flecha handleChange.
     export default function ControlWeather() {

     ...

     {/* Manejador de eventos */}
     const handleChange = (event: SelectChangeEvent) => {
			
         let idx = parseInt(event.target.value)
         alert( idx );

     };

     {/* JSX */}
     ...
 }
    • En el componente Select, relacione el evento onChange con el manejador de eventos handleChange.
    
     {/* JSX */}
     return (

         ...

         <Select
             labelId="simple-select-label"
             id="simple-select"
             label="Variables"
             defaultValue='-1'
             onChange={handleChange}
         >

         ...
     )
 }

  2. (STOP 1) Compruebe el resultado en el navegador.

Componente ControlWeather: hook - useState

  1. En src/components/ControlWeather.tsx:

    • Importe el hook useState.
     {/* Hooks */ }
 import { useState } from 'react';

 {/* Componentes MUI */ }
 ...
    • Agregue la variable de estado selected y la función de actualización setSelected. El valor predeterminado de la variable de estado es -1.
    	
 export default function ControlWeather() {
		
     {/* Variable de estado y función de actualización */}
     let [selected, setSelected] = useState(-1)

     ...
 }
    • Use la función de actualización en el manejador handleChange en lugar de la función alert.
     export default function ControlWeather() {

     ...

     {/* Manejador de eventos */}
     const handleChange = (event: SelectChangeEvent) => {

         let idx = parseInt(event.target.value)
         // alert( idx );
         setSelected( idx );

     };

     ...
 }
    • Use la variable de estado para renderizar el item elemento seleccionado.
     export default function ControlWeather() {

     ...
	    
     {/* JSX */}	
     return (
         <Paper>

             <Typography ... > ... </Typography>

             <Box ... > ... </Box>

             {/* Use la variable de estado para renderizar del item seleccionado */}
             <Typography mt={2} component="p" color="text.secondary">
             {
                 (selected >= 0)?items[selected]["description"]:""
             }
             </Typography>
				

         </Paper>
     )

 }

  2. (STOP 2) Compruebe el resultado en el navegador.

Componente ControlWeather: hook - useRef

  1. En src/components/ControlWeather.tsx:

    • Importe el hook useRef.
     {/* Hooks */ }
 import { useState, useRef } from 'react';
    • Agregue la constante descriptionRef que servirá como referencia a un elemento HTML.
     export default function ControlWeather() {

     {/* Constante de referencia a un elemento HTML */ }
     const descriptionRef = useRef<HTMLDivElement>(null);

     ...
    • En el manejador de eventos, use la referencia descriptionRef para modificar su contenido.
     export default function ControlWeather() {

     ...
		
     {/* Manejador de eventos */}
     const handleChange = (event: SelectChangeEvent) => {

         let idx = parseInt(event.target.value)
         // alert( idx );
         setSelected( idx );

         {/* Modificación de la referencia descriptionRef */}
         if (descriptionRef.current !== null) {
             descriptionRef.current.innerHTML = (idx >= 0) ? items[idx]["description"] : ""
         }

     };

     ...
 }
    • Reemplace el elemento Typography y use el prop ref con la referencia descriptionRef.
     export default function ControlWeather() {

     {/* JSX */}	
     return (

         <Paper>

             ...

             <Box ... > ... </Box>


             {/* Use la variable de estado para renderizar del item seleccionado */}
             {/*<Typography mt={2} component="p" color="text.secondary">
             {
                 (selected >= 0)?items[selected]["description"]:""
             }
             </Typography>*/}

             <Typography ref={descriptionRef} mt={2} component="p" color="text.secondary" />
				

         </Paper>
     )

 }
  2. (STOP 3) Compruebe el resultado en el navegador.
  3. Versiona local y remotamente el repositorio dashboard.
  4. Despliega la aplicación dashboard.

Documentación

Fundamental

Términos

hooks, variable de estado, función de actualización

Referencias