Forem: Blessing Peters

How I Integrated Emailjs Form Handling in my React App

Blessing Peters — Thu, 26 Jan 2023 12:14:24 +0000

As a front-end developer, at some point you may need to capture information from people who use your website through your contact forms. Platforms like emailJs, Netlify forms, forms-pree, etc. make this possible by allowing sending an email directly from your Javascript with no backend development

Email JS is a powerful tool for email form handling in React apps. It allows developers to quickly and easily add email forms to their React applications without having to write any code or manually manage any backend services. The platform offers an easy-to-use user interface that allows you to quickly generate email templates with dynamic attributes. In this article, I'll show you how I was able to integrate Email JS into my React app.

Prerequisites

To follow along with this article, you should:

Already have basic knowledge of the React library and how to create a React app. if you're new to React please visit reactjs.org or create-react-app.dev/ to get started.

Firstly, I created a new React app by running the following command in my terminal:

npx create-react-app my-form-app

cd into the app folder and run the following command to start the development server

cd my-form-app
npm start

I opened the app.js in the src folder and went ahead to remove all the unnecessary code from it; it should look like this

Getting started.

Step 1: Create an account
I created an account on Emailjs.com website; The website interface typically looks like this:

once done, confirmed my email, and logged in.
After login, I was taken to the admin dashboard, which will look like this:

Step 2: Configure Your Email JS Setting
Next, I click on the “Add New Service” Icon in order to to create and add an email service that will be used to send emails. When you click on it, a screen asking you to select your preferred email service will appear.

From here, I clicked on Connect Account; where redirected me to my email provider to confirm the connection. once finalized, I finish this step by clicking on Create Service and the email service is all set.

The new email service on the home page is as shown below:

Create and customize an email template
after creating an email service the next thing was to create an email template.

To do this, click on “Email Templates” and then “Create New Template”. This is what it will look like:

Then I customised it to be like this:

The curly brackets are dynamic parameters, To reflect what is sent to EmailJs.

from_name: this has to do with the name of the person sending the email through the contact form.
to_name: this has to do with the receiver's name. That's me since I'm the owner of the Gmail account to which the email is being sent to.
message: this has to do with the sender’s message.
reply_to: this has to do with the sender’s email.
phone_number: while this is the sender’s number.
All these parameters will be used during the implementation in the react app

Side Note: you can move on to the next tab ' Auto-Reply ' and enable autoreply back to the sender; Make sure to tick the box mentioning Auto-Reply if you want a reply sent to your user.

Step 3: Implementation
Now I'm ready to implement emailjs form handling functionality in my react app. Please check the official emailjs documentation for detailed explanations.

Install the Email JS React Library
This provides an easy way to integrate Email JS into your React application. It can be installed using the following command:

npm install @emailjs/browser

Next is to import the following at the top of your app.js

import React, { useState } from 'react';
import emailjs from "@emailjs/browser";

After importing I created a basic react form which should look like this:

<div className="container">
        <h1>Contact page</h1>
        <form className="form" onSubmit={onSubmit}>
          <div className="form-group">
            <input
              className="form-control"
              type="text"
              name="from_name"
              value={from_name}
              onChange={onChange}
              id="from_name"
              placeholder="Enter Fullname"
            />
          </div>
          <div className="form-group">
            <input
              className="form-control"
              type="text"
              name="reply_to"
              value={reply_to}
              onChange={onChange}
              id="reply_to"
              placeholder="Enter Email"
            />

          </div>
          <div className="form-group">
            <input
              className="form-control"
              type="tel"
              name="phone_number"
              value={phone_number}
              onChange={onChange}
              id="phone_number"
              placeholder="Enter Phone Number"
            />

          </div>
          </div>
          <div className="form-group">
            <textarea
              className="form-control"
              name="message"
              value={message}
              onChange={onChange}
              id="message"
              placeholder="Enter Message"
            ></textarea>
          </div>
          <button type="submit" id="button">
            Submit
          </button>
        </form>
      </div>

There are a few things worth mentioning in the form above:

The required attribute is for basic validation. which prevents incomplete forms to be submitted by the user.
The name and value attributes in the input fields are the same as the dynamic parameters created in the email templates.
In the opening tag of the form, the onSubmit attribute would trigger the onSubmit function.
I created a state formData that is an object which tracks all the changes happening in the form.

 const [formData, setFormData] = useState({
    from_name: "",
    reply_to: "",
    phone_number: "",
    company_name: "",
    message: ""
  });
  const { from_name, reply_to, phone_number, company_name, message } = formData;

In theonChange attribute I set the formData by first using a spread operator ... to list the items in the state object and then match the input ID with the input value by using e.target so as to capture and update the changes in the input fields.

  const onChange = (e) => {
    setFormData({
      ...formData,
      [e.target.id]: e.target.value
    });
  };

Check out the onSubmit function below.

const onSubmit = (e) => {
    e.preventDefault();

    formData["to_name"] = "Blessing Peter";

    const YOUR_SERVICE_ID = "service_k5uanup";
    const YOUR_TEMPLATE_ID = "template_1i82n0k";
    const YOUR_PUBLIC_KEY = "ZTxRbsirc1MJiUsQ9";

    emailjs.send(YOUR_SERVICE_ID, YOUR_TEMPLATE_ID, formData, YOUR_PUBLIC_KEY).then(
      () => {
        console.log("Email Sent")
        setFormData({
          from_name: "",
          reply_to: "",
          phone_number: "",
          company_name: "",
          message: ""
        });
      },
      (error) => {
        console.log(JSON.stringify(error));
      });
    console.log(formData);
  };

This is the breakdown to understand it better:

e is passed as a parameter.
e.preventDefault() would prevent the page from being reloaded when submitted.
Since the formData state is an object, and objects are key collection items I created a new key["to_name"] and gave it a value "Blessing Peter". Note that ["to_name"] is also a dynamic parameters created in the email templates.
emailjs.sendForm() takes four parameters,a service ID (that was created earlier), a template ID (also created earlier and can be seen in the email template settings), and a Public Key (that is seen in the account settings ) all of which values I saved in a const variable.
Since emailjs.sendForm() is a promise (asynchronous) I follow it with .then.
In the .then I console.log email Sent and also reset the formData state to an empty string "" so that the form is cleared if successful or the error if unsuccessful (since the error is coming from the server JSON.stringify turns it to a string).

That’s it, we can now receive emails straight from our app without creating a backend!

you can check out the replit link here

Thanks for reading! I hope you learned a thing or two ❤️

How I Built A React App (myGithub) That Uses The GitHub API To Fetch Users Portfolio And Repos

Blessing Peters — Tue, 10 Jan 2023 19:43:02 +0000

Introduction

My Github is a React app built by implementing an API fetch of my Github Portfolio and repos. it allows users to easily search for their favorite repos on my profile. recently i added a search feature where users can also search for other github users profile and Repos.

Aplication Overview

in order to complete this project i was able to achieve the following:

Implemented an API fetch of my GitHub Portfolio showing a page with a list of all your repositories on GitHub
Implemented pagination for the repo list
Created another linking page that shows the data for a single repo clicked from the list of repositories using nested routes.
Implemented proper SEO, Error Boundary (showing a page to test the error boundary), and 404 pages.
Additionally i added search bar from which users can search for other github users.

Getting started

The tools for local development is:

Node
Node Package Manager (npm)
To get started these tools must be installed on your computer. click nodejs.org to download them

The Process

Firstly, after setting up my environment, I created a new React app by first creating a folder called myGithub and then running the following command in my terminal:

npx create-react-app .

This will create a react app here or in the current directory. without creating a whole other folder within the folder, then npm start to run my application

How I implemented the API fetch
I started this project by implementing an API fetch of my GitHub portfolio in Home.jsx. By first Importing useEffect and useState from react.

import { useState, useEffect } from "react";

Next, I created two useState to store the responses from the API fetch. one to store the api response from fetching the user profile data and the other to store the response from fetching the repos

    const [user, setUser] = useState({});
    const [repos, setRepos] = useState([]);

i created a variable url to store the API url and token to store my github generated API key that had already been hidden in the .env.local file.

  const url = "https://api.github.com";
  const token = process.env.REACT_APP_GITHUB_API_KEY;

After that i created 2 asynchronous function called getProfile andgetRepo that made the API request to the GitHub API to fetch the user profile data and repo.


 // fetching MY PROFILE
    const getProfile = async () => {
      const response = await fetch(`${url}/users/ble-syn`, {
        headers: {
          Authorization: `token ${token}`,
        },
      });
      const data = await response.json();
      setUser(data);
      setLoading(false);
    };

  // fetching MY REPOS 
  const getRepo = async () => {

    const response = await fetch(`${url}/users/ble-syn/repos`, {
      headers: {
        Authorization: `token ${token}`,
      },
    });
    const data = await response.json();
    setRepos(data);
    setLoading(false);
  };

I called getProfile andgetRepo inside of a useEffect hook, and passed in an empty array as its dependency, so that the application makes the fetch request only once when it loads.

 useEffect(() => {
    getProfile();
    getRepo();
  }, []);

Since the user state created earlier is an object, I destructure it with dot notation to extract the data and render them in Githubprofile.jsx.

          <img className="profile-img" src={profile.avatar_url} alt="" />
          <h2>{profile.name}</h2>
          <p>{profile.login}</p>
          <p>{profile.bio}</p>

N/B it is called profile in the code above because i created a seperate component called GithubProfile.jsx and passed the user state created in the home.jsx as a prop where i named it profile

also, since the repos state created too is an array of objects. I iterated through repos using the JavaScript map() method, destructured the object to extract the data and render them in repos.jsx.

Implementing Pagination
Pagination is used to break up a block of content into navigable pages on a webpage. Where a user can use links such as "next", "previous", and page numbers to navigate between pages

Aside from making it easier to see information, it also helps when loading data from a server. Using pagination, you can decide to only load a fixed number of items each time when the user decides to see them. This helps save time and avoid information overload on a page.

I implemented pagination using useState by first creating 2 states currentPage which i gave an initial state of 1 and repoPerPage, which specified the number of items that will be displayed on each page.

 const [currentPage, setCurrentPage] = useState(1);
 const [repoPerPage] = useState(4);

  // Pagination logic
  const indexOfLastNumber = currentPage * repoPerPage;
  const indexOfFirstNumber = indexOfLastNumber - repoPerPage;
  const currentRepo = repos.slice(indexOfFirstNumber, 
  indexOfLastNumber);
  const numberOfPages = Math.ceil(repos.length / repoPerPage);

function Pagination({ numberOfPages, currentPage, setCurrentPage }) {
  const [disabledPrev, setDisabledPrev] = useState(true);
  const [disabledNext, setDisabledNext] = useState(true);

  const pageNum = [...Array(numberOfPages + 1).keys()].slice(1);

  const nextPage = () => {
    if (currentPage !== numberOfPages) setCurrentPage(currentPage + 1);
  };
  const prevPage = () => {
    if (currentPage !== 1) setCurrentPage(currentPage - 1);
  };

  useEffect(() => {
    if (currentPage > 1) {
      setDisabledPrev(false);
    } else {
      setDisabledPrev(true);
    }

    if (currentPage === numberOfPages) {
      setDisabledNext(true);
    } else {
      setDisabledNext(false);
    }
  }, [currentPage, numberOfPages]);
  return (
    <div>
      <section className="pagination">
        <div onClick={prevPage} className={disabledPrev ? "disabled" : "prev"}>
          <LeftArrow />
          <p> Previous</p>
        </div>
        <div className="pagination-num flex">
          {pageNum.map((num) => (
            <div key={num}>
              <p
                onClick={() => setCurrentPage(num)}
                className="pagination-child"
              >
                {num}
              </p>
            </div>
          ))}
        </div>
        <div onClick={nextPage} className={disabledNext ? "disabled" : "next"}>
          <p>Next </p>
          <RightArrow />
        </div>
      </section>
    </div>
  );
}

export default Pagination;

Implemention React-router, Nested Routes and Error Boundary

Firstly i installed the necessary dependencies needed to implement react-router, nested routes and error boundary by running the following commands in the terminal:

npm install --save react-router-dom
npm install --save react-error-boundary

react-router-dom: used for routing pages in the app
react-error-boundary: for handling errors that occur within React components.

For React Router I created 3 routes which include, the home page(which has the nested routes),the error page, not found / 404 page.

Then I imported BrowserRouter from react-router-dom.

import { BrowserRouter as Router, Routes, Route} from "react-router-dom";

The outer component is Routes which wrapped the 3 Route component

The Route should have the path and element attributes, the path for the 404 page is an asterisk.

The path attributes take in either the absolute or relative path in the string.
The element attributes take in the component that you want to render on the path accustomed to the Route.

check out the code below:

<Router>
      <Routes>
        <Route path="/" element={<Home />}>
          <Route path="/repo/:id" element={<RepoPage/>} />
        </Route>
        <Route path="/errortestpage" element={<ErrorTestPage />}/>
        <Route path="/not-found" element={<NotFound />} />
        <Route path="*" element={<Navigate to="/not-found" />} />
      </Routes>
    </Router>

Nested Routes
nested routing is having a Route component inside the opening and closing tag of another Route component as shown below

I embedded a child Route repo page in between the home page Route which I also provided with a path and an element.

<Route path="/" element={<Home />}>
          <Route path="/repo/:id" element={<RepoPage/>} />
</Route>

Error Boundary
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.

I imported ErrorBoundary from react-error-boundary.

import { ErrorBoundary } from 'react-error-boundary'

created a fallback component called errorFallback that displays instead of the error breaking the entire app.

function ErrorFallback({ error }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: 'red' }}>{error.message}</pre>
    </div>
  )
}

I used the ErrorBoundary component provided by react-error-boundary to wrap the components that i want to handle errors for. This component will catch any errors that occur within the wrapped components and display a fallback UI to the user instead of crashing the whole app.

  <ErrorBoundary FallbackComponent={ErrorFallback}> 
      <Repos  /> 
  </ErrorBoundary>

Additional feature

finally i was able to add a search feature where people can find other github users and display their profile and repos as well.

I achieved this by following almost the same process in the API fetch implementation section. which includes

creating a state to store the user profile data and user repos
creating 2 asynchronous function that handleSearchuser and handleSearchRepo that make the API calls to fetch the Users profile data and repo.

  // NEW FEATURE: Searching for Other GitHub Users
  const handleSearch = async (e) => {
    e.preventDefault();
    if (search === "") return;
    await handleSearchUser();
    await handleSearchRepo();
  };

  const handleSearchUser = async () => {
    const response = await fetch(`${url}/users/${search}`, {
      headers: {
        Authorization: `token ${token}`,
      },
    });
    const data = await response.json();
    setUser(data);
    setLoading(false);
  };

  const handleSearchRepo = async () => {
    const response = await fetch(`${url}/users/${search}/repos`, {
      headers: {
        Authorization: `token ${token}`,
      },
    });

    const data = await response.json();
    setRepos(data);
    setLoading(false);
    console.log(data);
  };

created a handleSearch that receives and stores the response from handleSearchuser and handleSearchRepo functions

 const handleSearch = async (e) => {
    e.preventDefault();
    if (search === "") return;
    await handleSearchUser();
    await handleSearchRepo();
  };

Finally i created a form that takes in an input and a button, an onchange event is given on the input so as to track the input and an onSubmit event on the form to trigger the handleSearch function.

<form onSubmit={handleSearch}>
 <input className="search-input" type="text" value={search} onChange={(e)=>setSearch(e.target.value)} placeholder="Search For a Github User" />
 <button className="search-btn"><p>Search</p>  <RightArrow className="btn-arrow" /></button>
</form>

conclusion.

Thank you for taking your time to read this article and maybe learned something.
I loved working on this as i was able to learn and implement various React concepts. Checkout the source code in my GitHub repository and the link to the live site.

Thanks Again❤️