DEV Community: Segun Tuase

Cleaner and Better way for calling APIs with Axios in your React-typescript applications

Segun Tuase — Wed, 02 Nov 2022 14:46:32 +0000

I had to make several API calls in a project, but I didn’t want to replicate or keep calling axios every time, I thought I could use a hook, it just didn’t work then I stepped back and realize I could build a helper function that I can import in whenever I need to make API calls. This is going to be a short article, because we just need a very important solution.

Why do we need a helper function

It makes the developer write cleaner code
It helps with separation of concern

We start by initializing your project and creating react app, the link below explains how to create a React app.
How to create react app

Prerequisites

Basic knowledge of React JS
Basic knowledge of typescript

in your react app src folder you should have a file called
API.tsx, App.tsx

The package we will be using is Axios - Axios is a Javascript library used to make Http requests in nodeJS or XMLHttpRequests from the browser that also supports the ES6 Promise API.

To install axios with Npm or yarn we use:



yarn add axios
npm i axios -save

Let's eat now shall we??:

In the API.tsx file we will have to import axios and setup the necessary interface



import axios from 'axios'

//interface for the Helper
interface Params {
        baseUrl: string
    headers : any
    method: string
}

Next step will be to set up the config using the Params interface, the config will hold the baseUrl header and method values



//....

//helper config
const config: Params = {
    baseUrl: "https://jsonplaceholder.typicode.com/",
    headers: {
        "Authorization": "",
            },
    method: 'post'
}

Then you create an Asynchronous function that uses axios to make the post request, you add the necessary parameters for axios then you parse out your response and the error message if there’s any. This helps you create a reusable function that you can use to make your API call.



//helper function to be exported
export  const postAPI = async (url: string, data: any): Promise<any> =>{
    return await axios({
        ...postConfig,
        url: `${postConfig.baseUrl}/${url}`,
        data
    }).then ( (response) => {
        console.log(response)
        return {
            status: response.status,
            data: response.data
        }
    }).catch((error) =>{
        console.log(error)
        return {
            status: error.status,
            data: error.response
        }
    })
}

altogether this comes together as



//final code result
import axios from 'axios'

interface Params {
        baseUrl: string
    headers : any
    method: string
}

const postConfig: Params = {
    baseUrl: "https://jsonplaceholder.typicode.com/",
    headers: {
                "Authorization": 
            },
    method: 'post'
}

import axios from 'axios'

interface Params {
        baseUrl: string
    headers : any
    method: string
}

export  const postAPI = async (url: string, data: any): Promise<any> =>{
    return await axios({
        ...postConfig,
        url: `${postConfig.baseUrl}/${url}`,
        data
    }).then ( (response) => {
        console.log(response)
        return {
            status: response.status,
            data: response.data
        }
    }).catch((error) =>{
        console.log(error)
        return {
            status: error.status,
            data: error.response
        }
    })
}

You can also morph it for GET request but the config will be entirely different



//config for get request note that the method as changed to get this is very important
const getConfig : Params = {
    baseUrl: "https://jsonplaceholder.typicode.com",
        headers: {
            "Authorization":
        },
    method: 'get'
}

Your helper function will be



export const getAPI = async (url: string, data: any): Promise<any> =>{
    return await axios({
        ...getConfig,
        url: `${getConfig.baseUrl}/${url}/${data}`,
    }).then ( (response) => {
        console.log(response)
        return {
            status: response.status,
            data: response.data
        }
    }).catch((error) =>{
        console.log(error)
        return {
            status: error.status,
            data: error.response
        }
    })
}

In the last section of the code, we will have to import the helper function into our code and render it out. This is the final part of the task. The first section is the state that holds the data, then we also include a function that that calls the helper function. This function is going to be in the useEffect because we need it to run on render. We then proceed to map out our response in a list. Voilà



//rendering our result to the browser
import {getAPI} from './API' // import the api helper 
import React from "react";
export default function App() {
    const [data, setData] = React.useState([]) // set state to hold the result

        //function below triggers the helper function
         const getData = () => getAPI("posts").then(
      (res) => {
        if(res.status === 200){
          setData(res.data)
          console.log(data) 
        }else{
          console.log(res)
        }
    }
    )

        //this runs the getData trigger function as useEffect
    React.useEffect(()=>{
        getData()
    }, [])

  return (
    <div className="App">
     <ul>
      {
                //maps out our result for rendering
        data.map((x) =>
              <li>
                {x.title}
              </li>
        )
      }
      </ul>
    </div>
  );
}

The final result looks like this, you can go ahead to style it yourself for finishing touches.

If you have further questions on the concept or you have better ideas on approaching the concept please drop a comment or reach out to me.

Thanks for reading

Code Review: Necessary Evil in Codebase and Open Source

Segun Tuase — Mon, 22 Aug 2022 13:16:00 +0000

I’m sure we’ve had instances where we felt we’ve written the next best thing… just to have your lead break it down on the other side of the call, and show you a simpler way you could have gone about it. Moments like this are a pain in the ass.

The aim of the collaboration is to solve problems, while we all have different approaches to problem-solving some approaches need to be checked and inspected by either a better-experienced colleague or a peer that could help refactor. Half of the time we want to ship fast, which is understandable but we later realise the due process has not to be taken and will cost a lot more to refactor and review.

Code review can be described as working with a fellow developer, colleague or better-experienced developer to check the code to correct the flow, process and sometimes syntax.

The Unending loop of Technical debt:

Technical debt is the cost or amount of time used to reiterate an incomplete solution or limited solution. In most cases, we ship the fastest solution but we could also take a step back and review the code and use cases for the issue.

In other cases, there would be a different approach to solving the said issue.

Code review in open source projects is critical, firstly because there are lots of contributors and what goes to the code base is really important. Poorly reviewed code could crash important services and cost the users many resources. First-time issues should also have much attention, they might have a low contribution but a lack of familiarity with the code base could ruin the previous work that’s been done by previous contributors.

What to look out for in Peer code review

Functionality
Complexity
Separation of concerns
Depreciated syntaxes
Styling
Context
Comments
Reusability
Each line of code
Enforce best practices

Tips for reviewing a teammate’s code or Open source Contribution

Explain the problem explicitly
Be positive and kind
Anybody’s code can be reviewed regardless of how Senior the person is
Give everyone a chance to learn concepts and grow
Automate some processes
Enforce testing before building
Tabs > Space

Doing this due diligence will save your team a lot of time, and the negligence will also cost a lot of time.

One of the most common tools for code review is Github pull request comment section on Github, when PR is sent every commit and line can be commented on using this section of Github.

After every code review, the reviewer and the reviewed should make sure there’s proper functionality, UI changes are appropriate, the code is written with the best practices and the code passes all the set tests. In the case where the task is not successfully done the review should return and fix the issues then schedule another code review.

A Guide to writing Industry Standard Git Commit Message

Segun Tuase — Mon, 23 May 2022 14:14:32 +0000

I bet you already heard something about Git before starting this article whatever led you here, you’re welcome and I hope you find the solutions.

Brief Explanation of Git

We have large projects that need contribution, Git simply helps developers manage the different contributions and bonds them into one unit. It also helps in controlling the versions of the projects which is version control, this is a dummy definition but it’s the best way I could explain Git.

A standard meaning of Git is that it’s a DevOps tool used for managing source code. It is a free and open-source version control system used to handle small to very large projects efficiently.

Before proceeding, I advise you understand a bit of git workflow Here

Git commits

Git commits are a snapshot of the codebase or project's current stage/state. It allows the system to store the staged changes.
Commits are used as a timeline for the project’s contribution and changes, It also helps in defining milestones in the project. Commits can also be used to track the team’s productivity and KPIs.

Industry Standard Git commits

I choose to describe this as Git commits that can be generally understood across the tech ecosystem. It shouldn’t commit messages that have very complex terms, it should be readable and understood by people that don’t even contribute to the code base.

The necessity of Industry-standard commits

Now, the necessity of this is to make your commit messages specific to your committed code even if you look back at the code you should be able to understand the change you made via the commit message. It also helps new contributors understand the commits and changes made. You could know why a person made this commit and the effects it would make if you change that particular line of code.

Your commit message should be:

Understandable
Enough
Unambiguous

Before coming up with a commit message you should consider:

Why did I add this commit
What changes does this commit make
Are the changes necessary
Do the changes solve any ticket or do they refer to any external links or part of the code

The Industry standard commit message method we will be checking out is the

<type>[optional scope]: <description>

[optional body]

[optional footer]

Different standard commit types we can look into:

fix: This is to commit a resolved bug in the codebase

feat: This is to commit a new feature to the code base

chore: This commits changes that are not related to a feature or a bug it involves modification or updating dependencies

refactor - this commits changes that involve refactored code, that includes refactored code or changes

docs - This commits changes made on the documentation, readme.md or markdown files

style - This involves style changes in the codebase

test - This commits changes made in the test file including corrections made

perf - This commits to improve the app's performances

ci - This commits make changes in the CI integration like the files and scripts

build - These are files that involve the build files and blue dependency

revert - This commit signifies reverting to a previous commit

An example of this is

feat: Add withdrawal button on home page

You could also add standard commits with their emojis different commit types have different emojis like
fix: Fixed the contact form
Read more about that here

Conclusion:

The skill learned in this writing will improve you and make your codebase more organised. It is necessary to document your processes and track your changes.

When your code becomes legacy code and a new developer has to work on it your commit message has made it way easier for the incoming developer to work in your codebase even in your absence.

If you have suggestions on how to improve commits you could suggest them below.

I really hope we have all learnt something from this article on improving our git commit messages.

Submitting Custom form data to Google sheets via React Js

Segun Tuase — Mon, 14 Mar 2022 15:33:30 +0000

In this article we will be discussing how to receive custom form data through React JS, often times when we need to do this we always have to pass through No-code APIs and other Middleware APIs that will generate links for us but Google already made sure this can work by creating a script in Google scripts and deploying it.

Requirements to do this include

Working Knowledge of React Js
Google Sheets
Basic Knowledge of Html

The first thing we are going to do is to create react app

You can learn how to do this with the create-react-app command that sets up a working react environment https://create-react-app.dev/

Then you clear up the unnecessary files you don’t need

The first thing we’ll do is to create our react form.



  import React, {useState, useRef} from 'react'


const Form = () => {
    const formRef = useRef(null)


  return (
    <div>
        <form method="post" ref={formRef} name="google-sheet">
        <div className="form-style">
            <input type=""  name="name" placeholder='Your Name *' />
        </div>  
        <div className="form-style">
            <input type="email" name="email" placeholder='Your Email *' />
        </div>
        <div className="form-style">
            <input type="number" name="phone" placeholder='Your Phone *' />
        </div>
        <div className="form-style">
            <input type="submit" name="submit" value="Login" />
        </div> 
        </form>
    </div>
  )
}

export default Form

In this little snippet, we built a form that allows the user to enter details like their name, email, and phone number. We also included a submit button that sends the data to the formRef mutable object created by the useRef hook.

The next step is to open our google spreadsheet that will be used to save the data then add each form input name as the column heading.

We then proceed to Extensions → App Scripts then copy this code into the app script, this script creates a function that accepts the data from the post request and stores it in the google sheets.



var sheetName = 'Sheet1'
        var scriptProp = PropertiesService.getScriptProperties()

        function intialSetup () {
          var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
          scriptProp.setProperty('key', activeSpreadsheet.getId())
        }

        function doPost (e) {
          var lock = LockService.getScriptLock()
          lock.tryLock(10000)

          try {
            var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
            var sheet = doc.getSheetByName(sheetName)

            var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
            var nextRow = sheet.getLastRow() + 1

            var newRow = headers.map(function(header) {
              return header === 'timestamp' ? new Date() : e.parameter[header]
            })

            sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

            return ContentService
              .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
              .setMimeType(ContentService.MimeType.JSON)
          }

          catch (e) {
            return ContentService
              .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
              .setMimeType(ContentService.MimeType.JSON)
          }

          finally {
            lock.releaseLock()
          }
        }

This is the environment of the script

You proceed to save then add permissions. The next thing is to run the script then deploy the script. Make sure you change the access to "Anyone", it will then generate a link which will be used to POST the data to the Spreadsheet.

When this has been completed we’ll return to our react app to build the function that sends the data in the form to the Spreadsheet using the API link that was generated.

We proceed to add the function that will submit the form, this function is a fetch request using the post method. It posts the form data and it uses the Url gotten from our previous image/ deployment.




const scriptUrl = "get yours by practicing"

    const handleSubmit = (e) =>{
        e.preventDefault()

        fetch(scriptUrl, {method: 'POST', body: new FormData(formRef.current)})
        .then(res => {
            console.log("SUCCESSFULLY SUBMITTED")
        })
        .catch(err => console.log(err))
    }

The "form" tag should have the property of onSubmit ={handleSubmit} which calls the handleSubmit function during submission.

The final code and the full code is below with the styling with styled-component




import React, {useState, useRef} from 'react'
import styled from 'styled-components'

const Form = () => {
    const formRef = useRef(null)
    const scriptUrl = "get yours by practicing"
    const [loading, setLoading] = useState(false)

    const handleSubmit = (e) =>{
        e.preventDefault()
        setLoading(true)

        fetch(scriptUrl, {
        method: 'POST', 
        body: new FormData(formRef.current),

    }).then(res => {
            console.log("SUCCESSFULLY SUBMITTED")
            setLoading(false)
        })
        .catch(err => console.log(err))
    }

  return (
    <FormStyle>
        <div className="container">
        <form  ref={formRef} onSubmit={handleSubmit} name="google-sheet">
        <div className="input-style">
            <label htmlFor='name'>
                Name
            </label>
            <input type="text" id="name"  name="name" placeholder='Your Name *' />
        </div>  
        <div className="input-style">
            <label htmlFor='name'>Email</label>
            <input type="email" name="email" placeholder='Your Email *' />
        </div>
        <div className="input-style">
            <label htmlFor='name'>Phone No</label>
            <input type="number" name="phone" placeholder='Your Phone *' />
        </div>
        <div className="input-style">

            <input type="submit" value={loading ? "Loading..." : "SEND MESSAGE"} />
        </div> 
        </form>
        </div>
    </FormStyle>  
  )
}

export default Form

const FormStyle = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;

    .container{
        background-color: #F9CFF2;
        margin-top: 10%;
        padding: 10rem 10rem 10rem 10rem;
        display: flex;
        justify-content: center;
        align-items: center;
        @media(max-width: 610px){
            padding: 4rem 4rem 4rem 4rem;
        }

        .input-style{
            padding-top: 0.8em;
            display: flex;
            flex-direction: column;
            gap: 0.8em;

            label{
                font-family: 'Poppins', sans-serif;
            }

            input{
                outline: none;
                border: none;
                padding: 0.8em;
                border-radius: 2em;
            }
            input[type=submit]{
                background-color: #52154E;
                color: #FFFFFFFF;
                font-weight: bold;


            }
        }

    }

`

If you have any issues with the code be sure to comment below or hit me up on twitter @SegunTuase

Difference between web2 and web3

Segun Tuase — Mon, 07 Mar 2022 15:23:10 +0000

In this article I’ll be explaining the difference between the trending technologies we’ve been seeing recently which is the web 2 and web 3 technologies.

To make us understand the difference we first have to know the meaning and the similarities between each of them and the meaning of each and everyone of the the technologies.

Web2

Web 2 describes the current state of the internet, the version that we currently use that involves user generated content and is controlled by corporations. It involves sending data via various apis storing them on centralized storage platforms or cloud platforms . It really shaped up the type of mainstream communication today because most social media apps are built on it. The major difference between web 2 and web 3 is the users identity… while web 2 uses the user’s name, his date of birth and other sensitive information to identify users web 3 uses a generated address or token as a means of identification. This makes the user identity less exposed and can reduce identity theft.
Web 2 has it’s advantages has it has helped bring media and communications to a higher level and it has generated lots of revenue for the administrators.

Web3

Now web 3, web 3 is the 3rd version of the internet in which the internet process information in through machine learning and decentralized technology. Both users and machine will have access to the data for this to happen the data context and concept must be understood.
It has been known to us that web 3 will be built on decentralization, the block chain and it will use this in combination with artificial intelligence to interact with the real world. This will help the technology to deliver a faster and personalized user experience. Unlike web 2 interacting with the web 3 could earn you some money. This includes the usage of tokens on the blockchain, play to earn games, decentralized automated organizations and non fungible tokens.

Web 3 is a trustless, open, permissionlees and ubiquitous platform.

The major difference between web 2.0 and web 3.0includes

Decentralization: Information is free and cannot be controlled and censored because it’s decentralized.
Web 3.0 does not require personal data or information to make payments or purchase anything
Web2 servers could crash while web3 uses decentralized storage systems which replicates several nodes

I hope I’ve explained perfectly the difference between web2 and web3 in this article. Thank you for your time. Drop your questions below if you have any

This article is written on behalf of blockgames, nestcoin and zuri

Introduction to IPFS and Decentralized Storage.

Segun Tuase — Sun, 16 Jan 2022 11:48:46 +0000

IPFS is InterPlanetary File System can be explained as peer-to-peer, decentralized storage network used to store and access files, websites, media, and applications.

It works by giving files a content address which we commonly refer to as a token rather than a location on the server.

The major feature of this technology is the fact that it’s a distributed file system which means your information is stored on multiple nodes and can be accessed using a generated address at any time.

Centralized File System

Decentralized File system

Let’s discuss how it differs from the centralized NFS(Network File System)and https(hyper text transfer protocol)

The network file system is the protocol that uses a network to access and retrieve data from multiple disks and directories. This explanation indicates the use of a server and a centralized administrator that distinguishes it from the IPFS whose procedure is to identify data by a hash reference/address. The address is shared among the users of the specific data.

Hyper text transfer protocol : The internet follows certain protocols to exchange information, such as the famous client-server protocol. Using the http method, data has to be located based on it’s directory/address on the specific server it’s on and once that server is down the data cannot be accessed. The ipfs solves all this by creating a cryptographic hash and also copies the address of data to multiple nodes so it won’t be affected by server crash. Also ipfs servers are free compared to http servers.

Building a dapp that uploads images to ipfs with React js

The decentralized app will upload our image to ipfs servers. Requirement: Basic knowledge of react Js

We will be using the truffle unbox package, you might not need to download ganache or any local blockchain as we won't be hosting it on any blockchain server or using any smart contract.

npm install -g truffle
truffle unbox react
npm install ipfs-http-client

This sets up a web3 dapp boilerplate for your work, it automatically sets up a dapp that connects to metamask plugin in your browser.

cd client && npm run start

Then navigate to src and restructure the app.js into this

import React, { useState } from "react";
import { create } from "ipfs-http-client";

const App = () =>{
  return(
  <div className="App">
My dapp
  </div>
  )
}

Once you've done this you can use npm run start to start the program then we commence piecing it togeter.

    import React, { useState } from "react";

    const App = () =>{
  return(

  <div className="App">
                 <form>  
     <input type="file"/> //This  button collects the image for upload         
    <button type="submit">Submit</button>//Submit collected image to ipfs
        </form>

  </div>
  )
}

The first thing we need is a file-input and a submit button.

The next thing is that we need to build functions for our upload. fileCapture gets the data in the <input type="file"/>, The reader helps Javascrip read the contents of a file after with the onloadend function must be triggere to get a ready state.

import React, { useState } from "react";

const App = () => {
    const [file, captureFile] = useState(null); // state for file upload

    const fileCapture = (e) =>{
        const data = e.target.files[0];
        const reader = new window.FileReader();
        reader.readAsArrayBuffer(data) 

        reader.onloadend = () =>{
          captureFile(Buffer(reader.result))
        }

        e.preventDefault()
      }

return (
   <div className="App">
    <form>
        <input type="file" onChange={fileCapture} />
          <button type="submit">Submit</button>
     </form>

   </div>
)
}

Here, we have the function to upload the image to ipfs by connecting to using ipsf gateways like Infura, Pinata and Fleek but we'll be using Infura because it's free and it gives read and write access.

Import create from the installed ipfs-http-client which will be used to connect infura with the function it returns a path or hash that we will add to our url. This url is mapped into an array that displays our images.

import React, { useState } from "react";
import { create } from "ipfs-http-client";

const client = create("https://ipfs.infura.io:5001/api/v0");

const App = () => {
 const [url, setUrl] = useState([])

const handleSubmit = async (e) => {
        e.preventDefault();

        try{
          const created = await client.add(file);
          const url = `https://ipfs.infura.io/ipfs/${created.path}`;
          console.log(url)
          setUrl((nextUrl) => [nextUrl, url])
        }catch(error){
          console.log(error.message)
        }
      }

 return (
      <div className="App">
        <form onSubmit={handleSubmit}>
        <input type="file" onChange={fileCapture} />
          <button type="submit">Submit</button>
        </form>
     </div>
)
}

The next step is to render our images back in our UI this can be done using the following code:

const App = () => {
return(
    <div className="App">
        <div className="display">
          {url.length !== 0 ? url.map((el) => <img src={el} alt={url} />)
          : <h3>Post Image to Ipfs</h3>}
        </div>
     </div>
)
}

Here is the full code:

import React, { useState } from "react";
import { create } from "ipfs-http-client";


const client = create("https://ipfs.infura.io:5001/api/v0");

const App = () => {
    const [file, captureFile] = useState(null);
    const [url, setUrl] = useState([])

    const fileCapture = (e) =>{
        const data = e.target.files[0];
        const reader = new window.FileReader();
        reader.readAsArrayBuffer(data) 

        reader.onloadend = () =>{
          captureFile(Buffer(reader.result))
        }

        e.preventDefault()
      }


      const handleSubmit = async (e) => {
        e.preventDefault();

        try{
          const created = await client.add(file);
          const url = `https://ipfs.infura.io/ipfs/${created.path}`;
          console.log(url)
          setUrl((nextUrl) => [nextUrl, url])
        }catch(error){
          console.log(error.message)
        }
      }



    return (
      <div className="App"> 
                 <form onSubmit={handleSubmit}>  
     <input type="file" onChange={fileCapture} /> //This  button collects the image for upload         
    <button type="submit">Submit</button>//Submit collected image to ipfs
        </form>

        <div className="display">
          {url.length !== 0 ? url.map((el) => <img src={el} alt={url} />)
          : <h3>Post Image to Ipfs</h3>}
        </div>
      </div>
    );
}

export default App;

Then you run it with

npm run start

It loads on your browser and you upload your picture. This way you've used the decentralized p2p file management system.

IPFS has several uses and you can build various things on it, I'll love to get your feedback and questions in the comments

My Frontend Journey with HNG internship.

Segun Tuase — Sun, 15 Aug 2021 20:52:55 +0000

Today I signed up for HNG internship again joining the frontend stack, it's going to be a wild ride because I know how stressful and strenuous the internship can be. I hope to make the best out of it and not back down like the previous time I joined.
At the end of this internship, after going through the expected rigorous training I hope to become a better developer and also be ready for my first gainful and profitable employment.

Figma Tutorial
Git tutorial by Net ninja
Javascript Tutorial by Freecodecamp