Validaciones

Clase 26 de 29 • Curso de React Router 5 y Redux

Victor Baruch Pazaran Jaimes

student•

Logre hacer esta validacion sin necesidad de agregar un paquete extra, para ello utilice el hook useLocation desde react router dom, les comparto mi codigo

import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { connect } from 'react-redux';

import { logoutRequest } from '../actions/'
import gravatar from '../utils/gravatar';
import '../assets/styles/components/Header.scss';
import logo from '../assets/images/logo-platzi.png';
import userIcon from '../assets/images/profile-user.svg';

const Header = (props) => {

   const { user } = props
   const userLogedIn = () => user.email !== undefined; /* Verificamos si nuestro usuario ya tiene un email registrado en su sesion */
   const handleLogout = () => {
      props.logoutRequest({}) /* Le pasamos un objeto vacio como payload que sera lo que se establezca en el reducer */
   }

   const headerClass = (useLocation().pathname === '/register' || useLocation().pathname === '/login') ? 'greenHeader' : '';

   return(
      <header className={`header ${headerClass}`}>
         {console.log(headerClass)}
         <Link to="/"> 
            <img className="header__img" src={ logo } alt="" />
         </Link> {/* Usamos el elemento link de react router dom, ya que nos permite poder
         desplazarnos por nuestra aplicacion sin necesidad de hacer un refresh a la pagina completa */}
         <div className="header__menu">
            <div className="header__menu--profile">
               {userLogedIn() ?
                  <img src={ gravatar(user.email) } alt="user icon" />
                  :
                  <img src={ userIcon } alt="user icon" />
               }
               <p>Perfil</p>
            </div>
            {userLogedIn() ?
               <ul>
                  <li><p>Bienvenido <b>{user.name}</b></p></li>
                  <li><p>Mi perfil</p></li>
                  <li><a onClick={handleLogout}>Cerrar sesion</a></li>
               </ul>
               :
               <ul>
                  <li><Link to="/login">Iniciar sesion</Link></li>
                  <li><Link to="/register">Registrate</Link></li>
               </ul>
            }
         </div>
      </header>
   )};

const mapStateToProps = state => {
   return {
      user: state.user,
   }
}

const mapDispatchToProps = {
   logoutRequest
}
export default connect(mapStateToProps,mapDispatchToProps)(Header);

Con esto agrego una clase mas al header para así poder cambiarle simplemente el color con una propiedad css solo agregando y quitando la clase

ahora en mi css solo tuve que agregar esta clase

.greenHeader {
   background-color: #21C08B;
}```

Tatiana Karina Valencia Hernández

student•

Gracias

Yeison Montoya

student•

Eso mismo estaba penmsado yo, no se necesita esta validación con un paquete extra, gracias por tu comentario.

Juan Manuel Pedraza

student•

Luego de ver la clase, quede triste, ya que me gustaba la ideal del Layout y la forma tan simple de ahorrar muchas repeticiones de llamadas a componentes y en general de código.

Pero al mismo tiempo pienso que debe haber una forma dinámica de establecer este tipo de cambios, sin tener que llamar el componentes desde cada container y componente que lo requiere.

Por esto se me ocurrió que podía establecer una propiedad en el state que almacena las clases de Header y crear un action que actualizara las clases dependiendo del container que se cargaba.

En ese caso cada container llama el action que actualiza la propiedad del state que almacena las clases del header.

y el header consulta esta propiedad y establece las clases del header.

pero este me generaba un Warning, finalmente lo solucione con un effect, que ejecuta el cambio de clase cuando ya todo se ha renderizado, y funciona.

Si alguien también lo esta intentando, o sabe como lograrlo de una forma mucho mejor me encantaría aprender.

propiedad nueva en el state:

const initialState = {
    "user":{},
    "playing": {},
    "headerClass": ['header'], 
     ... lo demas..
}

Luego en el index.js de actions, se genera una nueva action para actualizar esta propiedad

export const changeClassHeader = payload => ({
  type: actions.changeClassHeader,
  payload,
})

En el el index.js de los reduces, se crea un nuevo case, que reciba y realice la actualziación del state, con el cambio en la propiedad del state que almacena las clases.

    case actions.changeClassHeader:

      state.headerClass = action.payload
      console.log(state)
      return {
        ...state        
      }

Por último en cada container, se añade el action y se ejecuta el un useEffect para que no genere errores la aplicación y se renderice el cambio de forma correcta luego de haber renderizado el container inicial.

Ejemplo del código en el container Login

  useEffect(() => {
    props.changeClassHeader(['isLogin']);
  })

Muchas gracias a todos por sus aportes en otras clases, eso me ha ayudado mucho, quedo atento a sus provechos comentarios para seguir aprendiendo.

Cristhian Daza

student•

Bueno yo si desde un principio le puse un color oscuro al fondo entonces no tuve que hacer esto

Laura Camila Pregonero

student•

Login

........ Registro

............. Maquetacion

................... Parte del Video

......... :)

Manuel Entrena Jimenez

student•

Yo simplemente modifique los estilos de los componentes con un gradiente de 3 colores y me parecia un resultado mejor para poder mantener el header en el layot.

background-image: linear-gradient(#8f57fd, #21c08b, #8f57fd);

Carlos Alfonso Garcia Rivera

student•

eso mismo hice yo ✌

Xavi Isach Alemany

student•

En esta clase vemos como generar clases dinámicas con la dependencia ++classname++.

# npm
npm install classnames
# Bower
bower install classnames
# Yarn
yarn add classnames

Esta utilidad nos permite añadir clases según se cumplan x condiciones. Ejemplos:

import classNames from 'classnames';

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

Diego Fernando Rojas Quintero

student•

Que significa ++'foo'++ y ++'bar'++

Freddy Camilo Orozco Romero

student•

¡Hola Diego! 'foo' y 'bar' son ejemplos (en este caso de clases) usados mucho para fake data en programación. Es como una manera 'default' de llamar a algo.

Jorge Alberto Rodriguez Flores

student•

Aqui les dejo la documentacion del paquete classnames para que le echen un ojo... o dos si quieren 👀 -> (https://www.npmjs.com/package/classnames)

Cristian Felipe Patiño Cáceres

student•

En mi caso preferí usar un action/reducer para realizar este cambio :)

Actions:

export const setHeader = (payLoad) => ({
  type: actions.setHeader,
  payLoad,
});

reducers:

case actions.setHeader:
      return {
        ...state,
        isForm: action.payLoad,
      };

useLayoutEffect(() => {
    props.setHeader(true);
  }, []);

DAMIÁN NICOLAS PINEDO

student•

hice exactamente lo mismo q el profe pero a mi no me sale el cambio, me fije en el inspector de elementos y parece que si pasa la variable pero no la registra alguien tiene alguna idea?

Edilberto Vazquez Luna

student•

puedes mostrar tu archivo de estilos del header?, talvez estas sobrescribiendo tu estilo del background-color, por eso te lo marca como subrayado, acuérdate que CSS tomo como prioridad al ultimo estilo aplicado, también checa que no tengas otra etiqueta header en tus demás archivos de estilos, talvez eso pueda generar un conflicto

DAMIÁN NICOLAS PINEDO

student•

este es mi codigo de header.scss

.header {
    align-items: center;
    background: #8f57fd;
    color: white;
    display: flex;
    height: 100px;
    justify-content: space-between;
    top: 0px;
    width: 100%;
  }

  .isLogin, .isRegister {
    background-color: #21c08b;
  }
  
  .header__img {
    margin-left: 30px;
    width: 200px;
  }
  
  .header__menu {
      margin-right: 30px;
  }
  
  .header__menu ul {
    display: none;
    list-style: none;
    margin: 0px 0px 0px -14px;
    padding: 0px;
    position: absolute;
    width: 100px;
    text-align: right;
  }
  
  .header__menu:hover ul, ul:hover {
      display: block;
  }
  
  .header__menu li {
    margin: 10px 0px;
  }
  
  .header__menu li a {
    color: white;
    text-decoration: none;
  }
  
  .header__menu li a:hover {
    text-decoration: underline;
  }
  
  .header__menu--profile {
    align-items: center;
    display: flex;
    cursor: pointer;
  }
  
  .header__menu--profile img {
    margin-right: 8px;
    width: 40px;
  }```

DAMIÁN NICOLAS PINEDO

student•

no entiendo el caso de fragment, que es lo que hace en si ? ayuda a poder encapsular todo o como es?

Pablo Nicolás Alonso

student•

Ayuda a que no de error si tienes 2 etiquetas sueltas (es decir que no esten contenidas dentro de un padre.

...
return (
	<div>
		... // otros elementos
	</div>
	<div>
		... //otros elementos
	</div>
)

En el caso anterior daría error y para eso esta react.fragment:

...
return (
	<>
	<div>
		... // otros elementos
	</div>
	<div>
		... //otros elementos
	</div>
	</>
)

Sebastián Buitrago

student•

Como se pueden separar lo esilos de un componente para que no hagan conflicto con los demas estilos?

Mario Eduardo Contreras Serrano

student•

Yo utilizo Styled Components, hasta ahora me ha funcionado bastante bien!

Cristian Florez

student•

Que tan buena idea es hacer esto en el router/app.js ??

if (!token) {
    return (
      <BrowserRouter>
        <Login exact path="/" />;
      </BrowserRouter>
    );
  } else {
    return (
      <BrowserRouter>
        <Header />
        <Switch>
          <Route path="/" component={Home} />
        </Switch>
	<Footer/>
      </BrowserRouter>
    );
  }

Nilson Diaz

student•

Hey ! , En realidad para hacer esto podrias generar un componente layout de esta forma

const Layout = (props) => {
	return (
		<Header />
		{props.children}
		<Footer />
	)
}

Y luego envuelves el resto de aplicacion en este

return (
      <BrowserRouter>
        <Layout />
        	<Switch>
          	<Routepath="/"component={Home} />
	        </Switch>
				<Layout/>
      </BrowserRouter>
);

Y Daria el mismo resultado pero ya teniendo un componente general que sirva de layout y no poniendolos direactamente en nuestra app, Puedes ver mas en Esta Clase Del curso de React.js

Sebastian Vizcarra

student•

Por si quieren saber más sobre el className aquí está este link

Jair Neri

student•

Esto se pudo resolver facilmente con operador || y template strings, en vez de usar una dependencia extra

Karen Paola Diaz Duarte

student•

Prácticas:

Platzi Team

student•

🤯🤯🤯 Genial !!

Daniel Ruiz

student•

En que casos reales han usado la dependencia classnames? porque claramente para efectos practicos del curso es sobreingenieria, pero algo me dice que puede ser muy util en la vida real.

Cristian Florez

student•

En mi experiencia nuna lo he usado, pero no descarto la posibilidad de utilizarlo en algun momento

Carlos Eduardo Santaella Guevara

student•

una pregunta, eso no es lo mismo que poner css aparte en cada componente que requiera un Header? creo que lo de classnames esta demas y hace mas engorroso el trabajo en react

Sneyder Barreto

student•

¡Hola! Recuerda que existen varias maneras de lograr el mismo resultado. En esta ocasión Oscar nos muestra una herramientra para validar y trabajar el color de header. Siempre es bueno conocer este tipo de herramientas que a lo mejor las vemos más últiles en algún otro momento. Un saludo.

Renato Renzo Luna Herrera

student•

Yo lo hice de esta forma, sin instalar classnames, espero les sirva

const headerClass = () => { 
	if (isLogin) return 'isLogin'
	if (isRegister) return 'isRegister'
}

return (
	<header className={`header ${headerClass()}`}>
	// ...

Christian Humberto

student•

de hecho lo hice desde un inicio

envio el distintivo como props

lo recivo y lo concateno en el className

esta es el archivo del estilo donde esta declarada la clase

import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { connect } from 'react-redux';

import { logoutRequest } from '../actions/'
import gravatar from '../utils/gravatar';
import '../assets/styles/components/Header.scss';
import logo from '../assets/images/logo-platzi.png';
import userIcon from '../assets/images/profile-user.svg';

const Header = (props) => {

   const { user } = props
   const userLogedIn = () => user.email !== undefined; /* Verificamos si nuestro usuario ya tiene un email registrado en su sesion */
   const handleLogout = () => {
      props.logoutRequest({}) /* Le pasamos un objeto vacio como payload que sera lo que se establezca en el reducer */
   }

   const headerClass = (useLocation().pathname === '/register' || useLocation().pathname === '/login') ? 'greenHeader' : '';

   return(
      <header className={`header ${headerClass}`}>
         {console.log(headerClass)}
         <Link to="/"> 
            <img className="header__img" src={ logo } alt="" />
         </Link> {/* Usamos el elemento link de react router dom, ya que nos permite poder
         desplazarnos por nuestra aplicacion sin necesidad de hacer un refresh a la pagina completa */}
         <div className="header__menu">
            <div className="header__menu--profile">
               {userLogedIn() ?
                  <img src={ gravatar(user.email) } alt="user icon" />
                  :
                  <img src={ userIcon } alt="user icon" />
               }
               <p>Perfil</p>
            </div>
            {userLogedIn() ?
               <ul>
                  <li><p>Bienvenido <b>{user.name}</b></p></li>
                  <li><p>Mi perfil</p></li>
                  <li><a onClick={handleLogout}>Cerrar sesion</a></li>
               </ul>
               :
               <ul>
                  <li><Link to="/login">Iniciar sesion</Link></li>
                  <li><Link to="/register">Registrate</Link></li>
               </ul>
            }
         </div>
      </header>
   )};

const mapStateToProps = state => {
   return {
      user: state.user,
   }
}

const mapDispatchToProps = {
   logoutRequest
}
export default connect(mapStateToProps,mapDispatchToProps)(Header);

import classNames from 'classnames';

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

.header {
    align-items: center;
    background: #8f57fd;
    color: white;
    display: flex;
    height: 100px;
    justify-content: space-between;
    top: 0px;
    width: 100%;
  }

  .isLogin, .isRegister {
    background-color: #21c08b;
  }
  
  .header__img {
    margin-left: 30px;
    width: 200px;
  }
  
  .header__menu {
      margin-right: 30px;
  }
  
  .header__menu ul {
    display: none;
    list-style: none;
    margin: 0px 0px 0px -14px;
    padding: 0px;
    position: absolute;
    width: 100px;
    text-align: right;
  }
  
  .header__menu:hover ul, ul:hover {
      display: block;
  }
  
  .header__menu li {
    margin: 10px 0px;
  }
  
  .header__menu li a {
    color: white;
    text-decoration: none;
  }
  
  .header__menu li a:hover {
    text-decoration: underline;
  }
  
  .header__menu--profile {
    align-items: center;
    display: flex;
    cursor: pointer;
  }
  
  .header__menu--profile img {
    margin-right: 8px;
    width: 40px;
  }```

if (!token) {
    return (
      <BrowserRouter>
        <Login exact path="/" />;
      </BrowserRouter>
    );
  } else {
    return (
      <BrowserRouter>
        <Header />
        <Switch>
          <Route path="/" component={Home} />
        </Switch>
	<Footer/>
      </BrowserRouter>
    );
  }

Validaciones

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found

Componente: Layout

Manejando enlaces y configuraciones

¿Qué es Redux?

Qué es Redux

¿Qué es Redux? Profundizando en la herramienta

Instalación de Redux

Creando el Store de Redux

Aplicando Redux a nuestra aplicación

Creando los reducers

Finalizando reducers y eliminar favoritos

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Crear Formulario de Login

Formulario de Login con Redux

Creando un Servicio para Gravatar

Uso de gravatar en nuestro proyecto

Validación para LogIn LogOut

Register

Register con Redux

Vista general del player

Arreglando la funcionalidad del player

Terminando de detallar nuestro player

Validaciones

Validaciones de UI

Debug con Redux Devtools

Cierre del curso

Cierre del Proyecto