DEV Community: Ariel Gueta

Caching HTTP Response in Angular with Cashew

Ariel Gueta — Sun, 01 Mar 2020 14:37:22 +0000

Cashew is a new library that provides seamless caching for HTTP responses in Angular.

Installation

npm install @ngneat/cashew

Usage

Inject the HttpCacheInterceptorModule module along with HttpClientModule in AppModule:

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpCacheInterceptorModule } from '@ngneat/cashew';

@NgModule({
  imports: [HttpClientModule, HttpCacheInterceptorModule.forRoot()],
  bootstrap: [AppComponent]
})
export class AppModule {}

And that's all. Now we can use the withCache function for any request we want to cache:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { withCache } from '@ngneat/cashew';

@Injectable()
export class TodosService {
  constructor(private http: HttpClient) {}

  getUsers() {
    return this.http.get('todos', withCache());
  }
}

Local Storage Support

The library also supports caching in localstorage:

import { HttpCacheInterceptorModule, useHttpCacheLocalStorage } from '@ngneat/cashew';

@NgModule({
  imports: [HttpClientModule, HttpCacheInterceptorModule.forRoot()],
  providers: [useHttpCacheLocalStorage],
  bootstrap: [AppComponent]
})
export class AppModule {}

For more information, check out the docs.

Implement Cross Component Validation in Angular Forms using Akita

Ariel Gueta — Mon, 08 Jul 2019 16:02:29 +0000

In this article, I want to show you how you can use AkitaFormsManager plugin and achieve the same result (and more) described in this ngrx article.

The Plugin Abilities

Persist Forms - Automatically saves the current control value and update the form value according to the value in the store when the user navigates back to the form.
Provides an API so we can query a form’s values and properties from anywhere. This can be useful for things like multi-step forms, cross-component validation, and more.

Installation

npm i @datorama/akita-ng-forms-manager

Create the Routes

We will have two pages, one is PersonPage and the second is ConfigPage:

const routes: Routes = [
  {
    path: '',
    component: PersonComponent,
    pathMatch: 'full'
  },
  {
    path: 'config',
    component: ConfigComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

The Person Component

Now let's create the PersonComponent form component:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { AkitaNgFormsManage } from '@datorama/akita-ng-forms-manager';

@Component({
  selector: 'person-form',
})
export class HomeComponent implements OnInit, OnDestroy {
  person = new FormGroup({
    firstName: new FormControl(),
    lastName: new FormControl(),
    age: new FormControl(21, Validators.required)
  });

  constructor(private formsManager: AkitaNgFormsManager) {}

  ngOnInit() {
    this.formsManager.upsert('person', this.person);
  }

  ngOnDestroy() {
    this.formsManager.unsubscribe();
  }
}

and the template:

<form [formGroup]="person">
  <input formControlName="firstName" placeholder="First Name" />
  <input formControlName="lastName" placeholder="Last Name" />
  <input
    formControlName="age"
    placeholder="Age"
    type="number"
    [ngStyle]="person.invalid && { border: '1px solid red' }"
  />
</form>

My favorite part of this plugin is that we still work with the existing Angular API to create our form.

We created a basic reactive form group which contains the person's details. We are injecting the AkitaNgFormsManager and calling the upsert method, giving it the form name and the formGroup.

From that point on, AkitaNgFormsManager will track the form value changes and update the store accordingly. It also persists the form state when the user navigates back to the form.

We can also see everything in the dev-tools:

The Config Component

Now, let's create the ConfigComponent:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { AkitaNgFormsManager } from '@datorama/akita-ng-forms-manager';

@Component({
  selector: 'app-config',
  templateUrl: './config.component.html',
  styleUrls: ['./config.component.css']
})
export class ConfigComponent implements OnInit, OnDestroy {
  config = new FormGroup({
    minAge: new FormControl(21)
  });

  constructor(private formsManager: AkitaNgFormsManager) {}

  ngOnInit() {
    this.formsManager.upsert('config', this.config);
  }

  ngOnDestroy() {
    this.formsManager.unsubscribe();
  }
}

Same as before, we create a FormGroup which contains one FormControl - the minimum age that the user is required to type at the PersonComponent form. We also register the form with the AkitaNgFormsManager so we can query it from any other component in our application.

Cross Component Validation

Now, let's go back to the PersonComponent and see how we can make the age control validation dynamic based on the minAge control value:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { AkitaNgFormsManager, setValidators } from '@datorama/akita-ng-forms-manager';

export class HomeComponent implements OnInit, OnDestroy {
  person = new FormGroup({
    firstName: new FormControl(),
    lastName: new FormControl(),
    age: new FormControl(21, Validators.required)
  });

  dispose;

  constructor(private formsManager: AkitaNgFormsManager) {}

  ngOnInit() {
    this.formsManager.upsert('person', this.person);

    this.dispose = this.formsManager.selectValue<number>('config', 'minAge')
      .subscribe(minAge => {
        setValidators(this.person.get('age'), [Validators.min(minAge)]);
      });
  }

  ngOnDestroy() {
    this.formsManager.unsubscribe();
    this.dispose.unsubscribe();
  }
}

We can query any form that is registered in AkitaNgFormsManager. In our case, we use the selectValue method passing the form name and the form field we need. Note that we also can infer the value using a generic.

Now the only thing that is left is to call the setValidators method (provides by the plugin) passing the control and a Validators array.

To preserve existing validators, we can do:

this.dispose = this.formsManager.selectValue<number>('config', 'minAge')
 .subscribe(minAge => {
  const age = this.person.get('age');
  const validators = age.validator;
  setValidators(age, [...validators, Validators.min(minAge)]);
});

Introducing One To Many Relationship in Angular & Akita

Ariel Gueta — Mon, 17 Jun 2019 10:43:39 +0000

In this article, I will show you how to create a blog with Angular and Akita. Along the way, we will learn about two strategies we can use to manage One-to-many relationships with Akita.

Our demo application will feature the main page where we show the list of articles and an article page where we show the complete article with its comments. We will add the functionality to add, edit and remove a comment. So our One-to-many relationship, in this case, is "an article has many comments" or "a comment belongs to an article".

Let's see how we tackle this, but first, let's see the response shape we get from the server:

[{
  id: string;
  title: string;
  content: string;
  comments: [{
    id: string;
    text: string;
  }]
}]

We get an array of articles, where each article holds its comments in a comments property.

Strategy One - Unnormalized Data

We will start by looking at the unnormalized data version. This means that we will use the server response as is without modifying it. We will use one store, i.e., an ArticleStore that will store the article and its comments. Let's see it in action.

First, we need to add Akita to our project:

ng add @datorama/akita

The above command adds Akita, Akita's dev-tools, and Akita's schematics into our project. The next step is to create a store. We need to maintain a collection of articles, so we scaffold a new entity feature:

ng g af articles

This command generates a articles store, a articles query, a articles service, and an article model for us:

// article.model

import { ID } from '@datorama/akita';

export interface ArticleComment {
  id: ID;
  text: string;
}

export interface Article {
  id: ID;
  title: string;
  content: string;
  comments: ArticleComment[];
}

// articles.store
export interface ArticlesState extends EntityState<Article> {}

@Injectable({ providedIn: 'root' })
@StoreConfig({ name: 'articles' })
export class ArticlesStore extends EntityStore<ArticlesState, Article> {
  constructor() { super() }
}

// articles.query
@Injectable({ providedIn: 'root' })
export class ArticlesQuery extends QueryEntity<ArticlesState, Article> {

  constructor(protected store: ArticlesStore) {
    super(store);
  }
}

Now, let's define our routes:

const routes: Routes = [
  {
    component: HomePageComponent,
    path: '',
    pathMatch: 'full'
  },
  {
    component: ArticlePageComponent,
    path: ':id'
  }
];

Let's create the HomePageComponent:

@Component({
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {
  articles$ = this.articlesQuery.selectAll();
  loading$ = this.articlesQuery.selectLoading();

  constructor(private articlesService: ArticlesService, 
              private articlesQuery: ArticlesQuery) {
  }

  ngOnInit() {
    !this.articlesQuery.getHasCache() && this.articlesService.getAll();
  }
}

We use the built-in Akita query selectors. The selectAll selector which reactively get the articles from the store and the selectLoading selector as an indication of whether we need to show a spinner.

In the ngOnInit hook, we call the service's getAll method that fetches the articles from the server and adds them to the store.

@Injectable({ providedIn: 'root' })
export class ArticlesService {

  constructor(private store: ArticlesStore,
              private http: HttpClient) {
  }

  async getAll() {
    const response = await this.http.get('url').toPromise();
    this.store.set(response.data);
  }
}

In our case, we want to fetch them only once, so we use the built-in getHasCache() to check whether we have data in our store. The internal store's cache property value is automatically changed to true when we call the store's set method. Now, we can build the template:

<section class="container">
  <h1>Blog</h1>

  <h3 *ngIf="loading$ | async; else content">Loading...</h3>

  <ng-template #content>
    <app-article-preview *ngFor="let article of articles$ | async;"
                         [article]="article"></app-article-preview>
  </ng-template>

</section>

Let's move on to the article page component.

@Component({
  templateUrl: './article-page.component.html',
  styleUrls: ['./article-page.component.css']
})
export class ArticlePageComponent implements OnInit {
  article$: Observable<Article>;
  articleId: string;
  selectedComment: ArticleComment = {} as ArticleComment;

  constructor(private route: ActivatedRoute,
              private articlesService: ArticlesService,
              private articlesQuery: ArticlesQuery) {
  }

  ngOnInit() {
    this.articleId = this.route.snapshot.params.id;
    this.article$ = this.articlesQuery.selectEntity(this.articleId);
  }

  async addComment(input: HTMLTextAreaElement) {
    await this.articlesService.addComment(this.articleId, input.value);
    input.value = '';
  }

  async editComment() {
    await this.articlesService.editComment(this.articleId, this.selectedComment);
    this.selectedComment = {} as ArticleComment;
  }

  deleteComment(id: string) {
    this.articlesService.deleteComment(this.articleId, id);
  }

  selectComment(comment: ArticleComment) {
    this.selectedComment = { ...comment };
  }

  trackByFn(index, comment) {
    return comment.id;
  }
}

First, we obtain the current article id from the ActivatedRoute provider snapshot property. Then, we use it to reactively select the article from the store by using the selectEntity selector. We create three methods for adding, updating and deleting a comment. Let's see the template:

<div *ngIf="article$ | async as article">
  <h1>{{ article.title }}</h1>
  <p>{{ article.content }}</p>

  <h3>Comments</h3>
  <div *ngFor="let comment of article.comments; trackBy: trackByFn" 
       (click)="selectComment(comment)">
    {{ comment.text }} 
    <button (click)="deleteComment(comment.id)">Delete</button>
  </div>

  <h5>New Comment</h5>

  <div>
    <textarea #comment></textarea>
    <button type="submit" (click)="addComment(comment)">Add</button>
  </div>

  <h5>Edit Comment</h5>

  <div>
    <textarea [(ngModel)]="selectedComment.text"></textarea>
    <button type="submit" (click)="editComment()">Edit</button>
  </div>
</div>

And let's finish with the complete service implementation.

@Injectable({ providedIn: 'root' })
export class ArticlesService {

  constructor(private store: ArticlesStore,
              private http: HttpClient) {
  }

  async getAll() {
    const response = await this.http.get('url').toPromise();
    this.store.set(response.data);
  }

  async addComment(articleId: string, text: string) {
    const commentId = await this.http.post(...).toPromise();

    const comment: ArticleComment = {
      id: commentId,
      text
    };

    this.store.update(articleId, article => ({
      comments: arrayAdd(article.comments, comment)
    }));
  }

  async editComment(articleId: string, { id, text }: ArticleComment) {
    await this.http.put(...).toPromise();

    this.store.update(articleId, article => ({
      comments: arrayUpdate(article.comments, id, { text })
    }));
  }

  async deleteComment(articleId: string, commentId: string) {
    await this.http.delete(...).toPromise();

    this.store.update(articleId, article => ({
      comments: arrayRemove(article.comments, commentId)
    }));
  }
}

In each CRUD method, we first update the server, and only when the operation succeeded, we use Akita's built-in array utils to update the relevant comment.

Now, let's examine the alternative strategy.

Strategy Two - Data Normalization

This strategy requires to normalize the data we get from the server. The idea is to create two stores. CommentsStore which is responsible for storing the entire comments. ArticlesStore which is responsible for storing the articles where each article has a comments array property which contains the ids of the associated comments.

ng g af articles
ng g af comments

Let's see the models.

// article.model
export interface Article {
  id: ID;
  title: string;
  content: string;
  comments: (Comment | ID)[];
}

// commment.model
export interface Comment {
  id: ID;
  text: string;
}

Now, let's modify the ArticleService getAll method.

@Injectable({ providedIn: 'root' })
export class ArticlesService {

  constructor(private articlesStore: ArticlesStore,
              private commentsService: CommentsService,
              private commentsStore: CommentsStore,
              private http: HttpClient) {
  }

  async getAll() {
    const response = await this.http.get('url').toPromise();

    const allComments = [];

    const articles = response.data.map(currentArticle => {
      const { comments, ...article } = currentArticle;
      article.comments = [];

      for(const comment of comments) {
        allComments.push(comment);
        article.comments.push(comment.id);
      }
      return article;
    });

    this.commentsStore.set(allComments);
    this.articlesStore.set(articles);
  }
}

We create a new articles array where we replace the comment object from each article with the comment id. Next, we create the allComments array, which holds the entire comments. Finally, we add both of them to the corresponding store.

Now, lets' see what we need to change in the article page. As we need to show the article and its comments, we need to create a derived query which joins an article with its comments. Let's create it.

@Injectable({ providedIn: 'root' })
export class ArticlesQuery extends QueryEntity<ArticlesState, Article> {

  constructor(protected store: ArticlesStore, private commentsQuery: CommentsQuery) {
    super(store);
  }

  selectWithComments(articleId: string) {
    return combineLatest(
      this.selectEntity(articleId),
      this.commentsQuery.selectAll({ asObject: true })
    ).pipe(map(([article, allComments]) => ({
      ...article,
      comments: article.comments.map(id => allComments[id])
    })));
  }
}

We create the selectWithComments selector which takes the articleId, and creates a join between the article and the comments, and returns a mapped version with the comments based on the commentsids. Now, we can use it in the component:

export class ArticlePageComponent implements OnInit {
  article$: Observable<Article>;

  constructor(private route: ActivatedRoute,
              private articlesService: ArticlesService,
              private articlesQuery: ArticlesQuery) {
  }

  ngOnInit() {
    this.articleId = this.route.snapshot.params.id;
    this.article$ = this.articlesQuery.selectWithComments(this.articleId);
  }
}

Let's finish seeing the changes in the ArticlesService:

@Injectable({ providedIn: 'root' })
export class ArticlesService {

  constructor(private articlesStore: ArticlesStore,
              private commentsService: CommentsService,
              private commentsStore: CommentsStore,
              private http: HttpClient) {
  }

  async getAll() {}

  async addComment(articleId: string, text: string) {
    const commentId = await this.commentsService.add(articleId, text);

    this.articlesStore.update(articleId, article => ({
      comments: arrayAdd(article.comments, commentId)
    }));
  }

  async editComment(comment: Comment) {
    this.commentsService.edit(comment);
  }

  async deleteComment(articleId: string, commentId: string) {
    await this.commentsService.delete(commentId);

    this.articlesStore.update(articleId, article => ({
      comments: arrayRemove(article.comments, commentId)
    }));
  }

}

In this case, when we perform add or remove operations, we need to update both the CommentsStore and the ArticlesStore. In the case of an edit, we need to update only the CommentsStore. Here is the CommentsService.

@Injectable({ providedIn: 'root' })
export class CommentsService {

  constructor(private commentsStore: CommentsStore) {
  }

  async add(articleId: string, text: string) {
    const id = await this.http.post().toPromise();
    this.commentsStore.add({
      id,
      text
    });

    return id;
  }

  async delete(id: string) {
    await await this.http.delete(...).toPromise();
    this.commentsStore.remove(id);
  }

  async edit(comment: Comment) {
    await this.http.put(...).toPromise();
    return this.commentsStore.update(comment.id, comment);
  }
}

Summary

We learn about two strategies of how we can manage One-to-many relationships with Akita. In most cases, I will go with the first strategy as it is cleaner, shorter, and more straightforward. The second strategy might be useful when you have massive edit operations in your application, and you care about performance.

But remember, premature optimizations are the root of all evil.

Keeping Browser Tabs in Sync Using localStorage, Angular & Akita

Ariel Gueta — Mon, 10 Jun 2019 13:50:52 +0000

In this post, we are going to learn how we can keep our application state in sync when a user has multiple tabs open. We are going to make this happen by using the Web Storage API and Akita. Basic knowledge of Akita is needed.

Create Contacts Page

For our demo, we will create a contacts page, that allows our users to add, edit and remove a contact.

ng add @datorama/akita
ng g af contacts

The above commands add Akita to our project and scaffold the files we need, entity store, entity query, model and service.

Now, let's add Akita's persistState:

// main.ts
import { persistState } from '@datorama/akita';

persistState({
  key: 'yourKey',
  include: ['contacts']
});

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.log(err));

From the docs: The persistState function gives you the ability to persist some of the app’s state, by saving it to localStorage/sessionStorage or anything that implements the StorageEngine API, and restore it after a refresh.

Now, the only thing we need to do is to listen to the window.storage event which fires when localStorage has been modified in the context of another document. When it emits, we filter the key we are interested in and call the snapshotManager.setStoresSnapshot method with the new value.

import { untilDestroyed } from 'ngx-take-until-destroyed';
import { fromEvent } from 'rxjs';
import { snapshotManager } from '@datorama/akita';

class AppComponent {
  ngOnInit() {
    fromEvent<StorageEvent>(window, 'storage').pipe(
      filter(event => event.key === 'yourKey')
      untilDestroyed(this)
    ).subscribe(event => {
      snapshotManager.setStoresSnapshot(event.newValue, { skipStorageUpdate: true });
    });
  }
}

The setStoresSnapshot method takes the application state object which looks like:

{
  "storeName": state,
  "storeName": state
}

and updates each store with the given value.

Try it. Open your application in two tabs, change the store's value in one of them and see it reflected in the second one.

The inspiration for the article came from the ngrx version of it.

Getting Started with Angular, Akita & Firebase

Ariel Gueta — Wed, 05 Jun 2019 15:52:05 +0000

So you are a big fan of Firebase, but you also want to start working with Akita (or vise versa). How do the two play together? As it turns out, very well 😁 This is due to the fact that both have a lot in common: They are both observable-based, robust, well-documented solutions in their respective areas.

In this article, I will show an example of managing a bookstore inventory using Akita with AngularFire, the official Angular library for Firebase.

It assumes that you have some working knowledge of Akita and Firebase. If not, please start with the Akita basics / AngularFire basics.

Setting Up AngularFire

First, we need to install the AngularFire library:

npm install @angular/fire

And set our firebase settings in the environment file:

// environment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: 'yourkey',
    projectId: 'yourid',
  }
};

Next, we need to import the AngularFireModule into our application and call the initializeApp method passing the configuration object we set before.

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now that we have firebase in our application, let's add Akita.

Setting Up Akita

Adding Akita to our project is easy. We can use the NG add schematic by running the following command:

ng add @datorama/akita

The above command adds Akita, Akita's dev-tools, and Akita's schematics into our project. The next step is to create a store. We need to maintain a collection of books, so we scaffold a new entity feature:

ng g af books

This command generates a books store, a books query, a books service, and a book model for us:

// book.model.ts
import { ID } from '@datorama/akita';

export interface Book {
  id: ID;
  title: string;
}

// books.store.ts
export interface BooksState extends EntityState<Book> {}

@Injectable({ providedIn: 'root' })
@StoreConfig({ name: 'books' })
export class BooksStore extends EntityStore<BooksState, Book> {

  constructor() {
    super();
  }

}

// books.query.ts
@Injectable({ providedIn: 'root' })
export class BooksQuery extends QueryEntity<BooksState, Book> {

  constructor(protected store: BooksStore) {
    super(store);
  }
}

The next thing I will do is create a reusable abstraction around the collection stateChanges API. stateChanges returns an observable which emits collection changes as they occur. We can leverage it to update our stores transparently:

import { AngularFirestoreCollection } from '@angular/fire/firestore';
import { EntityStore, withTransaction } from '@datorama/akita';

export function syncCollection<T>(collection: AngularFirestoreCollection<T>, store: EntityStore<any, any>) {
  function updateStore(actions) {

    if(actions.length === 0) {
      store.setLoading(false);
      return;
    }

    for ( const action of actions ) {
      const id = action.payload.doc.id;
      const entity = action.payload.doc.data();

      switch( action.type ) {
        case 'added':
          store.add({ id, ...entity });
          break;
        case 'removed':
          store.remove(id);
          break;
        case 'modified':
          store.update(id, entity);
      }
    }
  }

  return collection.stateChanges().pipe(withTransaction(updateStore));
}

The syncCollection function takes the collection and the store, listens for any state changes in the collection, and update the store based on the emitted action. We also use the withTransaction as we want to dispatch one action when we finish with the updates.

Now, we can use it in our books service:

import { Injectable } from '@angular/core';
import { BooksStore } from './books.store';
import { AngularFirestore } from '@angular/fire/firestore';
import { syncCollection } from '../syncCollection';

@Injectable({ providedIn: 'root' })
export class BooksService {
  private collection = this.db.collection('books');

  constructor(private booksStore: BooksStore, private db: AngularFirestore) {
  }

  connect() {
    return syncCollection(this.collection, this.booksStore);
  }

  addBook(title: string) {
    this.collection.add({ title });
  }

  removeBook(id: string) {
    this.collection.doc(id).delete();
  }

  editBook(id: string) {
    this.collection.doc(id).update({ title: Math.random().toFixed(2).toString() });
  }
}

We use the firebase API to create methods for add, edit, and remove books. Let's use them in our books component:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { BooksQuery } from './state/books.query';
import { BooksService } from './state/books.service';
import { untilDestroyed } from 'ngx-take-until-destroy';

@Component({
  selector: 'app-books'
})
export class AppComponent implements OnInit, OnDestroy {
  books$ = this.booksQuery.selectAll();
  loading$ = this.booksQuery.selectLoading();

  constructor(private booksQuery: BooksQuery, private booksService: BooksService) {
  }

  ngOnInit() {
    this.booksService.connect().pipe(untilDestroyed(this)).subscribe();
  }

  addBook(input: HTMLInputElement) {
    this.booksService.addBook(input.value);
    input.value = '';
  }

  removeBook(id: string) {
    this.booksService.removeBook(id);
  }

  editBook(id: string) {
    this.booksService.editBook(id);
  }

  trackByFn(i, book) {
    return book.id;
  }

  ngOnDestroy() {
  }
}

And here is the component's template:

<ng-container *ngIf="loading$ | async; else books">
  <h1>Loading...</h1>
</ng-container>

<ng-template #books>
  <input placeholder="Add Book..." #input (keyup.enter)="addBook(input)">

  <ul>
    <li *ngFor="let book of books$ | async; trackBy: trackByFn">
      {{ book.title }}
      <button (click)="editBook(book.id)">Edit</button>
      <button (click)="removeBook(book.id)">Delete</button>
    </li>
  </ul>
</ng-template>

And that's all. The only thing we need to do is to update the firebase collection as we usually do, and let the syncCollection functionality take care of everything.

Let's see the result:

Build a Real-Time Shopping List App with Angular, Socket.IO & Akita

Ariel Gueta — Mon, 03 Jun 2019 14:04:44 +0000

In this article, we are going to build a real-time shopping list using Angular, Akita, and Socket.io. Our example application will feature three things: Adding a new item, deleting an item, and change the item's complete status.

What is Akita?

Akita is a state management pattern, built on top of RxJS, which takes the idea of multiple data stores from Flux and the immutable updates from Redux, along with the concept of streaming data, to create the Observable Data Store model.

Akita encourages simplicity. It saves you the hassle of creating boilerplate code and offers powerful tools with a moderate learning curve, suitable for both experienced and inexperienced developers alike.

Create the Server

We will start by creating the server. First, we install the express application generator:

npm install express-generator -g

Next, we create a new express application:

express --no-view shopping-list

Now, delete everything in your app.js file and replace it with the following code:

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);

let list = [];

io.on('connection', function(socket) {

  // Send the entire list
  socket.emit('list', {
    type: 'SET',
    data: list
  });

  // Add the item and send it to everyone
  socket.on('list:add', item => {
    list.push(item);
    io.sockets.emit('list', {
      type: 'ADD',
      data: item
    });
  });

  // Remove the item and send the id to everyone
  socket.on('list:remove', id => {
    list = list.filter(item => item.id !== id);

    io.sockets.emit('list', {
      type: 'REMOVE',
      ids : id
    });
  });

  // Toggle the item and send it to everyone
  socket.on('list:toggle', id => {
    list = list.map(item => {
      if( item.id === id ) {
        return {
          ...item,
          completed: !item.completed
        }
      }
      return item;
    });

    io.sockets.emit('list', {
      type: 'UPDATE',
      ids : id,
      data: list.find(current => current.id === id)
    });
  })
});

server.listen(8000);

module.exports = app;

We define a new socket-io server and save the user's list in memory (in real-life it will be saved in a database). We create several listeners based on the actions we need in the client: SET (GET), ADD, REMOVE, UPDATE.

Note that we use a specific pattern. We send the action type and the action payload. We will see in a second how we use this with Akita.

Create the Angular Application

First, we need to install the angular-cli package and create a new Angular project:

npm i -g @angular/cli
ng new akita-shopping-list

Next, we need to add Akita to our project:

ng add @datorama/akita

The above command automatically adds Akita, Akita's dev-tools, and Akita's schematics into our project. We need to maintain a collection of items, so we scaffold a new entity feature:

ng g af shopping-list

This command generates a store, a query, a service, and a model for us:

// store
import { Injectable } from '@angular/core';
import { EntityState, EntityStore, StoreConfig } from '@datorama/akita';
import { ShoppingListItem } from './shopping-list.model';

export interface ShoppingListState extends EntityState<ShoppingListItem> {}

@Injectable({ providedIn: 'root' })
@StoreConfig({ name: 'shopping-list' })
export class ShoppingListStore extends EntityStore<ShoppingListState, ShoppingListItem> {

  constructor() {
    super();
  }

}


// query
import { Injectable } from '@angular/core';
import { QueryEntity } from '@datorama/akita';
import { ShoppingListStore, ShoppingListState } from './shopping-list.store';
import { ShoppingListItem } from './shopping-list.model';

@Injectable({ providedIn: 'root' })
export class ShoppingListQuery extends QueryEntity<ShoppingListState, ShoppingListItem> {

  constructor(protected store: ShoppingListStore) {
    super(store);
  }

}

// model
import { guid, ID } from '@datorama/akita';

export interface ShoppingListItem {
  id: ID;
  title: string;
  completed: boolean;
}

export function createShoppingListItem({ title }: Partial<ShoppingListItem>) {
  return {
    id: guid(),
    title,
    completed: false,
  } as ShoppingListItem;
}

Now, let's install the socket-io-client library:

npm i socket.io-client

and use it in our service:

import { Injectable } from '@angular/core';
import io from 'socket.io-client';
import { ShoppingListStore } from './state/shopping-list.store';
import { ID, runStoreAction, StoreActions } from '@datorama/akita';
import { createShoppingListItem } from './state/shopping-list.model';

const resolveAction = {
  ADD: StoreActions.AddEntities,
  REMOVE: StoreActions.RemoveEntities,
  SET: StoreActions.SetEntities,
  UPDATE: StoreActions.UpdateEntities
};

@Injectable({ providedIn: 'root' })
export class ShoppingListService {
  private socket;

  constructor(private store: ShoppingListStore) {
  }

  connect() {
    this.socket = io.connect('http://localhost:8000');

    this.socket.on('list', event => {
      runStoreAction(this.store.storeName, resolveAction[event.type], {
        payload: {
          entityIds: event.ids,
          data: event.data
        }
      });
    });

    return () => this.socket.disconnect();
  }

  add(title: string) {
    this.socket.emit('list:add', createShoppingListItem({ title }));
  }

  remove(id: ID) {
    this.socket.emit('list:remove', id);
  }

  toggleCompleted(id: ID) {
    this.socket.emit('list:toggle', id);
  }
}

First, we create a connect method where we connect to our socket server and listening for the list event. When this event fires, we call the runStoreAction method, passing the store name, the action, the entities id, and the data we get from the server. We also return a dispose function so we won't have a memory leak.

Next, We create three methods, add, remove and toggleCompleted that emit the corresponding events with the required data. Now, we can use it in our component:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ShoppingListService } from './shopping-list.service';
import { Observable } from 'rxjs';
import { ShoppingListQuery } from './state/shopping-list.query';
import { ID } from '@datorama/akita';
import { ShoppingListItem } from './state/shopping-list.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  items$: Observable<ShoppingListItem[]>;
  private disposeConnection: VoidFunction;

  constructor(private shoppingListService: ShoppingListService, 
              private shoppingListQuery: ShoppingListQuery) {
  }

  ngOnInit() {
    this.items$ = this.shoppingListQuery.selectAll();
    this.disposeConnection = this.shoppingList.connect();
  }

  add(input: HTMLInputElement) {
    this.shoppingListService.add(input.value);
    input.value = '';
  }

  remove(id: ID) {
    this.shoppingListService.remove(id);
  }

  toggle(id: ID) {
    this.shoppingListService.toggleCompleted(id);
  }

  track(_, item) {
    return item.title;
  }

  ngOnDestroy() {
    this.disposeConnection();
  }

}

And the component's HTML:


<div>

  <div>
    <input(keyup.enter)="add(input)" #input placeholder="Add Item..">
  </div>

  <ul>
    <li *ngFor="let item of items$ | async; trackBy: track">
      <div [class.done]="item.completed">{{item.title}}
        <i (click)="remove(item.id)">X</i>
        <i (click)="toggle(item.id)">done</i>
      </div>
    </li>
  </ul>

</div>

And here is the result:

That is pretty cool. Here is a link to the complete code.