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
importReactfrom'react';import{Link, useLocation }from'react-router-dom';import{ connect }from'react-redux';import{ logoutRequest }from'../actions/'importgravatarfrom'../utils/gravatar';import'../assets/styles/components/Header.scss';importlogofrom'../assets/images/logo-platzi.png';importuserIconfrom'../assets/images/profile-user.svg';constHeader=(props)=>{const{ user }= props
constuserLogedIn=()=> user.email!==undefined;/* Verificamos si nuestro usuario ya tiene un email registrado en su sesion */consthandleLogout=()=>{ 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>)};constmapStateToProps=state=>{return{user: state.user,}}const mapDispatchToProps ={ logoutRequest
}exportdefaultconnect(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;}```
Gracias
Eso mismo estaba penmsado yo, no se necesita esta validación con un paquete extra, gracias por tu comentario.
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
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.payloadconsole.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.
Muchas gracias a todos por sus aportes en otras clases, eso me ha ayudado mucho, quedo atento a sus provechos comentarios para seguir aprendiendo.
Bueno yo si desde un principio le puse un color oscuro al fondo entonces no tuve que hacer esto
Login
........
Registro
.............
Maquetacion
...................
Parte del Video
.........
:)
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.
¡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.
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?
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
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
Por si quieren saber más sobre el className aquí está este link
Esto se pudo resolver facilmente con operador || y template strings, en vez de usar una dependencia extra
Prácticas:
🤯🤯🤯 Genial !!
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.
En mi experiencia nuna lo he usado, pero no descarto la posibilidad de utilizarlo en algun momento
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
¡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.
Yo lo hice de esta forma, sin instalar classnames, espero les sirva
