Mostrando la localización del usuario

Clase 20 de 24 • Curso Fundamental de Material UI con React

Fernando Quinteros Gutierrez

student•

🧩 Importaciones de los iconos

import LocationOnIcon from "@mui/icons-material/LocationOn";
import TwitterIcon from '@mui/icons-material/Twitter';
import LanguageIcon from "@mui/icons-material/Language";
import BusinessIcon from '@mui/icons-material/Business';

Hernán David Mercado Fernández

student•

Me has salvado la patría

Nicolas Agustin Goitia

student•

Para verificar si existe un Blog, el profe hace blog !== null pero en la respuesta de la API, si no existe el blog devuelve un string vacio. Entonces deberiamos hacer esta validacion: {blog !== "" ? <Typography>{blog}</Typography> : <Typography>Not Available</Typography> }

Fernando Quinteros Gutierrez

student•

Mi solución para la arroba fue utilizar los template literals de JS

<Typography>
	{twitter_username ? `@${twitter_username}` : "Not Avaible"}
</Typography>

Juan Camilo Lentino Villalba

student•

también podemos hacerlo de esta forma :

<Stack>
    <TwitterIcon />
    {
        twitter_username !== null 
            ? <Typography>@{twitter_username}</Typography>
            : <Typography>Not Available</Typography>
    }
</Stack>

Fidel Parabacuto

student•

Así se pueden ahorrar el ternario

<Grid item xs={6}>
        <Stack>
          <TwitterIcon />
          <Typography>{twitter_username || 'No indica'}</Typography>
        </Stack>
      </Grid>

Roberth Salazar

student•

creo que el agregar el arroba te obliga a un ternario, porque si no le agregarías el arroba al 'No indica'

Erlyn David Ascarate Lachi

student•

@Not Available 😅¿Qué les parece?

<Typography>
	@{twitter_username ?? 'Not Available'}
</Typography>

Diana Florez

student•

Dejo el cod

import React from "react";
import { Grid, Stack, Typography } from "@mui/material";
import LocationOnIcon from '@mui/icons-material/LocationOn';
import TwitterIcon from '@mui/icons-material/Twitter';
import LanguageIcon from '@mui/icons-material/Language';
import BusinessIcon from '@mui/icons-material/Business';

const LocationInformation = (props) => {
  const { userState } = props
  const {
    location,
    twitter_username,
    blog,
    company
  } = userState;
  return(
    <Grid container>
      <Grid item xs={6}>
        <Stack>
          <LocationOnIcon/>
          <Typography>{location}</Typography>
        </Stack>
      </Grid>
      <Grid item xs={6}>
        <Stack>
          <TwitterIcon/>
          {twitter_username !== null
            ? <Typography>{twitter_username}</Typography>
            : <Typography>Not Available</Typography>
          }
        </Stack>
      </Grid>
      <Grid item xs={6}>
        <Stack>
          <LanguageIcon/>
          {blog !== null
            ? <Typography>{blog}</Typography>
            : <Typography>Not Available</Typography>
          }
        </Stack>
      </Grid>
      <Grid item xs={6}>
        <Stack>
          <BusinessIcon />
          {company !== null
            ? <Typography>{company}</Typography>
            : <Typography>Not Available</Typography>
          }
        </Stack>
      </Grid>
    </Grid>
  )
}

export default LocationInformation;

Eduardo Lemus Zavala

student•

Mi solución al reto:

<Typography>{twitter_username ? `@${twitter_username}` :'Not Available'}</Typography>

Roberth Salazar

student•

  <Grid item xs={6}>
              <Stack>
                  <Twitter />
                  <Typography>{twitter_username ? `@${twitter_username}` :'Not Available'}</Typography>
              </Stack>
          </Grid>
          <Grid item xs={6}>
              <Stack>
                  <Language />
                  <Typography>{blog  ?? 'Not Available'}</Typography>
              </Stack>
          </Grid>

Santiago Rodriguez Palacio

student•

Si lo quieren trabajar con Typescript, se deben declarar 2 interfaces.

interface User {
  location: string,
  twitter_username: string,
  blog: string,
  company: string
}
interface Props {
  userState: User
}
const LocationInformation = ({ userState }: Props) => {
  const { location, twitter_username, blog, company } = userState;
  return (
    <Grid container>
      <Grid item xs={6}>
        <Stack>
          <LocationOnIcon />
          {location !== null
            ? <Typography variant="body1" color="initial">{location}</Typography>
            : <Typography variant="body1" color="initial">Not Available</Typography>
          }
        </Stack>
      </Grid>
)
}

Maury Sugheiry Alcalá Romero

student•

Facil, colocar el @ antes del {twitter_username}, quedando asi: ? <Typography>@{twitter_username}</Typography>

Gaston Blanco

student•

Para no tener tantos Grid también puedes hacer:

<Grid item xs={6}>
            <Stack direction="row">
                <LocationOnIcon />
                <Typography>{location}</Typography>

            </Stack>
            <Stack direction="row">
                <TwitterIcon />
                <Typography>{twitter_username ? `@${twitter_username}` : "Not Avaible"}</Typography>

            </Stack>
        </Grid>

Kike Vanegas

student•

Pero esto no tiene nada de re-usabilidad. Estamos copiando y pegando el mismo bloque una y otra vez. Creo que sería mejor crear un componente que se encargue de evaluar la prop que le enviemos, y solo importar y usar el componente.

Diego Vergara

student•

Agregar @ a la izquierda de la variale de username.

<Typography>@{twitter_username}</Typography>

Juan Camilo Lentino Villalba

student•

la solución al reto la hice de esta forma

<Stack>
    <TwitterIcon />
    {
        twitter_username !== null 
            ? <Typography>@{twitter_username}</Typography>
            : <Typography>Not Available</Typography>
    }
</Stack>

adicionalmente, añadí pequeños cambios, utilice el operador ternario con location

<Stack>
    <LocationOnIcon />
    {
        location !== null 
            ? <Typography>{location}</Typography>
            : <Typography>Not Available</Typography>
    }        
</Stack>

blog lo compare con un string vacio y no con null, de esta manera puede funcionar correctamente el operador ternario ya que ese es el tipo de dato que estamos esperando en caso de que el usuario no tenga habilitada esta opción

<Stack>
    <LanguageIcon />
    {
        blog !== '' 
            ? <Typography>{blog}</Typography>
            : <Typography>Not Available</Typography>
    }
</Stack>

así quedaría el código completo

import { Grid, Stack, Typography } from "@mui/material";
import React from "react";
import LocationOnIcon from "@mui/icons-material/LocationOn";
import TwitterIcon from '@mui/icons-material/Twitter';
import LanguageIcon from "@mui/icons-material/Language";
import BusinessIcon from '@mui/icons-material/Business';

const LocationInformation = (props)=> {
    const { userState } = props 
    const { location, twitter_username, blog, company } = userState 

    return (
        <>
            <Grid container >
                <Grid item xs={6}>
                    <Stack>
                        <LocationOnIcon />
                        {
                            location !== null 
                                ? <Typography>{location}</Typography>
                                : <Typography>Not Available</Typography>
                        }        
                    </Stack>
                </Grid>

                <Grid item xs={6}>
                    <Stack>
                        <TwitterIcon />
                        {
                            twitter_username !== null 
                                ? <Typography>@{twitter_username}</Typography>
                                : <Typography>Not Available</Typography>
                        }
                    </Stack>
                </Grid>

                <Grid item xs={6}>
                    <Stack>
                        <LanguageIcon />
                        {
                            blog !== '' 
                                ? <Typography>{blog}</Typography>
                                : <Typography>Not Available</Typography>
                        }
                    </Stack>
                </Grid>

                <Grid item xs={6} >
                    <Stack>
                        <BusinessIcon />
                        {
                            company !== null 
                                ? <Typography>{company}</Typography>
                                : <Typography>Not Available</Typography>
                        }
                    </Stack>
                </Grid>
            </Grid>
        </>
    )
}

export default LocationInformation

import LocationOnIcon from "@mui/icons-material/LocationOn";
import TwitterIcon from '@mui/icons-material/Twitter';
import LanguageIcon from "@mui/icons-material/Language";
import BusinessIcon from '@mui/icons-material/Business';

import React from "react";
import { Grid, Stack, Typography } from "@mui/material";
import LocationOnIcon from '@mui/icons-material/LocationOn';
import TwitterIcon from '@mui/icons-material/Twitter';
import LanguageIcon from '@mui/icons-material/Language';
import BusinessIcon from '@mui/icons-material/Business';

const LocationInformation = (props) => {
  const { userState } = props
  const {
    location,
    twitter_username,
    blog,
    company
  } = userState;
  return(
    <Grid container>
      <Grid item xs={6}>
        <Stack>
          <LocationOnIcon/>
          <Typography>{location}</Typography>
        </Stack>
      </Grid>
      <Grid item xs={6}>
        <Stack>
          <TwitterIcon/>
          {twitter_username !== null
            ? <Typography>{twitter_username}</Typography>
            : <Typography>Not Available</Typography>
          }
        </Stack>
      </Grid>
      <Grid item xs={6}>
        <Stack>
          <LanguageIcon/>
          {blog !== null
            ? <Typography>{blog}</Typography>
            : <Typography>Not Available</Typography>
          }
        </Stack>
      </Grid>
      <Grid item xs={6}>
        <Stack>
          <BusinessIcon />
          {company !== null
            ? <Typography>{company}</Typography>
            : <Typography>Not Available</Typography>
          }
        </Stack>
      </Grid>
    </Grid>
  )
}

export default LocationInformation;

  <Grid item xs={6}>
              <Stack>
                  <Twitter />
                  <Typography>{twitter_username ? `@${twitter_username}` :'Not Available'}</Typography>
              </Stack>
          </Grid>
          <Grid item xs={6}>
              <Stack>
                  <Language />
                  <Typography>{blog  ?? 'Not Available'}</Typography>
              </Stack>
          </Grid>

interface User {
  location: string,
  twitter_username: string,
  blog: string,
  company: string
}
interface Props {
  userState: User
}
const LocationInformation = ({ userState }: Props) => {
  const { location, twitter_username, blog, company } = userState;
  return (
    <Grid container>
      <Grid item xs={6}>
        <Stack>
          <LocationOnIcon />
          {location !== null
            ? <Typography variant="body1" color="initial">{location}</Typography>
            : <Typography variant="body1" color="initial">Not Available</Typography>
          }
        </Stack>
      </Grid>
)
}

<Grid item xs={6}>
            <Stack direction="row">
                <LocationOnIcon />
                <Typography>{location}</Typography>

            </Stack>
            <Stack direction="row">
                <TwitterIcon />
                <Typography>{twitter_username ? `@${twitter_username}` : "Not Avaible"}</Typography>

            </Stack>
        </Grid>

import { Grid, Stack, Typography } from "@mui/material";
import React from "react";
import LocationOnIcon from "@mui/icons-material/LocationOn";
import TwitterIcon from '@mui/icons-material/Twitter';
import LanguageIcon from "@mui/icons-material/Language";
import BusinessIcon from '@mui/icons-material/Business';

const LocationInformation = (props)=> {
    const { userState } = props 
    const { location, twitter_username, blog, company } = userState 

    return (
        <>
            <Grid container >
                <Grid item xs={6}>
                    <Stack>
                        <LocationOnIcon />
                        {
                            location !== null 
                                ? <Typography>{location}</Typography>
                                : <Typography>Not Available</Typography>
                        }        
                    </Stack>
                </Grid>

                <Grid item xs={6}>
                    <Stack>
                        <TwitterIcon />
                        {
                            twitter_username !== null 
                                ? <Typography>@{twitter_username}</Typography>
                                : <Typography>Not Available</Typography>
                        }
                    </Stack>
                </Grid>

                <Grid item xs={6}>
                    <Stack>
                        <LanguageIcon />
                        {
                            blog !== '' 
                                ? <Typography>{blog}</Typography>
                                : <Typography>Not Available</Typography>
                        }
                    </Stack>
                </Grid>

                <Grid item xs={6} >
                    <Stack>
                        <BusinessIcon />
                        {
                            company !== null 
                                ? <Typography>{company}</Typography>
                                : <Typography>Not Available</Typography>
                        }
                    </Stack>
                </Grid>
            </Grid>
        </>
    )
}

export default LocationInformation

Mostrando la localización del usuario

Introducción al curso

Bienvenida al curso

Presentación proyecto

¿Qué es Material UI?

Preparación de entorno de desarrollo

Herramientas dentro de Material UI

Componentes simples

Componentes compuestos

Contenedores responsive

Material icons

Bonus

Construcción del proyecto

Análisis detallado del proyecto

Creando el contenedor y el text field

Colocando los estilos del buscador

Construyendo la lógica del buscador

Conectando nuestro proyecto a la API de GitHub

Conectando el buscador con la API

Creando el contenedor y trayendo la imagen de perfil del usuario

Trayendo la información principal del usuario

Trayendo la descripción del usuario

Creando el componente con las estadísticas del usuario

Mostrando la localización del usuario

Ajuste de estilos con SX a los componentes de descripción e información principal

Ajuste de estilos con SX al componente de descripción, PaperInformation y LocationInformation

Evaluación del proyecto

Despedida

Resumen del curso