DEV Community: Vishal Gaurav

An interesting promise use case | Handling user interactions

Vishal Gaurav — Sat, 15 Jun 2024 13:33:36 +0000

What are the use cases that come to our mind when we hear of promises?

Handling async operations.
Handling some task that will finish in future.
Doing something like network or DB calls.

But that's not all to it, we can use it to handle user interactions as well. Let us see how.

Motivation

So, I was building simple confirmation modal for my React project. It needed to be as simple as possible. A modal with some confirmation text in it and two buttons for accepting or declining. Something like this

The simple/straight-forward approach

Make modal component.
Mount it conditionally using state.
Handle delete operation inside Modal component.

The code for it looks something like

import { useState } from "react";

const Modal = ({ setShowModal, handleDelete }) => {
  return (
    <dialog open>
      <p>Are you sure you want to delete?</p>
      <button
        onClick={() => {
          setShowModal(false);
          handleDelete();
        }}
      >
        Yes
      </button>
      <button
        onClick={() => {
          setShowModal(false);
        }}
      >
        No
      </button>
    </dialog>
  );
};
function App() {
  const [showModal, setShowModal] = useState(false);
  const handleDelete = () => {
    //perform delete operation here...
    console.log("hey");
  };
  return (
    <div>
      {showModal && (
        <Modal setShowModal={setShowModal} handleDelete={handleDelete} />
      )}
      <button onClick={() => setShowModal(true)}>Delete</button>
    </div>
  );
}

export default App;

Did you notice the problem?

The above code works all fine, however there are few issues

We need to maintain a state for showing/hiding modal and pass the setter function to modal.
We need to pass the business logic to the modal(delete handler).
The flow of code is not linear anymore, the deletion is being handled by some other component away from the main component(App)
Not clean code.

The idea of asynchronicity

It was this moment when I felt there must be a better way to handle this. I noticed that a click operation by user is also an async operation! It can happen anytime in future. This is where the idea of Promise kicked in.

The better way

We can make some custom hook from where a promise is returned which can be awaited upon.
The promise can resolve to either true or false which can show if the user accepts or rejects.
The custom hook can also return a Modal component which can be directly use in at the place of application.
We can also make custom hook configurable to accept different messages.

A Custom hook

import { useState } from "react";

const useConfirmation = () => {
  const [modalState, setModalState] = useState({
    showModal: false,
    resolve: null,
    message: "",
  });

  const Modal = () => {
    return (
      <dialog open={modalState.showModal}>
        <div>
          {modalState.message}
          <button
            onClick={() => {
              setModalState((prev) => ({
                ...prev,
                showModal: false,
              }));
              modalState.resolve(false);
            }}
          >
            Close
          </button>
          <button
            onClick={() => {
              setModalState((prev) => ({
                ...prev,
                showModal: false,
              }));
              modalState.resolve(true);
            }}
          >
            Confirm
          </button>
        </div>
      </dialog>
    );
  };
  const confirm = (message) => {
    return new Promise((resolve) => {
      setModalState((prev) => ({
        resolve: resolve,
        showModal: true,
        message: message,
      }));
    });
  };
  return { Modal, confirm };
};

export { useConfirmation };

The Modal component has it's own state which stores the message, resolve function returned by promise and show state.

Application

import { useConfirmation } from "./useConfirmation.jsx";

function App() {
  const { Modal, confirm } = useConfirmation();
  const handleDelete = async () => {
    const isItOkToDelete = await confirm("Are you sure you want to delete?");
    console.log(isItOkToDelete);
  };
  return (
    <div>
      {Modal()}
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
}

export default App;

The useConfirmation hook returns a function which returns a promise. The function also takes in a message argument to display inside modal. We can await this promise to either receive true/false and proceed with the code flow ahead.

Thank You

Please do share you feedback and comments. Hope you like it, have a good day.

One (serious) problem with callback in Javascript

Vishal Gaurav — Thu, 21 Jul 2022 20:54:00 +0000

Callbacks, these are functions that are passed as argument to other functions. These callbacks are then invoked by function to which it is passed. We commonly pass callback while using function such as setTimeout() and setTimeout().

While callback seem to be obvious in their use, they have a inherent flaw with them. This post is all about this problem which i learnt recently in KyleSimpson's course at Frontend Masters.

Is it the infamous Callback hell?

The first thought that comes to our mind while addressing the problem with callback is callback hell. However this not is not even closer to the problem we have.

Enough of setting the stage, now let's go directly to it. 😅

Inversion of Control

Wikipedia states IOC as:

In software engineering, inversion of control (IoC) is a programming principle. IoC inverts the flow of control as compared to traditional control flow. In IoC, custom-written portions of a computer program receive the flow of control from a generic framework. A software architecture with this design inverts control as compared to traditional procedural programming

To put simply, IOC is loosing the program flow control from our hands to some external code.

Now let's see how this is possible with callback.

Suppose there is a function for tracking checkout which takes two arguments, first one for product info and second as a callback to be invoked when someone checkouts.

And this is how we call it.

trackCheckout(purchaseInfo,function finish(){
    chargeCreditCard(purchaseInfo);
    showThankYouPage();
});

The problem with passing the callback here is that it's invocation is not in our hand. We are giving the control to the trackCheckout function which is provided with some third party code.

What if the developer of trackCheckout mistakenly calls our callback like this?

function trackCheckout(options,callback){
    process(option);
    callback();
    callback();// 
}

Did you notice that our callback now was executed two times!? This mean that now our end users will get charged twice instead of once and this is the least expected shopping experience.

Further, it can also happen that our callback is not even called which now will put us to loss.

function trackCheckout(options,callback){
    process(option);
    //callback();
}

So, this is how we callback lead of inversion of control, the problem to this is promise which i will cover in some other blog someday.

Thank You

Getting started with React Router

Vishal Gaurav — Wed, 20 Jul 2022 21:08:28 +0000

In this blog we are going to see the basics of React Router and get started with the first steps.

The Basics

React Router is a client side library for React and React Native.
It makes navigating to different pages possible without needing a refresh.
Both declarative routing and imperative routing are supported.

The First Use

We will be implementing the router in a new project and learn the concepts step by step.

Install the router using the command $ npm install react-router-dom@6
Create two pages which will point to the two routes we are going to create.

const FeedPage = () => {
  return <div>This page shows feeds.</div>;
};
export { FeedPage };

const UserPage = () => {
  return <div>This page shows the details of a user.</div>;
};
export { UserPage };

Import the BrowserRouter, Routes and Route from "react-router-dom". Wrap the whole project with BrowserRouter. This is necessary for react-router to work. Nest the Routes inside BrowserRouter. Now add a Route element for each route you want to specify.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { FeedPage, UserPage } from "./pages";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="feed" element={<FeedPage />} />
        <Route path="user" element={<UserPage />} />
      </Routes>
    </BrowserRouter>
  </StrictMode>
);

Here, /feed will point to FeedPage and /user will point to UserPage respectively.

We can now see that adding feed or user to the root / in the address bar takes us to the corresponding page.

Voila! We just implemented the bare minimum react-router.

Navigating using Links

Navigating to routes by changing the address manually is not very convenient, We will use now Link component to navigate to the desired page.

Create a Homepage where we will be adding two link components to navigate.

<Route path="" element={<HomePage />} />

Import and add two Link components into the HomePage

import { Link } from "react-router-dom";

const HomePage = () => {
  return (
    <div>
      <div>
        <Link to="feed">Feed</Link>
      </div>
      <div>
        <Link to="user">User</Link>
      </div>
    </div>
  );
};
export { HomePage };

Links are similar to anchor tags but they do not lead to page refresh. Now clicking on the links take us to the corresponding page.

The URL Params

Navigating to a route is good but what if we need to list a particular user using some identifier such as userId?

Edit the user route so that it takes in a userId as a parameter.

<Route path="user/:userId" element={<UserPage />} />

Edit the Link in HomePage to

<Link to={`/user/${123}`}>User</Link>

Here 123 is the parameter value passed to the user route.

We can read the passed param from the UserPage using useParams() hook as follows. Note that the param name which we used in Route component will be used to access the param from the UserPage.

We read the passed param as follows:

import { useParams } from "react-router-dom";

const UserPage = () => {
  let params = useParams();
  return <div>This page shows the details of user {params.userId}.</div>;
};
export { UserPage };

Now we can see that on clicking the Link on homepage we are successfully routed to the given userId.

The No Match Route

What if a user accidentally is routed to route which is not defined? For this purpose we can add a Route with '*' as path inside our Routes. This route will be matched when none of then path matches.

Add a no match route as follows.

<Route path="*" element={<div>Page not found!</div>}/>

Now when we go a route which is not defined we will get a proper message that the page does not exists!

Navigating Programatically

Till now we have seen only one way of navigating to routes which is through <Link>. What if we need to navigate to a route after some action is performed such as button click or a page reload? We have useNavigate() hook which allows us to do that.

Let's add a button to Homepage. On click of this button we will navigate to FeedPage.

import { useNavigate } from "react-router-dom";

const HomePage = () => {
  let navigate = useNavigate();
  const buttonClickHandler = () => {
    navigate("feed");
  };
  return (
    <div>
      <button onClick={buttonClickHandler}>Feed Page</button>

We can now see that on click of button we are successfully navigated to the Feed page.

Demo

End

So this was all about the intro React Router. I hope it was beginner friendly to new users off React-Router. Please drop in your feedback or comments.

Have a good day!

How to create modal using React Portal?

Vishal Gaurav — Wed, 15 Jun 2022 18:30:12 +0000

Hello everyone, in this first blog of mine I am going to show how to create modal using React Portal. Modal at first seems to be another React component we can make but implementing a modal properly teaches us a cool concept in React which is React Portals.

First question, what is React Portal?

Quoting straight from the docs it says -

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

Now, let's try to get what rendering outside the parent component means and how Portal solve this issue?

When we render any component in react it is rendered inside the parent component which forms a tree like hierarchy. In some cases we might want to render our component to a completely different node which is outside our parent. This is where this special feature of react helps.

Second question, why do we need a Portal for a modal?

Modal is something which is expected to open on top of everything. If we render the modal within the page(component) we are on then it will be not easy to write CSS such that the modal is on top of everything and in centre.

Sure, we can do something like this(which I have seen some developers doing) at the outer most layer.

export default function App() {
  const [modalOn, setModalOn] = useState(true);
  return (
    <div>
      {modalOn && <ConfirmationModal />}
      //rest of the app
      //
    </div>
  );
}

Using this method we can show/hide the modal component from the outermost layer and pass the props down or use something like redux or context API for keeping the modal state global.

Sure, this approach works but it has some flaws

There is a need to keep the state global for modal/ pass the props down
The modal component need to be defined away from the component we are on, the Modal cannot reside inside same component. This is where React Portal comes to rescue Now let's try to understand how to implement a modal and see how it works.

1) Add a div to index.html for modal. This will be the modal root where we will be rendering our modals.

<div id="portal-root"></div>

2) Create a PortalForModal component.

import "./portal-for-modal.css";
import { useEffect, useRef } from "react";
import { createPortal } from "react-dom"; //import createPortal

export const PortalForModal = ({ children, dismiss }) => {
  const elRef = useRef(null); //initilaize with null
  if (!elRef.current) {
    elRef.current = document.createElement("div");
  }

  useEffect(() => {
    const portalRoot = document.getElementById("portal-root");
    portalRoot.appendChild(elRef.current);
    //appending the portal first time component is rendered.

    return () => {
      portalRoot.removeChild(elRef.current);
      //cleanup- removing the node to prevent memory leak.
    };
  }, []);

  return createPortal(
    <div//the div covering entire screen where we can place click
    //listener for the modal to close (this is optional)
      className="portal-overlay"
      onClick={() => {//placing a click listener to this div to 
        //close the modal
        dismiss((showModal) => !showModal);
      }}
    >

      <div className="portal" onClick={(e) => e.stopPropagation()}>
        {children} 
      </div>
    </div>,
    elRef.current// the dom node we want to render to(here- portal-root)
  );
};

I understand, I understand that this is too much code at once. Let's try to get what component is about and what it is doing?

PortalForModal can be said as a wrapper component which when wrapped around any component will render the enclosed components inside a React Portal. It receives two props children and the dismiss function(used to close the modal).
elRef is the container that will be holding our Portal. We instantiate it with a div.
Upon the first render of component, we are appending our portal container(elRef.current) to the DOM node(here, portalRoot) using appendChild. We are also doing the necessary clean-up function when the component un-mounts i.e. removing the container from the DOM using removeChild.
Finally we are using the magical functional provided by react that is createPortal. It takes the two arguments child and container.
Our child here is a div element with class name 'portal-overlay'. Inside this div we have another div with class-name 'portal' which renders our children passed down into our PortalForModal component.
The container is the elRef.current which is simply a div which we created.
The div spanning the whole page, one with class-name of 'portal-overlay' has also a click listener on it. Clicking on this div invokes the dismiss function which was also passed as a prop into the component.

3) Add some CSS styling to our component. Include a file named 'portal-for-modal.css'.I will not be covering CSS in detail here.

.portal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 50px;
  border: 2px solid;
}
.portal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
}

All this CSS is doing is

Spanning a background div throughout the page and giving it a background blur.
Centering the portal div to the exact of page using fixed positioning and translate.

4) Finally get to use the Portal component for our Modal!

export default function App() {
  const [modalOn, setModalOn] = useState(false);
  return (
    <div className="App">
      <button id="button" onClick={() => setModalOn((prev) => !prev)}>
        Show Modal
      </button>
      <div id="big-text">This is an example of modal using react portals.</div>
      {modalOn && (
        <PortalForModal dismiss={setModalOn} 
         //everything inside this will be rendered inside portal at center of screen.
         >

          <p style={{ textAlign: "center", margin: "1rem" }}>
            This modal is rendered on a dom node outside the current root node.
          </p>
          <p style={{ textAlign: "center", margin: "1rem" }}>
            You can click the below button or area outside this modal to close
            it.
          </p>
          <button
            onClick={() => {
              setModalOn((prev) => !prev);
            }}
          >
            Close Modal
          </button>
        </PortalForModal>
      )}
    </div>
  );
}

modalOn is a boolean react state which decides if the modal will be shown or not.
Passing the setModalOn as dismiss prop to Portal component.
Rendering whatever we want inside our modal(here, a button and two <p>'s) without defining them somewhere else.

5) Ultimately, the code demo

image source

Hope you enjoyed my first blog. Please do leave your feedback and suggestions if you read it till here.

Good Luck!

part2

Vishal Gaurav — Wed, 15 Jun 2022 14:03:58 +0000

part 2

part 1

Vishal Gaurav — Wed, 15 Jun 2022 14:02:16 +0000