
In this article, we'll create a custom paginator using just Angular components. Before starting, please read the **drawbacks** in case this is not the best approach for your project.


## Drawbacks:
* This is a custom approach, which means that you are responsible for making the necessary modifications in order to make it fit into your project.
* This approach is decoupled from the same implementation, which means that you need to create the logic to manage the pages content. However, I'll be adding an example about it. 

Let's start with the paginator implementation.

1. First, let's create a new project:

  ```bash
  > ng new my-app
  ```

2. Now let's create two components:

  ```bash
  > ng g c components/paginator
  > ng g c components/paginator/page-button
  ```
The ```page-button``` component will be just for the layout of a single page button component, while the ```paginator``` component will be responsible for controlling the pagination logic.

3. Creating the button component:

This component will be responsible for managing all the possible states of a page button, like selected, disabled, or even if it is an arrow or a dots button and not a number. Let's see how to create it:

```page-button.component.html```
```html
<button 
  type="button"
  class="pageButton"
  [ngClass]="{
    'current': current,
    'dots': dots,
    'right': rightArrow,
    'left': leftArrow,
    'disabled': disabled
  }"
  [disabled]="disabled"
  (click)="onClick()"> 
  {{ number }}
</button>
```

```page-button.component.ts```
```ts
import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-page-button',
  templateUrl: './page-button.component.html',
  styleUrls: ['./page-button.component.scss']
})
export class PageButtonComponent {
  @Input() current?: boolean = false;
  @Input() dots?: boolean = false;
  @Input() number?: number;
  @Input() disabled?: boolean = false;
  @Input() rightArrow?: boolean = false;
  @Input() leftArrow?: boolean = false;

  @Output() clickEvent = new EventEmitter<number>();

  onClick(): void {
    this.clickEvent.emit(this.number);
  }
}
```

This component is a presentational component, which means it won't have any kind of logic, It will just display information based on the input data.

You could find all the code for this component, including the ```scss```, in [here.](https://github.com/Andres2D/berserk-angular/tree/paginator/src/app/paginator/page-button)

At the end, we could test all the possible states of the buttons, and it should look like this:

![page-button-preview](page-button-preview.gif=600x352)

4. Creating the paginator component

Now, let's create the paginator component, in which we'll be using the ```page-button``` component.
This graph shows how the paginator component will work:

![page-button-preview](paginator-arch.png=318x307)

Now, let's translate this to code:

```paginator.component.html```
```html
<app-page-button 
  [leftArrow]="true"
  [disabled]="currentPage === 1"
  (clickEvent)="goToPageFromArrow('left')"
></app-page-button>
<ng-container *ngFor="let page of pagesToShow">
  <app-page-button 
    [number]="page !== -1 ? page : undefined"
    [dots]="page === -1"
    [current]="page === currentPage"
    (clickEvent)="goToPage($event)"
  ></app-page-button>
</ng-container>
<app-page-button 
  [rightArrow]="true"
  [disabled]="currentPage === pages"
  (clickEvent)="goToPageFromArrow('right')"
></app-page-button>
```

Here, I'm also creating a little bit of logic, like controlling the disabled status for the arrows
when the currentPage reaches the minimum limit for the left arrow and the maximum limit for the right arrow.

Moreover, I'm using ```-1``` in order to know if I want to show dots. Let's review all this logic on the ```paginator.component.ts``` component.

Let's start with the ```@Input``` and ```@Output``` data:

```paginator.component.ts```
```ts
  @Input() pages: number = 0;
  @Input() currentPage: number = 0;
  @Input() visiblePages: number = 0;
  
  @Output() gotToPageEvent = new EventEmitter<number>();
```
We'll receive the following data:

* ***pages:*** An integer number of pages that represents the number of pages of your content.
* ***currentPage:*** Remember that the logic of the pagination will depend on the component that implements the paginator. Thus, we'll be getting the current page.
* ***visiblePages:*** The visible pages will be a number that indicates the maximum number of pages to show. If the number of pages is greater than the number of visible pages, we'll be using the dots feature.

Now, we need to define the initial data:

```ts
fullPagesList: number[] = [];
pagesToShow: number[] = [];
pagesDifferential = 0;

ngOnInit(): void {
  this.pagesDifferential = Math.floor(this.visiblePages / 2);
  this.fullPagesList = Array.from({length: this.pages}).map((_, i) => i+1);
  this.definePagesButtons(this.currentPage);
}
```

I'm defining some global variables in order to manage the state of the paginator.
Then, on the ```OnInit``` I'm calculating the differential pages in order to know into how many parts I should split the pages.

Also, I'm creating an array using the ```Array.from``` function in order to generate an array based on a number.

```ts
Array.from({length: 3}).map((_, i) => i+1); // ===> [1,2,3]
```

Finally, I'm calling the ```definePageButtons``` function with the current page:

```ts
definePagesButtons(page: number): void {
  if(this.pages > this.visiblePages) {
    let pagesArray = [...this.fullPagesList];

    pagesArray = [...pagesArray.slice(page - 1, pagesArray.length)];

    if(pagesArray.length > this.visiblePages) {
      pagesArray = [
        ...pagesArray.splice(0, this.pagesDifferential), 
        -1, 
        ...pagesArray.splice(pagesArray.length - this.pagesDifferential, pagesArray.length)
      ];
      this.pagesToShow = pagesArray;
    } else if(pagesArray.length === this.visiblePages) {
      pagesArray = [
        -1, 
        ...pagesArray.splice(0, this.pagesDifferential), 
        ...pagesArray.splice(pagesArray.length - this.pagesDifferential, pagesArray.length)
      ];
      this.pagesToShow = pagesArray;
    }
  } else {
    this.pagesToShow = [...this.fullPagesList];
  }
}
```

This function will be responsible for defining how the data will look to the ```*ngFor```.

There´s an example of a possible output:

```ts
// pages: 10,
// visiblePages: 4,
this.definePagesButtons(1);
// output: [1,2,-1,9,10]
```

As I mentioned before, the ```-1``` will render the dots variation on the ```page-button``` component.

Last, but not least, we need to define a couple of public functions in order to call the necessary process after clicking on a page button.

```ts
goToPage(page: number): void {
  if(!page) return;
  this.gotToPageEvent.emit(page);
  this.definePagesButtons(page);
}

goToPageFromArrow(arrow: 'left' | 'right'): void {
  if(arrow === 'left') {
    this.gotToPageEvent.emit(this.currentPage - 1);
    this.definePagesButtons(this.currentPage - 1);
  } else {
    this.gotToPageEvent.emit(this.currentPage + 1);
    this.definePagesButtons(this.currentPage + 1);
  }    
}
```

These functions are too basic; ```goToPage``` will be called after clicking on a specific page number.
And ```goToPageFromArrow``` will be called after clicking on an arrow button. And the process is just controlling the current page variable.

You can see the entire code for this component, including the ```scss``` in [here.](https://github.com/Andres2D/berserk-angular/tree/paginator/src/app/paginator).

1. Implementing the paginator

Now, we could implement the paginator from another component. I'l be using the ```app.component``` to call it.

```app.component.html```
```html
<app-paginator 
  [pages]="10"
  [currentPage]="1"
  [visiblePages]="4">
</app-paginator>
```

Then, the component should look like this:

![paginator-bad-preview](paginator-bad-preview.gif=600x287)

As you can tell, the layout looks good. However, it is not working properly. That's because we haven't added the pagination logic to ```app.component```.

```ts
export class AppComponent implements OnInit {
  title = 'paginator';
  pages: number = 0;
  currentPage: number = 1;

  ngOnInit(): void {
    this.pages = 10;
  }

  changePage(page: number): void {
    if(page === this.currentPage) {
      return;
    }
    this.currentPage = page;
  }
}
```

```html
<app-paginator 
  [pages]="pages"
  [currentPage]="currentPage"
  [visiblePages]="4"
  (gotToPageEvent)="changePage($event)">
</app-paginator>
```

Now, it should work just fine:

![paginator-good-preview](paginator-good-preview.gif=600x287)

1. Finally, let's implement the paginator with real content management:

I'm going to test this feature using just a collection of boxes. Like this:

```html
<div class="container">
  <section class="content">
    <ng-container *ngFor="let box of contentToShow">
      <div class="box">Box {{box}}</div>
    </ng-container>
  </section>
  <app-paginator 
    [pages]="pages"
    [currentPage]="currentPage"
    [visiblePages]="2"
    (gotToPageEvent)="changePage($event)">
  </app-paginator>
</div>
```

I'm just iterating over a list and displaying ```divs``` with a simple design:

```ts
export class AppComponent implements OnInit {
  title = 'paginator';
  pages: number = 0;
  contentPerPage = 4;
  currentPage: number = 1;
  content = Array.from({length: 20}).map((_, i) => i+1);
  contentToShow: number[] = [];

  ngOnInit(): void {
    this.pages = Math.floor(this.content.length / this.contentPerPage);
    this.contentToShow = [...this.content].splice(0, this.contentPerPage);
  }

  changePage(page: number): void {
    if(page === this.currentPage) {
      return;
    }
    this.contentToShow = [...this.content].splice((this.contentPerPage * page) -  this.contentPerPage, this.contentPerPage);
    this.currentPage = page;
  }
}

```

Also, I'm using simple logic to choose which part of the entire content should be displayed.
With this simple code:
```ts
this.contentToShow = [...this.content].splice((this.contentPerPage * page) -  this.contentPerPage, this.contentPerPage);
```

Then, the final app should look something like this:

![paginator-implementation](paginator-implementation.gif=600x553)

## Summary
* We just created a nice paginator component using just angular components.
* This approach can be adapted for any kind of implementation, due to the fact that the main logic can be adapted for any kind of source content. Like:
  * Static content.
  * Content from APIs that uses pagination systems from backend.
  * Implementations with observables to manage data persistence.

## Final thoughts

This code is an initial purpose for a pagination system, which means the source code could change in the future in order to improve the implementation. Please, clone the repository and try to improve this code. All the information about this implementation can be found [here.](https://github.com/Andres2D/berserk-angular/tree/paginator)


Angular custom paginator


Jest is the best option to test your old and new projects. Compared to the graphic web interface that Karma & Jasmine offer, 
Jest implements a completely command-line interface, making it the quickest way to test your components.

On the other hand, Karma & Jasmine are completely joined to the Angular framework, and to some extent, the documentation and the community
It's pretty good. However, Jest is used by multiple JavaScript frameworks, and the community and documentation are so extensive.

Your projects will use Karma and Jasmine by default if you use the [Angular schematics](https://angular.io/guide/schematics). However, the migration is pretty simple. Let's check what we need to do:

For this example, I'm going to use a basic Angular project created with the `ng new` schematics:

Then, if I run the command:
```bash
npm run test
```
I'll get:

![Karma preview](karma-preview.png=996x429)

As you can see, all my test cases are running and passing without any problems. The idea at the end
of the migration is to get the same result but using Jest.


1] Let's install jest as a dev dependency:

```bash
npm install jest jest-preset-angular --save-dev
```

2] Let's create the Jest config file

In your root folder, create a file called: `jest.config.js` and add the following configuration:

```javascript
module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  collectCoverage: true,
  coverageReporters: ['text'],
  roots: ['<rootDir>/src/'],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
  collectCoverage: true,
  coverageReporters: ['html', 'text']
};
```

This configuration will show all the relevant information on the command line when you run the test command.

3] In your `package.json` let's update the test script:
```json
{
  ...
  "scripts": {
    ...
    "test": "jest"
    ...
  },
  ...
}
```

4] Update the global test file. Go to `src/test.ts` and replace all the content with:
```ts
import 'jest-preset-angular/setup-jest';

Object.defineProperty(window, 'CSS', {value: null});
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance']
    };
  }
});

Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>'
});

Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true
    };
  }
});
```

This file will refer to Jest and not to Karma.

5] Uninstall Karma & Jasmine
In order to get rid of all the Karma & Jasmine dependencies let's run:
```bash
npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter
```

6] Finally, you could delete the `karma.conf.js` file.

Now, let's run:
```bash
npm run test
```

And you should get something like this:

![Jest tests](jest-tests.gif=600x406)

That's it, we just migrate Jest into an existing Angular project. All the code can be found in this
[Repository](https://github.com/Andres2D/angular-jest-migration). Go to the branch `jest-migration` to see the final result.

:)


Migrating Jest into an Angular Project


Programming is not just about writing complex code in a text editor; it's about creating something special in order
to solve a problem or fulfill a need. As well as writing code that works, we also be aware of how to write code that is easy
to understand and easy to escalate.

Let's review five key concepts to help you write better code.

## 1] Don't compress your code, webpack will do that for you

Let's see the following code:
```js
// * Please don't do this *
// This is the object to store a office reservation state
let ofcSts = { ena: true, resBy: '' };

// This function is used to reserve the office sending an user
const resOfc = (u) => { if(ofcSts.ena) { ofcSts = { ena: false, resBy: u } } else { return; } };

resOfc('Mike');
console.log(ofcSts);
```
First, they are defining an object using abbreviations in the name and the property names.
In order to 'reduce' code. Then, we can see a function with a condition and an object operation
all in the same line.

This code works, but we are using useless var names. When I see this kind of code, I just think
it was generated automatically by some kind of complex script. Is completely incomprehensible.

You may be thinking that the comments should clarify the code proposal. But, we just get more annoying words in the code. 
**Remember that our code should be clear enough to avoid writing comments.**  

Let's improve this code:
```js
// Do this instead
let officeStatus = { 
  enabled: true, 
  reservedByUser: '' 
};

const reserveOffice = (user) => { 
  if(officeStatus.enabled) { 
    officeStatus = { 
      enabled: false, 
      reservedByUser: user 
    } 
  } else {
    return;
  }
};

reserveOffice('Mike');
console.log(officeStatus);
```
The code looks longer, but don't worry about that. `webpack` will compress it for you in build time.

## 2] Make it easier to return

Let's check the following piece of code:
```js
// * Please don't *
const findBook = (bookId) => {
  if(bookId !== undefined || bookId !== null) {
    const book = {
      id: bookId,
      name: 'Book title'
    };
    return book;
  } else {
    return null;
  }
};
```

You may think that there's nothing wrong with this code, and you're right. The code is easy
to understand and works. Nevertheless, this code could be improved by inverting the condition logic.

First, let's check if the input data is wrong. Then let's work with the certainty that the data is correct.
Like this:

```js
// * Do this instead *
const findBook = (bookId) => {
  if(!book) {
    return null;
  }

  const book = {
    id: bookId,
    name: 'Book title'
  };
  return book;
};
```

Writing code is like writing a book. You could say that ```If the book is not undefined or if the book is not null, return the book's information otherwise return null```,
or you could say ``` If there isn't a book, return null, otherwise return the book```. Both cases do the trick, but which is more easier to read?

## 3] Please don't repeat yourself

The DRY principle is applicable to all kinds of code. Nevertheless, let's see the following case:
```js
// * Please don't *
const invitationList = ['Kevin', 'Sara', 'Steve', 'Karen'];
const capacity = 10;

const getPartyAccess = (person) => {
  if(invitationList.length < capacity && invitationList.includes(person.name)) {
    return 'Access granted';
  }

  if(invitationList.length < capacity && person.hasMoney()) {
    return 'Access granted';
  }

  return 'Access denied';
};

const verificationBad = getPartyAccess(
  { 
    name: 'Andres', 
    hasMoney: () => { return false } 
  }
);
console.log(verificationBad);
```
In `getPartyAccess` we can see two things that are repeated: `invitationList.length < capacity` and `return 'Access granted';`.
Therefore, this code could be improved.

Let's refactor the code to:
```js
// Do this instead
const getPartyAccess = (person) => {
  if(invitationList.length < capacity 
    && (invitationList.includes(person.name) || person.hasMoney())) {
    return 'Access granted';
  }

  return 'Access denied';
};

const verification = getPartyAccess({ name: 'Andres', hasMoney: () => { return false } });
console.log(verification);
```
We are reducing the two `if` conditions to just one single condition. Also, we are integrating
the positive return value once.

Remember, if you see duplications in your code, you are doing something wrong.

## 4] Get used to destructuring
Destructuring is one of the most popular features of ES. This is just syntactic sugar
that helps us write better code. Let's see:

```js
// * Please don't *
const client = {
  name: 'Andres',
  budget: 1000,
  references: ['Nicolas', 'Ellen']
}

const verifyCreditBad = (client) => {
  if(client.budget > 500 && client.references.length === 2) {
    return {
      name: client.name,
      approved: true,
      mainContact: client.references[0],
      optionalContact: client.references[1]
    }
  } else {
    return {
      approved: false
    }
  }
};

console.log(verifyCreditBad(client));
```
Just as the DRY principle explained in the last example, we can see that we are repeating the word  `client` a lot.
Let's use destructuring to fix it.

```js
// Do this instead
const verifyCredit = (client) => {

  const { budget, references, name } = client;
  const [ mainReference, optionalReference ] = references;

  if(budget > 500 && references.length === 2) {
    return {
      name,
      approved: true,
      mainContact: mainReference,
      optionalContact: optionalReference
    }
  } else {
    return {
      approved: false
    }
  }
};

console.log(verifyCredit(client));
```
In line `4`, we are using object destructuring to get all the values of the object in order
to get rid of the word `client` in the assignment of the values.

Also, we are using array destructuring based on positions to get the two only values
of the references array.

And with a single destructuring process, we improve the code readability.

## 5] The fewer the switches, the better

This final concept is more of an alternative to the  `switch` than a code improvement.
Let's see what this is about:

```js
const executeAction = (action) => {
  switch(action) {
    case 'create':
      return {
        created: true,
        message: 'Item created successfully'
      };
    case 'delete': {
      return {
        deleted: true,
        message: 'Item deleted successfully'
      }
    }
    case 'update': {
      return {
        updated: true,
        message: 'Item updated successfully'
      }
    }
    default: {
      return {
        error: true,
        message: 'Invalid action'
      };
    }
  }
};

console.log(executeAction('sd'));
```
Like I just said, there is nothing wrong with this piece of code. Lastly, I'm trying to avoid
this kind of code. Instead, we could create an object map. Like this:

```js
const actionMap = {
  create: () => {
    return {
      created: true,
      message: 'Item created successfully'
    }
  },
  delete: () => {
    return {
      deleted: true,
      message: 'Item deleted successfully'
    }
  },
  update: () => {
    return {
      updated: true,
      message: 'Item updated successfully'
    }
  }
}

const executeActionMap = (action) => {
  if(!Object.keys(actionMap).includes(action)) {
    return {
      error: true,
      message: 'Invalid action'
    };
  }

  return actionMap[action]();
}

console.log(executeActionMap('create'));
```
In this code, we are just creating an object with the different options
as keys. Then, we can just select the action searching in the object by key.

## Summary
This was just a couple of concepts to improve our code, but there is more.
Always remember:
 - Don't use abbreviations.
 - Reduce the complexity of your conditions.
 - Don't repeat yourself
 - Use more destructuring

Thanks. You can see the full code in this [repository](https://github.com/Andres2D/berserk-javascript/blob/main/general/clean-code.js).


Javascript Better Code


When you are working on a page with a lot of content to show, such as a list of news or a list of books or posts, you probably don't want to load all your content at the same time. Thus, you may want to load the content by sections. However, a pagination system could be great here.

However, pagination is a complex feature to implement in the backend and frontend, and having a page selector adds  more work for the user when they are trying to navigate through the content.

On the other hand, we could implement something called `infinite scroll`. This feature, allow the user to go through your page loading the content when is scrolling down. Facebook, Twitter & Instagram use infinite scroll in order to show the content in the application.

Now, let's implement this feature in Angular.

# The base code

The application is very simple; we only have a list of cards displaying a sequence of numbers:

```ts
export class AppComponent implements OnInit {
  title = 'Infinite scroll';

  content: number[] = [];

  ngOnInit(): void {
    this.loadContent();
  }

  loadContent(): void {
    Array.from({length: 10}).forEach(() => {
      this.content.push(this.content.length + 1);
    });
  }
}
```

```markup
<div class="container">
  <div class="card" *ngFor="let number of content">
    {{number}}
  </div>
</div>
```

![Without infinite scroll](sample-app.gif=560x732)

So far, it finished at number 10. However, the idea is to load new content when the user scrolls down. 

Let's do it.

# The HostListener

Firstly, let's add a decorator [@HostListener](https://angular.io/api/core/HostListener#description) function in the `app.component.ts` file in order to listen to a DOM event, the `window:scroll` event.
Then, inside of the function, let's print the following values:

```ts
@HostListener('window:scroll')
onWindowsScroll() {
  console.log(window.innerHeight);
  console.log(window.scrollY);
  console.log(document.body.scrollHeight);
}
```

We have access to the values because they are part of the global object of JavaScript, which is called window in the browser.

And we got:

![Global object consoles](consoles.gif=600x603)

# The calculation

As you can see, the last 3 values are: `innerHeight: 696`, `scrollY: 370` & `scrollHeight: 1050`.
Then, if we sum `innerHeight` and `scrollY` we get: `1060` when the scroll is at the bottom of the page.

With these numbers, we could know that if `innerHeight + scrollY > scrollHeight` we need to request more data.
So let's add this condition.

```ts
import { Component, HostListener, OnInit } from '@angular/core';
...
@HostListener('window:scroll')
onWindowsScroll() {
  if(window.innerHeight + window.scrollY >= document.body.scrollHeight){
    console.log('Send request');
    this.loadContent();
  }
}
```

Let us demonstrate: 

![Infinite scroll](infinite-scroll.gif=600x603)

You can notice that the scroll resizes due to the change in the `scrollHeight` because we are loading more content to the page.

# Summary

We just implemented an infinite scroll using just a decorator from `@angular/core`. This feature is a good alternative to the 
old pagination approach.

Give it a shot.

You can see the full code in this [repository](https://github.com/Andres2D/berserk-angular/tree/infinite-scroll).


Angular infinite scroll


We'll create a react project to customize a profile avatar image. This avatar will be rendered as a card, and we will be able to customize some graphical aspects such as the pose and expressions with a basic form.We are going to use the [avatar-generator](https://getavataaars.com/) API. This API receives query parameters to return a specific character. You can see the final result [here](https://github.com/Andres2D/berserk-react/tree/custom-avatar).

Let's begin.


First, let's analyze the requirements to render an avatar.
To request an avatar, we just need to get from this base url `https://avataaars.io/?avatarStyle=Transparent` then we send query parameters
to set the avatar properties. For example:

* To set the hair style: `topType=value`
* To set the hair color: `hairColor=value`
* To set the clothing type: `clotheType=value`
* To set the eye type: `eyeType=value`
* To set the mouth type: `mouthType=value`

Now, let's build our setting card.

First, we build our `form.js` component:

```js
import { useEffect, useState } from 'react';

const Form = (props) => {

  const [form, setForm] = useState({
    topType: 'ShortHairShortFlat',
    hairColor: 'Black',
    eyeType: 'Default',
    mouthType: 'Default',
    clotheType: 'Hoodie',
  });

  return <p>form</p>;
}

export default Form;

```
As you can see in the code above, we define a state to manage the form values, but you could use
`useRef` or a hook to manage them.

Every state key should correspond to the queryParams specifications for the avatar in order to match the values
in advance.

Now, let's return the JSX code:

```jsx
  return (
    <form className={styles.form}>
      <div className={styles.group}>
        <label>Hair</label>
        <select 
          className={styles.selector}
          onChange={changeHandler} 
          name='topType'
          value={form.topType}
        >
          <option value='ShortHairTheCaesar'>Short</option>
          <option value='ShortHairDreads01'>Medium</option>
          <option value='LongHairBigHair'>Long</option>
        </select>
      </div>
      <div className={styles.group}>
        <label>Hair color</label>
        <select 
          className={styles.selector}
          onChange={changeHandler} 
          name='hairColor'
          value={form.hairColor}
          >
          <option value='Black'>Black</option>
          <option value='Blonde'>Blonde</option>
          <option value='Red'>Red</option>
        </select>
      </div>
      <div className={styles.group}>
        <label>Eyes</label>
        <select 
          className={styles.selector}
          onChange={changeHandler} 
          name='eyeType'
          value={form.eyeType}
        >
          <option value='Default'>Neutral</option>
          <option value='Close'>Close</option>
          <option value='Wink'>Wink</option>
        </select>
      </div>
      <div className={styles.group}>
        <label>Mouth</label>
        <select 
          className={styles.selector}
          onChange={changeHandler} 
          name='mouthType'
          value={form.mouthType}
        >
          <option value='Smile'>Smile</option>
          <option value='Serious'>Serious</option>
          <option value='Default'>Neutral</option>
        </select>
      </div>
      <div className={styles.group}>
        <label>Clothes</label>
        <select 
          className={styles.selector}
          onChange={changeHandler} 
          name='clotheType'
          value={form.clotheType}
        >
          <option value='Hoodie'>Hoodie</option>
          <option value='ShirtCrewNeck'>Shirt</option>
          <option value='BlazerSweater'>Blazer</option>
        </select>
      </div>
    </form>
  );
```

As you see, I'm repeating the select inputs and matching the values with the state keys.
It's better to use an isolated component to manage the select functionality, but in this
basic example it's OK.

Now, let's create the `changeHandler` method

```jsx
const changeHandler = (evt) => {
  setForm(current => {
    return {
      ...current,
      [evt.target.name]: evt.target.value
    }
  });
};
```
The spread operator is used to update the specific key state but without deleting the other keys.
This is an approach to managing forms in React

Finally, let's communicate these state changes to the parent component through props:

```jsx
useEffect(() => {
  props.onUpdate(form);
}, [form, props]);
```

We need to use `useEffect` hook to emit every state change.

Now let´s work on the main `avatar.js` component:

```jsx
import { useState } from 'react';
import styles from './avatar.module.css';
import Form from './form';

const Avatar = () => {

  const updateAvatarHandler = (queries) => {
    // set avatar
  }

  return (
    <div className={styles.card}>
      <img 
        className={styles.image}
        alt='avatar'
        src=''
      />
      <Form 
        onUpdate={updateAvatarHandler}
      />
    </div>
  );
};

export default Avatar;
```

This component is pretty simple. We just rendered a card with an image tag and the `form.js` component.
So far, it looks like this:

![Avatar card](avatar-card-1.png=534x656)

Finally, let's add the logic to render the avatar.

First, let's add an initial avatar, creating a default url:

```jsx
const defaultAvatar = `https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortFlat&hairColor=Black&clotheType=Hoodie&eyeType=Default&mouthType=Default`;

```

And, we should create a state to manage the image src:

```jsx
  const [avatar, setAvatar] = useState(defaultAvatar);
```

Then, in the `<img />` tag:

```jsx
<img 
  className={styles.image}
  alt='avatar'
  src={avatar}
/>
```

Now, the card should look like this:

![Avatar card](avatar-card-2.png=534x656)

To finish, let's add some logic in the `updateAvatarHandler` method:

```jsx
const updateAvatarHandler = (queries) => {
  const newQueryArr = Object.entries(queries).map((query) => {
    return `${query[0]}=${query[1]}`;
  });
  setAvatar(`https://avataaars.io/?avatarStyle=Transparent&clotheColor=Blue03&${newQueryArr.join('&')}`);
}
```

In this method, we are receiving an object with the keys and values needed to set the avatar through queryParams: So we just need to use `Object.entries` to get an array and the `.map()` method to evaluate the values and create a new array for each queryParam.

To finish, we call `setAvatar` method to update the src element in the image, and, using the .join method in the new array, we convert the array to a string separated by the `&` symbol in order to separate the different queryParams.

That's all. The final app should work like this:

![Avatar card](final-result.gif=534x656)

## Summary
In this project, we learned how to create a basic application
to customize an avatar using React and [avatar-generator](https://getavataaars.com/)

You can find the code [here](https://github.com/Andres2D/berserk-react/tree/custom-avatar)


Customizing an avatar with React


Let's create an async input using Angular and `rxjs`

## First, let's see what the problem is 
Imagine that you have an input in your web page to consult against a large database of names. When the user types in the input, we should show an autocomplete list according to the text provided by the user.

The question is, When should we send the request to the API to get the autocomplete data?

Well, one option is to send the request with every keystroke of the user. But, as frontend developers, we need to minimize the requests to the backend in order to keep the application optimized. So, what can we do?


Follow this article to find out the solution:

## Creating the input

In the `app.module.ts` let's add the ReactiveFormsModule
```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
Now, we can use the ReactiveForms features in our `AppComponent`


Next step, create the form control in `app.component.ts` and 
subscribe to valueChanges Observable
```ts
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  bigInput: FormControl = new FormControl('');

  ngOnInit(): void {
    this.bigInput.valueChanges.subscribe((value: string) => {
      console.log('Value: ', value);
    });  
  }
}
```

Finally, let's render the component

```markup
<div class="container">
  <input 
    class="big-input"
    placeholder="Type a text"
    [formControl]="bigInput"
  />
</div>
```

As you can see, we are using the `formControl` attribute to reference the input with the 
control created in the `app.component.ts` file.

And when we type in the input, we can see the result on the console, something like this

```bash
a
an
and
andr
andre
andres
```
Perfect, you just created a functional two-way bound data input.


## Using rxjs operators
As we can see in the last picture, the user types "Andres". Then, we want to send the request to the backend when the user stops typing.
So, how do we know that the user has stopped typing? Well, it is here where `rxjs` helps.


First, let's import two methods into our `app.component.ts` file:
```ts
import { debounceTime, distinctUntilChanged } from 'rxjs';
```

* debounceTime:
This operator only emits the most recent emission after a delay time. We define the delay time.
This operator is very useful because we only need the word 'andres'. We don't need 'a' or 'an' or 'and'.


* distinctUntilChanged:
This operator avoids getting repeated values between emissions. Hence, if we already requested data from 'andres' and the user deleted the 's' and immediately added the 's' again, we don't want to create the request again, right?.

## Applying the operators
Now, these operators are going to be applied to the `valueChanges` subscription. Like this:

```ts
 this.bigInput.valueChanges
    .pipe(
      debounceTime(2000),
      distinctUntilChanged()
    )
    .subscribe((value: string) => {
      console.log(value);
    });
```
As you can see, we are adding the `pipe` method before the subscription to apply the rxjs operators.
Also, we are setting the `debounceTime` with a time of `2000`, which means 2 seconds.

Eventually, if we try to fill the input again with the word 'andres' after 2 seconds, we will see in the console:

```bash
andres
```
a single log.

That's perfect. We just created an async input and now we can send the request to the backend.

Finally, in the subscribe, let's add some basic validation: 

```ts
ngOnInit(): void {
  this.bigInput.valueChanges
  .pipe(
    debounceTime(2000),
    distinctUntilChanged()
  )
  .subscribe((value: string) => {
    if(!value || value.trim() === ''){
      return;
    }
    // create fetch to backend in here
  });
}
```

## Summary
Well, that's all folks.
We learn how to create an async input in Angular using subscription operators.
You can find the [repository](https://github.com/Andres2D/berserk-angular/tree/async-input) with all this code implemented.

Please go to the 'contact' section if you have any input about this article.
Happy Coding.

References:
* [debounceTime](https://rxjs.dev/api/operators/debounceTime)
* [distinctUntilChanged](https://rxjs.dev/api/operators/distinctUntilChanged)


Async Input with Angular & RXJS


Let's explain how to use a resolver with a basic Angular application.

## What's the matter?
Well, frequently our pages get the content from an API, and the API response takes some time.
Therefore, we are forced to use a loading page or spinner while the data is completely resolved.

However, there is another way to handle this behavior.

## Using resolvers
Angular has this amazing feature called `resolver` which helps us to handle the time between the redirection to a page
and the resolution of the necessary data to render the page.

Angular prevents the load of the page until the data is completely resolved. Thus, our component is always first rendered with
all the data.

## Let's see it in action.
In this example, I'll be using a main page with a button that redirects to another page with fake content.

![Basic redirect](gif-initial.gif)

First, we need to create a new resolver in our Angular application.
Run the following command:
```bash
$ ng n resolver article
```

Then, the new resolver should look like this

```ts
import { Injectable } from '@angular/core';
import {
  Router, Resolve,
  RouterStateSnapshot,
  ActivatedRouteSnapshot
} from '@angular/router';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ResolverResolver implements Resolve<boolean> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return of(true);
  }
}

```
As you can see, it's just a service class which implements a `Resolve` class with the resolve `method`.
By default, the resolve is of type `Observable`. But, you could return a `Promise` too.
In addition, the resolve method has the `route` and `state` parameters in case you need to use them.
For example, to get a param id or get the current state.

However, we don't need to use them. So, replace the code with:

```ts
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { delay, Observable, of } from 'rxjs';
import { article } from './constants/article-mock';
import { Article } from './interfaces/article.interface';

@Injectable({
  providedIn: 'root'
})
export class ArticleResolver implements Resolve<Article> {
  resolve(): Observable<Article> {
    return of(article).pipe(
      delay(2000)
    );
  }
}
```
In this example, it's quite simple. We get rid of all the useless imports.
And, we are returning and `Observable` with the `of` operator with a mock data set 
that contains an object with `{title: string; content: string; author: string}`.
But, in a real application, you should return the API request.

Also, we are using the `pipe` and the `delay` operators to simulate a slow request to the backend
in order to show you how the new page wouldn't be rendered until this resolve is finished.


Now, let's utilize this new resolver.
In the `app-routing.module.ts` file, let's add a configuration in our component `Route`

```ts
import { ArticleResolver } from './article.resolver';

const routes: Routes = [
  {
    path: 'main',
    component: MainComponent
  },
  {
    path: 'fake-page',
    component: FakePageComponent,
    resolve: { article: ArticleResolver }
  },
  {
    path: '**',
    pathMatch: 'full',
    redirectTo: '/main'
  }
];
```
In short, we are only adding a `resolve` property in the `fake-page` configuration, which it's just
with our resolve class in and object with any name, in this case article

Now, if we try to navigate to `localhost:4200/fake-page`, this redirection should take 2 seconds. Due to the `delay(2000)`.

![Basic redirect](gif-second.gif)

Next, let's get the data from the `fake-page.component.ts` file:

```ts
export class FakePageComponent implements OnInit {

  article?: Article;

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit(): void {
    const { article } = this.activatedRoute.snapshot.data;
    this.article = article;
  }
}
```
To achieve this, we need to inject `ActivatedRoute` because it is in this class where our resolved data lives.

And, in order to get the resolved data, we can destructure it from `const { article } = this.activatedRoute.snapshot.data;` 
because we name it article in the routing configuration.

Finally, we only need to render the content of our page in the `fake-page.component.html` file:

```markup
<section class="container">
  <h1>{{article?.title}}</h1>
  <article class="article">
    {{article?.content}}
  </article>
  <p class="author">- by {{article?.author}}</p>
</section>
```

And this should be the final behavior.

![Basic redirect](gif-final.gif=560x732)

## Summary
We just learned how to implement the resolve Class in a simple Angular application.
We learn, that we only prevent the new page from being redirected until the asynchronous data is resolved.
You can find the repository of this example in [here](https://github.com/Andres2D/berserk-angular/tree/resolver).

References:
* [resolver](https://angular.io/api/router/Resolve)
* [delay](https://rxjs.dev/api/operators/delay)


Using resolvers in Angular

In the last [post](https://2d-blog-nextjs.vercel.app/posts/angular-resolvers), we learned how to use resolvers to load asynchronous content in a simple application.
Now, let's use the same example. But, working with skeletons.

## Wait a second. Skeletons?
Yeah, skeletons, it's just a feature that we can implement to show a preview of content before the real content loads.
This content is commonly a grey section, which simulates the shape of the real content on the page. Let's see an example.

![Youtube skeleton](youtube-skeleton.jpeg=744x640)

As you can tell, YouTube uses a skeleton when the real video data is loading.

Now, let's implement this feature in our articles project. Firstly, let's review the current behavior
when we go to the `localhost:4200/fake-page` route.

![Without skeleton](without-skeleton.gif=560x732)

As you can see, there is a moment while the data is being resolved from the API (in this case I just use a `setTimeout` to simulate the backend delay)
where the page doesn't show anything. Consequently, we are creating a bad experience for the user.

## Implementing skeletons
To implement the skeletons in an application, we should be aware of what the real content looks like.
Next, we create a structure of `div` or other HTML tags that fits with the real content.

Let's do it.

In the `fake-page.component.html` let's add the skeleton section after the real content:
```markup

<section class="container">
  <h1>{{articleContent.title}}</h1>
  <article class="article">
    {{articleContent.content}}
  </article>
  <p class="author">- by {{articleContent.author}}</p>
</section>


<section class="container skeleton">
  <div class="title-skeleton"></div>
  <div class="content">
    <div class="text-skeleton"></div>
    <div class="author-skeleton"></div>
  </div>
</section>
```
In this code, we just replace the `<h1>`,`<article>` & `<p>` tags for `<div>` tags.
Meanwhile, in the `fake-page.component.scss` code:
```scss
.skeleton {
  .title-skeleton {
    width: 214px;
    height: 25px;
    margin-bottom: 30px;
    margin-top: 30px;
    border-radius: 4px;
    background-color: #EEEEF0;
  }
  
  .content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    
    .text-skeleton {
      width: 500px;
      height: 15px;
      background-color: #EEEEF0;
      border-radius: 4px;
      margin: 4px 0 4px 0;
    }
    
    .author-skeleton {
      border-radius: 4px;
      width: 130px;
      height: 15px;
      margin-top: 20px;
      background-color: #EEEEF0;
    }
  }
}
```

In this example, we are just converting `div` boxes into skeleton boxes using static `width` & `height` properties.
But, feel free to add your own values in `%`, `rem`.

With this code, the skeleton should look something like this:

![Basic skeleton](skeleton-base.png=560x290)

And, let's create an array in the `fake-page.component.ts` component to simulate multiple lines in the content.

```ts
skeletonContent: Array<any> = Array.from({length: 21});
```

And in the skeleton HTML let's update the `class='text-skeleton'` div
```markup
<div class="text-skeleton" *ngFor="let item of skeletonContent">
</div>
```


Now, if we compare the real content with the skeleton, we get:

![Comparison skeleton](skeleton-comparison.png=1075x373)

Finally, let's add some logic to decide if we load the real content or the skeleton.
Remember that we show the skeleton when we don't have the backend response yet.
Then, when we got the data, we should hide the skeleton and show the real content.

In the `fake-page.component.ts` let's add a getter:
```ts
get hasContent() {
  const { 
    title,
    content,
    author
  } = this.articleContent;
  return (title === '' || content === '' || author === '') ? false : true;
}
```
This method reviews if the backend data is loaded or not yet.

Now, in the `fake-page.component.html` file:
```markup
<section class="container" *ngIf="hasContent; else skeleton">
  <h1>{{articleContent.title}}</h1>
  <article class="article">
    {{articleContent.content}}
  </article>
  <p class="author">- by {{articleContent.author}}</p>
</section>

<ng-template #skeleton>
  <section class="container skeleton">
    <div class="title-skeleton"></div>
    <div class="content">
      <div class="text-skeleton" *ngFor="let item of skeletonContent"></div>
      <div class="author-skeleton"></div>
    </div>
  </section>
</ng-template>

```
In line 1, we add `*ngIf="hasContent; else skeleton"` an if-else condition.
If there is content, show the real content section, else show the skeleton section.

The final feature should look like this:

![With skeleton](with-skeleton.gif=560x732)

## Summary
We learned how to implement skeletons in a simple application, using div as a display block.
You can find the full code [here](https://github.com/Andres2D/berserk-angular/tree/skeletons).

Andres' Blog

All posts