No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Profesional de Next.js

Curso Profesional de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Conexi贸n del modal para crear productos

19/31
Recursos

Aportes 16

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Honestamente ya me tiene harto que cada 2 minutos diga 鈥渆lementos clave鈥. Ya me distrae, no me deja concentrarme.

Para colocar el icono de 鈥+鈥 en Add product utilice:

import { PlusIcon } from '@heroicons/react/solid';

Y dentro del button:

<PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
Add Product

No me queda duda que Oscar es buen dev, pero en sus clases habla mucho, m谩s de lo necesario y sinceramente hasta me llega abrumar jaja

La verdad estoy harto de la pronunciaci贸n desastrosa del ingl茅s, adem谩s de que siempre dice lo mismo:
OBVIAMENTE
RECURSO
PERTINENTE
.
En todas las clases habla y habla y no dice nada importante, puro relleno.
Lo 煤nico que logra es desconcentrar y estirar el video innecesariamente.

Clase #19: Conexi贸n del modal para crear productos 19/31 馃挰



Continuando con el proyecto: 馃敤


Ya tenemos la estructura del dashboard, pero lo que se quiere es que al dar click en Products en el Men煤 de la P谩gina entre a la direcci贸n: /dashboard/products, as铆 que en VSC, vamos a la ruta src/pages/dashboard y creamos el archivo products.js, dentro creamos la estructura de la funci贸n:

export default function produts() {
	return(
		<>
		
		</>
	);
}


Vamos al archivo index.js de la ruta src/pages/dashboard y cortamos todo lo referente a productos desde el primer <div> hasta el 煤ltimo </div> y lo pegamos dentro del return() de products.js

Luego vamos a la p谩gina de TailwindUI (enlace: aqu铆), en la parte del c贸digo <>Code al dar en 鈥渞eact鈥 nos muestra el c贸digo del 鈥Page Headings鈥 que queremos, copiamos todos los import y pegamos en products.js al principio del archivo (borrar aquellos elementos que no se usaran o que se han eliminado).

Tambi茅n seleccionamos toda la parte del return de 鈥Page Headings鈥, copiamos y lo pegamos encima de lo que pegamos proveniente del index.js

Ah铆 borramos todo lo que corresponde a la etiqueta <Menu></Menu>, de los 3 botones que tiene, borramos los botones de 鈥淓dit鈥 y 鈥淰iew鈥 y editamos el bot贸n de 鈥淧ublish鈥 por Add Product.

Si queremos cambiar el icono que sale en el recuadro azul de 鈥Add Product鈥, revisamos la p谩gina de Hero Icons (enlace: aqu铆) y escoger cual icono queremos colocar, tambi茅n se puede revisar en la carpeta del proyecto en la ruta src/node_modules/@heroicons/react/solid y buscar el nombre del icono, en mi caso seleccion茅 el icono DocumentAddIcon, para ello se debe agregar primero el import:

import { DocumentAddIcon } from '@heroicons/react/solid';


Y en la etiqueta se cambi贸 <CheckIcon /> por:

<DocumentAddIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />


Tambi茅n se debe borrar todos los <div></div> relacionados con los t铆tulos y etiquetas como: Back and Developer, Full Time, Remote, $120, Closing on January 鈥

Se agregar谩 un dialogo de forma que al dar click en el bot贸n de 鈥Add Product鈥 aparezca una ventana emergente. Para ello, se utilizar谩 el recurso del Modal.js de la ruta src/commons

En products.js agregamos el import del Modal:

import Modal from '@common/Modal';


Dentro de la funci贸n products() antes del return se agregan las constantes:

const [open, setOpen] = useState(false);
const [products, setProducts] = useState([]);


Dentro del return, en la parte del bot贸n Add Product, dentro de la etiqueta <button > se agrega la acci贸n que queremos que aparezca el dialogo:

onClick={() => setOpen(true)


La etiqueta de <Modal></Modal> la agregamos despu茅s del 煤ltimo </div> del return:

<Modal open={open} setOpen={setOpen}>
<h1>Cero estr茅s, you can do it!</h1>
</Modal>


Dato: el profesor agreg贸 en el className del primer <div> un margen bottom de 2rem con el 鈥渕b-8鈥 en el enlace (aqu铆) describen esas unidades.

Guardamos todo y ejecutamos en consola npm run dev, cuando entremos a la p谩gina de local, no entrar en 鈥淟og in鈥, si no directamente a Products del Panel superior, entra directamente al recuadro que creamos y debe aparecer la ventanita emergente cuando le das click al bot贸n Add Product (dentro del bot贸n el icono cambi贸 al icono que se seleccion贸 de Hero Icons).

Elementos clave.

Saludos compa帽eros, si alguno tiene problemas para que se ejecute el Modal, en la versi贸n de React 18 no corre el Headless UI y Dialog, pueden utilizar la versi贸n 17 para continuar con el proyecto, para bajarlo a la versi贸n anterior:
npm install [email protected] [email protected]

Si quieren pueden agregar un nuevo prop con el nombre del titulo para que quede as铆:

Lo que hice fue en el componente de Modal.js agregue la nueva prop 鈥渢itle鈥

export default function Modal({ open, setOpen, title, children }:any) {
	return(...
}

y Luego por all谩 en el medio del modal, donde est谩 la x del boton de cerrar, agregu茅 el title鈥

<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex  justify-between">
	<Dialog.Title as="h2" className="text-lg font-medium leading-6 text-gray-900">
        	{title}
        </Dialog.Title>
        <XCircleIcon aria-hidden="true" onClick={() => setOpen(false)} />
</div> 

quite las clases que ten铆a el XCircleIcon para el ejemplo.

Luego ya solo queda asignarle el valor en el

<Modal title={"Add Product"} open={open} setOpen={setOpen}>
<h1>Hola Mundo</h1>
</Modal>

Al que le salga este error, solo cambia esto:

import { Modal } from '@common/Modal';

por esto:

import Modal from '@common/Modal';

Bueno鈥 en el siguiente link, obviamente, de Tailwind UI鈥 vas a poder encontrar, los elementos clave, para, obviamente, poder encontrar los recursos pertinentes, para, obviamente, desarrollar nuestro aplicativo.
https://tailwindui.com/components/application-ui/headings/page-headings

Para los que les aparezca este aviso

deben hacer lo siguiente

import { XCircleIcon } from '@heroicons/react/24/solid';

Si no les sale la interfaz como en el minuto 6:10 es por que quiza como yo, est谩n usando la versi贸n 1 de los iconos, y en esa versi贸n no existe el MapPinIcon, se debe cambiar por un LocationMarkerIcon y ya con eso funciona. Claro al final se borra y no lo necesitamos pero pueden frustrarse un poco si no les sale al principio.

Miro algunos comentarios donde 鈥減untualizan鈥 algunos aspectos en los que no se hallan conformes con la forma de ense帽ar de Oscar.
Les invito a tomar otra perpectiva:
Estamos mirando a un desarrollador experimentado hacer su trabajo y como procesa los obstaculos.
Para muchos que estamos empezando resulta muy beneficioso.
Si puede mejorar en ser mucho mas directo, pero no resta mayor valor al curso en si.
Saludos

Codigo de la clase.

import { Fragment, useState } from 'react';
import { CheckIcon } from '@heroicons/react/solid';
import { PlusIcon } from '@heroicons/react/solid';
import Modal from '@common/Modal';

export default function products() {
  const [open, setOpen] = useState(false);
  const [products, setPorducts] = useState([]);
  return (
    <>
      <div className="lg:flex lg:items-center lg:justify-between mb-8">
        <div className="flex-1 min-w-0">
          <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">List of product</h2>
        </div>
        <div className="mt-5 flex lg:mt-0 lg:ml-4">
          <span className="sm:ml-3">
            <button
              type="button"
              className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              onClick={() => setOpen(true)}
            >
              <CheckIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
              <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
              add Product
            </button>
          </span>
        </div>
      </div>
      <div className="flex flex-col">
        <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
            <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th scope="col" className="px-6 py-3 text-left  text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Name
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Category
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Price
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Id
                    </th>
                    <th scope="col" className="relative px-6 py-3">
                      <span className="sr-only">Edit</span>
                    </th>
                    <th scope="col" className="relative px-6 py-3">
                      <span className="sr-only">Delete</span>
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {products?.map((product) => (
                    <tr key={`Product-item-${product.id}`}>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex items-center">
                          <div className="flex-shrink-0 h-10 w-10">
                            <img className="h-10 w-10 rounded-full" src={product.images[0]} alt="" />
                          </div>
                          <div className="ml-4">
                            <div className="text-sm font-medium text-gray-900">{product.title}</div>
                          </div>
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-900">{product.category.name}</div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">${product.price}</span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{product.id}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="#" className="text-indigo-600 hover:text-indigo-900">
                          Edit
                        </a>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="#" className="text-indigo-600 hover:text-indigo-900">
                          Delete
                        </a>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <Modal open={open} setOpen={setOpen}>
        <h1>Hola, mundo</h1>
      </Modal>
    </>
  );
}

aporte de la clase鈥