Merge pull request #464 from kabrunko-dev/translation-ptbr

Challenge 38 doc translated and code readability improvement

apps/rxjs/catch-error/src/app/app.component.ts

@@ -1,8 +1,8 @@
-import { Component, DestroyRef, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { FormsModule } from '@angular/forms';
+import { Component, DestroyRef, OnInit, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
 import { Subject, concatMap, map } from 'rxjs';
 
 @Component({
@@ -11,11 +11,11 @@ import { Subject, concatMap, map } from 'rxjs';
   selector: 'app-root',
   template: `
     <div class="form-container">
-      <span
-        >possible values: posts, comments, albums, photos, todos, users</span
-      >
+      <span>
+        possible values: posts, comments, albums, photos, todos, users
+      </span>
     </div>
-    <form class="form-container" (ngSubmit)="submit$$.next()">
+    <form class="form-container" (ngSubmit)="submit$.next()">
       <input
         type="text"
         placeholder="Enter text"
@@ -29,20 +29,22 @@ import { Subject, concatMap, map } from 'rxjs';
   `,
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent {
-  submit$$ = new Subject<void>();
+export class AppComponent implements OnInit {
+  submit$ = new Subject<void>();
   input = '';
   response: unknown;
+
   private destroyRef = inject(DestroyRef);
-  constructor(private http: HttpClient) {}
+  private http = inject(HttpClient);
+
   ngOnInit() {
-    this.submit$$
+    this.submit$
       .pipe(
         map(() => this.input),
         concatMap((value) =>
-          this.http.get(`https://jsonplaceholder.typicode.com/${value}/1`)
+          this.http.get(`https://jsonplaceholder.typicode.com/${value}/1`),
         ),
-        takeUntilDestroyed(this.destroyRef)
+        takeUntilDestroyed(this.destroyRef),
       )
       .subscribe({
         next: (value) => {

docs/src/content/docs/pt/challenges/rxjs/38-rxjs-catch-error.md

@@ -0,0 +1,33 @@
+---
+title: 🟢 catchError
+description: Desafio 38 é sobre aprender conclusão de observable
+author: devesh-chaudhari
+command: rxjs-catch-error
+challengeNumber: 38
+sidebar:
+  order: 14
+---
+
+## Informação
+
+### Como usar a aplicação
+
+Nossa aplicação possui um formulário com um input textual e um botão "Fetch". Ao clicar o botão, dados são requeridos de uma [API gratuita](https://jsonplaceholder.typicode.com/).
+
+Os valores aceitos para requisições de sucesso estão limitados em: posts, comments, albums, photos, todos, and users. Qualquer outro valor, resultará em erro na requisição.
+
+### Bug
+
+Um bug foi identificado na nossa aplicação. Usuários conseguem apenas recuperar dados até uma requisição fracassar. Quando uma requisição retorna com erro, os usuários não conseguem mais enviar outras requisições.
+
+### Aprendizados
+
+Esta aplicação providencia uma oportunidade de entender onde colocar o operador [`catchError`](https://rxjs.dev/api/operators/catchError) corretamente. Se colocado de forma incorreta, a inscrição será completada, impedindo usuários de enviar mais requisições. O objetivo é preservar a inscrição através do manuseio dos erro nos observables internos de forma apropriada.
+
+## Declaração
+
+O objetivo é usar o operator catchError para lidar com o gerenciamento de erro dentro do seu fluxo de dados Rxjs.
+
+## Restrições
+
+Usuários devem ser aptos para logar o valor/erro cada vez que clicam o botão "Fetch".