From ccb3b106dcd41ba453b234dc21c677d4fd7d2e32 Mon Sep 17 00:00:00 2001
From: Devesh <deveshachaudhari@gmail.com>
Date: Sat, 14 Oct 2023 01:24:27 +0530
Subject: [PATCH] feat: challage 38 - rxjs catch error

---
 README.md                                     |   2 +-
 apps/rxjs-catch-error/.eslintrc.json          |  36 +++++++
 apps/rxjs-catch-error/README.md               |  13 +++
 apps/rxjs-catch-error/jest.config.ts          |  22 ++++
 apps/rxjs-catch-error/project.json            |  95 ++++++++++++++++++
 .../src/app/app.component.spec.ts             |   8 ++
 .../rxjs-catch-error/src/app/app.component.ts |  79 +++++++++++++++
 apps/rxjs-catch-error/src/app/app.config.ts   |   6 ++
 apps/rxjs-catch-error/src/assets/.gitkeep     |   0
 apps/rxjs-catch-error/src/favicon.ico         | Bin 0 -> 15086 bytes
 apps/rxjs-catch-error/src/index.html          |  13 +++
 apps/rxjs-catch-error/src/main.ts             |   7 ++
 apps/rxjs-catch-error/src/styles.scss         |   5 +
 apps/rxjs-catch-error/src/test-setup.ts       |   2 +
 apps/rxjs-catch-error/tailwind.config.js      |  14 +++
 apps/rxjs-catch-error/tsconfig.app.json       |  10 ++
 apps/rxjs-catch-error/tsconfig.editor.json    |   7 ++
 apps/rxjs-catch-error/tsconfig.json           |  32 ++++++
 apps/rxjs-catch-error/tsconfig.spec.json      |  15 +++
 challenge-number.json                         |   4 +-
 .../angular-performance/37-ngfor-biglist.md   |   1 -
 .../challenges/rxjs/38-rxjs-catch-error.md    |  43 ++++++++
 docs/src/content/docs/index.mdx               |   4 +-
 23 files changed, 412 insertions(+), 6 deletions(-)
 create mode 100644 apps/rxjs-catch-error/.eslintrc.json
 create mode 100644 apps/rxjs-catch-error/README.md
 create mode 100644 apps/rxjs-catch-error/jest.config.ts
 create mode 100644 apps/rxjs-catch-error/project.json
 create mode 100644 apps/rxjs-catch-error/src/app/app.component.spec.ts
 create mode 100644 apps/rxjs-catch-error/src/app/app.component.ts
 create mode 100644 apps/rxjs-catch-error/src/app/app.config.ts
 create mode 100644 apps/rxjs-catch-error/src/assets/.gitkeep
 create mode 100644 apps/rxjs-catch-error/src/favicon.ico
 create mode 100644 apps/rxjs-catch-error/src/index.html
 create mode 100644 apps/rxjs-catch-error/src/main.ts
 create mode 100644 apps/rxjs-catch-error/src/styles.scss
 create mode 100644 apps/rxjs-catch-error/src/test-setup.ts
 create mode 100644 apps/rxjs-catch-error/tailwind.config.js
 create mode 100644 apps/rxjs-catch-error/tsconfig.app.json
 create mode 100644 apps/rxjs-catch-error/tsconfig.editor.json
 create mode 100644 apps/rxjs-catch-error/tsconfig.json
 create mode 100644 apps/rxjs-catch-error/tsconfig.spec.json
 create mode 100644 docs/src/content/docs/challenges/rxjs/38-rxjs-catch-error.md

diff --git a/README.md b/README.md
index 136070d07..a4ddb5836 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ If you would like to propose a challenge, this project is open source, so feel f
 
 ## Challenges
 
-Check [all 37 challenges](https://angular-challenges.vercel.app/)
+Check [all 38 challenges](https://angular-challenges.vercel.app/)
 
 ## Contributors ✨
 
diff --git a/apps/rxjs-catch-error/.eslintrc.json b/apps/rxjs-catch-error/.eslintrc.json
new file mode 100644
index 000000000..b428c220b
--- /dev/null
+++ b/apps/rxjs-catch-error/.eslintrc.json
@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      },
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ]
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/rxjs-catch-error/README.md b/apps/rxjs-catch-error/README.md
new file mode 100644
index 000000000..d1808fd03
--- /dev/null
+++ b/apps/rxjs-catch-error/README.md
@@ -0,0 +1,13 @@
+# catchError
+
+> Author: Devesh Chaudhari
+
+### Run Application
+
+```bash
+npx nx serve rxjs-catch-error
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/rxjs/38-catch-error/).
diff --git a/apps/rxjs-catch-error/jest.config.ts b/apps/rxjs-catch-error/jest.config.ts
new file mode 100644
index 000000000..0f2fbb2cd
--- /dev/null
+++ b/apps/rxjs-catch-error/jest.config.ts
@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'rxjs-catch-error',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../coverage/apps/rxjs-catch-error',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};
diff --git a/apps/rxjs-catch-error/project.json b/apps/rxjs-catch-error/project.json
new file mode 100644
index 000000000..7c191a9fc
--- /dev/null
+++ b/apps/rxjs-catch-error/project.json
@@ -0,0 +1,95 @@
+{
+  "name": "rxjs-catch-error",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "apps/rxjs-catch-error/src",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:browser",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/apps/rxjs-catch-error",
+        "index": "apps/rxjs-catch-error/src/index.html",
+        "main": "apps/rxjs-catch-error/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/rxjs-catch-error/tsconfig.app.json",
+        "assets": [
+          "apps/rxjs-catch-error/src/favicon.ico",
+          "apps/rxjs-catch-error/src/assets"
+        ],
+        "styles": ["apps/rxjs-catch-error/src/styles.scss"],
+        "scripts": []
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "buildOptimizer": false,
+          "optimization": false,
+          "vendorChunk": true,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "namedChunks": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "browserTarget": "rxjs-catch-error:build:production"
+        },
+        "development": {
+          "browserTarget": "rxjs-catch-error:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "browserTarget": "rxjs-catch-error:build"
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "apps/rxjs-catch-error/**/*.ts",
+          "apps/rxjs-catch-error/**/*.html"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/rxjs-catch-error/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  }
+}
diff --git a/apps/rxjs-catch-error/src/app/app.component.spec.ts b/apps/rxjs-catch-error/src/app/app.component.spec.ts
new file mode 100644
index 000000000..3905d62a4
--- /dev/null
+++ b/apps/rxjs-catch-error/src/app/app.component.spec.ts
@@ -0,0 +1,8 @@
+import { render } from '@testing-library/angular';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  test('...', async () => {
+    await render(AppComponent);
+  });
+});
diff --git a/apps/rxjs-catch-error/src/app/app.component.ts b/apps/rxjs-catch-error/src/app/app.component.ts
new file mode 100644
index 000000000..17117e4b3
--- /dev/null
+++ b/apps/rxjs-catch-error/src/app/app.component.ts
@@ -0,0 +1,79 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { concatMap, fromEvent, map } from 'rxjs';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule],
+  selector: 'app-root',
+  template: `
+    <div class="form-container">
+      <span>Posible values: posts, comments, albums, photos, todos, users</span>
+    </div>
+    <div class="form-container">
+      <input #inputRef type="text" placeholder="Enter text" />
+      <button #buttonRef>Fetch</button>
+    </div>
+    <div class="form-container">
+      {{ response | json }}
+    </div>
+  `,
+  styles: [
+    `
+      body {
+        font-family: Arial, sans-serif;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        margin: 0;
+      }
+      .form-container {
+        text-align: center;
+      }
+      input {
+        padding: 8px;
+        margin-right: 8px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+      button {
+        padding: 8px 16px;
+        background-color: #007bff;
+        color: #fff;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+    `,
+  ],
+})
+export class AppComponent {
+  @ViewChild('buttonRef', { static: true }) buttonRef!: ElementRef;
+  @ViewChild('inputRef', { static: true }) inputRef!: ElementRef;
+  response: unknown;
+  constructor(private http: HttpClient) {}
+
+  ngOnInit() {
+    const buttonClick$ = fromEvent(this.buttonRef.nativeElement, 'click');
+    buttonClick$
+      .pipe(
+        map(() => this.inputRef.nativeElement.value),
+        concatMap((value) =>
+          this.http.get(`https://jsonplaceholder.typicode.com/${value}/1`)
+        )
+      )
+      .subscribe({
+        next: (value) => {
+          console.log(value);
+          this.response = value;
+        },
+        error: (error) => {
+          console.log(error);
+          this.response = error;
+        },
+        complete: () => console.log('done'),
+      });
+  }
+}
diff --git a/apps/rxjs-catch-error/src/app/app.config.ts b/apps/rxjs-catch-error/src/app/app.config.ts
new file mode 100644
index 000000000..610704b37
--- /dev/null
+++ b/apps/rxjs-catch-error/src/app/app.config.ts
@@ -0,0 +1,6 @@
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+
+export const appConfig: ApplicationConfig = {
+  providers: [importProvidersFrom(HttpClientModule)],
+};
diff --git a/apps/rxjs-catch-error/src/assets/.gitkeep b/apps/rxjs-catch-error/src/assets/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/rxjs-catch-error/src/favicon.ico b/apps/rxjs-catch-error/src/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..317ebcb2336e0833a22dddf0ab287849f26fda57
GIT binary patch
literal 15086
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
X*GBfq^a!*Sks)$E_17kl@BRM)`^nwN

literal 0
HcmV?d00001

diff --git a/apps/rxjs-catch-error/src/index.html b/apps/rxjs-catch-error/src/index.html
new file mode 100644
index 000000000..07c9d6692
--- /dev/null
+++ b/apps/rxjs-catch-error/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>rxjs-catch-error</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/apps/rxjs-catch-error/src/main.ts b/apps/rxjs-catch-error/src/main.ts
new file mode 100644
index 000000000..514c89a08
--- /dev/null
+++ b/apps/rxjs-catch-error/src/main.ts
@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err)
+);
diff --git a/apps/rxjs-catch-error/src/styles.scss b/apps/rxjs-catch-error/src/styles.scss
new file mode 100644
index 000000000..77e408aa8
--- /dev/null
+++ b/apps/rxjs-catch-error/src/styles.scss
@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* You can add global styles to this file, and also import other style files */
diff --git a/apps/rxjs-catch-error/src/test-setup.ts b/apps/rxjs-catch-error/src/test-setup.ts
new file mode 100644
index 000000000..15de72a3c
--- /dev/null
+++ b/apps/rxjs-catch-error/src/test-setup.ts
@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+import 'jest-preset-angular/setup-jest';
diff --git a/apps/rxjs-catch-error/tailwind.config.js b/apps/rxjs-catch-error/tailwind.config.js
new file mode 100644
index 000000000..38183db2c
--- /dev/null
+++ b/apps/rxjs-catch-error/tailwind.config.js
@@ -0,0 +1,14 @@
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
+const { join } = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/apps/rxjs-catch-error/tsconfig.app.json b/apps/rxjs-catch-error/tsconfig.app.json
new file mode 100644
index 000000000..fff4a41d4
--- /dev/null
+++ b/apps/rxjs-catch-error/tsconfig.app.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}
diff --git a/apps/rxjs-catch-error/tsconfig.editor.json b/apps/rxjs-catch-error/tsconfig.editor.json
new file mode 100644
index 000000000..8ae117d96
--- /dev/null
+++ b/apps/rxjs-catch-error/tsconfig.editor.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts"],
+  "compilerOptions": {
+    "types": ["jest", "node"]
+  }
+}
diff --git a/apps/rxjs-catch-error/tsconfig.json b/apps/rxjs-catch-error/tsconfig.json
new file mode 100644
index 000000000..e01cf19bd
--- /dev/null
+++ b/apps/rxjs-catch-error/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.editor.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
diff --git a/apps/rxjs-catch-error/tsconfig.spec.json b/apps/rxjs-catch-error/tsconfig.spec.json
new file mode 100644
index 000000000..1a4817a7d
--- /dev/null
+++ b/apps/rxjs-catch-error/tsconfig.spec.json
@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/challenge-number.json b/challenge-number.json
index 14d6f15fe..55abd212c 100644
--- a/challenge-number.json
+++ b/challenge-number.json
@@ -1,6 +1,6 @@
 {
-  "total": 37,
-  "🟢": 13,
+  "total": 38,
+  "🟢": 14,
   "🟠": 117,
   "🔴": 207
 }
diff --git a/docs/src/content/docs/challenges/angular-performance/37-ngfor-biglist.md b/docs/src/content/docs/challenges/angular-performance/37-ngfor-biglist.md
index 84e28f309..6cc1f48aa 100644
--- a/docs/src/content/docs/challenges/angular-performance/37-ngfor-biglist.md
+++ b/docs/src/content/docs/challenges/angular-performance/37-ngfor-biglist.md
@@ -3,7 +3,6 @@ title: 🟠 Optimize Big List
 description: Challenge 37 is about learning how virtualization optimize big list rendering
 sidebar:
   order: 117
-  badge: New
 ---
 
 <div class="chip">Challenge #37</div>
diff --git a/docs/src/content/docs/challenges/rxjs/38-rxjs-catch-error.md b/docs/src/content/docs/challenges/rxjs/38-rxjs-catch-error.md
new file mode 100644
index 000000000..c1d7f587c
--- /dev/null
+++ b/docs/src/content/docs/challenges/rxjs/38-rxjs-catch-error.md
@@ -0,0 +1,43 @@
+---
+title: 🟢 catchError
+description: Challenge 38 is about learning error handling with catchError rxjs operator
+sidebar:
+  order: 14
+  badge: New
+---
+
+<div class="chip">Challenge #38</div>
+
+## Information
+
+In this application, we will learn the correct placement of a catchError operator. If wrongly placed, the overall subscription will get completed. And we will not be able to send more requests. Aim is to preserve overall subscription, by taking care of error notification from inner observables.
+Possible correct values for which we should get a success response are posts, comments, albums, photos, todos, users
+
+## Statement
+
+Handle the error without completion of the subscription.
+
+## Constraints
+
+## Users should be able to console log value/error each time clicks on the fetch button.
+
+:::note
+Start the project by running: `npx nx serve rxjs-catch-error`.
+:::
+
+:::tip[Reminder]
+Your PR title must start with <b>Answer:38</b>.
+:::
+
+<div class="article-footer">
+  <a
+    href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A38+label%3Aanswer"
+    alt="catchError community solutions">
+    ❖ Community Answers
+  </a>
+  <a
+    href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A38+label%3A"answer+author"'
+    alt="catchError solution author">
+    ▶︎ Author Answer
+  </a>
+</div>
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index 80e2ce9a2..40c476e84 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -23,8 +23,8 @@ hero:
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
 <CardGrid>
-<Card title="37 Challenges">
-    This repository gathers 37 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>. 
+<Card title="38 Challenges">
+    This repository gathers 38 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>. 
     These challenges resolve around real-life issues or specific features to elevate your skills.
 </Card>