DEV Community: Nazmi

Part 2 - Dockerise your Blockchain app

Nazmi — Sat, 09 Oct 2021 08:00:55 +0000

In the previous article, we've built an Ethereum blockchain on AWS using Ganache-CLI. The blockchain is up but it requires to be manually started with your terminal tab always running ganache. What if we can have the blockchain running in background on the EC2 server, and add a custom domain to its IP address, and then secure it with an API token. So that's what we will be working on in this part.

Here is where Docker comes in.

Containerise your blockchain app

Docker is useful when you need to run an app pre installed with all its dependencies.

ssh into your EC2 instance and install docker by running these commands

$ sudo apt-get update

$ sudo apt-get install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

$ echo \
"deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

$ sudo apt-get update

$ sudo apt-get install docker-ce docker-ce-cli containerd.io

$ sudo docker run hello-world

You should be able to see this output after the last command.

Create a Dockerfile

Create a new file named Dockerfile at your current folder. In the file add these lines,

# node:alpine will be our base image to create this image
FROM node:alpine

# Set the /app directory as working directory
WORKDIR /app

# Install ganache-cli globally
RUN npm install -g ganache-cli

EXPOSE 8545

# Set the default command for the image
CMD ["ganache-cli", "-h", "0.0.0.0", "--port", "8545", "--networkId", "5777"]

Build and run Dockerfile

We are now ready to build and run the blockchain in the background!

# Builds the docker image with the name ganache
sudo docker build -t ganache .

# runs the app. -d will detach the app so that it will in background
sudo docker run -d -p 8545:8545 ganache

# checks if ganache has run successfully
sudo docker logs ganache

Your app is up and running!

Visit your AWS public IP on port 8545 (http://<YOUR_EC2_IP_ADDRESS>:8545).

Build your own remote private blockchain with AWS and Ganache

Nazmi — Wed, 06 Oct 2021 02:47:15 +0000

This will be a 2 part series!

I have been fiddling in the blockchain world for a while trying to figure how the blockchain works and how to create one. There isn't one guide that helps one to build his very own blockchain! So I'm writing this article to help you speed up your process of building one. If you are interested to build a blockchain and desire to create your own private ethereum network, look no further.

In this article, I'll be sharing with you on how to create a private blockchain from scratch with almost no cost. It's best used for testing your application code or smart contract that may contain bugs for attackers to exploit. By setting up your own private test blockchain, it helps to simulate the Ethereum blockchain before deploying it to the main network.

This article will cover

Setting up an AWS instance running Ganache
Setting up security group to only allow your IP to access the blockchain
Running the blockchain
Containerise the blockchain to have it run in background and easier deployment (Part 2)
Using Nginx to route your blockchain to a URI (Part 2 Coming Soon)
Request api token with Nginx (Part 2 Coming Soon)

Setting up an AWS EC2 instance

Let's start! Create a small instance in AWS to deploy our blockchain. The smallest instance will do!

Head over to EC2 service homepage and click on Launch Instance.
Choose the free tier eligible Ubuntu Server 20.04 LTS (HVM), SSD Volume type.
Select t2.micro Type and press on Next button.
Keep pressing Next until Step 6: Configure Security Group. Create a new security group with the default SSH rule updated with source My IP. Add two more rules Custom TCP and Custom UDP. Select My IP as your source to only allow your IP address to access the blockchain.
Select Next and press Launch. On the Select key pair prompt. Select an existing key pair if you have one. Else create a new key pair. Press launch and wait until the Instance State gets to Running

Running the blockchain

Connect into your newly created EC2 instance by SSH or using Instance Connect.

Run the following commands:

$ sudo apt-get update
$ sudo apt install curl
$ curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
$ source ~/.profile
$ nvm install --lts

Verify that npm is successfully installed
```
$ npm -v
```
Install Ganache CLI
```
$ sudo npm install -g ganache-cli
```

Run Ganache

$ ganache-cli --host "[private_ip_of_AWS_instance]"  --port 8545 --networkId 5777

Private IP should be Private IPv4 addresses of your instance

You should see a prompt that Ganache is listening on port 8545 to indicate you have a running blockchain! 🎉

Test out your blockchain

I have created a small node app for you to connect to your blockchain and get the balance of one created account. I used Web3 JS to call the blockchain.

In another tab in your terminal, clone this repository:

$ git clone https://github.com/nazmifeeroz/node-test-blockchain

Duplicate .env.example into a new file .env
```
$ cp .env.example .env
```
Get your BLOCKCHAIN_IP_ADDRESS from your EC2 instance console. This should be the Private IPv4 address
Run the app
```
$ yarn && yarn start
```

You should see the balance of your first account of your blockchain. 😎

About the app

If you would open up main.js, there's a Main() function that is fetching all the accounts available in your blockchain (default is 10 accounts). It then calls the getBalance() method with the first account address. That simple!

🎉 Congratulations!

You now have a running blockchain at your own dispense. In part 2 of my series, I will show you how to dockerize your blockchain so that you can startup a blockchain easily and have your blockchain programmatically accessible by using an API token.

Cheers!

How to use AWS Cognito to access AWS Services

Nazmi — Tue, 13 Jul 2021 00:42:01 +0000

This article will explore how to block access to AWS S3 storage and allow only Cognito authenticated users to access their own directory.

AWS provides many services, and many times developers tend to not use the right architecture to securely access these services. The fastest and easiest way was to use an IAM user access key and secret to access. To do this, a developer needs to expose these access keys. Fortunately, there is a better way to securely access AWS services without exposing client secrets (see diagram below).

A user will need to authenticate first with Cognito to get his own access tokens that have an expiry. With this token, it exchanges with the Identity pool for AWS credentials. Only then, with these AWS credentials can the user gain access to AWS services. It's a long tour, but definitely, a more secure way than to use client secrets exposed to the front end.

TL;DR

Create User Pool

Add a Cognito domain name prefix
Create an app client (save the user pool, client ID)
Update the callback URL in the app settings
Enable client Identity Providers

Create Identity Pool

Leave all as default

Create S3 Bucket

Update CORS

Create Policy

Update bucket name in policy
Attach policy to Cognito Auth role

Test your AWS Cognito setup

Clone this repository, https://github.com/nazmifeeroz/simple-aws-upload
Update .env variables

You're done! Authenticate, upload a file and see it listed on your page!

Create User Pool

Let's start by creating a Cognito User Pool. This service will manage our user registration and user tokens. Go to https://console.aws.amazon.com/cognito/home and click on Manage User Pools.

Click on Create a user pool, enter your desired Pool name and click on Review Defaults. Leave all fields as default and click on Create Pool. It should direct you to the General Settings page.

We are going to use Cognito's default hosted UI for users to register and sign in. We will need to set the Cognito domain name for users to be redirected and sign in to their Cognito account. On the left sidebar, click on Domain Name. Enter a domain prefix and check that it's available. Once you have found an available Domain prefix, click on Save changes.

Take note of the Cognito Domain URL, as we will use it to redirect the login page.

Next, we need to add an app client. On the left sidebar, click on App Clients > Add an app client. Here we need to insert an App client name on the client-side when calling the Cognito user pool. Leave other fields as default. Click on Create app client.

On the next screen, take note of the App client ID.

Lastly, we need to add a Callback URL and a Sign out URL in App Client Settings,select Cognito User Pool for Enabled Identity Providers, and select all under OAuth 2.0 section. Don't forget to Save Changes.

Now, we can register a user into our User Pool. Go to,



https://<DOMAIN_PREFIX>.auth.<REGION>.amazoncognito.com/login?response_type=token&client_id=<CLIENT_ID>&redirect_uri=http://localhost:3000

Replace DOMAIN_PREFIX, REGION and CLIENT_ID with the values that you've created previously. You should see the sign-in page.

Create Identity Pool

With an identity pool, you can obtain temporary, limited-privilege AWS credentials to access other AWS services - AWS Docs

We will now create an Identity Pool to allow our users to access AWS services. Before we create one, we need to note the User Pool ID and App Client ID. These can be found under General Settings > Pool Id field and App Client Settings > ID.

Once you have noted down the values for User Pool ID and App Client ID, go to the home page of AWS Cognito, console.aws.amazon.com/cognito/home and click on Manage Identity Pools. Click on Create new Identity Pool and enter an Identity pool name.

Expand the Authentication providers accordion and select the Cognito tab. Enter the User Pool ID and App client ID you have previously noted and click on Create Pool. On the next screen, the wizard will prompt you to create IAM roles for creating the identity pool. These roles are crucial to define what an authenticated or unauthenticated user is allowed to access.

Leave it as default and click on Allow. Take note of the Role names. Now we are done setting up Cognito!

Create an S3 Bucket

To test out our Cognito Identity Pool, we will create an S3 bucket that only allows an authenticated user to access his own directory to perform all the CRUD actions. Go to the S3 home page, https://s3.console.aws.amazon.com/s3/home and click on Create bucket.

Give your bucket a unique name, leave all the fields as default and click on Create Bucket. Click on the bucket you've just created and click on the Permissions tab. Scroll down to the Cross-origin resource sharing (CORS) section and click on Edit. Paste this JSON code into the text area,



[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE"],
    "AllowedOrigins": ["http://localhost:3000"],
    "ExposeHeaders": []
  }
]

Click on Save Changes. These CORS settings will only allow our client app to access our bucket. That's all for the S3 setup. Do take note of the Bucket name to be used on the client-side.

Create a policy

We need to create a policy that allows our Cognito authenticated users to access our S3 bucket. Go to IAM service, https://console.aws.amazon.com/iam/home, select Policies on the left sidebar and click on Create policy. Click on the JSON tab and paste this policy,



{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": ["s3:ListAllMyBuckets", "s3:GetBucketLocation"],
      "Resource": "*"
    },
    {
      "Effect": "Allow",
      "Action": "s3:ListBucket",
      "Resource": "arn:aws:s3:::bucket-name",
      "Condition": {
        "StringLike": {
          "s3:prefix": ["", "/", "${cognito-identity.amazonaws.com:sub}/*"]
        }
      }
    },
    {
      "Effect": "Allow",
      "Action": "s3:*",
      "Resource": [
        "arn:aws:s3:::bucket-name/${cognito-identity.amazonaws.com:sub}",
        "arn:aws:s3:::bucket-name/${cognito-identity.amazonaws.com:sub}/*"
      ]
    }
  ]
}

Update the bucket name to the S3 bucket you've created above.

Click on the next screen until you reach the Review policy screen. Give a name to your policy and click on Create policy.

Click on Roles on the left sidebar. Select the Auth_Role that you have created from the previous step in Create a new identity. Select Attach policies. Find the policy that we've just created above. Select it and click on Attach policy.

Now our authenticated Cognito user can access the S3.

It may take a while for the policy to take effect.

Test your AWS Cognito setup

Clone this repository (https://github.com/nazmifeeroz/simple-aws-upload) to test out if your AWS setup works! You simply need to add your AWS config variables into a .env file at the root of the project folder.

Create a .env file at the root of the project folder with these variables.



VITE_APP_S3_BUCKET=<YOUR_S3_BUCKET>
VITE_APP_COGNITO_LOGIN_URL=https://<COGNITO_DOMAIN_PREFIX>.auth.<COGNITO_REGION>.amazoncognito.com/login?response_type=token&client_id=<USER_POOL_ID>&redirect_uri=http://localhost:3000
VITE_APP_COGNITO_LOGOUT_URL=https://<COGNITO_DOMAIN_PREFIX>.auth.<COGNITO_REGION>.amazoncognito.com/logout?client_id=<USER_POOL_ID>&logout_uri=http://localhost:3000
VITE_APP_BUCKET_REGION=<BUCKET_REGION>
VITE_APP_COGNITO_REGION=<REGION>
VITE_APP_COGNITO_IDENTITY_POOL_ID=<IDENTITY_POOL_ID>
VITE_APP_COGNITO_IDENTITY_PROVIDER=cognito-idp.<REGION>.amazonaws.com/<IDENTITY_PROVIDER>

Run in development

Install dependencies by running,



# if you have yarn installed
yarn install

# or if you use npm
npm install

Run the app,



yarn dev
# OR
npm run dev

Once you sign in, you should be able to see this screen. Choose a file and upload it. If all works well, you should see a success alert, and your file name should be listed on the page! 😃

Using State Machine to build your React app

Nazmi — Thu, 07 May 2020 00:46:44 +0000

I hope this article finds you healthy and safe.

With the coronavirus causing chaos all over the world, I thought it would be useful to build an app that shows the latest metrics of each individual country cases. I will be using Next JS, styled-components and state machines!

Why state machine?

When I'm building an app in React, I will have a problem trying to understand how that component would work or react when a condition happens. State machine helps me structure my app into states, transitions and events so that my app becomes more predictive and eliminates any unexpected bugs or states.

In short, xState makes our code cleaner and maintainable in the long run! Believe me.

Read this article by the author of xState himself to understand more on state machines.

You can check out the finished repo at https://github.com/nazmifeeroz/covid-xstate-next and view the finished app deployed here, https://covid-next.now.sh/

Let's begin coding!

Setting up your app

I will be using Next.js to bootstrap the app. In your terminal, run:

$ mkdir covid-xstate-next && cd covid-xstate-next && npm init -y

That should initialise npm in your folder, which you can then install the required packages:

$ yarn add react react-dom next xstate @xstate/react styled-components

Once installed, create a new folder pages and a file called index.js:

$ mkdir pages && touch pages/index.js

Open up package.json in your code editor and replace the test script to this:

  "scripts": {
    "dev": "next"
  }

This will be the command to run your app. Before we can run, let's add some template in index.js:

import React from 'react'

const IndexPage = () => (
  <div>CoronaVirus Information</div>
)

export default IndexPage

Now you can run yarn dev, and you should be able to open up your app in your browser at http://localhost:3000 and you should see your browser showing the texts we added from index.js.

The State Machine (The Brain)

Now that we are all set, let's dive into building the brain in our app!

We'll start by setting up the state chart of our app. In your index.js file, add this before your IndexPage function:

// pages/index.js
import { Machine } from 'xstate'

const statsMachine = Machine({
  id: 'statsMachine',
  initial: 'fetchStats',
  states: {
    fetchStats: {}
  }
})

Here we initialise the machine by defining the initial state of the app which will be fetchStat. In layman terms, when the page is loaded, we want the app to fetch stats first! Pretty straight forward right?

In xState, we can run an asynchronous function that returns a promise. Whether it is resolved or rejected, we can define the transition it to the next state accordingly.

We will be using an open sourced api to retrieve the stats. Within the fetchStats state, we will call the invoke attribute which will fetch the data from the api:

// pages/index.js
import { Machine } from "xstate"

const statsApi = "https://coronavirus-19-api.herokuapp.com/countries"
const statsMachine = Machine({
  id: "statsMachine",
  initial: "fetchStats",
  states: {
    fetchStats: {
      invoke: {
        src: () =>
          new Promise(async (resolve, reject) => {
            try {
              const stats = await fetch(statsApi).then((response) =>
                response.json()
              )
              return resolve(stats)
            } catch (error) {
              console.log("error in fetching stats: ", error)
              return reject(error)
            }
          }),
      },
    },
  },
})

The invoke attribute takes in a src which will be the function that will run a promise function. To get the resolved data or rejected error, we can get it from the onDone and onError attribute respectively:

// pages/index.js
import { assign, Machine } from 'xstate'

const statsApi = 'https://coronavirus-19-api.herokuapp.com/countries'

const statsMachine = Machine({
  id: 'statsMachine',
  initial: 'fetchStats',
  states: {
    fetchStats: {
      invoke: {
        src: () => new Promise((resolve, reject) => {
          try {
            const stats = 
              await fetch(statsApi)
                .then(response => response.json())

            return resolve(stats)
          } catch (error) {
            console.log('error in fetching stats: ', error)
            return reject(error)
          }
        }),
        onDone: { target: 'ready', actions: 'assignStats' },
        onError: 'error',
      }
    },
    ready: {},
    error: {}
  }
})

As you might have guessed, when the promise fetches successfully, it resolves with the data and transits via the onDone attribute. The target is ready which is a state and waits there for the next event. If the promise returns error, it gets rejected and transits to the error state via the onError attribute.

Now if you notice, we have another attribute within the onDone which is the actions attribute. What that does is when the Promise resolves successfully, we want to assign the data into the context of the machine.

// pages/index.js
import { assign, Machine } from 'xstate'

const statsApi = 'https://coronavirus-19-api.herokuapp.com/countries'

const statsMachine = Machine({
  id: 'statsMachine',
  initial: 'fetchStats',
  context: {
    stats: null
  },
  states: {
    fetchStats: {
      invoke: {
        src: () => new Promise((resolve, reject) => {
          try {
            const stats = 
              await fetch(statsApi)
                .then(response => response.json())

            return resolve(stats)
          } catch (error) {
            console.log('error in fetching stats: ', error)
            return reject(error)
          }
        }),
        onDone: { target: 'ready', actions: 'assignStats' },
        onError: 'error',
      }
    },
    ready: {},
    error: {}
  }
},
{
  actions: {
    assignStats: assign((_context, event) => ({
      stats: event.data
    }))
  }
})

In xState, we can define out actions into another object so that our machine object won't be so cluttered. In the assignStats action, we use the assign function that takes in the latest context and event that was passed from the resolved promise data and we store it in the stats prop.

Now we're done with the brain of our app! Let's move to the render function (the body).

The Body (Main Render function)

Now back to our JSX function, we want to show loading when the app is in fetchStats state. Then show the stats whens it's done at ready state.

// pages/index.js
import { assign, Machine } from "xstate"
import { useMachine } from "@xstate/react"

const statsApi = "https://coronavirus-19-api.herokuapp.com/countries"

const statsMachine = Machine({
  // … our machine object
})

const IndexPage = () => {
  const [current, send] = useMachine(statsMachine)

  return (
    <>
       <div>CoronaVirus Information</div> 
      {current.matches("fetchStats") && <div>Loading Stats…</div>} 
      {current.matches("error") && <div>Error fetching stats…</div>} 
      {current.matches("ready") && <div>Stats loaded!</div>} 
    </>
  )
}

export default IndexPage

We used the useMachine hook to translate the statsMachine that return an array. The first element current will store all our machine details, on which state we are in and the context available we can use. When the current state is fetchStats, we show a loading component. When the current state is ready, we show the stats! You can imagine the possibilities when we have more states which we can then simply call the current.matches function.

This makes our code much cleaner and more understandable, making our app more maintainable. No more cluttered boolean states like isLoading, isFetching or hasError!

Now, lets create components for each individual states. We can put our components into its own folder under src. In our root project folder, run:

$ mkdir -p src/components && touch src/components/CountrySelector.js && touch src/components/stat.js && touch src/components/CountrySearch.js

The CountrySelector component will show all the countries available in a dropdown box:

// src/components/CountrySelector.js
import React from "react"
import styled from "styled-components"

const CountrySelector = ({ handleChange, stats }) => (
  <div>
    <Selector onChange={handleChange}>
      <option>Select a country</option>
      {stats.map((stat, i) => (
        <option key={`${stat.country}-${i}`}>{stat.country}</option>
      ))}
    </Selector>
  </div>
)

const Selector = styled.select`
  -webkit-box-align: center;
  align-items: center;
  background-color: rgb(255, 255, 255);
  cursor: default;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  min-height: 38px;
  position: relative;
  box-sizing: border-box;
  border-color: rgb(204, 204, 204);
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  transition: all 100ms ease 0s;
  outline: 0px !important;
  font-size: 15px;
  margin-bottom: 10px;
`

export default CountrySelector

The CountrySelector component will receive the stats data to show in a dropdown box and the handleChange function which will pass the selected country back to our machine to show the stat of the country.

Next the CountrySearch component will allow user to search for a specific country. It receives the prop handleChange to update the machine for the country user has input.

// src/components/CountrySearch.js
import React from 'react'

const CountrySearch = ({ handleChange }) => {
  return (
    <input
      onChange={handleChange}
      placeholder="Search for a country"
      type="search"
    />
  )
}

export default CountrySearch

Now for our last component stat will format and display the country stat:

// src/components/stat.js
import React from 'react'

const Stat = ({ stats }) => {
  return stats.map((stat, i) => (
    <div key={`${stat.country}-${i}`}>
      <br />
      <b>{stat.country}</b>
      <br />
      Cases: {stat.cases} | Today: {stat.todayCases} | Active: {stat.active}{' '}
      <br />
      Deaths: {stat.deaths} | Recovered: {stat.recovered} | Critical:{' '}
      {stat.critical}
    </div>
  ))
}

export default Stat

We can now update our pages/index.js page to have all the components and pass its props.

// pages/index.js
import React from "react"
import { assign, Machine } from "xstate"
import { useMachine } from "@xstate/react"
import CountrySelector from "../src/components/CountrySelector"
import Stat from "../src/components/stat"
import CountrySearch from "../src/components/CountrySearch"

const statsApi = "https://coronavirus-19-api.herokuapp.com/countries"
const statsMachine = Machine({
  // … our machine object
})

const IndexPage = () => {
  const [current, send] = useMachine(statsMachine)
  return (
    <>
       <h3>CoronaVirus Information</h3> 
      {current.matches("fetchStats") && <div>Loading Stats…</div>} 
      {current.matches("error") && <div>Error fetching stats…</div>} 
      {current.matches("ready") && (
        <>
           
          <CountrySelector
            stats={current.context.stats}
            handleChange={(country) => send("COUNTRY_SELECTED", { country })}
          />
           
          <CountrySearch
            handleChange={(country) => send("COUNTRY_SELECTED", { country })}
          />
           
        </>
      )}
       
      {current.context.countriesSelected.length > 0 && (
        <Stat stats={current.context.countriesSelected} />
      )}
       
    </>
  )
}
export default IndexPage

We have not added the event for COUNTRY_SELECTED and the context for countriesSelected in our machine. Lets do that now:

const statsMachine = Machine(
  {
    id: "statsMachine",
    initial: "fetchStats",
    context: {
      countriesSelected: [],
      stats: null,
    },
    states: {
      fetchStats: {
        invoke: {
          src: () =>
            new Promise(async (resolve, reject) => {
              try {
                const stats = await fetch(statsApi).then((response) =>
                  response.json()
                )
                return resolve(stats)
              } catch (error) {
                console.log("error in fetching stats: ", error)
                return reject(error)
              }
            }),
          onDone: { target: "ready", actions: "assignStats" },
          onError: "error",
        },
      },
      ready: {
        on: {
          COUNTRY_SELECTED: { actions: "updateSelectedCountry" },
        },
      },
      error: {},
    },
  },
  {
    actions: {
      assignStats: assign((_context, event) => ({
        stats: event.data,
      })),
      updateSelectedCountry: assign((context, event) => ({
        countriesSelected: context.stats.reduce(
          (acc, stat) =>
            stat.country
              .toLowerCase()
              .match(event.country.target.value.toLowerCase())
              ? [...acc, stat]
              : acc,
          []
        ),
      })),
    },
  }
)

What we've just added here is whenever the CountrySelector or CountrySearch sends a new input by the user, it calls the COUNTRY_SELECTED event. This event calls upon the updateSelectedCountry action which will update the countries stats to display by the Stat component!

One of the many benefits I love about state machine is that your component gets decoupled from its logic and the UI. It also helps us have a clearer picture when we code, on what had happened, is happening and going to happen when user does this or that.

I hope this article helps to paint a good picture on why xState will make you code cleaner and maintainable on the long run!

Cheers! Happy coding!

Using useContext and useState hooks as a store

Nazmi — Sat, 06 Jul 2019 05:26:01 +0000

I built a small internal company app (Stand Up Bot) that we note down our what's new, if there was anyone that needs any help and our pairing configs (we practice pair programming) for the day. In this app, I wanted to pass the notes data from the input component to the publish module that sends to our Discord channel as a post (thus the name Stand Up Bot).

The usual practice is to use a state container such as redux to manage the passing of data between components, but using Redux requires a deep understanding of reducers and actions that is not really necessarily if your small app simply wants to pass data without mutating it.

React JS provides us an api called createContext which we can easily call any data from any component of your app. Usually when a value is needed to be used in a child component from a parent component, we would usually pass the data down as a prop. Sometimes a prop is passed down to a child component of another child component of another child component of a parent! This is what we call prop drilling.

In this post, I will share what I've learned and how i tackled my problem by using the useContext Hooks. I enjoyed using it and hope you will too!

React Context

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Official React JS Website (Context)

I have 3 sets of data that I want to pass to the input component and store it globally so that it is easily accessible.

const teamMembersNames = ['John', 'Mary', 'Jason', 'David']

const [sharing, setSharing] = React.useState([])
const [help, setHelp] = React.useState([])
const [pairing, setPairing] = React.useState(teamMembersNames)

As per the React Official Context docs, i will need to use createContext and nest my main component with the Context.Provider.

<StoreContext.Provider value={store}>
  <App />
</StoreContext.Provider>

Then at the component, we nest the component again with a Context.Consumer tag.

<StoreContext.Consumer>
  {store => <InputComponent store={store} />}
</StoreContext.Consumer>

React useContext Hooks

React useContext hooks provides us an elegant way to call our data without nesting. Let's try it out!

We'll move our Context provide to its own file.

// ./src/utils/store.js
import React from 'react'

export const StoreContext = React.createContext(null)

In the same context file we will define a default function that the data are initialized and it's children will have data provided.

// ./utils/store.js

import React from 'react'

export const StoreContext = React.createContext(null)

export default ({ children }) => {
  const teamMembersNames = ['John', 'Mary', 'Jason', 'David']

  const [sharing, setSharing] = React.useState([])
  const [help, setHelp] = React.useState([])
  const [pairing, setPairing] = React.useState(teamMembersNames)

  const store = {
    sharing: [sharing, setSharing],
    help: [help, setHelp],
    pairing: [pairing, setPairing],
  }

  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
}

Now our Context has setup, we can wrap our context to the main app. In the index.js file, i will wrap the app with the Context.

// ./index.js

import React from 'react'
import ReactDOM from 'react-dom'

import App from './App'
import StoreProvider from './utils/store'

ReactDOM.render(
  <StoreProvider>
    <App />
  </StoreProvider>,
  document.getElementById('root')
)

In any component, to fetch the data, we will use useContext.

import React from 'react'
import { StoreContext } from '../utils/store'

const SomeComponent = () => {
  // to fetch the sharing data
  const { sharing } = React.useContext(StoreContext)
}

Now our components in the app will be provided with the store data. But to fetch the data, lets use the useContext hooks instead of Context.Consumer syntax.

I have created an input component that will get user input and set the state according to the type (sharing, help or pairing)

// ./components/input-section.js

import React from 'react'
import { StoreContext } from '../utils/store'

export default ({ type, description }) => {
  const [input, setInput] = React.useState('')
  const {
    [type]: [data, setData],
  } = React.useContext(StoreContext)

  /*
  .
  . some other handlers
  .
  */

  return (
    <div>
      <ul>
        {data.map(d => (
          <li>{d}</li>
        ))}
      </ul>
      <input
        placeholder={description}
        type="text"
        value={input}
        onChange={e => setData([e, ...data])}
      />
    </div>
  )
}

I've shortened the component so we can see how the data were fetched. We simply call the React.useContext(StoreContext) and the value that was passed to the provider in the store.js are fetched exactly as it was passed. No props were passed to this component from the parents component!

To further clarify, in the parent component, I pass the type (sharing, help, pairing) that was the key to store datas.

// ./app.js
import React from 'react'
import InputSection from './components/input-section'

const App = () => {
  /*
  .
  . some stuffs
  .
  */

  return (
    <InputSection type="sharing" description="What are your thoughts?..." />
  )
}

As you can see, I did not pass any states or data props to the child component!

Hope this helps you understand better and display how elegant using useContext hook is! For the full app, check out my repo.

Happy Coding!