Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 11, 2021 10:47 pm GMT

Building a client database of people in React

Ever wondered how to get access to a whole lot of information about people on the internet? Like, any information about anyone?

In this article, well be building a client-side application with ReactJS on the web thatll integrate Kelvin Data API at the frontend. The Kelvin Data is an API platform that allows you to access the profile of people on the web.

You can search for a specific person, either with their email address, LinkedIn profile (here, youll have to provide the persons LinkedIn URL. i.e. https://linkedin.com/in/example-person ), or their phone numbers.

Now, lets see how we can create an app that well consume this API with. But, before you read this article any further, you should have a basic knowledge of:

  • React,
  • Data fetching with Hooks in React,
  • Conditional rendering in React,
  • String/template Literals in JavaScript,
  • React components and props

The KelvinData dashboard.

When you signup on to the platform, youll have access to a personalized dashboard that you can use to watch your subscriptions, manage your API keys, and do a lot more.

kelvinData dashboard

A search playground is also on the dashboard where you can test the features of the API.

You can decide to search for anyone, either with their names, email addresses, LinkedIn profiles, or phone numbers. This article is going to cover how you can search for people with their full name alone.

Getting Started

For the scope of this article, well be using NextJS to bootstrap our app. This does not mean that the create-react-app library wouldnt work. You can make use of anyone that you find convenient. Were using nextjs because of its simplicity. You can read more about NextJS here

Let us start by installing the dependencies that we need in this project. Wed start by creating a nextjs app. The command below does that for us.

npx create-next-app [name-of-your-app]

Well make use of the "styled-components" library for styling our app, and the "axios" library to fetch data from the API. We wouldnt be covering much of the styling aspect in this article. You can find the full app styles here.

Lets get the dependencies above by typing the command below into our terminal.

npm install axios styled-components react-icons

Let us have a look at the file structure of the app below. Well focus on the important files that we need in this app, so itll be concise.

|--pages|   |-- api|   |   |-- users.js  |   |-- _app.js|   |-- index.js|--src|   |-- components|   |     |-- Card.js|__ .env.local

Overview of the components in our Next.js app

In this section, we are going to see the different files that make up the architecture of this project, and their respective functions below.

The pages directory is where all the routing of the app takes place. This is an out-of-the-box feature of Nextjs. It saves you the stress of hard hard-coding your independent routes.

  • pages/api: the api directory enables you to have a backend for your nextjs app, inside the same codebase, instead of the common way of creating separate repositories for your REST or GraphQL APIs and deploying them on backend hosting platforms like Heroku, and so on.

With the api directory, every file is treated as an API endpoint. If you look at the api folder, you'll notice that we have a file called user.js in it.

That file becomes an endpoint, which means an API call can be performed using the path to the file as the base URL.

const getData = async() => {  axios.get("/api/users")   .then(response => response())   .then(response => console.log(response.data))   .catch(err => console.log(err)}
  • pages/_app.js: is where all our components get attached to the DOM. If you take a look at the component structure, youll see that all the components are passed as pageProps to the Component props too.

It is like the index.js file when using Create-React-App. The only difference here is that you are not hooking your app to the DOM node called root

React.render(document.getElementById("root), <App />)
  • index.js is the default route in the pages folder. That is where we'll be doing most of the work on this project. When you run the command below, it starts up a development server and the contents of index.js are rendered on the web page.
npm run dev
  • Card.js: is the component that holds displays the data we get from the API on the webpage

  • .env.local: is where were storing the API key thatll enable us to consume this API.

Writing the server-side API call.

In the previous section, we saw the files that we'll be interacting with and their specific functions. In this section, we would have a look at how we can consume the API.

The reason why we're writing the API call at the server-side is for securing our API key, and Nextjs already makes it an easy task for us.

With the API routes in Nextjs, we can perform our API calls without the fear of our API keys being revealed on the client-side.

You may have been wondering what the essence of the environment variable in the .env file is, in this scenario.

The environment variable (which is our API key) can only be available in development mode. That is why we can do something like process.env.api_key, and get access to the environment variable.

But, the moment you deploy your app to platforms like netlify or vercel, the mode changes to production, which makes the nodejs process object unavailable on the client-side.

Now that you have seen the reason why need to write a server-side API call. Let's get to it right away.

// users.jsimport axios from "axios"export default async function users(req, res) {    const {      query: { firstName, lastName },    } = req;    const baseUrl = `https://api.kelvindata.com/rest/v1/search-v2?    lastName=${lastName}&firstName=${firstName}&apiKey=${process.env.KEY}`;    const response = await axios.get(baseUrl);    res.status(200).json({    data: response.data,  });}

In the snippet above, we created an asynchronous function called, users. It takes in two arguments, req which stands for request in full, and res which is response in full.

The req argument has some properties, (or middlewares as the Nextjs docs calls it) that can be accessed when were consuming our API, one of them is req.query.

Youll notice that we destructured the query property in the snippet above, so we would be able to pass those variables as values to the query properties of the API endpoint. Take a look at it below.

You can read more about the in-built middlewares that comes with the req argument here.

const {  query: { firstName, lastName },} = req;

The base URL takes the destructured query properties as values and the apiKey is gotten from the .env file via the nodejs process object.

The destructured query properties are taken as requests that will be sent from the input values of the form component (which well be creating in the next section) to the API, once it is received, we get a response that corresponds with the request we made.

const baseUrl = `https://api.kelvindata.com/rest/v1/searchv2?  lastName=${lastName}&firstName=${firstName}&apiKey=${process.env.KEY}`;

The next process the function has to complete is the response from the asynchronous API call. The snippet below assigns the API call which we are perfoming with the axios library to a variable, response.

On the next line, the res argument uses the status method which is used to send a JSON response to us, then we can assign the response variable as a property of data

You can read more about the various HTTP status codes here

const response = await axios.get(baseUrl);res.status(200).json({  data: response.data,}); 

Building the form component

In the previous section, we saw how we can write our API calls on the server-side. well be using that API call in this section as we create the form component that will send the first and last name values from the input fields to API query parameters.

Well be keeping the code snippets short so that this article doesnt get too long. Lets start by taking a look at the content of index.js below.

import React from "react";import styled from "styled-components";import axios from "axios";import Card from "../../components/Card";const Wrapper = styled.section`  padding: 0 100px 0 100px;  height: 100%;  width: 100%;  // remaining style goes here`;const UserAPIComponent = () => {const [userData, setUserData] = React.useState([]);const [firstName, setFirstName] = React.useState("");const [lastName, setLastName] = React.useState("");const getuserData = async () => {  // api call goes here};const handleSubmit = (e) => {   e.preventDefault();   getuserData();};return (   <Wrapper>     <h3>Search for Anyone</h3>     <form onSubmit={handleSubmit}>        <label htmlFor="firstname">First name</label>        <input          type="text"          name="firstname"          value={firstName}          placeholder="First Name"          onChange={(e) => setFirstName(e.target.value)}        />        <label htmlFor="lastname">Lastname</label>        <input          type="text"          name="lastname"          value={lastName}          placeholder="Lastname"          onChange={(e) => setLastName(e.target.value)}        />        <div className="btn-container">           <Button>Search</Button>        </div>      </form>      <div className="results-container">        {userData ? <Card result={userData} />         : "loading..."}      </div>  </Wrapper> );};export default UserAPIComponent;

Since this is a React component that is receiving data from an API endpoint, it should have an internal state of its own. The snippet below shows how we defined the different state variables with React Hooks.

const [userData, setUserData] = React.useState([]);const [firstName, setFirstName] = React.useState("");const [lastName, setLastName] = React.useState("");

The firstName and lastName variables receive the text values that are typed into the input field by anyone.

The userData state variable helps us store the response that we get from the API call in an array, so we can use the JavaScript map() method to render the response on the webpage.

Notice how were using axios to get data from the API endpoint, and how the base URL is not a typical https:// URL, instead, it is the path to the file where we made the server-side API call before.

const getuserData = async () => {axios.get(`/api/usersfirstName=${firstName}&lastName=${lastName}`, {       headers: {         Accept: "application/json",         "Access-Control-Allow-Origin": "*",       },})  .then((response) => response)  .then((response) => {    setUserData(response.data.data);   })  .catch((err) => console.log(err));};

We repeat almost the same process in the user.js file, but this time around with the necessary fetch headers and assignment of the state variables to the API query parameters.

In the second .then() method, we ensured that the response from the API call is treated as an array, hence the need for response.data.data. If we had stopped at setUserData(response.data), JavaScript will throw a type-error whenever we try to do the following:

{  userData.map((users, index) => {    return (      // some JSX    )  })}

This is because response.data is having an object data-type, and the map() operation does not work on JavaScript objects, only arrays.

The handleSubmit handler ensures that the webpage isnt reloaded at every API call, upon the click of the search button.

const handleSubmit = (e) => {  e.preventDefault();  getuserData();};

Building the card component

The card component serves as the presentational component of the app. Data gets passed down to it through the usage of props in React.

Once again, for the sake of brevity, well not be taking a look at all the major content of the card component. Lets take a look at the modified structure below

import React from "react";import { FiUser } from "react-icons/fi";import styled from "styled-components";const Wrapper = styled.div`  height: 56%;  width: 32%;  margin: 0 15px 30px 0;  background: #fff;  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.05);  border-radius: 8px;  padding: 0 15px 0 15px;`;const Card = ({ result }) => {  return (     <>      {result.map((users, index) => {        return (           <Wrapper className="users-card" key={index}>             <p>               <span>                 <FiUser />               </span>                 {users.name.full !== null ?                    users.name.full                    : "no name data" }             </p>             <p>Title: {users.employments[0].title}</p>             <p>               Organization:                {              users.employments[0].organization.name !== null              ? users.employments[0].organization.name              : "no employment info"}             </p>          </Wrapper>        );      })}   </>  );};export default Card;

The result prop is passed to the Card component, which in turn, gets utilized in the App component (in index.js).

The ternary operator checks for the validity of userData, if it is true, the Card component is rendered. If it isnt, the loading string is displayed on the webpage.

<div className="results-container">  {userData ?     <Card result={userData} />     : "loading..."  }</div>

Youll also notice how were performing conditional rendering with the ternary operator in the Organization paragraph below.

If there isnt any data that corresponds with a users organization details, the "no employment info" string is displayed. If there is, the users organization is displayed.

<p>  Organization:  {users.employments[0].organization.name !== null  ? users.employments[0].organization.name  : "no employment info"}</p>

Conclusion

The video below shows the end result of what we have been building all along from the beginning of this article. You can always check your browsers dev tools, move to the network tab, to see if the API key is showing or not.

kelvin data demo app

If you want to have a look at the code base, heres the link to it.

The link points to the specific file (of this article) in the repository. You can check out my other article demos here and also have a look at the repository as a whole.

If you read this article up till this point, thank you for doing so, and please dont forget to share it.


Original Link: https://dev.to/seven/building-a-client-database-of-people-in-react-55oe

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To