DEV Community: Ayomikun Sholademi

How to create a custom alert component in REACT with Context API

Ayomikun Sholademi — Sun, 10 Sep 2023 17:25:01 +0000

Do you have to implement a feature that requires you to prompt a user for response (for example the confirmation message before deleting an item)? Or do you want to have a "awesome" designer who designed an awesome component for notifying users on specific actions? Or for the hundred other reasons you have decided to read this article.
In this article, We will be implementing a custom alert component for prompting a user to perform an action or notifying a user using ReactJS with Context API.

PREREQUISITES

This tutorial makes use of the following languages/technologies and would require you to have a basic knowledge of their usage.

TypeScript
ReactJS (bootstrapped with create-react-app)
CSS

Setting up

Diving into creating the alert component, the first thing you need to do is set up your codebase. Since we are going to be making use of ReactJS you can use any of the React Libraries that are available, but for the purpose of this tutorial, we will be bootstrapping out react application with create-react-app

Structuring the Codebase.

After setting up your codebase, you will proceed to structure the codebase as follows.

Create a folder named components inside the src folder.
In the components folder, create a new folder named Alert.
Inside the Alert folder, create a file named Alert.tsx.

Copy the following code and paste in your Alert.tsx file

// the component UI will live in this file

const Alert = () => {
  return (
    <></>
  );
};

export default Alert;

Next up, you create a file in the Alert folder named AlertProvider.tsx. Inside the AlertProvider.tsx file, paste the following code.

import { createContext, useRef, useState } from "react";

export const AlertContext = createContext();

const AlertProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  return (
    <AlertContext.Provider
      value={}
    >
      {children}
    </AlertContext.Provider>
  );
};

export default AlertProvider;

Next up, you create a file named index.tsx inside the Alert folder.
Inside the index.tsx file, paste the following code;

Here you are creating a wrapper for the alert context for the alert component and the children to subscribe to the context changes.

import { useContext } from "react";
import AlertProvider, { AlertContext } from "./AlertProvider";
import Alert from "./Alert";

// create hook to be used globally to toggle alert component.
export const useAlert = () => useContext(AlertContext);

const AlertContainer: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  return (
    <AlertProvider>
      <Alert />
      {children}
    </AlertProvider>
  );
};

export default AlertContainer;

Register Alert Context in entry file

Now that you have created the context for the alert component, you will register the context globally by updating the entry file. For this tutorial, you will update the src/index.tsx file. If you are using other frameworks, your entry file might be different (for NextJS, the entry will would be /pages/_app.tsx)

Update your src/index.tsx file with the following code.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import AlertContainer from "./components/Alert"; // import the AlertContainer

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    {/* Wrap your application with the Alert context wrapper you created in `/components/Alert/index.tsx' */}
    <AlertContainer>
      <App />
    </AlertContainer>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Implement functionality for the Alert component.

Now that you are done setting up, you will now implement the functionalities for your alert component.
In this tutorial, the major functionalities you will be implementing are

Open alert component: this will cover the different states in which your component will be rendered. Either as a notifier or as a prompter.
Close alert component: this will cover removing the alert component from user's view and reverting the context state to default.

Now start updating the src/components/AlertProvider.tsx file.

First, you need to declare the types that will be used in the functionality.
So your file will look like this;

import { createContext, useRef, useState } from "react";

// type for notification object
interface IAlertNotification {
  title: string;
  message: string | React.ReactNode;
  delay?: number;
  autoClose?: boolean;
  inputProps?: React.HTMLAttributes<HTMLInputElement>;
  actions?: {
    text: string;
    callback?: (arg: any) => void;
    props?: React.HTMLAttributes<HTMLButtonElement>;
  }[];
}

// the types for methods and variable available in your alert context
interface IAlertContext {
  alert: (args: IAlertNotification) => void;
  alertShown?: boolean;
  notification?: IAlertNotification;
  close: () => void;
}

// intialise default methods for context.
export const AlertContext = createContext<IAlertContext>({
  alert: () => {},
  close: () => {},
});

const AlertProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  return (
    <AlertContext.Provider
      value={}
    >
      {children}
    </AlertContext.Provider>
  );
};

export default AlertProvider;

Next up, you will create the necessary variables and methods to display and hide the alert component.
So your file will look like this:

import { createContext, useRef, useState } from "react";

// type for notification object
interface IAlertNotification {
  title: string;
  message: string | React.ReactNode;
  delay?: number;
  autoClose?: boolean;

  inputProps?: React.HTMLAttributes<HTMLInputElement>;
  actions?: {
    text: string;
    callback?: (arg: any) => void;
    props?: React.HTMLAttributes<HTMLButtonElement>;
  }[];
}
// the types for methods and variable available in your alert context
interface IAlertContext {
  alert: (args: IAlertNotification) => void;
  alertShown?: boolean;
  notification?: IAlertNotification;
  close: () => void;
}

// initialize default methods for context.
export const AlertContext = createContext<IAlertContext>({
  alert: () => {},
  close: () => {},
});

const AlertProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const [alertShown, setAlertShown] = useState(false); // toggles the view state of the alert component
  const [notification, setNotification] = useState<
    IAlertNotification | undefined
  >(); // stores the configuration data for the alert component
  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(); // stores the timer value for autoclosing the alert component

  // closes the alert component and reverts all config to default values.
  const close = () => {
    setAlertShown(false);
    setNotification(undefined);
    clearTimeout(timerRef.current);
  };

  // opens the alert component and configures its view state.
  const alert = (args: IAlertNotification) => {
    setNotification(args);
    setAlertShown(true);

    if (args.autoClose) {
      if (timerRef.current) {
        clearTimeout(timerRef.current);
      }

      timerRef.current = setTimeout(() => {
        close();
      }, notification?.delay || 3000);
    }

    return notification;
  };

  return (
    <AlertContext.Provider
      value={{
        notification,
        alert,
        alertShown,
        close,
      }}
    >
      {children}
    </AlertContext.Provider>
  );
};

export default AlertProvider;

Implement Alert component UI.

Now that you have implemented the functionality, the next step is to create the component UI and set up the view states based on the configuration in the context.

Copy the following code and paste it in the src/components/Alert/Alert.tsx

import { useState } from "react";
import { useAlert } from ".";
import styles from "./styles.module.css";

const Alert = () => {
  const { notification, alertShown, close } = useAlert();
  const [textInputValue, setTextInputValue] = useState("");

  return (
    <div
      className={`
        ${styles.alert_container} ${alertShown ? styles.show : ''}`}
    >
      <div className={styles.alert}>
        <div className={styles.alert_content}>
          <p className={styles.alert_title}>{notification?.title || ""}</p>

          <div className={styles.alert_body}>
            <p>{notification?.message || ""}</p>
          </div>

          {notification?.inputProps && (
            <div className={styles.alert_textinput}>
              <input
                value={textInputValue}
                onChange={(e) => setTextInputValue(e.target.value)}
                {...notification?.inputProps}
              />
            </div>
          )}

          <div className={styles.alert_action}>
            {(notification?.actions || []).map((action) => (
              <div key={action.text} className={styles.btn}>
                <button
                  {...action.props}
                  onClick={() => {
                    action.callback?.(textInputValue);
                    setTextInputValue("");
                    close();
                  }}
                >
                  {action.text}
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Alert;

Next up, you style the component.
Create a file named styles.module.css in the src/component/Alert folder.

Copy the following code and paste it in the styles.module.css file

.alert_container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  z-index: 999;
  transform: translateY(-100%);
  transition: all 500ms;
}
.alert_container.show {
  transform: translateY(0px);
}

.alert {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  height: auto;
}

.alert_content {
  background-color: white;
  border-radius: 0px 0px 10px 10px;
  padding: 20px;
  width: 100%;
  box-shadow: 0px 10px 50px rgba(255, 255, 255, 0.3);
}

.alert_title {
  font-weight: 800;
  font-size: 1.275rem;
}

.alert_body {
  margin-top: 10px;
  font-size: 1rem;
}

.alert_textinput {
  margin-top: 20px;
  display: flex;
}

.alert_textinput input {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  border: 1px solid grey;
  padding: 0px 10px;
}

.alert_action {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.alert_action .btn {
  flex: 1;
}

.alert_action .btn button {
  height: 40px;
  background-color: #282c34;
  border: 0px;
  border-radius: 8px;
  width: 100%;
  font-weight: 600;
  color: white;
  cursor: pointer;
}

Testing the alert component

Now that you have finished implementing the component, you can test the various variations for prompting and notifying the users.

Copy the following code and replace your app.tsx file with it.

import logo from "./logo.svg";
import "./App.css";
import { useAlert } from "./components/Alert";

function App() {
  const { alert } = useAlert();

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <button
          onClick={() =>
            alert({
              title: "Notify",
              message: "Notification message",
              autoClose: true,
            })
          }
        >
          Notify
        </button>

        <button
          onClick={() =>
            alert({
              title: "Prompt without feedback",
              message: "Question to ask user before proceeding",
              actions: [
                {
                  text: "Cancel",
                },
                {
                  text: "Confirm",
                  callback: () => {
                    console.log('Confirmed')
                    // action to proceed
                  },
                },
              ],
            })
          }
        >
          Prompt without Feedback
        </button>
        <button
          onClick={() =>
            alert({
              title: "Prompt with feedback",
              message:
                "Question to ask user before proceeding. Expecting message from user",
              inputProps: { placeholder: "Enter feedback" },
              actions: [
                {
                  text: "Cancel",
                },
                {
                  text: "Confirm",
                  callback: (feedback) => {
                    console.log(feedback);
                    // action to proceed
                  },
                },
              ],
            })
          }
        >
          Prompt with Feedback
        </button>
      </header>
    </div>
  );
}

export default App;

Results!!!

Conclusion.

Yayyy, you have successfully implemented a custom alert component in React. I know the article was a bit lengthy, if you have any questions, be sure to leave them in the comments and I will respond.
I have also taken the liberty to push the code to github. You can access it [here](https://github.com/haywhy43/create-custom-alert-component-with-react}

Dynamic Components in React

Ayomikun Sholademi — Sat, 09 Apr 2022 14:00:54 +0000

Introduction

Hi there, if you have worked with Vue, you would realise you are able to use components dynamically through the component tag as shown below

<script>
import CustomComponent from 'path-to-custom-component'
import AnotherComponent from 'path-to-another-component'

export default {
  components: {CustomComponent, AnotherComponent},

  data() {
    return {
      activeComponent: 'CustomComponent'
    }
  }
}
</script>

<template>
  <div>
   <component :is="activeComponent" />
  </div>
</template>

In this article, I would be demonstrating a way how you can use components dynamically in React.

lets start coding

I'm going to assume you already have a react project set up so I'm going to jump right into it

First, create a components folder in the root directory if you do not have one yet.
Inside the components folder, create a new file named DynamicComponent.js and add the following code:

import React from "react";

/**
 * @desc the dynamic component is used to render various component dynamically
 * @params props: {
 *    useDefaultPath: this indicates that the component to be used is in the components folder if set to true else you would have to pass in a different component
 *    is: if `useDefaultPath` is true, you pass in the name of the component file or the path to the component in the component folder eg: NewComponent or BaseUI/NewComponent
 *    ...rest: the props to be passed into the new component
 * }
 */
const DynamicComponent = ({ is, useDefaultPath = true, ...rest }) => {
  return React.createElement(
    useDefaultPath ? require(`./${is}.js`).default : is,
    {
      ...rest,
    }
  );
};

export default DynamicComponent;

We can now use this component in other files to dynamically render different components based on conditions we have set.

Example would be this code below

import "./App.css";
import DynamicComponent from "./components/DynamicComponent";
import { useState } from "react";

function App() {
  const [activeComponent, setActiveComponent] = useState("SayHello");
  return (
    <div className="App">
      <header className="App-header">
        <DynamicComponent is={activeComponent} name="Sholademi Ayomikun" />

        <button
          onClick={() =>
            // Note that `SayHello` and `SayGoodbye` have been defined in the components folder
            setActiveComponent(
              activeComponent === "SayHello" ? "SayGoodbye" : "SayHello"
            )
          }
        >
          Toggle Component
        </button>
      </header>
    </div>
  );
}

export default App;

Conclusion

The article shows how you can use React.createElement to dynamically render components. The code for this can be found here.
Use cases would be to dynamically change app layout or have multiple tabs with different view.
Please note that there are several approaches to doing this in React.

Follow me on twitter and github

Also subscribe to my youtube channel. I'm trying to get up to 50 subscribers to start dishing out content there.

How to manage SEO on your NextJS website with Strapi

Ayomikun Sholademi — Thu, 07 Apr 2022 03:04:47 +0000

Introduction

Hey there friend, in this article, I will be explaining how to handle Search Engine Optimisation (SEO) on your NextJS website dynamically with Strapi CMS.

Setup

The purpose of this article is not to teach you how to set up NextJS or Strapi on your local computer. So if you are new to these technologies, here are some useful links to get the projects up and running.

Strapi

Project setup here
Database configuration here
Graphql Configuration here

Next

Project setup here
Apollo Client Configuration here

Done with the setup?

Let's set up content types on Strapi by following the following steps

Click on Content-Type Builder on the sidebar as shown in the image below

Click on the create new collection type as shown in the image below

Now that you know how to create a collection type, you would be creating two collection content types to manage seo for pages on your website.

First create the Seo Meta Tag collection type which has two fields which include the following

property: this is a text field.
content: this is also a text field

Next, create the SEO collection type which has two fields as well.

Title: this is a text field.
seo_meta_tags: this is a relation field where multiple seo meta tags belong to a particular seo collection as shown in the image below

Now you are done creating collection types, you need to create a single content-type to manage content on your website pages. In this content types, you would add a relationship with the seo collection you have created.

Next up, you go to content manager on the sidebar and update all the content accordingly and publish them all so we can start coding.

But before we start, you need to enable public access to the content types. Therefore, you need to go to Settings -> Roles -> Public and enable find or/and findOne for all the content types you have created and save.

Lets start coding!!!

First, You will create query needed to fetch data from strapi. Create a folder named graphql in your root directory and inside the graphql folder, create a file named HomePageQuery.ts. Inside the HomePageQuery.ts file, add the following code.

// /graphql/HomePageQuery.ts

import { gql } from "@apollo/client";

export default gql`
  # Write your query or mutation here
  query HomePage {
    homePage {
      data {
        attributes {
          seo {
            data {
              attributes {
                Title
                seo_meta_tags {
                  data {
                    attributes {
                      property
                      content
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
`;

Next up, replace the code in /pages/index.tsx with the following code

// /pages/index.tsx

import type { NextPage } from "next";
import client from "../apollo-client";
import query from "../graphql/HomePageQuery";

export async function getStaticProps() {
  const { data } = await client.query({
    query,
  });

  // data being fetched through the query. In this case we get the seo object which contains the title and meta tags 
  /**
   * content = {
   *    seo: {
   *      Title: <whatever title you set on strapi dashboard>,
   *      seo_meta_tags: {
   *        data: {attributes: {property: <set-data>, content: <set-data>}} 
   *      }
   *    }
   * }
   */
  const content = data.homePage.data.attributes;

  return {
    props: {
      content,
    },
  };
}

const Home: NextPage = () => {
  return <div></div>;
};

export default Home;

Because you passed the seo object in props in the getStaticProps method for the page, you can access it in /pages/_app.tsx through pageProps which allows you to now have a central point to manage seo data for all pages. Hence you would be updating the code in the said /pages/_app.tsx file with the following code:

// /pages/_app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import Head from "next/head";

function MyApp({ Component, pageProps }: AppProps) {
  const seoDetails = pageProps?.content?.seo.data.attributes || {};

  return (
    <>
      <Head>
        <title>{seoDetails.Title}</title>
        {seoDetails.seo_meta_tags &&
          seoDetails.seo_meta_tags.data.map(({ attributes }: any, i: any) => (
            <meta key={i} {...attributes} />
          ))}
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

When you start your server and open the website on your web browser, you would notice the title of the page you updated has changed and you can also check the meta tags using developer tools.

Conclusion

In this article we were able to create strapi and nextjs projects, we defined content types and added content, we were also able to add logic to the nextjs project to handle data from strapi. The code for this project can be found here.

I understand it might be difficult to follow the article because it requires a lot of visual explanation, in which case I have decided to launch my youtube channel. Help me get up to 50 subscribers and I would drop a video for further explanation on this article.

Dont forget to follow me on on twitter and github and also like and share my post.

Thanks.

How to implement Google Authentication with NextJS and Passport.

Ayomikun Sholademi — Mon, 28 Mar 2022 22:01:24 +0000

Introduction

Recently I decided to use NextJS on a project and after so many iterations, I decided to use google authentication with passport. In this article, I would be giving a step by step guide on how to set up authentication in your NextJS application with passport google strategy.

Essentials

Before we get started on the main course, here are a few things you need to know and have set up.

You need to have basic knowledge of Javascript or Typescript as well as React (NextJS).
You need to understand the concept of http requests and responses.
You should have Node set up on your computer.
You must have set up your application on Google developers console... you can check 'Register Application' section here on how to go about it.

In this article, I would be using yarn as my package manager, you could go ahead to use npm if you prefer.

First you would need to set up a NextJS project on your computer, so you go to your terminal to run the following command

yarn create next-app --typescript

You would be prompted to enter a name for the project, do so and press enter to proceed.
Once the set up is complete, you need to change directory to the newly setup project by running the next command

cd <your-project-name>

Next up, you install all the dependencies you need to successfully complete your authentication implementation which include:

To install, run the following command in your terminal

yarn add next-connect passport passport-google-oauth20 @types/passport @types/passport-google-oauth20

Next up, You need to add some credentials to your env file. Create a new file named .env and add the following values

GOOGLE_CLIENT_ID: <your app client id>
GOOGLE_CLIENT_SECRET: <your app client secret>

After this, you can now go into writing the main code.

Now, we start coding!

In your root directory, create a new folder called lib. Inside the lib folder, create a new file named passport-google-auth.ts

In the passport-google-auth.ts file, you configure google strategy using passport using the following code.

// /lib/passport-google-auth.ts

import { Profile, Strategy as GoogleStrategy } from "passport-google-oauth20";
import passport from "passport";

// logic to save your user or check if user exists in your record to proceed.
const saveUser = (user: Profile) => {
  return new Promise((resolve, reject) => {
    resolve("Successful");
  });
};

passport.use(
  new GoogleStrategy(
    {
      clientID: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
      callbackURL: "/api/oauth2/redirect/google", // this is the endpoint you registered on google while creating your app. This endpoint would exist on your application for verifying the authentication
    },
    async (_accessToken, _refreshToken, profile, cb: any) => {
      try {
        await saveUser(profile);
        return cb(null, profile);
      } catch (e: any) {
        throw new Error(e);
      }
    }
  )
);


// passport.serializeUser stores user object passed in the cb method above in req.session.passport
passport.serializeUser((user, cb) => {
  process.nextTick(function () {
    return cb(null, user);
  });
});

// passport.deserializeUser stores the user object in req.user
passport.deserializeUser(function (
  user: any,
  cb: (arg0: null, arg1: any) => any
) {
  process.nextTick(function () {
    return cb(null, user);
  });
});

// for broader explanation of serializeUser and deserializeUser visit https://stackoverflow.com/questions/27637609/understanding-passport-serialize-deserialize

// An article that explains the concept of process.nextTick https://nodejs.dev/learn/understanding-process-nexttick

export default passport;

Next up, you create a new file in /pages/api folder named login.ts.
Inside the login.ts file, you create a get request that uses the google strategy method you configured with passport in the last step by adding the following code:

// /pages/api/login.ts

import passport from "../../lib/passport-google-auth";
import nextConnect from "next-connect";

export default nextConnect()
  .use(passport.initialize())
  .get(
    passport.authenticate("google", {
      scope: ["profile", "email"],
    })
  );

You will now create the callback url for verifying the authentication.
Go to api folder in pages, create a folder named oauth2. Inside the oauth2 folder, create a folder named redirect. Inside the redirect folder, create a new file named google.ts.

// /pages/api/oauth2/redirect/google.ts

import { NextApiRequest, NextApiResponse } from "next";
import nextConnect from "next-connect";
import passport from "../../../../lib/passport-google-auth";

export default nextConnect().get(
  passport.authenticate("google"),
  (req: NextApiRequest & { user: any }, res: NextApiResponse) => {
    // you can save the user session here. to get access to authenticated user through req.user
    res.redirect("/");
  }
);

Now that you are done implementing the backend, you can now use the endpoints on the frontend.
Create a file named login in the pages folder and paste the following code for your login page.

// /pages/login.tsx

import Link from "next/link";

const LoginPage = () => {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        height: "100%",
        width: "100%",
        textAlign: "center",
      }}
    >
      <h1 style={{ fontSize: "2.5rem" }}>Login with Google</h1>
      <Link href="/api/login" passHref>
        <button
          style={{
            border: "1px solid black",
            backgroundColor: "white",
            borderRadius: "10px",
            height: "50px",
            width: "200px",
            cursor: "pointer",
          }}
        >
          Proceed
        </button>
      </Link>
    </div>
  );
};

export default LoginPage;

Voila, you can now authenticate your next app with google.

Conclusion

This article shows how you can leverage passport google strategy to authenticate your users in your next app.
You can access the code used in this tutorial here.

Disclaimer

This is my first technical article and I hope I did justice to the topic. Questions or feedback can be dropped in the comments. You can follow me on twitter and github