Enviando una respuesta hacia el Backend

Clase 46 de 75 • Curso de MEAN 2017

Jorge Zamudio

student•

Yo cambie la libreria de sweet-scroll por una llamada ‘smoot-scroll’ y funciona perfectamente.
Asi se importa

import * as SmoothScroll from 'smooth-scroll';

Asi se implementa en el subscribe()

this.question.answers.unshift(a);
const anchor = document.querySelector( '#title' );
this.SmoothScroll.animateScroll(anchor);

Pepe Alvarez

student•

después de perder tiempo aferrándome al sweet-scroll me fui por tu librería y funciono excelente. Gracias por el aporte!!!

Joshua Michael Rodriguez

student•

Ese sweet-scroll nomas no quiso funcionar. Es probable que se trate de un tema de incompatibilidad de versiones.

Carlos Enrique Ramírez Flores

student•

answer.component.ts me quedo de este modo

import { Component, OnInit, Input } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Answer } from './answer.model';
import { Questions } from '../questions/question.model';
import { User } from '../singin/user.model';
import { QuestionsService } from '../questions/questions.service';
import * as SmoothScroll from'smooth-scroll';

@Component({
  selector: 'app-answer',
  templateUrl: './answer.component.html',
  styleUrls: ['./answer.component.css'],
  providers: [QuestionsService]
})
export class AnswerComponent implements OnInit {
  @Input() question: Questions;
  scroll:SmoothScroll;
  constructor(private questionService: QuestionsService) { 
    this.scroll = new SmoothScroll();
  }
  ngOnInit() {
  }

  saveNote(form:NgForm){
    const answer = new Answer(
      form.value.description,
      this.question
    );
     this.questionService.addAnswer(answer)
        .subscribe(
          result =>{
            this.question.answer.unshift(result)
            const anchor = document.querySelector( '#title-answers' );
            this.scroll.animateScroll(anchor);
          },
          e=> console.log(e)
        )
    form.reset();
  }
}

Walter Lensinas

student•

Codigo de la clase: File: /server/routes/auth.js

import express from 'express'
import Debug from 'debug'

const app = express.Router()
const debug = new Debug('platzi-overflow:auth')

const users = [
    {
        email: 'aaaa@aaa.com',
        password: '1234',
        firstName: 'Sacha',
        lastName: 'Lifszyc',
        _id: 123
    }
]

const findUserByEmail = e => users.find(({ email }) => email === e);
// otra forma de escribir la funcion:
// function findUserByEmail(email) {
//     return users.find(user => user.email === email)
// }

function comparePasswords(providedPassword, userPassword) {
    return providedPassword === userPassword
} 

function handleLoginFailed(res) {
    return res.status(401).json({
        message: 'Login failed',
        error: 'Email and password dont match'
    })
}

app.post('/signin', (req,res,next) => {
    const { email, password } = req.body
    const user = findUserByEmail(email)

    if (!user) {
        debug(`user with email ${email} not found`)
        return handleLoginFailed(res)
    }

    if(!comparePasswords(password, user.password)) {
        debug(`password do not match: ${password} !== ${user.password}`)
        return handleLoginFailed(res)
    }

})



export default app

File: /server/routes/index.js

export { default as question } from './question'
export { default as auth } from './auth'

Walter Lensinas

student•

Buenas, les paso el código del proyecto: https://github.com/wlensinas/platzi-overflow-wl/tree/46-answer-backend

Steps:

git clone https://github.com/wlensinas/platzi-overflow-wl.git
git checkout 46-answer-backend
npm install
npm start

Anthony Gonzalez

student•

Me sale este error al tratar de enviar la respuesta

AnswerFormComponent.html:1 ERROR TypeError: Url must be a string. Received 1
    at normalize (url-join.js:27)
    at eval (url-join.js:70)
    at QuestionService.addAnswer (question.service.ts:47)
    at AnswerFormComponent.onSubmit (answer-form.componet.ts:26)
    at Object.eval [as handleEvent] (AnswerFormComponent.html:1)
    at handleEvent (core.js:13542)
    at callWithDebugContext (core.js:15051)
    at Object.debugHandleEvent [as handleEvent] (core.js:14638)
    at dispatchEvent (core.js:9957)
    at eval (core.js:12296)

Diego Forero

Team Platzi•

Lo que veo del error es que esta llegando 1 en lugar de llegar el string de la url, revisa que los parámetros estén bien nombrados y que por copiar y pegar alguna linea no hayas cambiado algun parámetro.

JUAN CARLOS RUIZ SALAZAR

company_admin•

Para la version Angular: 10.0.8 El sweet-scroll funciona sin ningun problema tal como lo explican en el video

Daniel Hernández

student•

La solucion al error: sweet_scroll_1.default is not a constructor es importarlo de este modo:

import * as SweetScroll from 'sweet-scroll';

Enzo Aliatis

student•

Alguien sabe como solventar esto?

[Violation] Added non-passive event listener to a scroll-blocking ‘wheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive.

Andres Alvarez

student•

me da este error

Diego Forero

Team Platzi•

Tienes instaladas todas las librerías como babel y los presets, el error al parecer es porque no puede entender la forma en que se exporta el modulo de sweet scroll

Jean Pierre Matteo Marante

student•

tengo el mismo error

Jordi Santamaría Portolés

student•

Da error el scroller ese y esta todo identico que en el repositorio… con el correcto npm install --save sweet-scroll

Jordi Santamaría Portolés

student•

Andres Alvarez

student•

pudiste solucionarlo ?

David Flores Medrano

student•

me sale este error en la consola:

ERROR in src/app/question/question-detail.component.ts(33,10): error TS2551: Property 'getQuestion' does not exist on type 'QuestionService'. Did you mean 'getQuestions'?


webpack: Failed to compile.

y mi codigo es este

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;
// export class QuestionDetailComponent {
//   question: Question = new Question (
//     'Esta es una nueva preguta sobre Android',
//     'Miren tengo una duda sobre una aplicacion que estoy escribiendo para Android...',
//     new Date,
//     'devicon-android-plain'
//   );

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

}

Diego Forero

Team Platzi•

Comparte por favor tu archivo question.service, ya que al parecer tienes definido getQuestions y no getQuestion.

David Flores Medrano

student•

mis archivos son estos:
Question.service.ts

import { Injectable } from '@angular/core';
import { Question } from './question.model';
import { Answer } from '../answer/answer.model';
import { Http, Headers, Response } from '@angular/http';
import { environment } from '../../environments/environment';
import * as urljoin from 'url-join';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class QuestionService {

  private questionsUrl: string;

  constructor(private http: Http) {
    this.questionsUrl = urljoin(environment.apiUrl, 'questions');
  }

  getQuestions(): Promise<void | Question[]> {
    return this.http.get(this.questionsUrl)
          .toPromise()
          .then(response => response.json() as Question[])
          .catch(this.handleError);
  }

  getQuestion(id): Promise<void | Question> {
    const url = urljoin(this.questionsUrl, id);
    return this.http.get(url)
            .toPromise()
            .then(response => response.json() as Question)
            .catch(this.handleError);
  }

  addQuestion(question: Question) {
    const body = JSON.stringify(question);
    const headers = new Headers({ 'Content-Type': 'application/json' });

    return this.http.post(this.questionsUrl, body, { headers })
      .map((response: Response) => response.json())
      .catch((error: Response) => Observable.throw(error.json()));
  }

  addAnswer(answer: Answer) {
    const a = {
      description: answer.description,
      question: {
        _id: answer.question._id
      }
    };
    const body = JSON.stringify(a);
    const headers = new Headers({ 'Content-Type': 'application/json' });
// /api/questions/:id/answers
    // const idString = urljoin(this.questionUrl, idString, 'answers');
    const url = urljoin(this.questionsUrl, answer.question._id, 'answers');
    return this.http.post(url, body, { headers })
      .map((response: Response) => response.json())
      .catch((error: Response) => Observable.throw(error.json()));
  }

  handleError(error: any) {
    const errMsg = error.message ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.log(errMsg);
  }
}

Answer-form.component.ts

import { Component, Input } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Answer } from './answer.model';
import { Question } from '../question/question.model';
import { User } from '../auth/user.model';
import { QuestionService } from '../question/question.service';
import * as SweetScroll from 'sweet-scroll';

@Component({
  selector: 'app-answer-form',
  templateUrl: './answer-form.component.html',
  styles: [`
    form {
      margin top: 20px;
    }
  `],
  providers: [QuestionService]
})

export class AnswerFormComponent {
  @Input() question: Question;
  sweetScroll: SweetScroll;

  constructor (private questionService: QuestionService) {
    this.sweetScroll = new SweetScroll();
  }

  onSubmit(form: NgForm) {
    const answer = new Answer(
      form.value.description,
      this.question
    );
    this.questionService
      .addAnswer(answer)
      .subscribe(
        a => {
          this.question.answers.unshift(a);
          this.sweetScroll.to('#title');
        },
        error => console.log(error)
      );
    form.reset();
  }
}

Francisco Javier Pedrosa Ruiz

student•

Tengo una duda;

Estoy siguiendo el proyecto con un equipo con Linux Kubuntu 16 y con otro con Windows 10. Llegados a este punto, el codigo en linux corre genial, pero en windows me escupe el siguiente error en la consola del navegador:

“Failed to load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘’ is therefore not allowed access.”

¿Alguien sabe por qué?

Francisco Javier Pedrosa Ruiz

student•

![](

Diego Forero

Team Platzi•

Porque intenta acceder a un recurso de otro servidor (puerto) puedes setear el header para que permita el request o existe una extensión para google chrome que inserta este header en la petición.

import { Component, OnInit, Input } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Answer } from './answer.model';
import { Questions } from '../questions/question.model';
import { User } from '../singin/user.model';
import { QuestionsService } from '../questions/questions.service';
import * as SmoothScroll from'smooth-scroll';

@Component({
  selector: 'app-answer',
  templateUrl: './answer.component.html',
  styleUrls: ['./answer.component.css'],
  providers: [QuestionsService]
})
export class AnswerComponent implements OnInit {
  @Input() question: Questions;
  scroll:SmoothScroll;
  constructor(private questionService: QuestionsService) { 
    this.scroll = new SmoothScroll();
  }
  ngOnInit() {
  }

  saveNote(form:NgForm){
    const answer = new Answer(
      form.value.description,
      this.question
    );
     this.questionService.addAnswer(answer)
        .subscribe(
          result =>{
            this.question.answer.unshift(result)
            const anchor = document.querySelector( '#title-answers' );
            this.scroll.animateScroll(anchor);
          },
          e=> console.log(e)
        )
    form.reset();
  }
}

import express from 'express'
import Debug from 'debug'

const app = express.Router()
const debug = new Debug('platzi-overflow:auth')

const users = [
    {
        email: 'aaaa@aaa.com',
        password: '1234',
        firstName: 'Sacha',
        lastName: 'Lifszyc',
        _id: 123
    }
]

const findUserByEmail = e => users.find(({ email }) => email === e);
// otra forma de escribir la funcion:
// function findUserByEmail(email) {
//     return users.find(user => user.email === email)
// }

function comparePasswords(providedPassword, userPassword) {
    return providedPassword === userPassword
} 

function handleLoginFailed(res) {
    return res.status(401).json({
        message: 'Login failed',
        error: 'Email and password dont match'
    })
}

app.post('/signin', (req,res,next) => {
    const { email, password } = req.body
    const user = findUserByEmail(email)

    if (!user) {
        debug(`user with email ${email} not found`)
        return handleLoginFailed(res)
    }

    if(!comparePasswords(password, user.password)) {
        debug(`password do not match: ${password} !== ${user.password}`)
        return handleLoginFailed(res)
    }

})



export default app

AnswerFormComponent.html:1 ERROR TypeError: Url must be a string. Received 1
    at normalize (url-join.js:27)
    at eval (url-join.js:70)
    at QuestionService.addAnswer (question.service.ts:47)
    at AnswerFormComponent.onSubmit (answer-form.componet.ts:26)
    at Object.eval [as handleEvent] (AnswerFormComponent.html:1)
    at handleEvent (core.js:13542)
    at callWithDebugContext (core.js:15051)
    at Object.debugHandleEvent [as handleEvent] (core.js:14638)
    at dispatchEvent (core.js:9957)
    at eval (core.js:12296)

ERROR in src/app/question/question-detail.component.ts(33,10): error TS2551: Property 'getQuestion' does not exist on type 'QuestionService'. Did you mean 'getQuestions'?

webpack: Failed to compile.

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;
// export class QuestionDetailComponent {
//   question: Question = new Question (
//     'Esta es una nueva preguta sobre Android',
//     'Miren tengo una duda sobre una aplicacion que estoy escribiendo para Android...',
//     new Date,
//     'devicon-android-plain'
//   );

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

}

import { Injectable } from '@angular/core';
import { Question } from './question.model';
import { Answer } from '../answer/answer.model';
import { Http, Headers, Response } from '@angular/http';
import { environment } from '../../environments/environment';
import * as urljoin from 'url-join';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class QuestionService {

  private questionsUrl: string;

  constructor(private http: Http) {
    this.questionsUrl = urljoin(environment.apiUrl, 'questions');
  }

  getQuestions(): Promise<void | Question[]> {
    return this.http.get(this.questionsUrl)
          .toPromise()
          .then(response => response.json() as Question[])
          .catch(this.handleError);
  }

  getQuestion(id): Promise<void | Question> {
    const url = urljoin(this.questionsUrl, id);
    return this.http.get(url)
            .toPromise()
            .then(response => response.json() as Question)
            .catch(this.handleError);
  }

  addQuestion(question: Question) {
    const body = JSON.stringify(question);
    const headers = new Headers({ 'Content-Type': 'application/json' });

    return this.http.post(this.questionsUrl, body, { headers })
      .map((response: Response) => response.json())
      .catch((error: Response) => Observable.throw(error.json()));
  }

  addAnswer(answer: Answer) {
    const a = {
      description: answer.description,
      question: {
        _id: answer.question._id
      }
    };
    const body = JSON.stringify(a);
    const headers = new Headers({ 'Content-Type': 'application/json' });
// /api/questions/:id/answers
    // const idString = urljoin(this.questionUrl, idString, 'answers');
    const url = urljoin(this.questionsUrl, answer.question._id, 'answers');
    return this.http.post(url, body, { headers })
      .map((response: Response) => response.json())
      .catch((error: Response) => Observable.throw(error.json()));
  }

  handleError(error: any) {
    const errMsg = error.message ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.log(errMsg);
  }
}

import { Component, Input } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Answer } from './answer.model';
import { Question } from '../question/question.model';
import { User } from '../auth/user.model';
import { QuestionService } from '../question/question.service';
import * as SweetScroll from 'sweet-scroll';

@Component({
  selector: 'app-answer-form',
  templateUrl: './answer-form.component.html',
  styles: [`
    form {
      margin top: 20px;
    }
  `],
  providers: [QuestionService]
})

export class AnswerFormComponent {
  @Input() question: Question;
  sweetScroll: SweetScroll;

  constructor (private questionService: QuestionService) {
    this.sweetScroll = new SweetScroll();
  }

  onSubmit(form: NgForm) {
    const answer = new Answer(
      form.value.description,
      this.question
    );
    this.questionService
      .addAnswer(answer)
      .subscribe(
        a => {
          this.question.answers.unshift(a);
          this.sweetScroll.to('#title');
        },
        error => console.log(error)
      );
    form.reset();
  }
}