Vistas Híbridas

Clase 18 de 23 • Curso de Next.js 2018

Resumen

En esta clase vamos a ver algo muy particular, y tiene que ver con cómo implementar vistas híbridas. Conoceremos una de las funcionalidaes de React que es: setState(), que nos permite cambiar el estado de los componentes.

Cristian Camilo Cucunubá

student•

Codigo Con React Hooks :

const [openPodcast, setPodcast] = useState(null);
    const setOpenPodcast = (event, podcast) => {
        event.preventDefault()
        setPodcast(podcast)
    }

Y no cree el otro componente para tener el elemento onClick, simplemte agregue el evento en la etiqueta hija <a> del Link.

Johan Stivens Suarez Galindo

student•

Hola bro, primero que todo gracias por compartir tu código! Me surge una duda, si los hooks no se pueden usar en clases, lo que hiciste fue crear un nuevo componente o modificar channel para funcione sin clase? Porque lo intento modificar pero el problema es el "static async getInitialProps()...", gracias!

William Velázquez

student•

Hola Roberto! 😃
¿hay alguna diferencia si para inicializar el estado en lugar de usar el constructor explícitamente lo realizo de la siguiente forma?:

export default class extends React.Component{

  state = {
    openPodcast: null
  }

...

De antemano muchas gracias y un saludo! 🤚

Diego Forero

Team Platzi•

Lo mejor es usar el constructor, por estándar y por facilidad de lectura del código.

William Velázquez

student•

Muchas gracias! ¿El usarlo así tiene algún problema en rendimiento o en algún otro aspecto?

Javier Ignacio

student•

a día de hoy, ¿los chicos de next.js fixearon el tema del link?

Jose Daniel Atencio Manzanillo

student•

misma pregunta me hago ... supongo que tendra una solucion porque que feo incrustar un componente solo para hacer onClick ...

Esteban Ciudad

student•

a mi me funciona de la siguiente manera, añado el onclick al elemento a y dejo el componente Link igual con sus params:

{audioClips.map(clip => (
          <Link
            route="podcast"
            params={{
              slugChannel: slug(clip.channel.title),
              idChannel: clip.channel.id,
              slug: slug(clip.title),
              id: clip.id
            }}
          >
            <a
              className="podcast"
              onClick={event => onClickPodcast(event, clip)}
            >
              <h3>{clip.title}</h3>
              <div className="meta">
                {Math.ceil(clip.duration / 60)} minutes
              </div>
            </a>
          </Link>
        ))}

Johan Stivens Suarez Galindo

student•

Alguien me podría explicar como lo implementó con Hooks? Porque como los hooks no se pueden usar en clases y channel.js es una, me surge la duda... gracias!

esteban meza betancur

student•

Hola bro tienes que tener un prototipo de función en vez de uno de clase y por otra parte mira el video de hooks del curso de react,js es muy bueno

Pablo Orozco Monte

student•

Aquí no doy toda la solución pero esta sería el inicio para la implementación de getInitialProps con hooks

import React, { useState, useEffect } from "react";
import 'isomorphic-fetch'
import Layout from '../components/Layout'
import ChannelGrid from '../components/ChannelGrid'
import PodcastList from '../components/PodcastList'
import PodcastListWithClick from '../components/PodcastListWithClick'
import PodcastPlayer from '../components/PodcastPlayer'
import Error from './_error'


function Channel({ reqChannel, reqSeries, reqAudios, statusCode }) {
	
	const [openPodcast, setOpenPodcast] = useState(null);

	if( statusCode !== 200 ) {
      	return <Error statusCode={ statusCode } />
    }

	// aquí la lógica de la vista

	return(
		// TODO
	)
}

Channel.getInitialProps = async ({ req, res }) => {
  try {
    let [reqChannel, reqSeries, reqAudios] = await Promise.all([
        fetch(`https://api.audioboom.com/channels/${idChannel}`),
        fetch(`https://api.audioboom.com/channels/${idChannel}/child_channels`),
        fetch(`https://api.audioboom.com/channels/${idChannel}/audio_clips`)
      ])

  if( reqChannel.status >= 400 ) {
        res.statusCode = reqChannel.status
        return { channel: null, audioClips: null, series: null, statusCode: reqChannel.status }
      }

      let dataChannel = await reqChannel.json()
      let channel = dataChannel.body.channel

      let dataAudios = await reqAudios.json()
      let audioClips = dataAudios.body.audio_clips

      let dataSeries = await reqSeries.json()
      let series = dataSeries.body.channels

      return { channel, audioClips, series, statusCode: 200 }
    } catch(e) {
      return { channel: null, audioClips: null, series: null, statusCode: 503 }
    }
  }
};

Miguel Angel Morales Larriega

student•

No es necesario escribir el constructor para un state:

state= { openPodcast: null }

openPodcast = (e, podcast) => { e.preventDefault(); this.setState({ openPodcast: podcast }) }

//Otra forma de mostrar codigo a partir de una validación es la siguiente: {(openPodcast)?<div>Hay un podcast abierto</div>: null}

Diego Ivan Padilla Bernal

student•

Lo del inicializar el state estas en lo correcto, más que nada para simplificar código, pero lo de la otra forma de validar funciona pero sería escribir un poco de código extra así que en ese casi se es mejor como lo hizo el profesor

Ramiro Nicolas DAccorso Rosati

student•

Ya se actualizo el componente link? Porque next va por la versión 9+ y en el curso esta la 6.1

Ivan Magdaleno

student•

Por qué menciona el Link de Next? No se supone que desde la clase pasada estamos usando el Link de next-routes en lugar del Link de Next?

walter Jorge

student•

hola me sale lo siguiente
Error in ./pages/channel.js
Module not found: Error: Can’t resolve ‘…/components/PodcastListWidthClink’ in 'D:\podcasts\pages’
ModuleNotFoundError: Module not found: Error: Can’t resolve ‘…/components/PodcastListWidthClink’ in 'D:\podcasts\pages’
at factoryCallback (D:\podcasts\node_modules\webpack\lib\Compilation.js:276:40)
at factory (D:\podcasts\node_modules\webpack\lib\NormalModuleFactory.js:235:20)
at resolver (D:\podcasts\node_modules\webpack\lib\NormalModuleFactory.js:60:20)
at asyncLib.parallel (D:\podcasts\node_modules\webpack\lib\NormalModuleFactory.js:127:20)
at D:\podcasts\node_modules\async\dist\async.js:3888:9
at D:\podcasts\node_modules\async\dist\async.js:473:16
at iteratorCallback (D:\podcasts\node_modules\async\dist\async.js:1062:13)
at D:\podcasts\node_modules\async\dist\async.js:969:16
at D:\podcasts\node_modules\async\dist\async.js:3885:13
at resolvers.normal.resolve (D:\podcasts\node_modules\webpack\lib\NormalModuleFactory.js:119:22)
at onError (D:\podcasts\node_modules\enhanced-resolve\lib\Resolver.js:65:10)
at loggingCallbackWrapper (D:\podcasts\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
at runAfter (D:\podcasts\node_modules\enhanced-resolve\lib\Resolver.js:158:4)
at innerCallback (D:\podcasts\node_modules\enhanced-resolve\lib\Resolver.js:146:3)
at loggingCallbackWrapper (D:\podcasts\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
at next (D:\podcasts\node_modules\tapable\lib\Tapable.js:252:11)

Diego Forero

Team Platzi•

Revisa que no tengas un error de digitación, por lo que veo esta buscando el archivo PodcastListWidthClink creo que sobra la n en el Clink y por eso no encuentra el archivo.

walter Jorge

student•

ok me voy a fijar quisas no me dicuenta.
gracias

Santiago Marcano

student•

He aprendido mucho con este curso aunque este video sin duda ha sido el mas confuso. Es raro picar código y no saber para que si no hasta el final del video. Creo que seria mejor explicar a detalle la funcionalidad que se quiere implementar antes de picar todo el código y mas aun si se está haciendo un "hack" para que funcione en Next.

Platzi Team

student•

Lo hizo, al principio del video, la idea es que puedas cargar en un modal el podcast que es seleccionado con un "click" para que no tenga que abrir otra página, sino que lo abra en la misma, pero en un modal. Esto resulta mas eficiente porque no tienes que hacerle un tiro a la API para traer el podcast, que puede ser mas costoso en tiempo y recursos cuando en el listado ya te trae todo el detalle del podcast, solo es usarlo. Saludos

Platzi Team

student•

Me queda la duda, si no es necesario hacer bind del metodo openPodcast como se suele hacer en React. algo como:

this.openPodcast = this.openPodcast.bind(this);

Diego Ivan Padilla Bernal

student•

cuando se usa una arrow function no es necesario hacer eso.

Miguel angel longart ramos

student•

hola como estan soy nuevo en Next js y si quiero agregar una seccion como un Menu que estan en otro proyecto lo quiero ingresar con ESI esi:include react js pero teno la duda si debe ser en el index o uno d elos archivos de _Document o _App

Leo Islas

student•

duda estoy apenas tomando el curso y me gusto bastante ya que me ayuda bastante en la parte de SEO de paginas dinamicas pero estaticas al final mi pregunta es veo que usan para partes de funcionalidad puro class components pero ¿puedo usar Hooks ? ósea functional components

Gabriel De Andrade

student•

Hola! Si puedes usar Hooks, lo que pasa es que este curso se grabó antes de que esta feature saliera en React, pero en Platzi siempre se actualizan los cursos así que no te preocupes por que se quede viejo tampoco :D

{audioClips.map(clip => (
          <Link
            route="podcast"
            params={{
              slugChannel: slug(clip.channel.title),
              idChannel: clip.channel.id,
              slug: slug(clip.title),
              id: clip.id
            }}
          >
            <a
              className="podcast"
              onClick={event => onClickPodcast(event, clip)}
            >
              <h3>{clip.title}</h3>
              <div className="meta">
                {Math.ceil(clip.duration / 60)} minutes
              </div>
            </a>
          </Link>
        ))}

import React, { useState, useEffect } from "react";
import 'isomorphic-fetch'
import Layout from '../components/Layout'
import ChannelGrid from '../components/ChannelGrid'
import PodcastList from '../components/PodcastList'
import PodcastListWithClick from '../components/PodcastListWithClick'
import PodcastPlayer from '../components/PodcastPlayer'
import Error from './_error'


function Channel({ reqChannel, reqSeries, reqAudios, statusCode }) {
	
	const [openPodcast, setOpenPodcast] = useState(null);

	if( statusCode !== 200 ) {
      	return <Error statusCode={ statusCode } />
    }

	// aquí la lógica de la vista

	return(
		// TODO
	)
}

Channel.getInitialProps = async ({ req, res }) => {
  try {
    let [reqChannel, reqSeries, reqAudios] = await Promise.all([
        fetch(`https://api.audioboom.com/channels/${idChannel}`),
        fetch(`https://api.audioboom.com/channels/${idChannel}/child_channels`),
        fetch(`https://api.audioboom.com/channels/${idChannel}/audio_clips`)
      ])

  if( reqChannel.status >= 400 ) {
        res.statusCode = reqChannel.status
        return { channel: null, audioClips: null, series: null, statusCode: reqChannel.status }
      }

      let dataChannel = await reqChannel.json()
      let channel = dataChannel.body.channel

      let dataAudios = await reqAudios.json()
      let audioClips = dataAudios.body.audio_clips

      let dataSeries = await reqSeries.json()
      let series = dataSeries.body.channels

      return { channel, audioClips, series, statusCode: 200 }
    } catch(e) {
      return { channel: null, audioClips: null, series: null, statusCode: 503 }
    }
  }
};

Vistas Híbridas

Introducción a Next.JS

¿Dónde aprender Next.js actualizado?

¿Qué es Next.JS?

Creando nuestra primera página

Styled JSX

Server Side Rendering

Aprende qué es Server Side Rendering

Intro a getInitialProps

Utilizando el componente Link

Recibiendo Parámetros

Performance de Get Initial Props

Vista de Podcasts

Componentes Reutilizables

Creando componentes en React

Reorganizar la vista de podcasts

Navegación Avanzada

Gestionando Errores

Personalizando errores

¿Cómo diseñar URLs?

Configurando Next Routes

Implementando Next Routes

Vistas Híbridas

Implementar el Modal

Agregando un loader

Publicando nuestra app

Mejores prácticas en Github

Publicar la app con now

Conclusiones del curso