Ordenando las preguntas en la home

Clase 69 de 75 • Curso de MEAN 2017

Clase anteriorSiguiente clase

Walter Lensinas

student•

Here is the code of the project: https://github.com/wlensinas/platzi-overflow-wl/tree/69-orderQuestions

Open your terminal and type this:

git clone https://github.com/wlensinas/platzi-overflow-wl.git
git checkout 69-orderQuestions
npm install this is for install dependencies
mongod this is for start MongoDB services
npm start

If you have problem with this, please, report in github.

Thanks!

Carlos Murillo

student•

07/02/21. Si a alguien no le funciona ordenar las preguntas por cantidad de respuestas, adjunto un fragmento de codigo que les podria ser funcional gracias a "Aggregation" de MongoDB.

findAll: (sort = '-createdAt') => {
        debug('Finding all Questions.');
         return Question.aggregate([
            {
              '$project': {
                'title': 1, 
                'description': 1, 
                'icon': 1,
                'answers': 1,
                'createdAt': 1,
                'answers_length': {
                  '$size': '$answers'
                }
              }
            }
          ]).sort(sort);
    },

Luis Abdel Rangel Castro

student•

Orden por la cantidad de respuesta: sort="-answers.length"

Orden por la ultima respuesta ingresada: sort="-answers"

El componente me quedo así:

<mat-tab-group>
    <mat-tab label="Pregunta mas reciente">
        <app-question-list sort="-createdAt"></app-question-list>
    </mat-tab>
    <mat-tab label="Hot">
        <app-question-list sort="-answers.length"></app-question-list>
    </mat-tab>
    <mat-tab label="Respuesta mas reciente">
        <app-question-list sort="-answers"></app-question-list>
    </mat-tab>
</mat-tab-group>
<button mat-mini-fab color="accent" class="add-question" [routerLink]="['questions/new']">
    <mat-icon>add</mat-icon>
</button>

Carlos Murillo

student•

Hola, posiblemente esta solucion era funcional en versiones viejas de Angular. Actualmente (07/05/21) no lo es. Adjunto la solucion que me funciono por si alguien la llegase a ocupar (esto con ayuda de Aggregate en Mongo):

findAll: (sort = '-createdAt') => { debug('Finding all Questions.'); return Question.aggregate([ { '$project': { 'title': 1, 'description': 1, 'icon': 1, 'answers': 1, 'createdAt': 1, 'answers_length': { '$size': '$answers' } } } ]).sort(sort); },

Irving Sarmiento

student•

Tengo el siguiente error en el backend:

(node:4268) UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at validateHeader (_http_outgoing.js:503:11)
    at ServerResponse.setHeader (_http_outgoing.js:510:3)
    at ServerResponse.header (C:\Users\bider\OneDrive\Angular\platzi-overflow\node_modules\express\lib\response.js:767:10)
    at ServerResponse.send (C:\Users\bider\OneDrive\Angular\platzi-overflow\node_modules\express\lib\response.js:170:12)
    at ServerResponse.json (C:\Users\bider\OneDrive\Angular\platzi-overflow\node_modules\express\lib\response.js:267:15)
    at handleError (C:/Users/bider/OneDrive/Angular/platzi-overflow/server/utils/index.js:7:21)
    at _callee$ (C:/Users/bider/OneDrive/Angular/platzi-overflow/server/routes/question.js:17:9)
    at tryCatch (C:\Users\bider\OneDrive\Angular\platzi-overflow\node_modules\babel-polyfill\node_modules\regenerator-runtime\runtime.js:65:40)
    at Generator.invoke [as _invoke] (C:\Users\bider\OneDrive\Angular\platzi-overflow\node_modules\babel-polyfill\node_modules\regenerator-runtime\runtime.js:303:22)
    at Generator.prototype.(anonymous function) [as next] (C:\Users\bider\OneDrive\Angular\platzi-overflow\node_modules\babel-polyfill\node_modules\regenerator-runtime\runtime.js:117:21)
    at step (C:\Users\bider\OneDrive\Angular\platzi-overflow\server\routes\question.js:21:191)
    at C:\Users\bider\OneDrive\Angular\platzi-overflow\server\routes\question.js:21:361
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7)
(node:4268) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:4268) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

En el question-list.component.ts dentro del ngOnit lo tengo así:

ngOnInit() {
        this.questionService
            .getQuestions(this.sort)
            .then((questions: Question[]) => {
                console.log(questions);
                this.questions = questions;
                this.loading = false;
        });
    }

Y para finalizar en question.service.ts :

getQuestions(sort = '-createdAt'): Promise<void | Question[]> {
    return this.httpClient.get<void | Question[]>(`${this.questionsUrl}?sort=${sort}`)
      .toPromise()
      .then(response => response as Question[])
      .catch(this.handleError);
  }

Estoy en Angular 5 con HttpClient no sé si se deba a eso o es algo en el backend. Espero me puedan ayudar.

Diego Forero

Team Platzi•

Si, hay cambios en angular 5 que pueden darte problema, prueba instalando angular 4 y probando si tienes el error, si el error desaparece entonces es algo que cambió en Angular entre versiones.

Jordi Santamaría Portolés

student•

Yo tmb lo estoy haciendo con HttpClient y no me da ningun error, el error que te esta generando ademas es del backend.

UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

Es un error que a mi tmb me habia salido, basicamente se trata en que tienes 2 res.send en una misma funcion, el segundo res.send no puede enviar los headers debido a que ya los envio el primero, despues de todo solo deberias tener 1 solo res.send k se ejecute en una funcion ^^.

Luis Abdel Rangel Castro

student•

Mis repositorios:

Usuario anónimo

user•

Costo :) pero salio :)

++---------------------------------++

David Flores Medrano

student•

Hola… tengo este error, y la consola del navegador me bota este error:

ERROR 
TypeError: _co.question is undefined
Stack trace:
View_QuestionDetailComponent_2/<@ng:///AppModule/QuestionDetailComponent.ngfactory.js:109:13
debugUpdateDirectives@webpack-internal:///../../../core/esm5/core.js:14867:12
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14014:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14365:21
execEmbeddedViewsAction@webpack-internal:///../../../core/esm5/core.js:14323:17
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14015:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14365:21
execComponentViewsAction@webpack-internal:///../../../core/esm5/core.js:14297:13
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14020:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14365:21
execEmbeddedViewsAction@webpack-internal:///../../../core/esm5/core.js:14323:17
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14015:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14365:21
execComponentViewsAction@webpack-internal:///../../../core/esm5/core.js:14297:13
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14020:5
callWithDebugContext@webpack-internal:///../../../core/esm5/core.js:15268:39
debugCheckAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14805:12
ViewRef_.prototype.detectChanges@webpack-internal:///../../../core/esm5/core.js:11789:13
ApplicationRef.prototype.tick/<@webpack-internal:///../../../core/esm5/core.js:6119:58
ApplicationRef.prototype.tick@webpack-internal:///../../../core/esm5/core.js:6119:13
next/<@webpack-internal:///../../../core/esm5/core.js:5952:99
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:388:17
onInvoke@webpack-internal:///../../../core/esm5/core.js:4961:24
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:387:17
Zone.prototype.run@webpack-internal:///../../../../zone.js/dist/zone.js:138:24
NgZone.prototype.run@webpack-internal:///../../../core/esm5/core.js:4778:54
next@webpack-internal:///../../../core/esm5/core.js:5952:69
EventEmitter.prototype.subscribe/schedulerFn<@webpack-internal:///../../../core/esm5/core.js:4543:36
SafeSubscriber.prototype.__tryOrUnsub@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:245:13
SafeSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:192:17
Subscriber.prototype._next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:133:9
Subscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:97:13
Subject.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subject.js:65:17
EventEmitter.prototype.emit@webpack-internal:///../../../core/esm5/core.js:4523:24
checkStable@webpack-internal:///../../../core/esm5/core.js:4926:13
onHasTask@webpack-internal:///../../../core/esm5/core.js:4974:21
ZoneDelegate.prototype.hasTask@webpack-internal:///../../../../zone.js/dist/zone.js:441:21
ZoneDelegate.prototype._updateTaskCount@webpack-internal:///../../../../zone.js/dist/zone.js:461:17
Zone.prototype._updateTaskCount@webpack-internal:///../../../../zone.js/dist/zone.js:285:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:205:25
drainMicroTaskQueue@webpack-internal:///../../../../zone.js/dist/zone.js:595:25
ZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:500:21
invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1517:9
globalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1543:17
QuestionDetailComponent.html:21:4
View_QuestionDetailComponent_2
QuestionDetailComponent.html:21:4
DebugContext_.prototype.logError
core.js:14992
ErrorHandler.prototype.handleError
core.js:1509
ApplicationRef.prototype.tick/<
core.js:5910:54
ZoneDelegate.prototype.invoke
zone.js:388
Zone.prototype.run
zone.js:138
NgZone.prototype.runOutsideAngular
core.js:4693:47
ApplicationRef.prototype.tick
core.js:5910
next/<
core.js:5736:97
ZoneDelegate.prototype.invoke
zone.js:388
onInvoke
core.js:4745
ZoneDelegate.prototype.invoke
zone.js:387
Zone.prototype.run
zone.js:138
NgZone.prototype.run
core.js:4562:47
next
core.js:5736:67
EventEmitter.prototype.subscribe/schedulerFn<
core.js:4327:34
SafeSubscriber.prototype.__tryOrUnsub
Subscriber.js:240
SafeSubscriber.prototype.next
Subscriber.js:187
Subscriber.prototype._next
Subscriber.js:128
Subscriber.prototype.next
Subscriber.js:92
Subject.prototype.next
Subject.js:56
EventEmitter.prototype.emit
core.js:4307:22
checkStable
core.js:4710
onHasTask
core.js:4758
ZoneDelegate.prototype.hasTask
zone.js:441
ZoneDelegate.prototype._updateTaskCount
zone.js:461
Zone.prototype._updateTaskCount
zone.js:285
Zone.prototype.runTask
zone.js:205
drainMicroTaskQueue
zone.js:595
ZoneTask.invokeTask
zone.js:500
invokeTask
zone.js:1517
globalZoneAwareCallback

Mi codigo del question-detail.component es:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Question } from './question.model';
import { QuestionService } from './question.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-question-detail',
  templateUrl: './question-detail.component.html',
  styleUrls: ['./question-detail.component.css'],
  providers: [QuestionService]
})

export class QuestionDetailComponent implements OnInit, OnDestroy {
  question?: Question;
  loading = true;
  sub: any;

  constructor (
    private questionService: QuestionService,
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      this.questionService
        .getQuestion(params.id)
        .then((question: Question) => {
          this.question = question;
          this.loading = false;
      });
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

Asi se ve la pantalla al querer responder una pregunta:

Que puedo hacer?

David Flores Medrano

student•

Asi se ve la pantalla al querer responder una pregunta:

Que puedo hacer?

Diego Forero

Team Platzi•

El error es porque no encuentra la pregunta, esta retornando undefined se rompe el flujo de la aplicación, puedes verificar si no se están guardando las preguntas correctamente.

Ordenando las preguntas en la home

Introducción al Curso de MEAN

Bienvenidos al Curso de MEAN

¿Qué es MEAN?

El Frontend de PlatziOverflow

Introducción a Angular y TypeScript

Instalación y configuración del entorno

Trabajando con Angular Material

Construcción del header de la aplicación

Detalles de preguntas para el proyecto

Construcción de pantalla de detalle de una pregunta

Estilo en la pantalla de detalle de una pregunta

Incorporando angular2-moment al proyecto

Agregando el listado de respuestas a la pantalla de detalle

Agregando un formulario para respuestas

Dando estilo al formulario de preguntas

Corrigiendo estilos en el formulario y toques finales

Cómo mostrar las respuestas en el listado

Empezando la pantalla de signin

Creando el formulario de signin

Dando estilo al formulario de signin

Creando la pantalla para el listado de preguntas

Creando el componente para los listados de preguntas

Crear la pantalla para cargar una nueva pregunta

Crear formulario de carga de nueva pregunta

Agregando iconos al formulario de preguntas

Agregando un icono genérico al formulario de preguntas

Seleccionando un icono para la pregunta

Conectando nuestras pantallas con el router de Angular

Conectando la pantalla de registro con la de login

Conectando el listado de preguntas con la pantalla del detalle

Conectando el listado de preguntas con el formulario de creación

El Backend de PlatziOverflow

Introducción a Node.js y Express

Express

Instalación y configuración del entorno de desarrollo de Backend con Babel

Instalación y primeros pasos con Express

Creando un endpoint en la API para servir preguntas al cliente

Creando el servicio de preguntas

Completando el servicio de preguntas

Conectando el Frontend de preguntas con nuestro Backend

Agregando un spinner para la carga de preguntas

Obteniendo el detalle de una pregunta desde el Backend

DESAFIO: Contruye el spinner del detalle de la pregunta

Agregando una ruta para crear una pregunta en el Backend

Agregando el método para crear preguntas en el QuestionService

Enviando una pregunta hacia el Backend

Agregando una ruta para crear una respuesta en el Backend

Agregando el método para crear respuestas en el QuestionService

Enviando una respuesta hacia el Backend

Creando la ruta de signin en el Backend

Creando un JSON web token para el usuario autenticado

Escribiendo nuestro servicio de autenticación

Conectando el signin con el Backend

Agregando el logout de usuarios a PlatziOverflow

Creando la ruta de signup en el backend

Conectando el signup de usuarios con el Backend

Qué son y Cómo funcionan los Middlewares

Organizando los middlewares del Backend

Autorizando usuarios para que puedan crear preguntas

Manejar el error del signin

La Base de Datos de PlatziOverflow

Creando el modelo de respuesta

Creando el modelo de usuario

Creando el modelo de pregunta

Estableciendo la conexión con la base de datos

Obteniendo todas las preguntas de la base de datos

Obteniendo una pregunta de la base de datos

Conectando el signup con la base de datos

Encriptando la contraseña del usuario

Conectando el signin con la base de datos

Guardando una pregunta en la base de datos

Guardando una respuesta en la base de datos

Ordenando las preguntas en la home

Despliegue a producción

¿Cómo vamos a hacer el deploy?

Configurando nuestra app para el entorno productivo

Creando el build para producción de nuestro Frontend

Creando el build para producción de nuestro Backend

Cómo enfrentar un proyecto MEAN de aquí en más