Stream 3: Resolviendo el tercer reto

Clase 41 de 46 • Curso Definitivo de JavaScript 2016

YSRAEL ROJAS ROJAS

student•

Para los que no les abre el modal les comparto mi solución.

agregar esto en el index.js del user-page:

page('/:username/:id', loadUser, function(ctx, next){
	var main = document.getElementById('main-container');
	title(`Platzigram - ${ctx.params.username}`);
	empty(main).appendChild(template(ctx.user));	 
	 $('.modal').modal();
	 $(`#modal${ctx.params.id}`).modal('open');
});

Este seria mi código en el template.js del user-page:
=> NOTA:quite la clase “likes” y agregue la clase “modal-likes”, ya que no me aparecía el footer de la ventana modal.

<div id="modal${picture.id}" class="modal modal-fixed-footer">
	<div class="modal-content">
		<img src="${picture.src}"/>
	</div>
	<div class="modal-footer">	
		<div class="modal-likes modal-action modal-close waves-effect btn btn-flat"><i class="fa fa-heart"></i>${translate.message('likes', {likes: picture.likes})}</div>					      
		</div>
</div>

Agregando la clase “modal-likes” al index.scss

.modal{
   		img{
   			max-width: 100%;
   			max-height: 90%;
   		}
   		.fa-heart{
   			display: inline-block;
   		} 
   		.modal-likes i{       
         color: $platzigram-red;
       	 font-size: 20px;
     }

espero les ayude a resolver el problema.

Esteban Ponce de León

student•

Gran solución con esta línea: $('.modal').modal(); Gracias.

Juan Guillermo Rivera Orozco

student•

Muchas gracias por tu aporte, me ayudaste a resolver el inconveniente del modal.

Oliver Amezquita Morales

student•

suban los archivos finales pues.

Wilfredo Bardales

student•

https://github.com/platzi/platzigram/commit/cf217ea932f4d23f39f6de222220360fe559273a
ahí esta esta todo el codigo nuevo

Juan Diego Silva Garcia

student•

Mi solución para no cambiar la versión del materialize CSS

page('/:username/:id', header, loadUser, function (ctx, next)
{
	var main = document.getElementById('main-container');
	title(`Platzigram - ${ctx.params.username}`);
	empty(main).appendChild(template(ctx.user));
	$('.modal').modal();
  $('.modal').modal({
    complete: function()
    {
      page(`/${ctx.params.username}`)
    }
  });
	$(`#modal${ctx.params.id}`).modal('open');
});

Enzo Aliatis

student•

me gustó mucho esta solucion, aunque ya fue hace unos meses, ya que defines el modal 2 veces, esta linea la puedes omitir ---->

$('.modal').modal();

Juan Sebastian Criollo Forero

student•

Muchas gracias, muy útil

Evert Escalante

student•

usen esta linea

$(`#modal${ctx.params.id}`).openModal();

Sergui Morejón

student•

Como seria si hago el modal con JS, sin usar JQuery ?

Carlos Sampol

Team Platzi•

Tienes varias opciones, puedes hacer el modal solo con JS o buscar una dependencia que te cargue el modal. Si usas foundation por ejemplo te viene con modals.

Sergui Morejón

student•

Para los que prefieran usar JS, sin tener que utilizar JQuery al resolver este desafío, les dejo mi código. Esta forma me parece más comprensible 😃

También la forma que Sacha usa MaterializeCss ya es obsoleta, aquí pueden ver como usarla actualmente.

page('/:username/:id', header, loadUser, function (ctx, next) {
	document.title = `Platzigram - ${ctx.params.username}`;
	var main = document.getElementById('main-container');
	empty(main).appendChild(template(ctx.user));

	var modal = document.getElementById(`#modal${ctx.params.id}`);
   	var instanceM = M.Modal.init(modal, {
    	onCloseEnd: function () {
    		page(`/${ctx.params.username}`)
    	}
    });
    var modalOpen = M.Modal.getInstance(modal);
    modalOpen.open()
})

Alejandro Moreno

student•

Hay forma de establecer la url luego de cerrar el modal, sin necesidad de hacer el recargue de la página?

Jeisson A. Valderrama

student•

Tengo el código listo y todo, aunque, hoy tuve que cambiar la parte del user-page en index.js así:

$(`#modal${ctx.params.id}`).openModal(); // Antes
$(`#modal${ctx.params.id}`).modal('open'); // Ahora

Pero, no funciona, no sale el modal, ni me aparece ningún mensaje de error en consola. Ayuda por favor.

José Luis Ruiz Moreno

student•

Si bien la documentación de materializecss cambio por lo que indicas sigue funcionando con lo de antes… aunque en mi caso no cierra al hacer click fuera de la foto y tampoco la opacidad. Le agregue un botón cerrar en el footer.

  $(`#modal${ctx.params.id}`).openModal(
    {
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      opacity: .5, // Opacity of modal background
      complete: function() {
        page(`/user/${ctx.params.username}`);
      } // Callback for Modal close
    }
  );

<div class="modal-footer">
                  <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">${translate.message('close')}</a>
                  <div class="btn btn-flat likes">
                    <i class="fa fa-heart"></i> ${translate.message('likes', { likes: picture.likes })}
                  </div>
                </div>

José Luis Ruiz Moreno

student•

Se junto el código del index y el código del template en lo que te envié. Te comento también que yo sigo usando la url /user/:username/:id… Pero puedes eliminar la parte de /user/ para que funcione como viene indicando el profesor.
Saludos

Esteban Ponce de León

student•

Me gustó la pregunta sobre crear un buscador y saber que el input pueda hacer match con datos específicos. Hay algún paquete que nos recomiendes para ese propósito, o cómo podría orientarme para hacer ese request al servidor.js?

Sacha Lifszyc

teacher•

No conozco ninguna librería en particular. Si los datos con los que quieres hacer match no son muchos podrías llevarlos del servidor al cliente y buscarlos ahí mismo en el navegador, sin tener que hacer consultas al servidor. Si son muchos, debes hacer un request al server.js luego de que el usuario haya ingresado un texto en el input (y hayan pasado unos ~250ms, es decir que haya terminado de escribir) y obtener lo que busca.

Yojan Antonio Pardo Zabala

student•

Sasha amigo, no me funciona la ruta para abrir una imagen directamente por ejemplo la ruta:

http://localhost:8080/platzi/4 :(

¿que crees que pueda ser?

Failed to load resource: the server responded with a status of 404 (Not Found)

app.js:18781 SyntaxError: Unexpected token C in JSON at position 0

index.js:12Uncaught Error: only one instance of babel-polyfill is allowed

Sergio Daniel Xalambrí

student•

Eso es porque las rutas están definidas solo en el navegador y no en el servidor, entonces cuando entras directamente el servidor no sabe que es esa ruta y devuelve 404.

Yojan Antonio Pardo Zabala

student•

Asi que se soluciona poniendolo en un server? sucede que intenta acceder a esta ruta (cuando veo el network):

Cannot GET /platzi/api/user/platzi es como si superpusiera las rutas, o no se :(

Geovanni Obin

student•

nesesito ayuda porfavor no entiendo porque ahora me tira este error al querer iniciar npm si no e cambiado nada en el package.json

C:\Users\MrGeObin\Desktop\PlatziGram>npm start
npm ERR! file C:\Users\MrGeObin\Desktop\PlatziGram\package.json
npm ERR! code EJSONPARSE
npm ERR! Failed to parse json
npm ERR! Unexpected end of input at 46:2
npm ERR!
npm ERR! ^
npm ERR! File: C:\Users\MrGeObin\Desktop\PlatziGram\package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! Tell the package author to fix their package.json file. JSON.parse

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\MrGeObin\AppData\Roaming\npm-cache_logs\2017-07-15T04_31_53_088Z-debug.log

Diego Forero

Team Platzi•

Tienes un error en la linea 46 de tu archivo package.json si puedes compartir el archivo podemos ver que puede ser, a lo mejor es una , que falta.

Geovanni Obin

student•

eso es todo lo que tengo en mi archivo package.json pero solo tiene 45 lineas

{
  "name": "platzigram",
  "version": "0.1.0",
  "description": "Comparte tus fotos estudiando en Platzi con el resto de la comunidad",
  "main": "server.js",
  "keywords": [
    "platzi",
    "javascript",
    "curso-definitivo",
    "platzigram"
  ],
  "author": "platzi",
  "dependencies": {
    "axios": "^0.11.0",
    "empty-element": "^1.0.0",
    "express": "^4.13.4",
    "file-extension": "^2.0.1",
    "intl": "^1.1.0",
    "intl-messageformat": "^1.3.0",
    "intl-relativeformat": "^1.3.0",
    "materialize-css": "^0.97.6",
    "multer": "^1.1.0",
    "page": "^1.7.1",
    "pug": "^2.0.0-alpha6",
    "superagent": "^1.8.3",
    "title": "^1.0.0",
    "yo-yo": "^1.2.0"
  },
  "devDependencies": {
    "babel-plugin-syntax-async-functions": "^6.5.0",
    "babel-plugin-transform-regenerator": "^6.6.5",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.6.0",
    "babelify": "^7.3.0",
    "browserify": "^13.0.0",
    "gulp": "^3.9.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.1",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.7.0"
  },
  "scripts": {
    "build": "gulp",
 "start": "gulp watch && node server.js"
}

Victor Hugo Cortés Posada

student•

Aquí mi solución con JQuery para los que no están utilizando title

page('/:username/:id', header, loadUser, (ctx, next) => {
  //JQuery
  $('title').html(`Platzigram - ${ctx.params.username}`);
  const main = $('#main-container');
  main.empty().append(template(ctx.user));
  $('.modal').modal({
    complete: () => {
      page(`/${ctx.params.username}`);
    }
  });
  $(`#modal${ctx.params.id}`).modal('open');
});

Armando Alamilla Cuellar

student•

tengo un error me aparece en la consola:

TypeError: $(…).modal is not a function
at http://localhost:3000/app.js:25586:15
at http://localhost:3000/app.js:22454:52
at nextEnter (http://localhost:3000/app.js:22286:7)
at loadUser$ (http://localhost:3000/app.js:25604:11)
at tryCatch (http://localhost:3000/app.js:1518:40)
at Generator.invoke [as _invoke] (http://localhost:3000/app.js:1756:22)
at Generator.prototype.(anonymous function) [as next] (http://localhost:3000/app.js:1570:21)
at tryCatch (http://localhost:3000/app.js:1518:40)
at invoke (http://localhost:3000/app.js:1608:20)
at http://localhost:3000/app.js:1618:13

Anthony Gonzalez

student•

Tengo un problema con la función de translate, al agregarla me da un error y no carga la imagenes de la página.

si lo agrego de esta manera:

${translate('likes', { likes: picture.likes })}```


por consola me sale este error

al remover el translate y dejar solo el ${picture.likes} funciona normalmente.

Carlos Sampol

Team Platzi•

Como estas importando translate ?

Anthony Gonzalez

student•

import translate from '../translate'```