Forem: Sarah Chima

Add chat into your Angular app with TalkJS - Part 2

Sarah Chima — Tue, 05 May 2020 11:11:29 +0000

In the first part of this tutorial, we saw how you can add a chat popup to an existing Angular app using TalkJS. In this tutorial, we discuss how we can add the TalkJS Chatbox and Inbox to an Angular app. Let's start with the Chatbox.

Chatbox

In this section, we're going to make sure that a user is able to send a vendor a message from his/her profile page, by the use of a Chatbox. You’ll notice that the code to do this is extremely similar to the code used for creating a Popup.

This is what a Chatbox looks like:

TalkService

Add the following method to the TalkService:

async createChatbox(otherApplicationUser: User) : Promise {
   const session = await this.currentSessionDeferred.promise;
   const conversationBuilder = await this.getOrCreateConversation(session, otherApplicationUser);
   return session.createChatbox(conversationBuilder);
}

User Profile Component

Navigate to the UserProfileComponent:
src/app/users/components/user-profile/user-profile.component.ts

Template
The first thing we’ll have to do is add a container for the Chatbox in the UserProfileComponent’s template.

Add the following highlighted code to the UserProfileComponent's template:

<div id="chat-container">
      <div class="row">
            <div class="col-sm-4"></div>
            <div class="col-sm-4 container-title">Chat</div>
            <div class="col-sm-4"></div>
      </div>
      <div id="talkjs-container">Loading chat with {{user?.username}}...</div>
</div>

The code that we've just added is an HTML div element. This element is going to serve as the container for our TalkJS Chatbox, which is why we’re calling it talkjs-container.

Template Styling
We’ll have to add some styling to assure that our Chatbox is being shown in the center of the page and is of sufficient height.

Open the styling file for the UserProfileComponent's template: user-profile.component.css.

Add the following code:

#talkjs-container {
   height: 505px;
   margin-top: 1%;
   text-align: center;
}

Component
We’ll now have to add a property and a method in the UserProfileComponent to load the Chatbox in the template’s container.

Add the following property:

import * as Talk from "talkjs";

...
export class UserProfileComponent implements OnInit {
   private chatbox: Talk.Chatbox;
}

Add the following method:

private async loadChatbox(otherUser: User) {
   this.chatbox = await this.talkService.createChatbox(otherUser);
   this.chatbox.mount(document.getElementById('talkjs-container'));
}

Add the method call to the ngOnInit lifecycle hook:

ngOnInit() {
   this.userService.getUser(this.getUserId()).then(user => {
      this.user = user;
      this.loadChatbox(this.user);
   });
}

When our component is being destroyed, we should make sure that the TalkJS Chatbox and its event listeners are also being destroyed. Add the following body to the ngOnDestroy lifecycle hook:

ngOnDestroy() {
   if (this.chatbox) {
      this.chatbox.destroy();
   }
}

We have now successfully added the TalkJS Chatbox to our application.

If you have successfully executed all steps, your TalkService, UserProfileComponent, UserProfileComponent’s template, and UserProfileComponent’s template styling should look like:

TalkService:

import { Injectable } from "@angular/core";
import * as Talk from 'talkjs';
import { User } from "src/app/shared/models/user.model";
import { AuthenticationService } from "src/app/core/services/authentication.service";
import { Deferred } from "src/app/shared/utils/deffered.util";

@Injectable({
providedIn: 'root'
})
export class TalkService {
   private static APP_ID = 'YOUR_APP_ID';
   private currentTalkUser: Talk.User;
   private currentSessionDeferred = new Deferred()

   constructor(private authenticationService: AuthenticationService) { }

   async createCurrentSession() {
      await Talk.ready;

      const currentUser = await this.authenticationService.getCurrentUser();
      const currentTalkUser = await this.createTalkUser(currentUser);
      const session = new Talk.Session({
         appId: TalkService.APP_ID,
         me: currentTalkUser
      });

      this.currentTalkUser = currentTalkUser;
      this.currentSessionDeferred.resolve(session);
   }

   async createTalkUser(applicationUser: User) : Promise {
      await Talk.ready;

      return new Talk.User({
         id: applicationUser.id,
         name: applicationUser.username,
         photoUrl: applicationUser.profilePictureUrl
      });
   }

   async createPopup(otherApplicationUser: User, keepOpen: boolean) : Promise {
      const session = await this.currentSessionDeferred.promise;
      const conversationBuilder = await this.getOrCreateConversation(session, otherApplicationUser);
      const popup = session.createPopup(conversationBuilder, { keepOpen: keepOpen });

      return popup;
   }

   async createChatbox(otherApplicationUser: User) : Promise {
      const session = await this.currentSessionDeferred.promise;
      const conversationBuilder = await this.getOrCreateConversation(session, otherApplicationUser);

      return session.createChatbox(conversationBuilder);
   }

   private async getOrCreateConversation(session: Talk.Session, otherApplicationUser: User) {
      const otherTalkUser = await this.createTalkUser(otherApplicationUser);

      const conversationBuilder = session.getOrCreateConversation(Talk.oneOnOneId(this.currentTalkUser, otherTalkUser));
      conversationBuilder.setParticipant(this.currentTalkUser);
      conversationBuilder.setParticipant(otherTalkUser);

      return conversationBuilder;
   }
}

UserProfileComponent:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import * as Talk from "talkjs";

import { UserService } from 'src/app/core/services/user.service';
import { User } from 'src/app/shared/models/user.model';
import { TalkService } from 'src/app/core/services/talk.service';

@Component({
selector: 'app-user-profile',
templateUrl: './user-profile.component.html',
styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {
   private chatbox: Talk.Chatbox;
   user: User;

   constructor(
   private userService: UserService,
   private talkService: TalkService,
   private route: ActivatedRoute) { }

   ngOnInit() {
      this.userService.getUser(this.getUserId()).then(user => {
      this.user = user;
      this.loadChatbox(this.user);
      });
   }

   ngOnDestroy() {
      if (this.chatbox) {
         this.chatbox.destroy();
      }
   }

   private async loadChatbox(otherUser: User) {
      this.chatbox = await this.talkService.createChatbox(otherUser);
      this.chatbox.mount(document.getElementById('talkjs-container'));
   }

   private getUserId() {
      return Number(this.route.snapshot.paramMap.get('id'));
   }
}

UserProfileComponent’s template:

<div *ngIf="user">
  <div id="personal-information-container">
      <div class="row">
          <div class="col-sm-4"></div>
          <div class="col-sm-4">
              <div class="card personal-information-card">
                  <img class="card-img-top personal-information-card-img-top img-fluid mx-auto d-block" src="{{user?.profilePictureUrl}}" alt="profile-picture">
                  <div class="card-block">
                      <h4 class="card-title personal-information-card-title">{{user?.username}}</h4>
                  </div>
              </div>
          </div>
          <div class="col-sm-4"></div>
      </div>
  </div>
  <hr class="divider" *ngIf="(user.products) && (user.products.length > 0)">
  <div id="owned-products-container" class="container" *ngIf="(user.products) && (user.products.length > 0)">
    <div class="row">
            <div class="col-sm-4"></div>
            <div class="col-sm-4 container-title">Products</div>
            <div class="col-sm-4"></div>
      </div>
      <div id="products-row" class="row">
        <div class="col-sm-3" *ngFor="let product of user.products">
            <div class="card owned-products-card">
                <img class="card-img-top owned-products-card-img-top img-fluid" src="{{product?.pictureUrl}}" alt="product-image">
                <div class="card-block">
                    <h4 class="card-title owned-products-card-title">{{product?.name}}</h4>
                </div>
            </div>
        </div>
      </div>
  </div>
  <hr class="divider">
  <div id="chat-container">
      <div class="row">
            <div class="col-sm-4"></div>
            <div class="col-sm-4 container-title">Chat</div>
            <div class="col-sm-4"></div>
      </div>
      <div id="talkjs-container">Loading chat with {{user?.username}}..</div>
  </div>
</div>

UserProfileComponent’s template styling:

#talkjs-container {
   height: 505px;
   margin-top: 1%;
   text-align: center;
}

Inbox

Finally, let’s make sure that our user is able to view and send messages in previous conversations by the use of the Inbox.

This is what an Inbox looks like:

TalkService

Add the following code to the TalkService:

async createInbox() : Promise {
   const session = await this.currentSession;

   return session.createInbox();
}

Inbox Component

It’s best practice to display the TalkJS Inbox on a separate page in your application. This means that you’ll have to add a new Component to your application.

You can take a look at how we added an InboxComponent by looking into the source code of this tutorial’s final product, the marketplace with chat functionalities.

Template
We’ll have to add a container for the Inbox in the InboxComponent's template.

Open the InboxComponent's template:
src/app/chat-inbox/components/inbox/inbox.components.html

Add the following code to the template:

<div id="talkjs-container">Loading chats..</div>

Template Styling
We’ll have to add some styling to assure that our Inbox is being shown in the center of the page and is of sufficient height.

Add the following code to the InboxComponent's styling file:

#talkjs-container {
   height: 505px;
   margin-top: 5%;
   text-align: center;
}

Component
We still have to add a method in the InboxComponent that will load our Inbox.

Add the following highlighted property and method:

import * as Talk from "talkjs";

export class InboxComponent implements OnInit {
   private inbox: Talk.Inbox;

   private async createInbox() {
      this.inbox = await this.talkService.createInbox();
      this.inbox.mount(document.getElementById('talkjs-container'));
   }
}

Add the method call in the ngOnInit lifecycle hook:

ngOnInit() {
   this.createInbox();
}

We should make sure to destroy the Inbox and its event handlers when the component gets destroyed:

ngOnDestroy() {
   if (this.inbox) {
      this.inbox.destroy();
   }
}

We have now successfully added the TalkJS Inbox to our application.

If you have successfully executed all steps, your TalkService, InboxComponent, InboxComponent's template, and InboxComponent’s template styling should look like:

TalkService:

import { Injectable } from "@angular/core";
import * as Talk from 'talkjs';
import { User } from "src/app/shared/models/user.model";
import { AuthenticationService } from "src/app/core/services/authentication.service";
import { Deferred } from "src/app/shared/utils/deffered.util";

@Injectable({
providedIn: 'root'
})
export class TalkService {
   private static APP_ID = 'YOUR_APP_ID';
   private currentTalkUser: Talk.User;
   private currentSessionDeferred = new Deferred()

   constructor(private authenticationService: AuthenticationService) { }

   async createCurrentSession() {
      await Talk.ready;

      const currentUser = await this.authenticationService.getCurrentUser();
      const currentTalkUser = await this.createTalkUser(currentUser);
      const session = new Talk.Session({
         appId: TalkService.APP_ID,
         me: currentTalkUser
       });

      this.currentTalkUser = currentTalkUser;
      this.currentSessionDeferred.resolve(session);
   }

   async createTalkUser(applicationUser: User) : Promise {
      await Talk.ready;

      return new Talk.User({
         id: applicationUser.id,
         name: applicationUser.username,
         photoUrl: applicationUser.profilePictureUrl
      });
   }

   async createPopup(otherApplicationUser: User, keepOpen: boolean) : Promise {
      const session = await this.currentSessionDeferred.promise;
      const conversationBuilder = await this.getOrCreateConversation(session, otherApplicationUser);
      const popup = session.createPopup(conversationBuilder, { keepOpen: keepOpen });

      return popup;
   }

   async createChatbox(otherApplicationUser: User) : Promise {
      const session = await this.currentSessionDeferred.promise;
      const conversationBuilder = await this.getOrCreateConversation(session, otherApplicationUser);

      return session.createChatbox(conversationBuilder);
   }

   async createInbox() : Promise {
      const session = await this.currentSessionDeferred.promise;
      return session.createInbox();
   }

   private async getOrCreateConversation(session: Talk.Session, otherApplicationUser: User) {
      const otherTalkUser = await this.createTalkUser(otherApplicationUser);

      const conversationBuilder = session.getOrCreateConversation(Talk.oneOnOneId(this.currentTalkUser, otherTalkUser));
      conversationBuilder.setParticipant(this.currentTalkUser);
      conversationBuilder.setParticipant(otherTalkUser);

      return conversationBuilder;
   }
}

InboxComponent:

import { Component, OnInit } from '@angular/core';

import * as Talk from "talkjs";

import { TalkService } from 'src/app/core/services/talk.service';

@Component({
selector: 'app-inbox',
templateUrl: './inbox.component.html',
styleUrls: ['./inbox.component.css']
})
export class InboxComponent implements OnInit {
   private inbox: Talk.Inbox;

   constructor(private talkService: TalkService) { }

   ngOnInit() {
      this.createInbox();
   }

   ngOnDestroy() {
      if (this.inbox) {
         this.inbox.destroy();
      }
   }

   private async createInbox() {
      this.inbox = await this.talkService.createInbox();
      this.inbox.mount(document.getElementById('talkjs-container'));
   }
}

InboxComponent's template:

<div id="talkjs-container">Loading chats..</div>

InboxComponent’s template styling:

#talkjs-container {
   height: 505px;
   margin-top: 5%;
   text-align: center;
}

Identity Verification

Before publishing your application, you need to ensure that Identity Verification is enabled to prevent malicious users from hijacking accounts. This requires adding a few lines of code to your backend, which is outside the scope of this tutorial.

Finishing touches

Congratulations, you have implemented TalkJS into an existing application! However, if you want, you can add some finishing touches to make the user experience better.

Enabling file & location sharing

In this chapter, we’re going to allow our users to share both files and their location in any chat.

TalkJS Dashboard
The first thing we have to do is create a custom configuration in the TalkJS dashboard.

Log into the TalkJS dashboard and navigate to the configurations section.

Create a new configuration by clicking on the plus button. You can give the configuration any name, we're going for ‘demo_default’.

We’re able to enable both file- and location sharing by enabling their checkboxes.

Enable the following checkboxes:

TalkService
To enable the configuration that we just created for all our users, all we have to do is add this configuration to the TalkService#createTalkUsermethod.

Add the following highlighted code to TalkService#createTalkUser:

async createTalkUser(applicationUser: User) : Promise {
   await Talk.ready;

   return new Talk.User({
      id: applicationUser.id,
      name: applicationUser.username,
      photoUrl: applicationUser.profilePictureUrl,
      configuration: 'demo_default'
   });
}

Make sure to use the configuration name that you chose yourself in the TalkJS dashboard.

You have now successfully enabled file- and location sharing in your application.

Enabling email and SMS notifications

Enabling email and SMS notifications is really easy within TalkJS. All you have to do is pass TalkJS the users' phone number and/or email address and TalkJS will handle the rest!

Add the following highlighted code to TalkService#createTalkUser:

async createTalkUser(applicationUser: User) : Promise {
   await Talk.ready;

   return new Talk.User({
      id: applicationUser.id,
      name: applicationUser.username,
      photoUrl: applicationUser.profilePictureUrl,
      email: 'youruser@youruseremail.com',
      phone: 'yourusersphone'
});
}

Welcome message

We’re going to add personal welcome messages for each user in our application.

ChatPreferences
Navigate to the ChatPreferences model:
src/app/shared/models/chat-preferences.model.ts

Add a new property for the welcome message as follows:

export class ChatPreferences {
   chatButtonColorHex: string;
   chatWelcomeMessage: string;

   constructor(..., chatWelcomeMessage: string) {
      this.chatButtonColorHex = chatButtonColorHex;
      this.chatWelcomeMessage = chatWelcomeMessage;
   }
}

Mock users
Open the user mocks: src/core/mocks/users.mock.ts

Make sure to add a welcome message for each mock user as follows:

new User(4, 'John', '../../../assets/images/users/john.jpg', new ChatPreferences("#1D1F1E", 
"Hi! Any questions? Let me know how I can help"))

TalkService
Add the following highlighted code to TalkService#createTalkUser:

async createTalkUser(applicationUser: User) : Promise {
   await Talk.ready;

   return new Talk.User({
      id: applicationUser.id,
      name: applicationUser.username,
      photoUrl: applicationUser.profilePictureUrl,
      configuration: "demo_default",
      welcomeMessage: applicationUser.chatPreferences.chatWelcomeMessage
   });
}

You have now successfully added welcome messages to your application.

Destroying Popups

You may have noticed that if you open a Popup with a vendor and then navigate to the Inbox page, the Popup is still visible. If the user is at the Inbox page, there is no need to have any Popups open as these conversations can be opened through the Inbox itself.

We will, therefore, write some code that will make sure that any active Popups will be destroyed whenever the Inbox page is being visited by our user.

Let’s go ahead and open the TalkService.

We’ll have to save all the Popups that are being opened until they're destroyed.
To accomplish this, we’ll first have to add a local variable to the TalkService:

private loadedPopups: Talk.Popup[];

And then we’ll have to make sure the array is being initialized, by adding it’s initialization to the TalkService's constructor:

constructor(private authenticationService: AuthenticationService) {
   this.loadedPopups = [];
}

We should now make sure that every Popup that's being opened, is added to the list of loaded Popups.
Add the following highlighted code to the TalkService#createPopup method:

async createPopup(otherApplicationUser: User, keepOpen: boolean) : Promise {
   const session = await this.currentSessionDeferred.promise;
   const conversationBuilder = await this.getOrCreateConversation(session, otherApplicationUser);
   const popup = session.createPopup(conversationBuilder, { keepOpen: keepOpen });
   this.loadedPopups.push(popup);

   return popup;
}

The last thing we should do in the TalkService now, is make a method that actually destroys all the loaded Popups.
Add the following method:

destroyAllLoadedPopups() {
   if (this.loadedPopups.length > 0) {
      this.loadedPopups.forEach(p => p.destroy());
      this.loadedPopups = [];
   }
}

Add the following method call to the InboxComponent#createInbox:

private async createInbox() {
   this.inbox = await this.talkService.createInbox();
   this.inbox.mount(document.getElementById('talkjs-container'));

   this.talkService.destroyAllLoadedPopups();
}

Final Words
I hope you found this tutorial helpful in adding chat to your Angular app.

There are a lot more things you can customize about TalkJS, such as custom chat UI themes, different languages and so on. What is more? You can take a look at our documentation to read more about our customization possibilities.

If you have a question, don't hesitate to drop by our support chat.

Add chat into your Angular app with TalkJS - Part 1

Sarah Chima — Tue, 21 Apr 2020 19:19:39 +0000

This tutorial will show you how you can implement a buyer-seller chat for online marketplaces, as well as a user to user chat, through the use of TalkJS into any Angular 6 application. We will show you how to implement TalkJS into an already existing application to give more context to the implementation. We’ll talk more about this existing application further throughout this tutorial.

This is the first part of a two-part tutorial. In this part, we'll see how we can add a chat popup to an existing application. In the next part, we'll learn how to add a chatbox and inbox to the application.

First things first

Prerequisites

Angular version
The code in this tutorial has been written in Angular CLI version 6.1.5. Make sure to follow this tutorial with Angular CLI v6.1.5 or above.

NodeJS version
Make sure you're working with NodeJS v8.11.4 or above.

The marketplace

Our marketplace is an application that realizes a simplified use case of a marketplace. In this marketplace, users are able to log in and view product listings:

Before this tutorial's implementation:

After this tutorial's implementation:

Click on an image to open its example application live.

This tutorial is meant to demonstrate how to add chat functionality to any Angular 6 application, by the use of TalkJS. You can perform the steps in this tutorial on our example marketplace, but you should also be able to do them inside your own Angular app right away.

Source code for both marketplace applications can be found on our GitHub repo.

Chat functionalities will be added to the following pages within our marketplace: user profile, product page & inbox page.

Starting the application
Start the application into which you're going to add chat functionalities.

If you're adding chat functionalities to our marketplace application, you can clone the project from its GitHub repository.

Start the application:

npm install
npm start

If the marketplace has started successfully, navigate to http://localhost:4200/ in your browser to see the application.

Let’s get started

Install the TalkJS JavaScript SDK

The very first thing that we should do is install the TalkJS JavaScript SDK into our project:

npm install talkjs --save

Create TalkService

In order to maintain modularity within our application, all TalkJS logic will have to be executed in a separate service.

Create a file in src/app/core/services called talk.service.ts and fill it with the following code:

import { Injectable } from "@angular/core";

import * as Talk from 'talkjs';

@Injectable({
providedIn: 'root'
})

export class TalkService { }

To ensure that our TalkService runs as a singleton instance throughout our entire application, we're providing it in the root of our application. Make sure to not add this service to the list of providers for any module, as this will cause our service to not run as a single singleton instance anymore. You can read more about singleton services here.

Active Session

The first thing you should do for TalkJS to properly work within your application is to start a Session for the current logged in user. As long as you have an active Session running, your user will be able to receive desktop notifications. We will, therefore, make sure that the Session is running on each page of our application, even on ones on which our user is not able to read or write messages. You can read more about a TalkJS Session here.

Authentication

Whenever a user logs into our application, we should make sure that we’re creating a Session for this user.

Navigate to the LoginComponent:
src/app/core/authentication/components/login/login.component.ts

After our user has successfully logged in, we should start a Session. We’ll have to call the TalkService#createCurrentSession method — which we’ll create in just a moment — in our login function.

In order for us to be able to call a function in the TalkService, we should first inject the singleton instance of the TalkService into our LoginComponent, through the use of dependency injection.

We’ll pass it as a parameter into our LoginComponent's constructor:

constructor(..., private talkService: TalkService)

Make sure to import the TalkService into the LoginComponent:

import { TalkService } from 'src/app/core/services/talk.service';

Call the TalkService#createCurrentSession method in the login method:

login(credentials) {
   this.authenticationService.login(credentials.username).then(response => {
   if (response) {
       this.toastrService.success('Successful login');
       this.router.navigate(['home']);

       this.talkService.createCurrentSession();
   } else {
     this.toastrService.error('Incorrect credentials');
   }
 });
}

TalkService Methods

App ID
In order for TalkJS to work within your application, your application should have an App ID, which you can find in the TalkJS dashboard.

Create an account — for free while in a test environment — at TalkJS.

Then, go to the TalkJS dashboard and look for your App ID.

Save the App ID as a private constant in the TalkService:

private static APP_ID = 'YOUR_APP_ID';

Current User
In order for the TalkService to create a Session, it needs to know the application's current user. Our AuthenticationService contains a method to retrieve the current user.

Inject the AuthenticationService into the TalkService:

constructor(private authenticationService: AuthenticationService)

TalkJS User
We’ll need an instance of the TalkJS User class to create a Session. Create a method that converts an instance of our application's User class to an instance of the TalkJS User class:

private currentTalkUser: Talk.User;

async createTalkUser(applicationUser: User) : Promise {
   await Talk.ready;

   return new Talk.User({
      id: applicationUser.id,
      name: applicationUser.username,
      photoUrl: applicationUser.profilePictureUrl
   });
}

TalkJS's SDK is loaded asynchronously. By working with asynchronous methods as well, we're making sure that all TalkJS-related code is non-blocking within our application and that we're following the I/O standards (I/O methods being asynchronous).

At first, we're waiting for TalkJS’s SDK to be loaded, which we do by calling:

await Talk.ready

Then, we’re creating a new instance of the User class, filling it with our current user’s data.

Session Creation
Add the following method to create the actual Session:

async createCurrentSession() {
   await Talk.ready;

   const currentUser = await this.authenticationService.getCurrentUser();
   const currentTalkUser = await this.createTalkUser(currentUser);
   const session = new Talk.Session({
      appId: TalkService.APP_ID,
      me: currentTalkUser
      });
   this.currentTalkUser = currentTalkUser;
   this.currentSessionDeferred.resolve(session);
}

I’ll explain what's going on here, step by step.

As you can see, this method is an asynchronous method as well. We need to wait for TalkJS to be ready before we can create the Session.

We should then make sure to convert our application’s current User instance to the TalkJS User instance, by first retrieving our application’s current User and then converting it:

const currentUser = await this.authenticationService.getCurrentUser();
const currentTalkUser = await this.createTalkUser(currentUser);

After retrieving and converting our current User, we’re creating the actual Session:

const session = new Talk.Session({
   appId: TalkService.APP_ID,
   me: currentTalkUser
});

Session Retrieval
Whenever our user is already logged into our application and visits a Component that has to make use of our Session, there’s a possibility that our Session is still being created, while the Component is already trying to use the Session. This can cause all sorts of issues so we’re going to fix this by making sure that the application is able to wait for the Session to be active.

What we want to achieve is that we’re able to call code similar to:

await currentSession;

Without having to poll for the currentSession until it is active. This means we need to create a promise called currentSession that resolves when the session has loaded.

A common way to create a promise is by using a Deferred, which is a little object that lets you return a promise and resolve it later. The example code includes a helper class for this.

We’ll create it upon construction:

private currentSessionDeferred = new Deferred();

When we create the session, we’ll resolve the currentSessionDeferred with the session value:

this.currentSessionDeferred.resolve(session);

We can then await the current session like this anywhere else in the TalkService:

await this.currentSessionDeferred.promise;

Ok great! Your TalkService should look like:

import { Injectable } from "@angular/core";
import * as Talk from 'talkjs';
import { User } from "src/app/shared/models/user.model";
import { AuthenticationService } from "src/app/core/services/authentication.service";
import { Deferred } from "src/app/shared/utils/deffered.util";

@Injectable({
providedIn: 'root'
})
export class TalkService {
   private static APP_ID = 'YOUR_APP_ID';
   private currentTalkUser: Talk.User;
   private currentSessionDeferred = new Deferred()

   constructor(private authenticationService: AuthenticationService) { }

   async createCurrentSession() {
      await Talk.ready;

      const currentUser = await this.authenticationService.getCurrentUser();
      const currentTalkUser = await this.createTalkUser(currentUser);
      const session = new Talk.Session({
         appId: TalkService.APP_ID,
         me: currentTalkUser
      });
      this.currentTalkUser = currentTalkUser;
      this.currentSessionDeferred.resolve(session);
   }

   async createTalkUser(applicationUser: User) : Promise {
   await Talk.ready;

   return new Talk.User({
      id: applicationUser.id,
      name: applicationUser.username,
      photoUrl: applicationUser.profilePictureUrl
      });
   }
}

Core Module
There is one more step that we should do in order to finish this section.

The CoreModule is the heart of our application. It is the first module that is being loaded by the application after the AppModule. Our application’s architecture has been designed in such a way that all other modules but the CoreModule and AppModule, are being lazily loaded — they're only loaded whenever needed.

We also need to consider the scenario in which a user is already logged in when they load the application. As of now, our application only starts a Session whenever our user logs in. This means that with the aforementioned scenario, our user is logged in while there is no active Session running. As you're aware, it is important that there's always an active Session running when our user is logged in. We should, therefore, make sure that a Session will be created for the already logged in user in this scenario. We’re able to do this by making sure that if the CoreModule starts, the Session will be created as well.

Navigate to the CoreModule in src/app/core/core.module.ts and add the following highlighted line:

constructor (
@Optional() @SkipSelf() parentModule: CoreModule,
private productService: ProductService,
private talkService: TalkService) {
   if (parentModule) {
      throw new Error('CoreModule is already loaded. Import only in AppModule');
   }

   this.talkService.createCurrentSession();
}

Make sure to also inject the TalkService into the CoreModule.

Chat Popup

In this section, we’re going to make sure that our user is able to open a chat with the vendor of a product, by the use of a Chat Popup.

This is what a Chat Popup looks like:

Preloading

Navigate to the product page of a motorcycle.

The first thing we should do is make sure that the chat between our user and the product’s vendor, is ready before our user actually tries to open this chat.

We’re going to do this by preloading the chat whenever the product page is being loaded.

TalkService
Add the following method to the TalkService:

async createPopup(otherApplicationUser: User, keepOpen: boolean) : Promise {
   const session = await this.currentSessionDeferred.promise;
   const conversationBuilder = await this.getOrCreateConversation(session, otherApplicationUser);
   const popup = session.createPopup(conversationBuilder, { keepOpen: keepOpen });

   return popup;
}

What this method does is retrieve the currentSession and create a TalkJS ConversationBuilder instance by calling the TalkService#getOrCreateConversation method, which we’re going to add in just a moment.

The Session has a method that creates and returns a TalkJS Popup instance. We're calling this method and return its created Popup instance. The keepOpen PopupOption determines whether the Popup should stay open if the user navigates to a different page in your application. You can read more about it here.

Add the missing TalkService#getOrCreateConversation method:

private async getOrCreateConversation(session: Talk.Session, otherApplicationUser: User) {
   const otherTalkUser = await this.createTalkUser(otherApplicationUser);
   const conversationBuilder = session.getOrCreateConversation(Talk.oneOnOneId(this.currentTalkUser, otherTalkUser));

   conversationBuilder.setParticipant(this.currentTalkUser);
   conversationBuilder.setParticipant(otherTalkUser);

   return conversationBuilder;
}

The Session#getOrCreateConversation method requires a conversationId. TalkJS has a function called Talk#oneOnOneId which generates an id between two TalkJS User instances, which will always be the same for the two given users, no matter in which order you pass the users as its parameters. You can read more about the function here.

We're using the Talk#oneOnOneId method to generate the needed conversationId.

Product Page Component
Navigate to the ProductPageComponent:
src/app/products/components/product-page/product-page.component.ts

We’ll first have to add a local variable for the Popup that we’re going to preload and display. Add:

private chatPopup: Talk.Popup;

Make sure to import the TalkJS SDK and inject our TalkService into this Component.

Add the preloading method:

private async preloadChatPopup(vendor: User) {
   this.chatPopup = await this.talkService.createPopup(vendor, false);
   this.chatPopup.mount({ show: false });
}

This method asynchronously waits for the Popup to be created, to then assign it to a local variable and call the popup#mount method on the created Popup. The popup#mount method gets called with the show property being false, which means that the Popup is being mounted — this is needed to be able to show the Popup later on — but not shown afterward.

Call the preloading method in the ngOnInit lifecycle hook:

ngOnInit() {
   this.productService.getProduct(this.getProductId()).then(product => {
   this.product = product;

   this.preloadChatPopup(product.vendor);
   });
}

Displaying

Create a button which, when clicked, calls the ProductPageComponent#showChatPopup method. You can look at how we added the button in the final source of the marketplace application.

Add the display method to our ProductPageComponent:

showChatPopup() {
   this.chatPopup.show();
}

We have now successfully added the TalkJS Popup to our application.

If you have successfully executed all steps, your TalkService, ProductPageComponent and ProductPageComponent's template should look like:

TalkService

import { Injectable } from "@angular/core";
import * as Talk from 'talkjs';
import { User } from "src/app/shared/models/user.model";
import { AuthenticationService } from "src/app/core/services/authentication.service";
import { Deferred } from "src/app/shared/utils/deffered.util";

@Injectable({
providedIn: 'root'
})
export class TalkService {
   private static APP_ID = 'YOUR_APP_ID';
   private currentTalkUser: Talk.User;
   private currentSessionDeferred = new Deferred()

   constructor(private authenticationService: AuthenticationService) { }

   async createCurrentSession() {
      await Talk.ready;

      const currentUser = await this.authenticationService.getCurrentUser();
      const currentTalkUser = await this.createTalkUser(currentUser);
      const session = new Talk.Session({
         appId: TalkService.APP_ID,
         me: currentTalkUser
      });

      this.currentTalkUser = currentTalkUser;
      this.currentSessionDeferred.resolve(session);
   }

   async createTalkUser(applicationUser: User) : Promise {
      await Talk.ready;

      return new Talk.User({
         id: applicationUser.id,
         name: applicationUser.username,
         photoUrl: applicationUser.profilePictureUrl
      });
   }

   async createPopup(otherApplicationUser: User, keepOpen: boolean) : Promise {
      const session = await this.currentSessionDeferred.promise;
      const conversationBuilder = await this.getOrCreateConversation(session, otherApplicationUser);
      const popup = session.createPopup(conversationBuilder, { keepOpen: keepOpen });

      return popup;
   }

   private async getOrCreateConversation(session: Talk.Session, otherApplicationUser: User) {
      const otherTalkUser = await this.createTalkUser(otherApplicationUser);
      const conversationBuilder = session.getOrCreateConversation(Talk.oneOnOneId(this.currentTalkUser, otherTalkUser));

      conversationBuilder.setParticipant(this.currentTalkUser);
      conversationBuilder.setParticipant(otherTalkUser);

      return conversationBuilder;
   }
}

ProductPageComponent:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

import * as Talk from 'talkjs';

import { Product } from 'src/app/shared/models/product.model';
import { ProductService } from 'src/app/core/services/product.service';
import { User } from 'src/app/shared/models/user.model';
import { TalkService } from 'src/app/core/services/talk.service';

@Component({
selector: 'app-product-page',
templateUrl: './product-page.component.html',
styleUrls: ['./product-page.component.css']
})

export class ProductPageComponent implements OnInit {
   product: Product;
   private chatPopup: Talk.Popup;

   constructor(
   private productService: ProductService,
   private talkService: TalkService,
   private route: ActivatedRoute,
   private router: Router) { }

   ngOnInit() {
      this.productService.getProduct(this.getProductId()).then(product => {
      this.product = product;

      this.preloadChatPopup(product.vendor);
      });
   }

   goToVendorPage(vendor: User) {
      this.router.navigate(['users/' + vendor.id]);
   }

   showChatPopup() {
      this.chatPopup.show();
   }

   private async preloadChatPopup(vendor: User) {
      this.chatPopup = await this.talkService.createPopup(vendor, false);
      this.chatPopup.mount({ show: false });
   }

   private getProductId() {
      return Number(this.route.snapshot.paramMap.get('id'));
   }
}

So far, we've learnt how we can add a chat popup to an Angular marketplace application. In the next part of this tutorial, we will learn how to add a chatbox and inbox to the application.

Nevertheless, Sarah Coded

Sarah Chima — Fri, 06 Mar 2020 17:21:45 +0000

It's that time of the year when we get to write this and I am happy to write one. Not because I've got some exciting story to inspire or motivate you but simply to tell you that sometimes it's okay not to have it all figured out. That's how I feel right now. Why do I feel this way? Let me tell you a little story about myself.

A few years ago, I started my journey in tech as a frontend developer. You see, frontend development has always been my strong point. I mean give me any design and I'll make the interface look like the design while making it responsive and trying to make it as accessible and performant as possible.

Last year, I joined a different company. Not as a Frontend developer this time but as a software engineer. What this means is that I do backend tasks and everything in between. I was excited to learn a whole lot of new things. I still am. With each challenging task I overcome, I feel happier and I feel better.

But I guess there's something about trying out a different challenge. While you feel excited, there's this constant reminder that you don't really know as much as you should. I ask myself sometimes, do I really know what I am doing? What do I want to do next? What do I want to learn next? I mean with Frontend development there's always something I want to try out or do. I had a path all figured out in my head. But it's different with backend development.

Don't get me wrong, I really love my current job and I think it challenges me enough. But I'm just at this point where I really do not know what I'm doing. I can't be the only one that feels this way. Or am I?

I know this is a phase in my career that will pass. I know sometime soon I'll have a clear plan of what I want to do next. Till then, I'll continue to show up at work every day and do my best. I'll continue to try to learn new things and grow in my knowledge. I'll continue to start new courses and get tired of them halfway. I'll continue to solve Leetcode problems whenever I can. I'll continue to code.

Till next time!!!

How to build a LinkedIn-like Messaging App with React and TalkJS - Part 2

Sarah Chima — Mon, 23 Dec 2019 12:31:58 +0000

In the first part of the tutorial, we saw how we can build a LinkedIn-like messaging app without chat. In this part, we will see how we can easily integrate chat into this app or any other React application. In case you missed it, here's a live demo of the app we are trying to build. Let's continue by setting up TalkJS in our app.

Setting up TalkJS

Creating an account and adding user roles

First, you will have to create an account with TalkJS. To do this, visit the TalkJS website. On the navigation menu, you will a blue button that says “Try for Free”. Click on this button and create an account. If this is successful, you will be redirected to your TalkJS dashboard. Take note of your APP ID which you will be using later in this tutorial.

TalkJS allows different groups of users to have different settings by assigning them a 'role'. You have full control over which user gets which role. Since we want features like file sharing and location sharing in our app, we need to create a role on our TalKJS dashboard.

To create a role, scroll down the page to where you see roles. Click on the “+” button to create a new role. We will call our role Member. Click on the Save button. Next, settings for this user will be displayed. Click on enable file sharing and location sharing and any other setting you want to enable.

Adding TalkJS to the App

Setting up TalkJS on your React app is quite easy too. To install, we run the following command.

npm install talkjs --save

When this is done, you can use TalkJS in any file in our project by importing it.

import Talk from "talkjs";

That is it for setting up TalkJS. Now let us move to build the application.

Setting up the Chatbox

First, we import TalkJS into the file

    import React, { Component } from 'react';
    import Talk from "talkjs";
    import { dummyUsers } from "./Users";

    ...

Next, we add a method that handles the click of the “message” button event. Add this to the component.

    ...    
    handleClick(userId) {

            /* Retrieve the two users that will participate in the conversation */
            const { currentUser } = this.state;
            const user = dummyUsers.find(user => user.id === userId)

            /* Session initialization code */
            Talk.ready
            .then(() => {
                /* Create the two users that will participate in the conversation */
                const me = new Talk.User(currentUser);
                const other = new Talk.User(user)

                /* Create a talk session if this does not exist. Remember to replace the appId with the one on your dashboard */
                if (!window.talkSession) {
                    window.talkSession = new Talk.Session({
                        appId: YOUR_APP_ID,
                        me: me
                    });
                } 

                /* Get a conversation ID or create one */
                const conversationId = Talk.oneOnOneId(me, other);
                const conversation = window.talkSession.getOrCreateConversation(conversationId);

                /* Set participants of the conversations */
                conversation.setParticipant(me);
                conversation.setParticipant(other);

                /* Create and mount chatbox in container */
                this.chatbox = window.talkSession.createChatbox(conversation);
                this.chatbox.mount(this.container);
            })            
            .catch(e => console.error(e));
        }

There is a lot going on in the code above. Let us analyse what is going in it.

Users need to belong to a Talk session to use TalkJS. A user does not need to log directly into TalkJS to do this. Rather, in our app, we ensure that only users logged in on our app can have a TalkJS session. We do this session initialisation in lines 9-21. You can find your APP ID on your TalkJS dashboard. Remember to replace YOUR_APP_ID with it.

Lines 24-30 creates a conversation between the two users, then creates and mount the chatbox.

For this method to be useful, we have to call it when any of the “message” buttons are clicked. We also need to pass the userId of the user as we call the handleClick method. Let us do that. Replace the button in the render method with the following code.

     ...
         <div className="user-action">
             <button onClick={(userId) => this.handleClick(user.id)}>Message</button>
          </div>

    ...

We also need to add the container which the chatbox will be mounted on. So in the render method, we also add the following.

...
     </ul>
         <div className="chatbox-container" ref={c => this.container = c}>
             <div id="talkjs-container" style={{height: "300px"}}><i></i>        </div>
             </div>
         </div>
    ...

Go ahead and click on any of the “message” buttons now. You should see the chatbox pop up when you click on any of them.

To make it look more LinkedIn-like, let us position the chatbox to the bottom right of the page by styling the chatbox-container class. So add the following style to your App.css file.

.chatbox-container {
  position: absolute;
  bottom: 0;
  height: 400px;
  right: 5%;
  width: 300px;
}

This should be the page when you click on any of the message buttons.

That is it. We have made significant progress. Did you notice how easy it is to set up a chat feature? Go ahead and start a conversation with any of the dummy users. Of course, they cannot reply to you because they are dummy users.

Let us move on to our last component - the messaging component.

Creating the Messaging Component

The messaging component holds a list of all conversations the current user has had with other users just like on LinkedIn. TalkJS also makes it easy to set this up. Let’s create a basic component.

import React, { Component, Fragment } from 'react';
import Talk from "talkjs";

class Messaging extends Component {

    render() {
        return (
            <Fragment>
                <div style={{height: '500px'}} className="inbox-container" ref={c => this.container = c}>Loading...</div>
            </Fragment>
        );
    }
}

export default Messaging;

Remember to import this file in the App.js file and create a route for it.

...
import Login from './Components/Login';
import MyNetwork from './Components/MyNetwork';
import Messaging from './Components/Messaging';

...

...

            <Route path="/" exact component={Login}/> 
            <Route path="/mynetwork" component={MyNetwork}/>
            <Route path="/messaging" component={Messaging}/>
         </Router>
     </div>
...

You should see just the loading… message on the screen right now.

Let us set up the TalkJS Inbox. First, we retrieve the current user from the local storage and add it to the state of the component. TalkJS will use this to fetch the conversations and add it to the state. In line 4, we initialise the value of inbox.

constructor(props) {
    super(props);

    this.inbox = undefined;
    let currentUser;
    const currentTalkjsUser = localStorage.getItem('currentTalkjsUser');
    if (currentTalkjsUser) {
        currentUser = JSON.parse(currentTalkjsUser)
    }

    this.state = {
        currentUser
    }
}

Next, we add a componentDidMount lifecycle method and set up the inbox there.

componentDidMount() {
    Talk.ready
        .then(() => {
            const me = new Talk.User(this.state.currentUser);

            if (!window.talkSession) {
                window.talkSession = new Talk.Session({
                    appId: YOUR_APP_ID,
                    me: me
                 });
            }

            this.inbox = window.talkSession.createInbox();
            this.inbox.mount(this.container);

        })
        .catch(e => console.error(e));
}

Notice that this is quite similar to how we created the chatbox. There are subtle differences though.

In lines 13-14, instead of using createChatbox, we used createInbox. Also, we did not have to create another user, since this basically displays the previous conversations you have had with users.

If you have added the above code, you should see the inbox now. If you started any conversation using the chatbox, you should see it in the inbox. Otherwise, it displays “You have not started any conversation”.

Congrats for making it this far. You have built yourself a LinkedIn-like messaging app.

Conclusion

In this tutorial, we have seen how easy it is to use TalkJS to add a messaging feature to your React app. TalkJS removes all the complex work of using APIs and building a user interface for your messages.

We built a login page to retrieve the current user’s data. We also built a “MyNetwork” page which is similar to the LinkedIn “MyNetwork”. On this page, we displayed a list of users and a button which enables the user to send messages to any user on the list. We used TalkJS to setup the chatbox. Lastly, we built the Messaging component using TalkJS Inbox.

I hope you had fun building this because I did. You can check the Github repo for the full code.

For further reading, you can refer to the following documents.
Getting Started with TalkJS
The TalkJS inbox
The TalkJS Chatbox

How to build a LinkedIn-like Messaging App with React and TalkJS - Part 1

Sarah Chima — Mon, 16 Dec 2019 08:56:44 +0000

Chat is an integral part of most modern web applications today. Whether it is a company website, an online market place or an online community, the ability for users to communicate with a company representative or other users on a platform greatly improves user experience.
However, building a chat feature from scratch might be tasking for a developer. Thankfully, with TalkJS, adding chat to your app is one less thing you have to worry about as a developer.

This tutorial will show you how you can easily integrate a chat feature into an app using TalkJS. It will serve as a step-by-step guide to integrate TalkJS into any React application. We will use a practical and real-world use case to do this demonstration. We will build a LinkedIn-like messaging app. Here is a link to the repository of the messaging app. You can follow the guide to set it up and see how it works.

This tutorial is divided into two parts. In the first part, we will build a LinkedIn-like app without any chat. In the second part, we will integrate chat into the app using TalkJS.

First, though, let us discuss what TalkJS is and some features it provides out of the box.

An Introduction To TalkJS

TalkJS makes it easy to integrate full-featured chat into your websites and mobile apps. With the TalkJS chat API + SDK, developers can easily add chat between users on your platform in hours instead of months. Here are some features of TalkJS that makes it a great choice for your next chat integration.

Real-time messaging: TalkJS provides more than just real-time messaging, it provides features that bring such messaging to live. With TalkJS, you can easily enable features like file sharing, location sharing, emoji in your chat application.
Email and SMS fallback: In this busy world, users of your application may not always be online. TalkJS sends emails and/or SMS to your offline users so that never miss messages.
Chat Pop-up: With the TalkJS chat pop-up, you can bring a single conversation into focus from anywhere on your platform.
Full Conversation History: With the TalkJS Inbox view, your users can get back to a conversation whenever they want. TalkJS Inbox provides users with a history of all their conversations in a beautiful and well-designed interface.
Responsive cross-browser UX: With TalkJS, you do not have to bother about writing complex media queries to make your chat interface responsive. By default, TalkJS interfaces look great on all screen sizes and modern browsers.
Multi-Language User Interface: With the in-built localisation features of TalkJS, you can display the text of the interfaces in the user's language.

These are just some of the features that make TalkJS the best choice for your chat integrations. Now let us see how we can integrate TalkJS in your React or JavaScript application.

Prerequisites

To follow along with this tutorial, you will need the following:

Basic knowledge of JavaScript.
An understanding of React and its component lifecycle methods.
Node >= version 6 and NPM >= version 5.2 (or yarn if you prefer yarn) running on your machine.

What we will be building

We will be building an app like the messaging feature of LinkedIn.

LinkedIn messaging has two major parts.

The chat widget that pops up when you want to send a message to a connection.
The main messaging page. This page shows the list of all the conversations you have with your connections.

We will be building a messaging app similar to this. There are three major parts of this app.

The login page: This is a simple form that takes basic user data TalkJS will use for the chats.

2.The MyNetwork page: This is an interface that displays a list of users that represent your connections on LinkedIn. For this tutorial, we will be using dummy data. In a real app, this user list can be gotten from your database. Each user on the list has a “Message” button which you can use to start a conversation with that user. Clicking on this button brings up a Chatbox similar to that found on LinkedIn.

3.The Messaging page: This is similar to the messaging page of LinkedIn that shows all the conversations a user has had with other connections. This will be accomplished using the Inbox feature of TalkJS.

Here is a live demo of this application.

Let us start building. First, we need to do a basic setup for the application.

Setting up the App using Create React App Boilerplate

To set up the app, we will be using the create-react-app boilerplate which makes it very easy to set up any React app. If you do not already have it installed, then run the command below to install it globally on your machine.

npm install -g create-react-app

After installing this, you can easily create react apps on your machine. Let us create one for the app we are building. We will call it messaging-app.

create-react-app messaging-app

When we do that, we are ready to start building our project. Next, we navigate to the folder we created.

cd messaging-app

To start the application, run the following command.

npm start

The app should be running now on your default browser. That is it for setting up the React application. Now, let us move over to set up routes for the app using react-router.

Structuring the files and adding routes

This is the file structure of the project we will be building. We will keep this as simple as possible.

/
|-- node_modules
|-- /public
|-- /src
    |-- /Components
        |-- Messaging.js
        |-- Login.js
        |-- MyNetwork.js
        |-- Users.js
|-- App.css
|-- App.js
|-- index.css
|-- index.js

Create the files to make your project structure similar to the file structure above. We will be using react-router to add basic routes for our components in our App.js file. So next, we will install react-router.

npm install --save react-router react-router-dom

Then, we replace the content of the App.js file with the following code.

import React, { Component } from 'react';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';

import './App.css';

class App extends Component {
    render() {  
        return (
            <div>
                <Router>
                    <nav className="navbar"> 
                        <ul className="navbar-list">
                            <li className="navbar-item">
                                <Link to="/mynetwork" className="navbar-link">My Network</Link>
                            </li>
                            <li className="navbar-item">
                                <Link to="/messaging" className="navbar-link">Messaging</Link>
                            </li>
                        </ul>

                    </nav>
                </Router>
            </div>
        );
    }
}
export default App;

The App.js contains the navbar that we can use to access the parts of the app. For now, the links do nothing because we have not added routes. We will add these routes as the create the components.

Since we assume that you have a basic knowledge of React, we will not be explaining every part of the code. Let us add some CSS styles for the navbar in the App.css file.

body {
  background-color: #F5F5F5;
}
li {
  list-style-type: none;
}
* {
  box-sizing: border-box;
}
.navbar {
  display: flex;
  align-items: center;
  height: 52px;
  background-color: #283E4A;
  margin-bottom: 50px;
}
.navbar-list {
  display: flex;
  margin: 0 auto;
}
.navbar-item {
  color: #ffffff;
}
.navbar-link {
  color: #ffffff;
  text-decoration: none;
  margin-right: 20px
}

Next, we will create the Login component.

Creating the Login Component

As shown in the login image, the login interface is a form used to take basic user data. TalkJS will use this data to create a new user. This user data includes the user’s name, email and a short description to make it look more LinkedIn-like. We will store this data in the browser’s local storage. We can retrieve it from the local storage whenever we need it.

To create a new user, we assign a number to the user as the ID of the user. TalkJS will use this ID to identify each user and retrieve messages by that user. In this tutorial, we will assign a random number to each new user as shown in the code below.

First, in the login component, we add the form.

import React from "react";

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            email: "",
            description: "",
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }
    handleChange(e) {
        const target = e.target;
        this.setState({
            [target.name] : target.value
        })
    }
    handleSubmit(event) {
        event.preventDefault();
        const { name, email, description } = this.state;

        /* Generate random number that will be serve as the ID of the user */
        const randomNum  = Math.ceil(Math.random() * 10000);
        const userData = {
            name,
            email,
            description,
            id: randomNum,
            role: "Member",
            photoUrl: "https://talkjs.com/docs/img/ronald.jpg"
        }

        /* Store user data in browser's local storage */
        localStorage.setItem("currentTalkjsUser", JSON.stringify(userData))
        /*Redirect to the my network page */
        this.props.history.push("/mynetwork");
    }
    render() {
        return (
            <div className="login-container">
                <div className="login-form">
                    <form onSubmit={this.handleSubmit}>
                        <input type="text"
                           name="name"
                           onChange={this.handleChange}
                           placeholder="Name"
                           className="input" 
                           required
                         />
                         <input
                           type="email"
                           name="email"
                           onChange={this.handleChange}
                           placeholder="Email"
                           className="input"
                           required
                          />
                         <textarea type="text"
                           name="description"
                           onChange={this.handleChange}
                           placeholder="Short Description"
                           className="input textarea">
                         </textarea>
                         <input type="submit"
                           className="button" 
                           placeholder="submit"
                         />
                    </form>
                </div>
            </div>
        )
    }
}
export default Login

The form takes the user's data and stores it in the local storage using the handleSubmit method. Then, it redirects the user to the MyNetwork page. Let us import this to our App.js file and create a route for it there. This will enable us to see the login page.

import React, { Component } from 'react';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
import Login from './Components/Login';

...

...
                <li className="navbar-item">
                    <Link to="/messaging" className="navbar-link">Messaging</Link>
                </li>
            </ul>
        </nav>

        <Route path="/" exact component={Login}/> 
    </Router>
</div>
...

At this point, your screen should look like this.

Ugly right? To make it look more appealing, add the following styles to the App.css file.

.login-container {
  width: 40%;
  margin: 0 auto;
  text-align: center;
}
.login-form {
  background: #ffffff;
  padding: 40px 20px;
}
.input {
  display: block;
  height: 42px;
  width: 80%;
  margin: 0 auto 20px;
  padding: 10px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #8F7474;
}
.button {
  width: 150px;
  border-radius: 4px;
  height: 42px;
  font-size: 14px;
  background-color: #283E4A;
  color: #ffffff;
}
.textarea {
  height: 100px;
}

It looks much better now.

Clicking on the submit button will redirect to the mynetwork page which has no content for now.
Let us move on to this page then. This is where we get to use TalkJS.

Creating the “My Network” Component

This will be similar to the “my network” page on LinkedIn, where you see a list of all connections. In this case though, we will be using dummy data to fetch these users. Below is a list of dummy connections. We will add this list to the Users.js file and import it in the MyNetwork file.

export const dummyUsers = [ 
    {
        id: "2",
        name: "Kelvin Samson",
        email: "kelvin@sample.com",
        photoUrl: "https://randomuser.me/api/portraits/men/32.jpg",
        role: "Member",
        info: "Product Designer at Facebook",
        welcomeMessage: "Hey there! Love to chat :-)"
    },
    {
        id: "3",
        name: "Annabel Stone",
        email: "annie@sample.com",
        photoUrl: "https://randomuser.me/api/portraits/women/65.jpg",
        role: "Member",
        info: "Digital Marketer at Microsoft",
        welcomeMessage: "Hey there! Love to chat :-)"
    },
    {
        id: "4",
        name: "Grace Loveday",
        email: "grace@sample.com",
        photoUrl: "https://randomuser.me/api/portraits/women/44.jpg",
        role: "Member",
        info: "Product Designer at Google",
        welcomeMessage: "Hey there! Love to chat :-)"
    },
    {
        id: "5",
        name: "Angela Jobs",
        email: "angela@sample.com",
        photoUrl: "https://pbs.twimg.com/profile_images/834493671785525249/XdLjsJX_.jpg",
        role: "Member",
        info: "Software Engineer at TalkJS",
        welcomeMessage: "Hey there! Love to chat :-)"
    },
]

Next up, we will create the MyNetwork component and display the list of users.

Rendering the list of users

Create the MyNetwork.js file if you have not already done so. Add the following code to it.

import React, { Component } from 'react';
import { dummyUsers } from "./Users";

class MyNetwork extends Component {
    render() {
        return (
            <div className="users">
                <div className="users-container"> 
                    <ul>
                        { dummyUsers.map(user => 
                          <li key={user.id} className="user">
                              <picture className="user-picture">
                                  <img src={user.photoUrl} alt={`${user.name}`} />
                              </picture>
                              <div className="user-info-container">
                                  <div className="user-info">
                                      <h4>{user.name}</h4>
                                      <p>{user.info}</p>
                                  </div>
                                  <div className="user-action">
                                      <button >Message</button>
                                  </div>
                              </div>
                          </li>
                        )}
                    </ul>
                </div>
           </div>
        )
    }
}
    export default MyNetwork;

We added a map that loops through each user and displays their basic data.

Let us import this file and create a route for it in the App.js file.

import React, { Component } from 'react';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
import Login from './Components/Login';
import MyNetwork from './Components/MyNetwork';

...

...

            <Route path="/" exact component={Login}/> 
            <Route path="/mynetwork" component={MyNetwork}/>
         </Router>
      </div>
    ...

If you click on the “my network” link on the navbar, you will see that the name, user description and image of each user is being displayed. You will also notice that there is a message button for each user. This is the button we will use to call up the TalkJS chatbox. Before we do this, let us add some styles to the App.css file for this page.

.users {
  display: flex;
  width: 55%;
  margin: 0 auto;
  justify-content: space-around;
}
.users-container {
  background-color: #ffffff;
  width: 65%;
  padding: 20px 0;
}
.user {
  display: flex;
  margin-bottom: 20px;
  position: relative;
  border-bottom: 1px solid #e6e9ec;
}
.user:last-of-type {
  border: 0;
}
.user::after {
  content: '';
  width: 92px;
  height: 2px;
  background: #fff;
  position: absolute;
  bottom: -1px;
  left: 0;
}
.user-picture img {
  height: 72px;
  width: 72px;
  border-radius: 50%;
  margin-right: 20px;
}
.user-info {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.user-info-container {
  display: flex;
  width: 100%;
}
.user-info h4 {
  margin: 0;
}
.user-info p{
  margin-top: 7px;
  color: #676767;
  font-size: 14px;
}
.user-action {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-action button {
  background-color: transparent;
  color: #0073b1;
  border: 1px solid #0073b1;
  height: 32px;
  width: 92px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 2px;
  cursor: pointer;
}

The network page should look like this now.

Displaying the current user

Before we will be able to send messages, we need to get the current user. TalkJS will use this to set up the conversation between the current user and the user that you want to send a message to. Remember we saved the logged-in user in the local storage. Let us retrieve it an add it to our component’s state. We can even get fancier by adding the current user’s data to the user interface. That way the user will know who he is logged in as.

Let us do this by adding the following code to the constructor method of our component.

class MyNetwork extends Component {
    constructor(props) {
        super(props); 
        let currentUser;
        const currentTalkjsUser = localStorage.getItem('currentTalkjsUser');
        if (currentTalkjsUser) {
            currentUser = JSON.parse(currentTalkjsUser)
        }
        this.state = {
            currentUser
        }
    }
...

Next, we will use the data to display the current user’s information in the render function.

...   
 render() {
     const { currentUser } = this.state;
     return (
         <div className="users">
             <div className="current-user-container">
                 {currentUser &&
                     <div>
                         <picture className="current-user-picture">
                             <img alt={currentUser.name} src={currentUser.photoUrl} />
                         </picture>
                         <div className="current-user-info">
                             <h3>{currentUser.name}</h3>
                             <p>{currentUser.description}</p>
                         </div>
                     </div>
                 }
             </div>
             <div className="users-container"> 
    ...

Now you should have some user data on the interface. Let us add some styles for it. Add the following CSS to the App.css file.

.current-user-container {
  width: 28%;
}
.current-user-container>div {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}
.current-user-info {
  text-align: center;
}
.current-user-info h3 {
  margin-bottom: 10px;
}
.current-user-info p {
  margin-bottom: 0;
}
.current-user-picture img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

It should look great now. We have made good progress.

So far, we have been able to build a LinkedIn-like app with a login page and the "My Network" page. In the next part of this tutorial, we will set up TalkJS and add chat to the application.

Anagrams Checker - Three JavaScript Solutions

Sarah Chima — Fri, 09 Aug 2019 16:21:35 +0000

I started a series on JavaScript solutions to common algorithms and javascript problems. In case you missed the first one, here's a link to it. Earlier this week, I wrote an article on the Big O notation. If you are not familiar with it, you might want to read it as some concepts are used in this article. Let's go straight to the problem statement.

Finding Anagrams - the problem

Anagrams are words that have the same characters in the same quantity. This means that two strings are anagrams if we can rearrange one to get the other.

Here are some examples of words that are anagrams.

“listen” and “silent”
“rail safety” and “fairy tales”
“dormitory” and “dirty room”
“the eyes” and “they see”

To solve this problem, we will assume the following:

That we ignore extra characters like “!”, “@”, etc. and whitespaces.
We only want to work with lowercase characters.

Let us look at some solutions to this problem. Then we'll compare each of them based on their time complexity.

Solution 1 - Create a character map of both strings and compare maps

A character map in this context is a map or object that contains each unique character in the string. It stores the character as a key and the number of times it occurs in that string as the value.

    function anagrams(stringA, stringB) {
        /*First, we remove any non-alphabet character using regex and convert
        convert the strings to lowercase. */
        stringA = stringA.replace(/[^\w]/g, "").toLowerCase()
        stringB = stringB.replace(/[^\w]/g, "").toLowerCase()

        //Get the character map of both strings
        const charMapA = getCharMap(stringA)
        const charMapB = getCharMap(stringB)

        /* Next, we loop through each character in the charMapA, 
        and check if it exists in charMapB and has the same value as
        in charMapA. If it does not, return false */
        for (let char in charMapA) {
            if (charMapA[char] !== charMapB[char]) {
                return false
            }
        }

        return true
    }

    function getCharMap(string) {
        // We define an empty object that will hold the key - value pairs.
        let charMap = {}

        /*We loop through each character in the string. if the character 
        already exists in the map, increase the value, otherwise add it 
        to the map with a value of 1 */
        for (let char of string) {
            charMap[char] = charMap[char] + 1 || 1
        }
        return charMap
    }

The runtime complexity of a for loop is linear i.e O(n). In this case, there are 3 consecutive forloops which are not nested. Ignoring constants and other factors, the time complexity is approximately linear i.e. O(n).

2. Sort Strings and check if they are the same

This is a shorter and neater way of checking if two strings are anagrams.
In this case, we convert the string to an array, use the Array.sort()
method to sort it and convert it back to a string. Then we compare both strings and check if they are the same.

    function anagrams(stringA, stringB) {
        /*First, we remove any non-alphabet character using regex and convert       
        convert the strings to lowercase. */
        stringA = stringA.replace(/[^\w]/g, '').toLowerCase()
        stringB = stringB.replace(/[^\w]/g, '').toLowerCase()

        return sortString(stringA) === sortString(stringB)
    }

    /*This function sorts the strings*/ 
    function sortString(string) {
        return string.split('').sort().join('');
    }

Array.sort uses merge sort so its time complexity is O(nlogn).

3. Using Array.splice()

This is yet another solution. In this case, we convert string B to an array, loop through each character in string A and check if it exists in an array of string B, arrB. If it exists, we use the Splice method to remove it from the array. We do this so that characters that occur more than once in arrB are not checked twice.

    function anagrams(stringA, stringB) {
        /*First, we remove any non-alphabet character using regex and convert       
        convert the strings to lowercase. */
        stringA = stringA.replace(/[^\w]/g, '').toLowerCase()
        stringB = stringB.replace(/[^\w]/g, '').toLowerCase()

        /*Next, we check if the lengths of the strings are equal. 
        If they are anagrams, they will have the same length. */
        if (stringA.length !== stringB.length) {
            return false
        }

        let arrB = stringB.split("")

        for (let char of stringA ){ 
            if (!arrB.includes(char)) {
                return false
                break;
            } else {
                arrB.splice(arrB.indexOf(char), 1)
            }
        }

        return true

    }

So let's consider the time complexity of this solution. In this case, there are three loops that run. The for loop, the includes loop and the splice loop. Since the splice loop and the includes are not nested, the time complexity tends to O(n^2 ).

Conclusion

We have seen the solutions and their approximate time complexities. Comparing their time complexities, the first solution seems to have better performance. It has an approximate time complexity of O(n). The second solution, however, is more concise. So you can choose any solution depending on what is more important to you.

Got any question or addition? Please leave a comment.

Thank you for reading.

The Big O Notation - An Introduction

Sarah Chima — Mon, 05 Aug 2019 16:32:29 +0000

You might wonder why I added a picture of a blue alien as my cover image. It's a character from one of my favourite movies "Home" and his name is Oh. Oh like Big "Oh" notation. Get it 😂?
Let us get serious now.

A long time ago, before the emergence of 10x engineers, software engineers sought ways to solve real-world problems with their programming skills. Different engineers came up with different solutions/algorithms to solve these problems. There was a need to compare these solutions based on their complexity and efficiency. This need gave birth to the Big O notation. What is the Big O notation then?

What is the Big O notation?

Big O notation is used in computer science to describe the performance or complexity of an algorithm.

Algorithms are to computer programs what recipes are to dishes. Different recipes can help you to make a particular meal but they don't always yield the same results. They don't always have the same steps, ingredients nor take the same amount of time to follow. Some recipes are faster and produce better results than others.

In the same way, different algorithms can achieve a particular computer program. However, they are not all equally efficient or take the same amount of time to run. We use Big O to measure the efficiency of an algorithm.

For example, let's consider sorting. There are many sorting algorithms e.g. mergeSort, bubble sort, quicksort, and insertion sort. How do you know which is more efficient or less complex? This is why the Big O notation exists.

You might wonder, why do we need a notation? Why don't we just consider the time it takes to run the algorithm? Here are two of many reasons:

Different computers have different processors and thus some computers will spend less time running an algorithm than others.
Some programming languages are faster than others.

It will be stressful taking all these factors into consideration when trying to analyze an algorithm. Rather than do that, the Big O notation uses something more standard - the input. It considers how the runtime of the algorithm grows in relation to the size of the input. It is also good to note that the Big O notation considers the worst-case scenario for its analysis.

Hopefully, you get the sense of it now. Next question that might come to your mind is "Why should I know this?"

Why should you care?

For a small app that processes little data, such analysis might be unnecessary. This is because the difference in the runtime of algorithms might have little impact on your app. For large applications that manipulate a large amount of data, this analysis is crucial. Because inefficient algorithms will create a significant impact on the processing time. With a good knowledge of Big-O notation, you can design algorithms for efficiency. Thus, you'll build apps that scale and save yourself a lot of potential headaches.
For your coding interviews. Yeah, you heard me right. You are likely to get asked by an interviewer the runtime complexity of your solution. So it's good to have an understanding of the Big O notation.

Let look at some common examples of Big O Notation

Common Runtime Complexities

Source: https://www.bigocheatsheet.com

1. O(1) - Constant Runtime

In this case, your algorithm runs the same time, regardless of the given input data set.

An example of this is returning the first element in the given data like in the example below.

function returnFirst(elements) {
   return elements[0]
}

The runtime is constant no matter the size of the input given.

2. O(n) - Linear Runtime

Linear runtime occurs when the runtime grows in proportion with the size of the input data set. n is the size of the input data set.

A good example of this is searching for a particular value in a data set using an iteration like in the example below.

function constainsValue(elements, value) {
  for (let element in elements) {
    if (element === value) return true;
  }
  return false
}

We see that the time taken to loop through all elements in the array grows with an increase in the size of the array. But what if the element is found before it reaches the last element in the array? Does the runtime complexity change?

Remember that the Big O notation considers the worst-case scenario. In this instance, it's the case where the loops run through all elements in the array. So that is what determines the runtime complexity of the algorithm.

3. O(n^2 ) - Quadratic Runtime

O(n^2 ) denotes an algorithm whose runtime is directly proportional to the square of the size of the input data set.
An example of this is a nested iteration or loop to check if the data set contains duplicates.

function constainsDuplicate(elements) {
  for (let element in elements) {
     for (let item in elements){
       if (element === item) return true;
     }
  }
  return false
}

Deeper nested iterations will produce runtime complexities of O(n^3 ), O(n^4 ) etc

4. O(log n) - Logarithmic runtime

In this case, the runtime it takes for the algorithm to run will plateau no matter the size of the input data set.

A common example of this is a search algorithm like the binary search. The idea of a binary search is not to work with the entire data. Rather, reduce the amount of work done by half with each iteration. The number of operations required to arrive at the desired result will be log base 2 of the input size.

For further information on this runtime complexity, you can check some of the resources at the end of the article.

5. O(n log n) - Linearithmic runtime

Here, the runtime of the algorithm depends on running a logarithm operation n times.

Most sorting algorithms have a runtime complexity of O(n log n)

6. O(2^n ) - Exponential runtime

This occurs in algorithms where for each increase in the size of the data set, the runtime is doubled. For a small data set, this might not look bad. But as the size of the data increase, the time taken to execute this algorithm increases rapidly.

A common example of this is a recursive solution for finding Fibonacci numbers.

      function fibonacci(num) {
      if (num <= 1) return 1;

      return fibonacci(num - 2) + fibonacci(num - 1)
   }

7 O(n!) - Factorial runtime

In this case, the algorithm runs in factorial time. The factorial of a non-negative integer (n!) is the product of all positive integers less than or equal to n. This is a pretty terrible runtime.

Any algorithm that performs permutation on a given data set is an example of O(n!)

Conclusion

Hopefully, this article has helped you to grasp the concept of Big O notation.

Here are some resources where you can find more info on this topic.

Got any addition or question? Please leave a comment.

Thanks for reading😊.

Reverse a String - Four JavaScript Solutions

Sarah Chima — Wed, 17 Jul 2019 14:01:05 +0000

This article was originally published on my blog

The reverse a string problem is a common algorithm problem. In this article, we will consider four JavaScript solutions to it.

A Little Background Info

Lately, I have been taking a course on data structures and algorithms. This is because I realized that I suck at it. This has not always been the case. When I started learning JavaScript, solving algorithm challenges was the fun part for me. I could stay up for hours late at night just trying to solve a challenge. But two years and many frontend projects later, it seems I've forgotten everything I learned. That is why I decided to go back to learn and practice.

Solid knowledge of data structures and algorithms comes with much practice. And what better way to remember what I learn that to write about it. That's why I am presenting to you the first part of a series of articles to come.

Let's delve into our algorithm challenge for today: Reversing a String

The Problem

Reversing a string is, well, reversing a string. Okay, here's the problem statement: Write a function that reverses a string. If you pass "Sarah" to the function, it should return "haraS" and "listen" should become "netsil". Got it?

Now, let's look at four javascript solutions.

Solution 1. Using the array reverse() method

Thanks to the Array.reverse() method, we can reverse an array without much stress. The reverse() method reverses an array in place. The first array element becomes the last, and the last array element becomes the first.

In our case though, we are working with strings. So this means that we have to convert the string to an array using the split method, reverse it using the reverse method and convert it back to a string using the join method. Here's the code example.

function reverseString(string) {
       //convert the string to an array
       let array = string.split("");

    //Use the reverse method
    array.reverse()

    //Convert it back to a string and return
    return array.join("")
}

We can convert this to a one-liner using arrow function and implicit return.

const reverseString = (string) => string.split("").reverse().join('');

That's it. One line of goodness. Let's move to the next solution.

Solution 2: Good Ol' For-loop

This is the classic example of reversing through a string. It might be one of the first methods that will come to your mind if you encounter this problem.

What we will do here is to create an empty string that will hold the reversed string, loop through each character in the string and append it to the beginning of the new string.

    function reverse(str) {
    let reverseString = "";

    for (let character of str) {
        reverseString = character + reverseString;
    }

    return reverseString
}

Solution 3 - Using the Array.reduce() method

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value. You can read about it if you are not familiar with it.

To use the reduce method, we need to convert our string to an array. Next, we use the reduce method to convert it to a reversed string. The reducer, in this case, appends each character of the string to the beginning of the accumulator which, in the code below, is reversed.

function reverseString(string) {
    //convert the string to an array
    const array = string.split('');

    //use the reduce method to convert the array to a reversed string
    const reversedString = array.reduce((reversed, character) => {
        return character + reversed
    }, '')

    return reversedString
}

This function above can further be reduced to :

const reverseString = (string) => {
    return string.split('').reduce((reversed, character) => character + reversed, '')
}

Making it a one-liner and shortening the name of the variables used in the reduce method.

const reverseString = (string) => string.split('').reduce((rev, char) => char + rev, '')

Solution 4 - Using recursion

Are you a friend of recursion? If not, let me introduce you to it.

Recursion is a way of solving a problem by using a function that calls itself. Each time the function calls itself, it reduces the problem into subproblems. This recursive call continues until a point is reached where the subproblem can be called without further recursion.

An important part of a recursive function is a base case. This is the condition(s) where the recursive call terminates to ensure it does not result in an infinite loop. You can find more explanations here.

Let's get back to 'reversing a string'. In this case, our base case is when the string is empty. We use the string.substring() method to get remove the first character in the string and pass the other characters to the function. Then we append the first character to our return statement as seen in the code below.

function reverse(string){
    //base case: if str is empty return str 
   if(string === ""){
        return string 
   } else{
        return reverse(string.substring(1)) + string[0]
   }
}

We can use a ternary operator instead of if-else statements.

function reverse(string){
    return string ? reverse(string.substring(1)) + string[0] : string
}

Conclusion

So there you have it, four cools ways to reverse a string in JavaScript. Have any other solution to this problem, please share it in the comments. I would really love to know.

Got any question or feedback? please leave a comment.

Follow me on Instagram @sarah_codes_ where I regularly post software development tips and advice.

Using the Local Storage

Sarah Chima — Wed, 05 Jun 2019 21:02:03 +0000

This article discusses what the local storage is and JavaScript methods that we can use to manipulate it.

I have always known about the local storage but I never got to use it on any project. So I decided to build a note app because I want to be able to use the local storage to store and manipulate data. I decided to share what I learnt while using it. First, let us understand what the local storage is.

What is Local Storage?

Local storage is a web storage object that is available in a user's browser. It allows JavaScript browsers store and access data right in the browser. Basic CRUD operations (create, read, update and delete) can be done on data in the local storage. Data stored in the local storage persists even when the browser window has been closed.

Another form of web storage is Session Storage. This is similar to local storage. The difference is that the data stored in the session storage gets cleared after the session ends, ie. the browser window is closed.

Local Storage Methods

Local Storage methods are the methods that help you manipulate the local storage. That is to save and access data stored in the local storage. These methods include:

setItem()
getItem()
removeItem()
clear()

Let us discuss each of them.

setItem()

We use this method to add new data items to the local storage object or update existing values if the data exists. It takes two arguments, the key of the item to create or update and the value to store. For example, if we want to store a name in the local storage, here is what we will do

    localStorage.setItem('name', 'Sarah');

In the example above, name is the key and Sarah is the value.

This is a simple example. What if you want to store something a little more complex like an array or an object in the local storage? For example, store the notes of the note app in the local storage. It is important to note that local storage stores values as strings. We need to convert the arrays or objects to strings before passing it to the local storage.

We can use the JSON.stringify() method to convert an object or array to strings before passing it the setItem() method.

    const notes = [
        {  
            title: 'A note',
            text: 'First Note'
        },
        {
            title: 'Another note',
            text: 'Second Note'
        }
    ]

    localStorage.setItem('notes', JSON.stringify(notes))

getItem()

This method is used to access data stored in the local storage. It accepts one argument: the key of the item you want to get the value of. It returns the value as a string.

Let us get the name we stored in the local storage.

    const name = localStorage.getItem('name');
    console.log(name) // 'Sarah'

What if we want to get the notes we stored in the local storage? we do the same thing, pass the key to the getItem method. However, to get our value as array, we need to parse it. Otherwise, it returns strings.

    JSON.parse(localStorage.getItem('notes'))

removeItem()

The removeItem() method removes data from the local storage. It receives a key and removes the data item stored with that key from the local storage. If that key does not exist in the local storage, it does nothing.

    localStorage.removeItem('name')

    console.log(localStorage.getItem('name')) //null

clear()

The clear() method clears the entire local storage of all data stored in it. It does not receive any argument.

    localStorage.clear()

Those are the methods available to store and retrieve data from the local storage. Next, let us see how we can listen to storage change events.

Event Listener for Storage Change

To listen to changes in the local storage, we add an event listener for storage.

    // When local storage changes, execute the doSomething function
    window.addEventListener('storage', doSomething())

The storage event fires when either the local storage or the session has been modified in the context of another document. This means that the storage event is not fired on the page that is making changes to the local storage. Rather it is fired in another tab or window if the same page is open there. The assumption is that your page already knows all changes that happen on it. That it will only need notification if the change happens on another page.

I encountered this challenge when building the note app. I was trying to update the part that displays the notes based on changes in the local storage. However, I noticed that when I add a new note, it does not update the notes. Rather it updates the same page opened in another tab. To solve this, I used a state object. After storing to the local storage, I stored or updated a new note in this state. The display of the notes depends on the changes to the state.

Important Things to Note about the Local Storage

One last thing before we go, there are important things about the local storage that we should know.

The local storage is limited to 5MB across all major browsers.
It can easily be accessed from the browser so it should not be used to store any sensitive data or user information.
Operations on the local storage are synchronous. Therefore, they are executed one after another.

Want to see the note app I built? Here's a link to the live app and a link to Github. Have any question on any part of this article or the app, feel free to ask.

You can follow me on Instagram where I post regularly on my tech journey. I also share short notes on things I have learnt.

A Guide to Handling Browser Events

Sarah Chima — Tue, 16 Apr 2019 06:41:20 +0000

Cover Photo by Ambitious Creative Co. - Rick Barrett on Unsplash

Most web pages are interactive and users can perform actions on the web page. Examples of actions are clicking on a link, submitting a form or even scrolling through the web page.

There are times when you might want your page to behave in a certain way when the user performs a certain action. For instance, when a user clicks a button, you might want to display a modal. Or when a user fills a form on the page you might want to show the user if the input is valid. These actions are browser events.

In this article, we will discuss how we can handle events that occur in a browser. We will also discuss how to prevent default actions and what event propagation is. Let start right away.

An Introduction to Event Handlers

When an event occurs, we can tell the browser how to respond using event handlers. An event handler is a function that runs when an event occurs. There are three ways we add event handlers:

Inline Event Handlers using HTML attribute
DOM property
Using the addEventListener method

Inline Event Handlers

A handler can be set using an HTML attribute. For instance, if we want a button to alert 'hi' whenever a user clicks the button we can do this:

<button onclick="alert('hi')">Say Hi</button>

We can also do this for a lot of other events using the same syntax.

Writing a lot of code in an HTML element might not be convenient. We can also write a function in a script and call the function in the on<event> attribute.

<button onclick="sayHi()">Say Hi</button>

<script>
    function sayHi() {
        console.log('Hi')
    }
</script>

DOM Property

Another way to handle an event is by using the DOM property. Let us use the example above to do this.

<button>Say Hi</button>

<script>
    var button = document.querySelector('button');
    button.onclick = () => {
        console.log('hi')
    }
</script>

This produces the same result as the previous method.

What happens when we apply an inline event handler and a JavaScript handler to the same element?

<button onclick="console.log('hi')">Say Hi</button>

<script>
    var button = document.querySelector('button');
    button.onclick = () => {
        console.log('no')
    }
</script>

The JavaScript handler takes precedence over the inline handler so 'no' is logged.

The addEventListener method

We can use the addEventListener method to listen for an event on a particular DOM element. Using this method, we provide a method that handles such an event. One advantage of this method is that it allows you to register as many events as possible on an element.

This is the syntax of the addEventListener method.

target.addEventListener(type, function, useCapture)

Target is the element you want to listen for an event on.

Type is the type of event you want to listen for. For example, if it is a button, you can listen for a click event.

The function is the event handler. It specifies the function is carried out when an event occurs.

useCapture is optional. It is a boolean that specifies whether an event should be used in the capturing or bubbling phase. If it is true, it is used in the capturing phase. If it is false (default value), it is used in the bubbling phase. We will touch more on this later.

Here is an example of using this method.

<button>Say Hi</button>

<script>
    let button = document.querySelector('button');
    button.addEventListener('click', () => {
        console.log('Hi') //Hi
    })
</script>

In this case, button is my target, the type of event is click, the arrow function is the function that is executed when this code runs. If you run this code, anytime the button is clicked, you get 'Hi' in the console.

A named function can also be passed as the callback function.

The Event Object

When an event occurs, the browser creates an event object and passes it as an argument to the event handler. This event object contains details of the event. For instance, you might want to know which button was clicked or which key was pressed or the mouse coordinates when the event occurred. You can get all of these from the event object.

Using our example above, we can do this:

<button>Say Hi</button>

<script>
    let button = document.querySelector('button');
    button.addEventListener('click', (event) => {
        console.log(event.clientX) //41
        console.log(event.clientY) //19
    })
</script>

It prints the x any y-coordinates of where the event occurred which in this case is 41 and 19 respectively.

The information stored in the event depends on the type of event that occurred. To get full details of the event object, you can log the event object to the console console.log(event). In any case, it always has a type property that tells the type of event that occurred.

Default Actions

When an event occurs on some elements, there are actions that take place by default. For instance, when a link is clicked, it takes you to the link's target. When a button inside a form is clicked, the form is submitted. These are default actions of the browser.

Event handlers are called for most events before the default takes place. It is possible to prevent the default action using the event.preventDefault() method. This method stops the default action from taking place. Here is an example:

<a href="https://sarahchima.com">Sarah Chima</a>

<script>
    let link = document.querySelector('a');
    link.addEventListener('click', (event) => {
        console.log("Nope, you ain't visiting her today")
        event.preventDefault()
    })
</script>

When this link is clicked, it does not take you to the expected URL, rather it logs the statement into the console.

This can also be used to implement keyboard shortcuts on a page or a context menu.

However, for good user experience, it is best to avoid intercepting expected behaviour of an element. Such actions might make the user think that your website is broken.

Events and Propagation

When an event occurs on an element, the event handler on the target element first runs. Then the handler of its immediate parent, if any, runs and that of its parent's parent all the way up to outermost element that has a handler. This is called propagation.

An example will do some good here.

<style>
    * {
        border: 1px solid green;
        margin: 15px
    }
</style>
<div onclick="alert('div')"> DIV
    <p onclick="alert('p')"> P 
        <span onclick="alert('span')"> SPAN</span>
    </p>
</div>

I added a little style to differentiate the elements. If you run this HTML code and click on the span element, you will notice that three handlers are fired. First, the one on the span, next, the one on the p tag and then the one on the div tag. This because when an event occurs it propagates to the outer elements and their handlers are also triggered.

There are two types of propagation that can occur in an element: Bubbling and Capturing. We have seen this before when we were discussing the syntax of the addEventListener method.

The difference between bubbling and capturing is that in the bubbling phase, events propagate outwards. That is, the handler on the innermost element gets triggered first, then the parent all the way up.

In capturing, the reverse occurs. The handler on the outermost element is triggered first and then the child handler all the way down to the element where the event occurred. This is the reverse of what occurred in our example.

For event handlers, bubbling is the default but if the capture argument is set to true, then capturing occurs. To learn more about this, you can read this article on it.

You might not want this propagation behaviour to occur when you click on an element. Thankfully, JavaScript provides a way to do so. To stop propagation, you can call the event.stopPropagation() method. This method prevents events from propagating.

In our previous example, we can do this:

<div onclick="alert('div')"> DIV
    <p onclick="alert('p')"> P 
        <span> SPAN</span>
    </p>
</div>

<script>
    var span = document.querySelector('span');
    span.addEventListener('click', (event) => {
        alert('span')
        event.stopPropagation();
    }
</script>

If you run this code, you will notice that only the handler on the span is triggered.

As with all default behaviours, preventing propagation should only be done when it is necessary.

One last thing before we go.

Removing an Event Listener

It is possible to remove an event listener using the removeEventListener method. We use it the same way we use the addEventListener method. We pass in the type and the function just the same way. However, the function must be stored in a variable for it to work.

Here is an example

<button>Say Hi</button>

<script>
    let button = document.querySelector('button');

    function sayHi() {
        console.log('Hi')
    }
    button.addEventListener('click', sayHi)
    button.removeEventListener('click', sayHi)
</script>

Run this code and notice that the event listener function never runs. This is because the eventListener has been removed.

If we do not store the function in a variable like in the example below, the removeEventListener will not work.

<button>Say Hi</button>

<script>
    let button = document.querySelector('button');
    button.addEventListener('click', () => {
        console.log('hi')
    })
    button.removeEventListener('click',  () => {
        console.log('hi')
    })
</script>

Conclusion

We discussed how we can handle events using HTML attributes, DOM property and the addEventListener method. We saw that we can prevent default actions by using the event.preventDefault method. We also learnt about event propagation.

Handling events can help you control the way the browser responds to user actions and we have discussed how we can do this. In my next article, I will discuss common events that you can listen for in a browser.

Got any question or addition? Leave a comment.

Thank you for reading 😊.

When to Ask for Help

Sarah Chima — Mon, 01 Apr 2019 09:10:24 +0000

Cover Photo by Jametlene Reskp

No one knows it all. No developer knows everything about software development. That is why we keep trying to learn. That is why we keep reading articles, studying books and building things. We are all in this endless journey of knowledge. We all seek to improve our knowledge and we sometimes forget things we already know. Sometimes we find ourselves stuck.

We need each other as developers. Sometimes we need to ask for help. You might be trying new technology, learning a new language or framework. Maybe you just joined a new company. Maybe you are working on a task that you have never done before. In these scenarios, we might get stuck and might need the help of others.

While it is important to ask for help, it also important to know the right time to ask to help.

Asking too early and asking too late both have disadvantages. Let us discuss some of them.

When You Ask Too Early

When you ask for help too early, you might be denying yourself the fine opportunity of learning how to debug and fix your problems. True, you might get your problems fixed faster. However, being able to debug a bug is a great skill every developer needs to have.

Have you also noticed that you learn a lot when trying to fix a bug? Think about the StackOverflow posts you go through, articles you read and sometimes the documentation you read just to fix the bug. All of these increase your knowledge in one way or the other.

You might be seen as a pest by your colleagues if you run to them every time you have a bug. They also have their own tasks they are trying to work on. When you regularly meet them for help, it slows them down. Even when they always help, they might do that grudgingly.

When You Ask Too Late

When you have a bug and you ask too late, you might be seen as unproductive.

You might also be wasting valuable time on a bug that could have been solved easily by a colleague or someone else.

The watchword here is to be balanced. So when is the right time to ask to for? Well, it is relative. It depends on what you've done to solve your problem. Let us consider some things you can do before you ask for help.

Before you Ask for Help

Before you ask others for help, here are some things you can do.

Try to identify and understand the problem. Read the error messages. Error messages can help you identify the cause of your bug.
Brainstorm, think of possible solutions to your bug and try them. One might just be the right solution.
If the language, library or framework you are using has good documentation and possibly a forum, try to go through it. You might be facing the bug because you do not have a deep understanding of the technology you are using.
Search for a solution online. Google is your best friend. It is possible that someone had such a bug before and has asked for help on platforms like StackOverflow. Go through the replies you find there. Sometimes the best reply might not be the solution to your problem. Other replies might also contain valuable information that can help you.

Now that you have done all you can do and still not fixed it, you clearly need help.

How to Ask for Help

Determine the best teammate to ask. It can be someone that is currently working on the same project with you or has done something similar. It can also be a Senior developer or someone who has more or even the same level of experience as you. Sometimes, just talking through a problem with someone else can help you fix it faster.
Find a convenient time to meet the person for help. Remember your teammates also have their tasks and might be working on them. Randomly asking for help may disrupt their flow of thought. So asking them if they are available to talk to you is the ideal thing to do. That way, if they are busy, they can make out time later to talk.
When it is time to talk, take time to explain the problem to them and the steps you've taken to solve it. Also, share the solutions you have tried and why these solutions did not fix the bug. This can help your teammate to eliminate wrong ideas and get to the solution faster.
Be patient, your teammate might not immediately know the solution to the problem and might need to debug it with you. Do not assume that a teammate because of his senior position knows everything.
Do not always expect your teammate to fix the bug. Sometimes, you might be referred to a resource that can help you with your bug or even to another teammate. This does not mean the teammate does not want to help you. It is possible that he or she identified that you need more understanding of some topics. It is also possible that he/she personally is not able to fix the bug.
Be grateful and show appreciation. The person that took time to help might have spent it working on his own tasks. Therefore, remember to always say thank you.

Feel free to add more tips in the comments.

Conclusion

It is important to know when and how to ask for help. The tips shared in this article can help you do so.

What is Hoisting Anyway?

Sarah Chima — Mon, 25 Mar 2019 11:39:40 +0000

Hoisting is a term you come across from time to time as a JavaScript developer. Do you know what hoisting is and how it works? Well, let us find out if you do. In this article, we will discuss what hoisting is, how it works and what gets hoisted.

What is Hoisting?

To understand what hoisting is, there are some concepts that we need to understand.

First, it is common to think that JavaScript is not a compiled language. Contrarily, the JavaScript engine compiles the code before execution.

Second, we need to understand some types of errors that can occur when we want to fetch the value in a variable. They are the Reference error, Type error and undefined. ReferenceError occurs when you call a variable that is not declared. TypeError occurs when a value is not of expected type. undefined is returned when the variable called has no assigned value or is not initialized. Equipped with this basic knowledge we can now understand what hoisting is. If you do not understand these, examples in this article will help you to understand it better.

So what is hoisting?

Hoisting is a JavaScript concept whereby variable and function declarations are put into memory during the compilation phase before the code is executed. It makes it appear like these declarations are moved to the top of their scope thus making them available anywhere in that scope. Note that this does not physically happen.

Let us understand this better using an example.

console.log(a)

var a = 2;

Looking at the code above, what do you think will be the result? 2? undefined or Reference error? Open your browser console and run the code. What did you get?

I got undefined. I am sure you got that too. You might expect a Reference error because you called a variable before it was declared. That did not happen because the variable declaration was hoisted to the top of the code. So during execution, the code is executed like this.

var a;

console.log(a); //undefined

a = 2;

Makes sense right? Note that it is only declarations that the engine hoists, assignments are not hoisted. Variable declarations are hoisted and initialized with undefined. That is why we got undefined and not 2 because the assignment remained in the place it was assigned.

Also, note that hoisting is per scope. So the variable will be available in the functional scope if we declare within a function. It will be available in the global scope if we declare it outside a function. If we use a variable outside the scope where we declared it, it will return a Reference Error. For example, if we execute the code below, we get a reference error.

console.log(b); //Uncaught ReferenceError: b is not defined

function a() {
    var b = 2
}

Speaking of functions, are all functions hoisted? I think we need a heading for what gets hoisted.

What Gets Hoisted

Function declarations are hoisted. So we can call a function before we declare it in our code.

foo(2); // 2

function foo(a) {
    console.log(a)
}

Function expressions are not hoisted. If we call a function expression before we assign a function to it, we get a TypeError.

foo(2); // Uncaught TypeError: foo is not a function

var foo = function (a) {
    console.log(a)
}

foo is initialized with undefined, therefore calling the variable as a function leads to a type error.

What about ES6 variables let and const? Are they hoisted too?

Yes, they are but are not initialized with undefined like var, they stay uninitialized. If we use them before they we assign a value to them, they return a ReferenceError rather than undefined.

console.log(b); //Uncaught ReferenceError: b is not defined

let b = 2;

Same thing with const

console.log(a);//Uncaught ReferenceError: a is not defined

const a = 2;

We should note that we cannot declare the const variable without initialization. So the code below will throw a different kind of error.

console.log(a)

const a;
a = 4;

//Uncaught SyntaxError: Missing initializer in const declaration

What Gets Hoisted First? Variables or Functions?

We have seen that both variables and function declarations get hoisted. Which of them get hoisted first? Let us do a little exercise. Look at the code below, what do you expect to be printed? string or function? Make a guess and then try it in your console.

console.log(typeof foo);

var foo = 'hello';

function foo() {
    console.log(4);
}

What was the result? I am sure the result is function. This proves two points:

Functions are hoisted first, that is why although the variable was declared before the string, the JavaScript engine still interprets it as a function. In fact, this is how the engine executes the code.

function foo() {
    console.log(4);
}

console.log(typeof foo); //function

foo = 'hello';

If the console.log statement were to come after the variable declaration, the result would have been string instead. Notice that the variable declaration (which is a duplicate of the function ) was ignored. This brings us to the second point.

It is a bad idea to make duplicate declarations with the same variable name. Duplicate declarations are ignored by the JavaScript engine and can often lead to confusing results.

Let us have a review of what we have discussed in this chapter.

Review

Hoisting is a concept where variable and function declaration appears to move to the top of the code during execution. This is because variable and function declarations are processed during the compilation phase.
All variables are hoisted. var is hoisted and initialized with undefined. let and const are hoisted and are not initialized.
Function declarations are hoisted while function expressions are not.
In the compilation phase, functions declarations are hoisted before variable declarations.

Thank you for reading.