Ordenando las preguntas en la home

Clase 69 de 75 • Curso de MEAN 2017

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.

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);
    },

<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>

(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.

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

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);
  }

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

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();
  }

}