DEV Community: Johnson Ogwuru

Database Triggers in PostgreSQL

Johnson Ogwuru — Mon, 23 Nov 2020 19:10:57 +0000

Ah, it's been a while I wrote about something. Been a busy year, so much to do, and so much learnt.

In this article, I will try to explain what a database trigger is. When to use it, and a practical example of it.

Definition:

A database trigger is a procedural code that is automatically executed in response to certain events on a particular table or view on a database.

Usage:

Recently, I was working on a discord bot, at some point in the development processes, we needed a way to notify the discord users, of the status of their transaction. Because we had a transactions table, with a status column, one way i could do this was to use a database trigger.

I am sure there are other solutions to this problem, but this was the solution I went with.

Setup:

So I set up a trigger to listen for UPDATE events in the transactions table. Here is the code required for doing this.

CREATE FUNCTION notify_transaction_status_change() RETURNS trigger AS $$
      DECLARE
      BEGIN
        PERFORM pg_notify('transaction_status_changed', json_build_object(
            'operation', TG_OP,
            'record', row_to_json(NEW)
          )::text
        );

        RETURN NEW;
      END;
      $$ LANGUAGE 'plpgsql';

In the above code, we are creating a database function, that would reference the trigger named, transaction_status_changed.
Below is the script for the trigger.

 CREATE TRIGGER transaction_status_changed 
 AFTER UPDATE 
 ON transactions 
 FOR EACH ROW 
 EXECUTE PROCEDURE notify_transaction_status_change()

The trigger gets called after every update on the transactions table, for each row. So if you have 10 rows on the transactions table, if an update is performed on them, this trigger would run for each.

Now the next thing to do would be to listen for this event triggers, get the payload from the event and do what whatever with it, in our case, we will be notifying the user who owns the transaction.

We would need to create a connection to the database. With this connection created, the application would have to listen for events.
Find the script I used in achieving this below;

function doConnectionSetupStuff(connection: any, knex: any, client: Client) {
  connection.query('LISTEN transaction_status_changed');

  connection.on('notification', (msg: { channel: string; payload: string }) => {
    const jsonResponse = JSON.parse(msg.payload);
    //notify user when status of transaction is confirmed
    if (jsonResponse.record.status === 'confirmed') {
      notifyUsers(jsonResponse, client);
    }
  });

  connection.on('end', () => {
    reconnectClient(knex, client);
  });
  connection.on('error', (err: any) => {
    logger.error(err);
  });
}

const PostgresNotificationListener = (knex: Knex, client: Client): void => {
  knex.client
    .acquireRawConnection()
    .then((connection: any) => {
      logger.info('Listening for events in Database');
      doConnectionSetupStuff(connection, knex, client);
    })
    .catch((e: any) => {
      logger.error(e);
    });
};

function reconnectClient(knex: any, client: Client) {
  const fn = setInterval(() => {
    try {
      knex.client
        .acquireRawConnection()
        .then((connection: any) => {
          doConnectionSetupStuff(connection, knex, client);
          clearInterval(fn);
        })
        .catch((e: any) => {
          logger.error(e);
        });
      console.log('connected to DB');
    } catch (e) {
      logger.error(e);
    }
  }, 3000);
}

PostgresNotificationListener();

At the time of this writing, I was making use of [Knex], (http://knexjs.org/), PostgreSQL and Typescript.

The script creates a connection to the database, and when this connection ends, it reconnects the script to the database, so that it's constantly listening for trigger events.
And when these events are received and certain conditions are met, the payload gets cleaned up and presented to a user or be used in making a logical decision within the application.

There are plenty other use-cases for database triggers. One other use could be enforcing rules for certain columns in a table.

** Quick note:
if you are making use of Knex, here is how to setup the trigger and function in your table migration.

import * as Knex from 'knex';

export async function up(knex: Knex): Promise<void> {
  // Create table
  await knex.schema.createTable('transactions', table => {
    table.increments();
    table.string('type').notNullable();
    table.uuid('sender'); // Sender id (or null if type = withdrawal)
    table.uuid('recipient'); // Recipient id (or null if type = deposit)
    table.string('withdraw_address');
    table.decimal('amount', 18, 8).notNullable();
    table.string('hash'); // Transaction hash if type = deposit or withdrawal
    table.string('status').defaultTo('pending');
    table.timestamp('created_at', { useTz: false }).defaultTo(knex.fn.now());
    table.timestamp('updated_at', { useTz: false }).defaultTo(knex.fn.now());
  });

// Create function/trigger
  await knex.raw(
    `
      CREATE FUNCTION notify_transaction_status_change() RETURNS trigger AS $$
      DECLARE
      BEGIN
        PERFORM pg_notify('transaction_status_changed', json_build_object(
            'operation', TG_OP,
            'record', row_to_json(NEW)
          )::text
        );

        RETURN NEW;
      END;
      $$ LANGUAGE 'plpgsql';
    `,
  );

// Assign trigger
  await knex.raw(`
      CREATE TRIGGER transaction_status_changed 
      AFTER UPDATE 
      ON transactions 
      FOR EACH ROW 
      EXECUTE PROCEDURE notify_transaction_status_change()
  `);
}

export async function down(knex: Knex): Promise<void> {
  await knex.raw('DROP TRIGGER IF EXISTS transaction_status_changed ON transactions');
  await knex.raw('DROP FUNCTION IF EXISTS notify_transaction_status_change CASCADE');
  await knex.schema.dropTableIfExists('transactions');
}

Triggers are a powerful feature that can improve the efficiency of any application using a database. I hope someone finds it useful like I did.

If you have any questions feel free to ask on the comment section or reach out to me on Twitter @devopsjay

cover image from https://www.digitalocean.com/community/tutorials/understanding-relational-databases

How To: Deploy Smart Contracts on the Energi Blockchain

Johnson Ogwuru — Tue, 23 Jun 2020 11:19:30 +0000

For this tutorial, we would be making use of the following technologies:

Solidity
Javascript
Node JS
Truffle
Energi Blockchain
Editor => vscode

Definitions:

Solidity is an object-oriented programming language for writing smart contracts. It is used for implementing smart contracts on various blockchain platforms, most notably, Ethereum.

Truffle is a world class development environment, testing framework and asset pipeline for blockchains using the Ethereum Virtual Machine (EVM), aiming to make life as a developer easier.

Energi Blockchain Energi is a next-generation Proof of Stake (PoS) cryptocurrency that combines smart contract capabilities, decentralised governance, and a self-funding treasury.

Installation:

Follow the instruction found on the Energi wiki to download and install the Energi core Node on your device. I am using a mac, so i would make use of the mac installation documentation, found here, you can find download and installation instruction for other platforms like linux and windows in the documentation.
Install Truffle globally by running this command in your terminal npm install -g truffle. For mac users, if having permission issues, add sudo before the command like this, sudo npm install -g truffle and after inputing your password when prompted, truffle will be downloaded.
In vscode install the following solidity extension, this extension helps with syntax highlighting, snippets and linting using solhint when writing smart contracts with solidity.

Getting Started:

In this article, we would write a basic smart contract and deploy it on the energi test network.

To get started, i would be creating an empty folder in my desktop named energi-app.
mkdir energi-app

After this cd into the folder we just created and create a truffle project by running the init command.
cd energi-app
truffle init

johnson@Johnsons-MBP desktop % mkdir energi-app
johnson@Johnsons-MBP desktop % cd energi-app
johnson@Johnsons-MBP energi-app % truffle init

Starting unbox...
=================

✔ Preparing to download box
✔ Downloading
✔ cleaning up temporary files
✔ Setting up box

Unbox successful, sweet!

Commands:

  Compile:        truffle compile
  Migrate:        truffle migrate
  Test contracts: truffle test

johnson@Johnsons-MBP energi-app %

Now we have our project setup, if you have done everything properly, when you open the energi-app in vscode, the structure should look like what we have in the image below.

When you look at the project folder, you see a folder named contracts, oh yeah🤓, that's where we would save our contracts.
Now inside of the contracts folder create a file Hello.sol, inside of the file add the following solidity code.

pragma solidity >=0.4.2 <0.7.0;

contract Hello {
  function sayHello() public pure returns(string memory) {
    return 'Hello There';
  }
}

This is a very basic solidity smart contract code, this tutorial won't be focused on discussing solidity or smart contracts, to learn more visit the solidity documentation.

To prepare our smart contract for deployment, we need to add one more file to our project, this is the file that would specify which contracts to deploy. Navigate to the migrations folder and create a new file 2_migrate_hello.js.
The numbering on the file is important, it's how truffle knows which contracts to deploy when.

Note that for every independent contract you create, you would need to create a migration file for. But for contracts dependent on each other, you can batch their migration together in the same migration file.

Add the following code in the 2_migrate_hello.js migration file created.

const Hello = artifacts.require("./Hello.sol")

module.exports = function (deployer) {
  deployer.deploy(Hello);
}

Now to deploy our contract on the Energi test-network, you need to follow the steps below:

Start Energi node, but this time make use of this command if you are on a mac
$HOME/energi3/bin/energi3 --testnet --rpc.
This would start an rpc enabled testnet, using the Energi core node app you downloaded.
The RPC link exposed by default would be 127.0.0.1:49796
Navigate to the truffle-config.js file, and replace the code there with the one attached below:

const HDWalletProvider = require('@truffle/hdwallet-provider');

const fs = require('fs');
// const mnemonic = fs.readFileSync(".secret").toString().trim();
const privateKey = '0x1...';

module.exports = {
  networks: {
    energiTestnet: {
      provider: () => new HDWalletProvider(privateKey, `http://127.0.0.1:49796`),
      network_id: 49797,    
      gas: 5500000,
      from: '0xa57ed899Cd9587952Cbf284c9459DB4fF6DEe53A',
      timeoutBlocks: 200,  // # of blocks before a deployment times out  (minimum/default: 50)
      skipDryRun: true     // Skip dry run before migrations? (default: false for public nets )
    },
  },
}

Edit the from property in the network object to the address you want to deploy the contract with, and also change the private key value to the private key of the account you use in the from property.
Also make sure that the account you use for this, is being controlled by the node you started initially, and it has some funds, 3tnrg(test nrg) won't be bad. You can request some tnrg from the Energi team on Discord

Note, in the truffle config file, you can either use a private key or mnemonic phrase, whichever works for you, but don't be like me, make sure you store this information securely, you can use a .env file, and make sure you don't commit it to a public repository.

Install the hdwallet-provider by running the following command
yarn init
yarn add @truffle/hdwallet-provider

Then run the following command to deploy your contract, make sure you are in your project directory.
truffle deploy --network=energiTestnet

If all goes well, you should be able to see this output in your terminal.

johnson@Johnsons-MBP energi-app % truffle deploy --reset --network=energiTestnet

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.



Starting migrations...
======================
> Network name:    'energiTestnet'
> Network id:      49797
> Block gas limit: 40000000 (0x2625a00)


1_initial_migration.js
======================

   Replacing 'Migrations'
   ----------------------
   > transaction hash:    0xc88f6525e15caf806f755b16f682a8f7c7a37f91051f833f766410da0a4bdbb2
   > Blocks: 1            Seconds: 24
   > contract address:    0xa16FC529F5C493c12031657BF93A07e9DBfB6538
   > block number:        194105
   > block timestamp:     1592907159
   > account:           0xa57ed899Cd9587952Cbf284c9459DB4fF6DEe53A
   > balance:             3631.499979394
   > gas used:            188483 (0x2e043)
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.00376966 ETH


   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:          0.00376966 ETH


2_migrate_hello.js
==================

   Replacing 'Hello'
   -----------------
   > transaction hash:    0xa9f76b3df7a191d56d769655428916f8c0128ecdd026bf6af26ef3a1b9403127
   > Blocks: 0            Seconds: 76
   > contract address:    0xA309F47d94768c2357780E8b55dC77981494a995
   > block number:        194107
   > block timestamp:     1592907306
   > account:             0xa57ed899Cd9587952Cbf284c9459DB4fF6DEe53A
   > balance:             3631.496548394
   > gas used:            129549 (0x1fa0d)
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.00259098 ETH


   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:          0.00259098 ETH


Summary
=======
> Total deployments:   2
> Final cost:          0.00636064 ETH


johnson@Johnsons-MBP energi-app %

Because i have compiled this before, it won't display the compilation message, but would rather say it's been compiled before, but on yours, you would be able to watch it compile before migration starts.

Lastly, let's check our deployed smart contract on the Energi test-network block-explorer. From my deploy log, my hello smart contract address is 0xA309F47d94768c2357780E8b55dC77981494a995. When you get to the Energi test-network block explorer, search for the smart contract address. For me this is what i see, my smart contract deployed, and chilling on the Energi test-network.

Finally, to deploy to the main net, all we have to do is remove the testnet we used when starting the node and start the node with this command instead.
$HOME/energi3/bin/energi3 --rpc

In this article we have covered the basics of deploying on Energi, with truffle. For further readings and information about the Energi Blockchain check out the documentation, found here. Reach out to me also if you have any questions here or on Twitter.

You can find the repository for the project here

2019 - The Path to Growth

Johnson Ogwuru — Tue, 31 Dec 2019 20:57:37 +0000

Hey, Johnson from the past, I got your letter about traveling abroad. Lol. I’m sorry to disappoint you man, you are still in Nigeria. By the way, this is Johnson from the future. But like you already know, I’m no bringer of bad news alone, so I’m pretty much going to tell you, You had a bang of a year in 2019. From getting a job to losing it and getting another.
Well Let’s start and entertain our readers gradually, shall we?

Making sacrifices for Growth

2019 started with me having a strong disagreement with my parents concerning a career decision I was about making, a decision that led to a lot of ehhhhhh🥴 and ahaa🤯 moments in my life. So the thing is, I was working in a company where I was sort of like the star developer and for me, that didn’t feel right, I knew I wasn’t growing, but I was earning good money, something some dev's in Nigeria would be comfortable with. But you know it isn’t just about the money most times in tech, rather is what you know and how competent you are at defending it. That’s what gets you the next best gig. So I set plans in motion, I was going to work for a Nigerian company, that has lots of devs and a good track record of producing great Engineers and by February of 2019, I left my previous company and joined Andela by April 2019.

Joining Andela for me then meant accepting a compensation 30% of what I used to earn and it also meant I had to either pause on the side gigs I had or let them go, most of which I let go of (this wasn’t Andela’s doing, I decided on this because I needed less distraction at the time).

Yeah, I know that was crazy, but to me then what mattered was the growth coming my way and the relationships I was going to build working with amazing Engineers. Well, it all worked out well.
For a start I got enrolled at Lambda School with all expenses paid for by Andela. Joining Lamba School opened me up to a world of crazy possibilities and networks, I can comfortably boast of having friends around the world right now from India to Europe. That move was what got me something I never had in the bags for 2019, but it happened. Well, it didn’t all work out as I planned.

The hard times

Losing my job

By September 2019, I got the shocker of the decade, I lost my job due to some complicated issues, my 6months old Job, lol. The same Job I had sacrificed my well-paying Job for, not because I wasn't technical enough. The reason can be found here.
I was bitter for the best part of 2 weeks. But during that time I got to realize that I got what I came for, the growth, the relationships, the experience working in a fast-paced environment and that was when I came out of my bitterness.

House rent and Upkeep sets in

Just then I got hit with another realization, my rent was expiring the same month. was a little depressed, no I was depressed!!!!! 😂, but fortunately, we got paid our severance package, combined with my savings I paid off my rent and had some money left for upkeep. I realized I was going to be in serious financial crisis if I wasn’t careful, the least I could stay without a job would say 4 or 5months. So I set out to find another job.

Several interviews and failings...

I set plans on how to move on, prepared 5 variations of my Resume and 25 different cover letters, all ready for some serious, high-level Job application stuff.

I have a bookmark of companies hiring remotely and others requiring relocation I had started compiling since 2018, so I kicked it open and started applying to each of them, I was applying to 10-20 Jobs every day except for Saturdays and Sundays, I felt the recruiters needed some rest away from work.
At the time, rejections were dropping like 2 or 3 a day, It was tough, but I got used to it. Funny thing is, I didn’t just get used to being rejected, I got used to interviewing, it became more fun than boring. I felt I was learning a lot so I kept on applying for any Job that seemed fun and challenging. In some days I’m sure I applied for 30 jobs or more, it was fun, the rejections were cool, the interviews too, I even interviewed for a managerial position I was sure I wasn’t qualified for just to know what it feels like.

Funny thing is, two of the rejections I got were because the companies chose to go with a different candidate they felt was asking for something lower than what they were offering me, not even what I was asking, crazy right?
After the rigorous application process and technical interviews, the first one had me go through. They asked for a rate which I gave them, they gave me their offer, which wasn’t nice, but was something I could accept, so I opted to think about and accepted, only for me to be slammed with a rejection mail the week I was supposed to receive an offer from them, stating that the opted for another candidate whose rate was lower than the offer they wanted to give me.
The second company accepted me after the interviews, we didn’t discuss price since they already had a price labeled on their career page and I was cool with was on the page, it was cool money mehn, I was happy that I was going to blow, lol😂. Then it dawned on me when I got an email from them the day I was supposed to resume, that they won’t go ahead with me because, well you can guess.
It was meant to be a 9 months contract and I lost it also because they didn’t want to pay what they advertised again and because they found a cheaper labor.
Amidst all of this, I was still hitting it hard;

Achievements 0f 2019

I got to attend 2 conferences and volunteered In one, which was part of my goals for 2019
I completed the Hacktoberfest challenge for the first time, contributing to open source projects
My articles reached over 100k readers and had over 4k interacting with them
I wrote another 15 articles this year, some of which were accepted by the community, my best being

You can find the rest here

Smashed through 3k contributions on Github and had a streak of 322 days of active contributions on Github

Got into Lambda School which was so fun and eye-opening
I started getting paid to write about certain technologies, and I’m currently writing for 3 companies so far. These weren’t included in the 15 articles I talked about.
Lastly, my 3 weeks of Job hunting paid off, by the end of October 2019, I got an amazing offer from a company In the BVI(British Virgin Islands), and by November 2019, I resumed as a Remote Software Engineer, after submitting over 200 applications and 50 rejections. Something I didn't think was going to happen in 2019. It has been an amazing experience so far, I have grown more attached to my bedroom 🤪 and laptop. And yes I still miss interviewing.
I drew closer to God as well, because I had more time studying and reading about him and his will.

Appreciations

2019 won’t have been fun completely without appreciating a few of these people,

Gift Egwenu and Paradise Kelechi, these two were instrumental in my getting into Andela, they prepared me for what was expected, interview preparations and through the recruitment phase.
Everyone I met at Andela, awesome folks, you guys are amazing, our early morning gist and evening arguments before the close of work. It was fun working with you guys. Ezekiel, Benjamin, Melvine, Noble, Kelechi, Nabeelah, Chinedu, Timi, Yusuf, Kunle, Yemi, Pascal, Basil, Anu, Vincent, James, Wasiu.
Sarah Chima has proved to be a friend in troubled times, she is one of the people I can comfortably say I look up to. And I know has my back any day. Though we have some shared goals we didn’t complete lol 😂.
Benjamin Grabow, Matt Hardman, Anna Winther, amazing folks I’m proud to call friends now.
Samar Vir, Dude legit sent me poems when I lost my job, made sure I was mentally stable at all times and has been an amazing friend.
Steve and Tomi, these are my best friends any day, they have always been there for me.
Sarah Drasner and Angie, thanks for the motivations and encouragements, whenever I reach out to you guys.
Ogay, one person that has always been there for me, the good and the bad times, I appreciate you alot my paddy. Gelic 😛

Things I'm looking forward to in 2020

Next year, I’m looking forward to doing a lot of stuff;

Traveling the world, but I’m starting from Africa though.
I planned on giving a talk this year but failed on this because I didn’t submit much CFP’s. So I’m pushing it to 2020.
I plan on becoming a mobile Engineer by the end of 2020, right now it's just a passion I want to explore.
Create some contents on YouTube and write more articles.
I never got to publish the book I am working on, but I hope to do by 2020.
Draw even closer to God

In all, it has been an amazing year, and I’m grateful for everything and everyone in my life.

Yo Dude, Future Johnson, when you see this piece, remember to live not just the good life alone, but a more balanced one. I look forward to hearing from you in 2020.

Implementing a realtime geo-location tracker with VueJS and Ably

Johnson Ogwuru — Wed, 27 Nov 2019 16:07:04 +0000

In this tutorial, we will see how to use the Ably Realtime client library to build a realtime location Tracking PWA with Vue js. Ably enables realtime data sharing using Pub/Sub messaging architecture via a concept called channels.

For the purpose of this tutorial, we'll be discussing

How to build PWAs in Vue
How to use the Geolocation in APIs in PWAs
How to share the live location updates with other clients using Ably

The application we would be building will make use of Ably to share realtime location data in the app. As an example, we would be building a friend location tracker with the following specifications:

Any user who comes online on the app is able to see their location represented by a blue pin.
The location of any other users that are online needs to be represented by a red pin
All these location pins need to be plotted on a map and need to move in real-time as the user device moves. Here is a link to a demo of the application we will build.

And a screenshot of it.

Getting Started

Vue.js is an open-source model–view–viewmodel(MVVM) JavaScript framework for building user interfaces and single-page applications. It was created by Evan You and is maintained by him and the rest of the active core team members coming from various companies such as Netlify and Netguru.

The Smashing Magazine, defined a PWA as a progressive web application that takes advantage of the latest technologies to combine the best of web and mobile apps. We could think of it as an application built with web technologies but behaves like a mobile application.

Once a site has a PWA built and ready to go, Chrome will push it to be installed on a user’s mobile device so long as it meets the following criteria:

It is running under HTTPS - Emphasis on the “S” there. Your site must be secured with an SSL certificate.
It has a Web App Manifest - This is a JSON file that lets you customize various features of your app such as name, colors, design, etc.
It has a Service Worker - This is a JavaScript file that allows your PWA to work offline (to the extent that it is capable, of course). It’s essentially the script that is always working tirelessly in the background.

Step1 - Setup an Ably Account

In order to run this tutorial locally, you will need an Ably API key. If you are not already signed up, you should sign up now for a free Ably account. Once you have an Ably account:

Log into your app dashboard
Under “Your apps”, click on “Manage app” for any app you wish to use for this tutorial, or create a new one with the “Create New App” button Click on the “API Keys” tab
Copy the secret “API Key” value from your Root key and store it so that you can use it later in this tutorial

Step2: Vue CLI

Make sure you have node and npm installed. If you do, we would need to install Vue CLI, which is a boilerplate that speeds up the process of getting started with building a vue application.

We start off by creating the basic setup and the file structure of our app. To speed things up, we will bootstrap the app with vue-cli.
First, we need to install the vue CLI tool globally.
yarn global add @vue/cli

Now we can instantiate the template by
vue init pwa friend-finder

We will be prompted to pick a preset — I recommend the following configuration with your personal details where necessary of course:
? Project name friend-finder ? Project short name: fewer than 12 characters to not be truncated on home screens (default: same as name) friend-finder ? Project description A simple friend finder ? Author Johnson Ogwuru <ogwurujohnson@gmail.com> ? Vue build runtime ? Install vue-router? No ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? No ? Setup e2e tests with Nightwatch? No

For the Vue build configuration, we can choose the smaller runtime option.

Next, run yarn or npm install to install all the dependencies. To start the development mode just run yarn start or npm start.

Don’t get confused by all the files in the project — For now, we won’t touch most of them. If you want to learn more about the template’s structure check out the documentation. I can only recommend it!

Next, we would need to install all the packages we would be using in this project yarn add ably vue2-google-maps or npm install ably vue2-google-maps

After installing the packages, head straight to https://support.google.com/googleapi/answer/6158862?hl=en, to create a project and then get an API key for making requests to Google Cloud server. This API key we get from Google is what we need to be able to make requests to the Google Maps API. Without it, we won't have the authentication needed to make a request to the Google Maps API.

Step3: Building Our Product
By running this script vue init pwa friend-finder on the terminal to bootstrap our application we had already instructed vue to create a PWA application for us. And now for the application, we are building.

We will start with getting our map displayed on the application and to do this we would make use of the npm package vue2-google-maps. Since we already have it installed we would start making use of it.

We would also need to install the Vue router, our application would require an onboarding page detailing how to use the application. So add router to our vue application, run yarn add vue-router on the terminal.

*3.1 - * Navigate to the main.js file, which is located in the src folder and paste the following code, replacing what we had in the file initially.




      import Vue from 'vue'
      import App from './App'
      import router from './router'

      import * as VueGoogleMaps from 'vue2-google-maps'

      Vue.use(VueGoogleMaps, {
        load: {
          key: '<your google map key>',
          libraries: 'places',
        },
      })

      Vue.config.productionTip = false

      /* eslint-disable no-new */
      new Vue({
        el: '#app',
        router,
        template: '<App/>',
        components: { App }
      })

In the above code, we get to import the google maps library and instantiate it, while providing the necessary credentials like your generated API key. Then we instantiate the Vue class, passing to it our template, router and component of choice which is App.

*3.1.1 - * Next up, you need to create the components/Application.vue file and replace the code in it with this



  <template>
    <div id="app">
      <GmapMap
        :center="{lat: 10, lng:10}"
        :zoom="15"
        map-type-id="terrain"
        style="width: 100%; height: 100%"
      >
      </GmapMap>
    </div>
  </template>

  <script>
    export default {
      name: 'app',
    }
  </script>

In the code above, we create our map using the GmapMap component and pass it the following properties zoom, center, map-type, style which contributes to how the map looks on the browser.

*3.2 - * The next thing in our bucket list would be to have our application retrieve the user's location and to do this we would be making use of the geolocation API available in HTML5. Paste the following code inside the <script> tag in app.vue file.



   methods: {
    fetchData() {
      if (!("geolocation" in navigator)) {
        this.errorStr = "Geolocation is not available.";
        return;
      }
      this.gettingLocation = true;
      navigator.geolocation.watchPosition(
        pos => {
          this.gettingLocation = false;
          this.initialPosition.lat = pos.coords.latitude;
          this.initialPosition.lng = pos.coords.longitude;
          const userData = {
            position: {
              lat: pos.coords.latitude,
              lng: pos.coords.longitude
            },
            userName: this.usersName
          };
          this.userlocation = userData;
          this.updateRoom(userData);
        },
        err => {
          this.gettingLocation = false;
          this.errorStr = err.message;
        }
      );
    },
   }

In the code above we are fetching the users location, which we wrap in an object together with the users' name (which we would provide how it would be supplied later on), then we call a method that handles publishing to ably realtime with the users' credential as an argument. The methods property in the file, is how vue s specifies methods to be used in the application. They are functions that hang off of an object-typically the Vue instance itself or a Vue component.

*3.2.1 - * Next we would create the method updateRoom, which we would use to update the presence of a user in a channel, while at the same time sending certain information about the users' current location.
Before we do that, we would want to import ably and set it up, so on the lines following the opening script tag, paste the following code



   import * as Ably from "ably";
   var ably = new Ably.Realtime({
     key: "<your ably key>",
     clientId: `${Math.random() * 1000000}`
   });

Now we have imported the ably library and configured ably to use in our application. In order for a user to be present in the channel, the user must be identified by having a clientId. A single clientId may be present multiple times on the same channel via different client connections. As far as Ably is concerned, these are different members of the presence set for the channel, however, they will be differentiated by their unique connectionId. For example, if a client with ID “Sarah” is connected to a chat channel on both a desktop and a mobile device simultaneously, “Sarah” will be present twice in the presence member set with the same client ID, yet will have two unique connection IDs. A member of the presence set is therefore unique by the combination of the clientId and connectionId strings.

So it's time for us to send location data to ably and update data too by making use of the updateRoom method. Copy the following code and paste under the fetchData method.



  updateRoom(data) {
      channel.presence.update(data, function(err) {
        if (err) {
          return console.error("Error updating presence data");
        }
        console.log("We have successfully updated our data");
      });
    }

In the above code, we update the information of the user, in their registered ably channel, and this makes it possible for everyone subscribed to the channel to receive the new update in real-time without page refreshes, leveraging the power of web sockets

*3.3 - * Next we need a way to listen to changes in the channel so that when a user's presence is updated, all users in the channel get notified. And to do these we would have to add some extra block of codes in the created() method of vue js. The created() method in vue is a method that allows you to add code, once the vue instance is created. So now we would be saying once the vue instance is created keep checking if an update exists and subscribe to the channel so that any information update on the channel the user can get it. So above the methods() block at this piece of code. But before that, we need to get some information from the user, like their names and the name of the channel they would love to join. Type the following code:



mounted() {
   const name = prompt('To get started, input your name in the field below and locate your friends around based on your location, please turn on your location setting \n What is your name?')
   this.usersName = name
   const channel = prompt('Enter the name of the channel you are interested in')
   this.channelName = channel
 },

In the above code, we add the prompt code in the mounted() property, every code inside this property run immediately the component mounts. So we pick this information and store them in the assigned state variables.




async created() {
    await this.fetchData();
    var channel = ably.channels.get(this.channelName);
    channel.attach(err => {
      if (err) {
        return console.error("Error attaching to the channel");
      }
      console.log("We are now attached to the channel");
      channel.presence.enter(this.userlocation, function(err) {
        if (err) {
          return console.error("Error entering presence");
        }
        console.log("We are now successfully present");
      });
    });

    let self = this;
    channel.presence.subscribe("update", function(presenceMsg) {
      console.log(presenceMsg)
      console.log(
        "Received a " + presenceMsg.action + " from " + presenceMsg.clientId
      );
      channel.presence.get(function(err, members) {
        console.log(members)
        self.markers = members.map(mem => {
          if (JSON.stringify(self.userlocation) == JSON.stringify(mem.data)) {
            return {
              ...mem.data,
              icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
            };
          } else {
            return {
              ...mem.data,
              icon: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
            };
          }
        });
        self.onlineUsers = members;
        console.log(
          "There are now " + members.length + " clients present on this channel"
        );
      });
    });
  },

In the above code, after subscribing to the channel, we expect ably to update us in real-time of changes in the channel, which include users presence activities on the channel, which gets stored in a variable, so what we do is for every 3 seconds, pick whatever is in the document and add to a slice of state to keep our application up to date, in response to the real-time data supplied by ably.

We needed each user on the map to have different colors, in that we wanted the owner of the device having a different marker color from the rest of the other markers on the map, which was why we added this logic to the code above return {...mem.data, icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'}

So what happens is that, in this line var channel = ably.channels.get(this.channelName); we are either creating a new channel or joining a channel if the channel exists. So if the channel you submitted when the component mount exists, all you do is join it, but if it doesn’t then ably creates as a new one and you are able to ask others to join too. Now because we need to pick certain information from users when they join the channel, we would have the application send their location data when it’s registering their presence in the channel by using the line of code starting with channel.presence.enter..., and also while the user is in the channel, they want to be kept updated as regards events in the channel, so to listen for events, we would use one of Ably’s API, the channel.presence.subscribe.... Here you specify the event you are listening for, in our case it is update, so when it is fired, we want to get the information of everyone in the channel, with their location data, Ably’s channel.presence.get API gets us this information.

*3.4 - * Next stop we need a set of state slices, some of which we have already used in the codes above and I'm certain you already started asking yourself where the came from, well here they are. Add the following code on top of the methods() block.



   data() {
    return {
      usersName: null,
      gettingLocation: true,
      initialPosition: {
        lat: 10,
        lng: 10
      },
      zoom: 11,
      markers: null,
      userlocation: []
    };
  },

In conclusion: The information contained here might be quite overwhelming, so for that, I have provided the repo for the project for further understanding. You can find the demo here

GitHub Repo

Favorite Book Thread

Johnson Ogwuru — Fri, 04 Oct 2019 15:26:59 +0000

Watching my friend's vocabulary improve tremendously, after he read 2 books in 3months, have pushed me to want to up my reading game. Suggestions of books I should start reading would be appreciated.

Demystifying the JavaScript call stack

Johnson Ogwuru — Fri, 13 Sep 2019 15:11:53 +0000

JavaScript is a single-threaded, single concurrent language, meaning it can handle one task at a time or a piece of code at a time. It has a single call stack, which along with other parts constitutes the Javascript Concurrency Model (implemented inside of V8).

This article would be focusing on explaining what the call stack is, and why it's important and needed by JavaScript.

At the most basic level, the call stack is a data structure that utilizes the Last in, First out(LIFO) principle to store and manage function invocations.

Since the call stack is single, function execution is done one at a time from top to bottom, making the call stack synchronous. In managing and storing function invocations the call stack follows the Last in, First Out principle(LIFO) and this entails that the last function execution that gets pushed into the call stack is always the one to be cleared off, the moment the call stack is popped.

What purpose does the call stack serve in a JavaScript application? How does JavaScript make use of this feature?

When the JavaScript engine runs your code an execution context is created, this execution context is the first execution context that is created and it is called the Global Execution Context. Initially, this Execution Context will consist of two things - a global object and a variable called this.

Now when a function is executed in JavaScript (when a function is called with the () after its label), JavaScript creates a new execution context called the local execution context. So for each function execution, a new execution context is created

Just in case you were wondering, an execution context is simply put as the environment in which a JavaScript code is executed. An execution context consists of:

The thread of execution and
A local memory

Since JavaScript would be creating a whole bunch of execution contexts(or execution environments), and it has just a single thread, how does it keep track of which execution context its thread should be in and which it should return to? We simply say the call stack.

What happens is that, when a function is executed, and JavaScript creates an execution context for that functions execution. The newly created execution context is pushed to the call stack. Now whatever is on top of the call stack is where the JavaScript thread would reside in. Initially when JavaScript runs an application and creates the global execution context, it pushes this context into the call stack and since it appears to be the only entry in the call stack, the JavaScript thread lives in this context and runs every code found there.

Now, the moment a function is executed, a new execution context is created, this time local, it is pushed into the call stack, where it assumes the top position and automatically, this is where the JavaScript thread would move to, running instructions it finds there.

JavaScript knows it's time to stop executing a function once it gets to a return statement or just curly braces. If a function has no explicit return statement, it returns undefined, either way, a return happens.

So the moment, JavaScript encounters a return statement in the course of executing a function, it immediately knows that's the end of the function and erases the execution context that was created and at the same time, the execution context that was erased gets popped off the call stack and the JavaScript thread continues to the execution context that assumes the top position.

To further illustrate how this works, let's take a look at the piece of code below, I would work us through how it is executed.

      function randomFunction() {
        function multiplyBy2(num) {
          return num * 2;
        }
        return multiplyBy2;
      }

      let generatedFunc = randomFunction();
      let result = generatedFunc(2);
      console.log(result) //4

With the little function above, I would illustrate how JavaScript runs applications and how it makes use of the call stack.

The first time JavaScript runs this application if we remember the global execution context gets pushed into the call stack, for our function above the same thing happens, let's walk through it;

The global execution context gets created and pushed into the call stack.
JavaScript creates a space in memory to save the function definition and assign it to a label randomFunction, the function is merely defined but not executed at this time.
Next JavaScript, comes to the statement let generatedFunc = randomFunction() and since it hasn't executed the function randomFunction() yet, generatedFunc would equate to undefined.
Now, since JavaScript has encountered parenthesis, which signifies that a function is to be executed. It executes the function and from earlier we remember that when a function is executed, a new execution context is created, the same thing happens here. A new execution context we may call randomFunc() is created and it gets pushed into the call stack, taking the top position and pushing the global execution context, which we would call global() further down in the call stack, making the JavaScript thread to reside in the context randomFunc().
Since the JavaScript thread is inside the randomFunc(), it begins to run the codes it finds within.
It begins by asking JavaScript to make space in memory for a function definition which it would assign to the label multiplyBy2, and since the function multiplyBy2 isn't executed yet, it would move to the return statement.
By the time JavaScript encounters the return keyword, we already know what would happen right? JavaScript terminates the execution of that function, deletes the execution context created for the function and pops the call stack, removing the execution context of the function from the call stack. For our function when JavaScript encounters the return statement, it returns whatever value it is instructed to return to the next execution context following and in this case, it is our global() execution context.

In the statement, return multiplyBy2, it would be good to note that, what is returned isn't the label multiplyBy2 but the value of multiplyBy2. Remember we had asked JavaScript to create a space in memory to store the function definition and assign it to the label multiplyBy2. So when we return, what gets returned is the function definition and this gets assigned to the variable generatedFunc, making generatedFunc what we have below:

      let generatedFunc = function(num) {
        return num * 2;
      };

Now we are saying, JavaScript should create a space in memory for the function definition previously knowns as multiplyBy2 and this time assign it to the variable or label generatedFunc.

In the next line, let result = generatedFunc(2), we execute the function definition which generatedFunc refers to (previously our multiplyBy2), then this happens:

The variable result is equated to undefined since at this time the function it references hasn't been executed.
JavaScript creates another execution context we would call generatedFunc(). When a local execution context is created, it consists of local memory.
In the local memory, we would assign the argument 2 to the parameter num.
Let's not forget, the local execution context generatedFunc() would get pushed into the call stack, and assuming the top position, the JavaScript thread would run every code found inside it.
When JavaScript encounters the return statement, it evaluates num * 2, and since num refers to 2 stored initially in local memory, it evaluates the expression 2*2 and returns it.
In returning the evaluation of the expression 2*2, JavaScript terminates the execution of the generatedFunc function, the returned value gets stored in the variable result then the call stack gets popped, removing the generatedFunc() context and getting the thread back to the global() context. So when we console.log(result), we get 4.

In conclusion:

The key things to take away from this article is that;

For every function execution, a new execution context is created, which gets popped into the call stack and is how the JavaScript thread learns which environment to take instruction from and execute.

Thank you for reading. If this article was helpful please give it some reactions and share, so others can find it. I will like to read your comments also.

credits to FreecodeCamp for the images used in this article

Prototypal inheritance - A Trip back in time

Johnson Ogwuru — Sat, 17 Aug 2019 09:42:55 +0000

Before classes became a thing in JavaScript, prototypes were the oop way of doing things in javascript. This seemed to scare some folks away from javascript, while some totally ignored it.

Currently, folks picking up javascript today avoid prototyping by all means. It would be good, if everyone who learned Javascript during the era of es6 understood what happens behind the scene when we use classes, class Inheritance and the super() keyword in javascript.

To get started with this tutorial, we would first have to revisit the basic concepts we learned starting off, one of which is objects.
Objects are key/value pairs. The most common way to create an object is with curly braces {} and you add properties and methods to an object using dot notation. In order to effectively learn about prototypes in JavaScript, we’re going to channel our minds back to objects and how they are used.

ProtoType:

The Prototype is the mechanism by which all JavaScript objects inherit from one another.

   function Person(attributes) {
     this.age = attributes.age;
     this.name = attributes.name;
     this.occupation = attributes.occupation;
   }

Given the constructor function person, we would want to introduce a speak property using Person.prototype

   Person.prototype.speak = function () {
      return `Hello, my name is ${this.name}`;
   };

Now that we have added the speak property to the Person constructor, it now completely owns it and can pass it down to each instance of Person, without having to create a new property on any objects.

Inheritance using prototypes:

Let's look at how inheritance works in JavaScript using prototypes. We create a Child constructor

   function Child(childAttributes) {
      Person.call(this, childAttributes);
      this.isChild = childAttributes.isChild; // this will be a special attribute to Child
   }

By writing the line of code, Person.call(this, childAttributes), we are binding this to Person, and this is what makes sure that the Child constructor inherits the properties of the Person constructor, this really cool process has been abstracted away by the super keyword in Es6.

One problem still exists, our Inheritance isn't complete yet, because the Child constructor isn't aware of the Person prototype yet. We would have to manually tell Child about Person using Object.create().

Child.prototype = Object.create(Person.prototype);

If we would love to add more properties, and we want them to be particular to the Child constructor, we can do so by

   Child.prototype.cry = function () {
       return `Baby crying...`;
   };

We now have linked the Person prototype with the Child prototype. Eventually, we’ll get this linking for free with the class keyword, but seeing Object.create() is really good because it demonstrates how the class keyword works under the hood.

Now that we have created a Child constructor, let's introduce Ben to the family:

   const ben = new Child({
      age: NaN,
      name: Ben Halpern,
      occupation: Comedian
   });

It's good to note we are using the prototype’s inheritance from the Child constructor to access our Person properties. Now we can call ben.speak() and see what happens.

Hello, my name is Ben Halpern

We just used inheritance from the Person prototype to use ben.speak. Take a moment to reflect on that! and if you have any questions and feedback, please leave a note on the comments.

Cheers 🥂🎉🎉🎉

WebHook - An Introduction

Johnson Ogwuru — Sat, 10 Aug 2019 07:47:49 +0000

Most folks hate being micro-managed, we mostly want to be allowed to do our best work and not to be constantly reminded of it, or being repeatedly asked if we are done when it's obvious we aren't. This kind of behavior from direct managers and colleagues have forced some Engineers to tip their hat and resign from their positions.

But how would you feel to learn that your server-side application living and chilling on AWS or Azure feels exactly the same way when you repeatedly send a request to it, asking for data, which obviously isn't ready or doesn't exist?
I'm sure we won't want our server-side application to tip the hat and resign from its position when it can't take the repeated calls and request from us and the client-side. Little wonder, products like GitHub enforced a limit on the amount of request you could make to their server, just to be safe and sure that their server-side application stays happy and doesn't quit on them 🎩, from the possible billions of request that would come from uncontrolled access to it.

Now, the question on everyone's mind would be, if we are going to do away with having to repeatedly ask the server if it has something new for us, how would we be aware of changes on our server? Or are we expecting our users to be refreshing their browsers every 10minutes to get new content?

If we are running products that require reading lots of data like Twitter and GitHub, we definitely wouldn't expect our users to refresh their browsers every time they want to receive the latest information or feed in the case of Twitter, at least not in this our era of SPA's and Ajax.
So how do we tackle this problem?

Introducing the Big Man...WebHooks 🥁🥁🎉🎉🎊🎊

The introduction of WebHooks led to a new form of communication between the client-side application and the server-side application.
Before now, the form of communication that exists between the client-side and the server-side is the one which had the client consuming the server, when making a request for a resource from the server.

With a WebHook, the server-side this time consumes a resource from the client-side and not the other way around(the resource being the end-point URL provided by the client-side application), which is why the WebHook is commonly referred to as the "Reverse API".

The concept of a WebHook is simple. A WebHook is an HTTP callback or HTTP POST, that occurs when something happens; a simple event-notification via HTTP POST.
With WebHooks, we avoid the need for constant polling of the server-side application by the client-side application in search of certain resources, but rather the client-side is alerted whenever there is a change to such resources which it's interested in.

Thus, rather than the client-side application constantly polling the server-side application to check for new events, the server-side application calls the client-side application (by invoking a client provided webhook URL) anytime the server-side has something new to report to the client.

A WebHook has the ability of not just notifying the client-side of a change in the server-side, but can also take a payload, a payload which could be information about the new resource, but while it is possible to pass payload data within the body of the webhook, to improve scalability and reliability it is a good practice to keep the webhooks light-weight. Webhooks although technically can carry a payload, are only a callback mechanism, and primarily should serve as a signal for change in state.

Once the notification in the change of state is received, a separate API call could be made to the server requesting for the new resource. This separation of concern allows for improved scalability and reliability of the API integration. And this is exactly what Twitter and LinkedIn does when they allow you to update your timeline but only show you a button to do so when there is a new resource(tweet or post)

Thus, a webhook is nothing but a simple client-side provided end-point URL. This end-point URL has to be passed by the client-side application to the server-side application at some point prior to the webhook call by the server-side.

Resources:

The following site allows you to test the concept of webhooks https://webhook.site/. It generates a unique test webhook URL that can be called by your application to test the callback (notification) feature of the webhook. You could further test it, by adding the link generated as a webHook in a GitHub repo's webhook setting and making a push to that repo and see the awesomeness of webhooks from webhook.site
With regards to the argument about whether a webhook should have a payload, have a look at this article on medium by jsneddles
For further read, check out https://codeburst.io/whats-a-webhook-1827b07a3ffa

Conclusion:
As this is a concept I just got to understand, it is possible, I didn't touch all aspects of it, and would love to get your kind feedbacks, questions, and contributions. Thanks.

Optimizing React Components with Error Boundaries

Johnson Ogwuru — Mon, 05 Aug 2019 11:52:45 +0000

Disclaimer: The concept discussed in this article is part of the advanced concepts of React as outlined in the official docs. But I see it as something every react developer should know and use. You would find this my view to be accurate at the end of this tutorial.

The React we know:

By its original design, when JavaScript errors occur in a component as little as a Button component, it leads to the complete crash and failure of the react application. At the time react did not provide a way to handle this, neither was it able to recover from these errors when they occurred.

But now, the React team at facebook with the advent of React 16, introduced a new concept for error handling called error boundaries.

Introducing Error Boundaries:

With the introduction of error boundaries, components can have errors and crash in peace without having to affect the entire application state causing an application-wide crash

According to the React Documentation,

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Error boundaries work like the catch(){} block in JavaScript, but this time for components. Someone could say since it works like JavaScripts catch(){} block, why don't we use try/catch of creating error boundaries. So we could have something like this:

      try { 
         <ShowButton /> 
      } catch(err) {
         console.log(err)
      }

This looks good and could solve the problem we want to solve with Error Boundaries, but the thing is try/catch only works for imperative code, but since we are working with react, which is declarative, react components are declarative and specify what should be rendered. But with Error Boundaries the declarative nature of React is preserved.

Just to add to this article, to understand the difference between imperative code and declarative code, look at these articles, here and
here

Error Boundaries, can only be class components, how do I mean, you can't use functional components, to create an error boundary, but a class component.

For a class component to be considered an error boundary, it needs to have either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch(). Where getDerivedStateFromError() is used to render a fallback UI with the error response the developer specifies, and componentDidCatch() is used to log error information, so here you could be using any log service of your choosing, or our favorite console.log.

To jump into code, this is what an error boundary looks like;

 import React, {Component} from 'react';
 class ErrorBoundary extends Component {
    constructor(props) {
       super(props);
       this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
       // Update state so the next render will show the fallback UI.
       return { hasError: true };
    }

    componentDidCatch(error, info) {
       // You can also log the error to an error reporting service
       logErrorToMyService(error, info);
    }

    render() {
      if (this.state.hasError) {
        // You can render any custom fallback UI
        return <h1>Something went wrong.</h1>;
      }

      return this.props.children; 
    }
 }

The code example was extracted from the react documentation, and for further reads, I would suggest you likely have a look at it.

With Error boundaries in place in our code, we won't have a mere error in our button component render, kill the entire application, we would have complete control over such things, and the users of the application won't be left wondering what happened.

To use the created error boundary, all we have to do is, wrap any component we want to be covered by error boundary within it as so;

Lastly, it's important to note that, error boundaries can't be used within event listeners. When dealing with event listeners, it's best to use the try/catch block.

Note: How you want to use error boundaries, is totally up to you, you could have your entire application wrapped in an error boundary or simply have individual components wrapped within an error boundary. But, it is still highly recommended that you just put your in a few strategic places.

For further reads on error boundaries, I won't recommend other sources than the react documentation here

I hope you enjoy using error boundaries as I do. That's it from me here, if you have any questions or feedback feel free to comment or DM on twitter

Social Logins with Google Auth

Johnson Ogwuru — Tue, 09 Jul 2019 16:23:14 +0000

Disclaimer: I would suggest you sit tight because I am about to show you how to easily get Google Auth integrated into your react app, seamlessly.

Following the advent of a unified authentication system, such as Facebook, Google, Github Logins, people tend to prefer to use these methods to get themselves authorized on any platform having such an authentication service.

In this article, we would be discussing, how we can set up one; the Google social login in a react application.

Given a React Login Component with the code below:

     import React, {Component} from 'react'

      export default class Login extends Component {
          render(){
             return(
                 <div>
                    <input type="text" placeholder="username"/>
                    <input type="text" placeholder="username"/> 
                    <button>Login</button>
                 </div>
             )
          }
      }

We would need to install a package to assist us with setting up the Google Login feature on our application. To do this we would need to install the react-google-login package.

   yarn add react-google-login || or you can use || npm i react-google-login

On successful installation of the package, we would have to import it into our project. Our project should look as so:

     import React, {Component} from 'react'
     import GoogleLogin from 'react-google-login'

      export default class Login extends Component {
          render(){
             return(
                 <div>
                    <input type="text" placeholder="username"/>
                    <input type="text" placeholder="username"/> 
                    <button>Login</button>
                 </div>
             )
          }
      }

So to use the package, all we have to do is render it in our component by adding this <GoogleLogin /> below <button>Login</button>.

The GoogleLogin component rendered, would need some properties passed as a prop to function, these properties include: clientId, buttonText, onSuccess, onFailure. I would be discussing each of them, from the easiest to set up to the hardest.

buttonText: This is simply the text that would appear on the button. And we could simply do these by assigning a text to buttonText as so: buttonText = 'Log in With Google';

onSuccess and onFailure: These are actually methods, that serve as callbacks when a request is made to authenticate with Google, so its in these methods that you specify what happens when a response is returned by Google. For our example, an onSuccess method could look like what we have below:

  responseGoogle = async (response) => {
    const userObject = {
      username: response.w3.ofa,
      password: 'test'
    }
    if(response.w3.ofa) {
      await localStorage.setItem("user", JSON.stringify(userObject));
      await window.location.reload();
    } else {

    }
    console.log(response);
  }

The response sent by Google has an object called w3, which houses the properties w3 and another property for the user email. This might be different for you, so please kindly log your response when it is returned, to pick the details you need.

Because Google would not return the users password, what I normally do is assign them a default password and store this password in the database. And on another time, if the user tries to log in, all I have to do is send an object with his username and the default password back to the server, which in our case is test. In our example, we would be storing the userObject in local storage, but if you are persisting your data in a database, you would have to send this object to the method handling the authentication of the user on the server. To complete the process, we would now assign the method created to the onSuccess property as so; onSuccess = responseGoogle;. For the onFailure property, we can have an alert or log inside a method that outputs an error message and we would assign this method to the onFailure property as we did to the onSuccess.

clientId:
To get this information, you need to visit the Google API console Here

Click on the credential section, and click on the create credential button
Select the Oauth option

Note, if you don't a project created before now, it would prompt you to, follow the directions and create the project, then try to generate the credentials again. This time follow the prompt till you get to the part where you are shown your clientId, copy the clientId and assign our own clientId to it. At the end of the day, our Login Component would look as so:

import React, {Component} from 'react'
import GoogleLogin from 'react-google-login'

  export default class Login extends Component {

      responseGoogle = async (response) => {
         const userObject = {
            username: response.w3.ofa,
            password: 'test'
         }
         if(response.w3.ofa) {
            await localStorage.setItem("user", JSON.stringify(userObject));
            await window.location.reload();
         } else {

      }
      console.log(response);
      }
      render(){
         return(
             <div>
                <input type="text" placeholder="username"/>
                <input type="text" placeholder="username"/> 
                <button>Login</button>
                <GoogleLogin
                  clientId="##########" //id gotten from Google
                  buttonText="Log in with Google"
                  onSuccess={this.props.responseGoogle}
                  onFailure={this.props.responseGoogleError}
                />
             </div>
         )
      }
  }

With that we have our React application authenticated with Google 0auth. This is as simple as it comes, if further clarification is needed, please feel free to reach out to me, here or via Google Mail 😂

Introduction to Styled Components

Johnson Ogwuru — Sun, 16 Jun 2019 20:07:09 +0000

This article would have us jumping straight to introducing the concepts and approaches of using styled components in styling our React components.

Styled components follow the paradigm of CSS-in-JS. To use styled components, first, we would have to install and import it into our react project since it doesn’t come with react pre-built.

Our normal react application looks like this:

     export default function Component() {
        return (
         <div>
            <p>Hello World </p>
         </div>
        )
     }

Now instead of styling, this React component by littering everywhere with classNames, we could use styled components to style the components. Styled components make sure that styles don’t leak from one component to another.
To get started using styled-components, we would have to import it first into our project as so

    import styled from 'styled-components';

To style the div in our component above, we would do the following

    const DivWrapper = styled.div`
      width: 50%;
      border: 2px solid black;
    `;

The variable is named as so, starting with a capital letter, because it’s actually a component. Now we would have to replace our div with the DivWrapper we just created. Below is the code demonstrating how:

     export default function Component() {
     return (
      <DivWrapper>
        <p>Hello Styled component</p>
      </DivWrapper>
     )
     }

By doing this, the styled associated with DivWrapper is applied to our component.

It’s wise to note that, styled components should never be declared within a class or function component but outside the scope of both.

We could go further to style the <p> tag by doing these:

     const Paragraph = styled.p`
       font-size: 32px;
     `;

With these we could replace the <p> tag with the Paragraph styled component and the styles are applied.

Styled components support some syntaxes that come baked into preprocessors like Less and Sass, such as nesting and creation of mixins.

Just like any other react component, the styled-component receives props and gives the developer the ability to make certain style decisions with regards to what is being passed as a prop to the styled-component. To illustrate this, say our DivWrapper styled wrapper, was going to be re-usable by other components, then the need would arise for us to specify certain style guidelines that would differ based on the choice of the developer, one of such could be the background color of the divs. How can we do this with styled-components?

First, we would need to pass to our styled-component a prop of color as so:

  <DivWrapper
    color= 'blue'
  >

  </DivWrapper>

Now in our styled-component declaration, we would do the following:

  const DivWrapper = styled.div`
    width: 50%;
    border: 2px solid black;
    ${props => (props.color === 'blue') ? `background-color: blue`: null}
    ${props => (props.color === 'red' ? `background-color: red`: null)}
  `;

Styled components can inherit from each other, how do we mean. A styled component can re-use the styles present in another styled component. To illustrate, say we have another div but this time it has a background color of red, instead of creating a totally different styled component, we can create one that inherits all the properties of the former div styled component DivWrapper and then add the additional styles it relies on. Here is how:

    const DivWrapper2 = styled(DivWrapper)`
        background-color: 'blue';
    `;

When we use the styled component DivWrapper2, it inherits the styles, width, and border from the DivWrapper component.

Styled components are great for styling React components. If you are looking at digging deep into styled components, visit the official site here.

Introduction to Higher Order Components(HOCs)In React

Johnson Ogwuru — Sun, 09 Jun 2019 18:17:51 +0000

The past week got me learning a lot of things, a lot of concepts I would really love to share. I would begin by discussing Higher-order functions(HOCs) In react.

To be able to understand Higher order components in react, we would first need to understand what Higher Order functions are in JavaScript. Higher-order functions in Javascript are functions that take other functions as arguments and return another function. Examples of the higher-order functions are the; .map, .filter, etc. Some of them I wrote about in this article:

.forEach(), .map(), .filter() .... What's the difference?

Johnson Ogwuru ・ May 11 '18 ・ 1 min read

#javascript #programming #tutorial

It’s important to note that I’m assuming you have prior knowledge of React if you don’t below is an awesome tutorial by traverse media.
That aside let’s jump right in.

Higher Order Components are components that take as argument another component or components and returns a new component. Could be likened to a Higher Order function, well that’s where the name came from. It is an advanced technique in react for re-using the logic of a component. HOC’s could be used when we want to abstract a login component from the other components in a site, and I would demonstrate how. HOCs are commonly used as advanced react patterns for designing some components that share certain behaviors in a way that makes them connected differently than just the normal state-> props pattern. HOCs as an advanced react pattern allows us the capability of reusing component logic. Think about the functionality of the login component I mentioned. The login could be just a form that takes as value a username, and password and performs a check against a database or any storage means if the user exists on the system. if the user does, and the password entered is correct, then the App component would render the content component, but if the user doesn’t exist, the App renders the login component, the same could be applied to when checking if a user on the site still has a valid authentication. This example could be performed using a Higher-order component. But how, the code below demonstrates how.

Say we have an App component as such

   import React, { Component } from 'react'

   //below is the app component that would render to the DOM
   export default class App extends Component {
     render() {
       return (
          <div>
            <h1> Hello world </h1>
          </div>
       )
     }
   }

To create a higher order component that would perform the function we want, which is determining which component to render depending on the status of the user's login session, we would first have to create the two components.

Please note, to make this explanation as simple as it could possibly get, I would be creating all of the components inside the app.js file. And also we would be making use of create-react-app, please get it set up

Below, we would be creating both the login and content components, both are actually going to be dummy components simply calling out their names in an h1 tag.

   import React, { Component } from 'react'

   // Login Component
   export default function Login {
      return (
         <div>
           <h1>Hi i'm login</h1>
         </div>
      )
   }

   //Content component
   export default function Content {
       return (
          <div>
            <h1>Hi i'm Content</h1>
          </div>
       )
   }

   //App component
   export default class App extends Component {
     render() {
       return (
          <div>
            //Add component to render here
          </div>
       )
     }
   }

Having built out the individual components, it's time for us to create our HOC.

Please note that you can choose to create this in a different file, but to make this article simple and straight to the point, I would be doing everything from a single file.

Copy and paste the following code immediately under the Content component and before the App component.

  const withAuthentication = Component1 => Component2 =>
     class extends Component {
       constructor(props) {
         super(props);
         this.state = {
          isLoggedin: false,
         };
       }

       render(){
          if(this.state.isLoggedin) {
            return <Component1 />
          } else {
            return <Component2 />
          }

       }

The above is as simple as a Higher-order Component can be.

It's of vital importance that we note how HOCs are named, it's generally accepted that they are named starting with with and then whatever their specific job is, In our case authentication. That way anyone looking at your code knows it's a Higher-order component without looking at the code, this is especially very important where the HOC leaves in a separate file.

To explain the code. We use what is being referred to as curring in JavaScript to receive the arguments supplied to a HOC. Currying was what we did when we passed the two arguments to the HOC as so; Component1 => Component2 =>, which is actually equivalent to us declaring a method and passing an argument to it, the normal Javascript way.

Further down, the HOC returns an anonymous class which has a state object, that houses the isLoggedin property, which you would manipulate however you want, during the course of developing your application, to determine when a user is logged in and when they are not.

Further down to the render() method, we add a condition to check the state for the value of isLoggedin, so whatever the value is a Component is being returned respectively.

Now, the question in your mind could obviously be how you can get to use this. Pay close attention. Copy and paste the following code immediately under the HOC withAuthentication() we just wrote.

  const DoAuthenticate = withAuthentication(Content, Login);

Now by assigning our HOC withAuthenticate to a function DoAuthenticate, we are setting whatever the returned function inside of HOC to DoAuthenticate who from how it's named, shows it's a component.

Because of how our HOC was organized, we need to make sure the Content component stays at the position of Component1 in the HOC because we expect it to be returned when the user is logged and the Login component taking the position of Component2 as defined in the HOC.

Now instead of having to wonder which Component to render to the DOM through the App Component, we just render the DoAuthenticate and allow the HOC do the pondering over for us. In the end, our code should look like so.

   import React, { Component } from 'react'

   // Login Component
   export default function Login {
      return (
         <div>
           <h1>Hi i'm login</h1>
         </div>
      )
   }

   //Content component
   export default function Content {
       return (
          <div>
            <h1>Hi i'm Content</h1>
          </div>
       )
   }


   // Higher order Component
   const withAuthentication = Component1 => Component2 =>
     class extends Component {
       constructor(props) {
         super(props);
         this.state = {
          isLoggedin: false,
         };
       }

       render(){
          if(this.state.isLoggedin) {
            return <Component1 />
          } else {
            return <Component2 />
          }

       }


   const DoAuthenticate = withAuthentication(Content, Login);

   //App component
   export default class App extends Component {
     render() {
       return (
          <div>
            <DoAuthenticate />
          </div>
       )
     }
   }

Learning about HOCs was really fun for me and I made two applications during the week, to deepen my understanding of it. Here are links to the applications.

Instaclone a clone of the Instagram application(not a complete clone though...lol) and LambdaTimeX. Would be dropping links to they Repos on the comment section.

To further your knowledge, I would recommend you give this article on HOCs by Sitepen a shot. 🥂🥂🥂🥂