DEV Community: Rohan Bagchi

Building a custom RequireJS

Rohan Bagchi — Mon, 05 Sep 2022 08:42:27 +0000

RequireJS works on the principle that we can define functions that depend on values returned by other functions. This helps us write modular code. Here, we will assume all functions are in a single file.

The ask goes like this:

define('moduleName',function(){
    return 1;
})


require(['moduleName'],function(module1){
    console.log(module1) // 1;
})

Here, we add dependencies using define and functions using require.
1st param to require is a dependency array. Dependencies can be registered using define function.

Sometimes we can also require beforehand and then define functions. Once all dependencies are resolved, the user defined callback will be triggered automatically.

First let us declare module level variables to hold our results, dependencies and a registry of functions to dependency mapping.

const fnMap = {}; // mapping between a dependency function name to actual function reference
let registry = [] // list of functions and the names of their dependencies
const resultMap = {}; // mapping between dependency name and it's return value

Now that we have the vars, let us define define :)

function define(name, cb){
    fnMap[name] = cb;

    const unresolvedRegistryItems = registry.filter(({ cb: userDefinedCb, dependencies }) => {
        const unresolvedDeps = dependencies.filter(dependencyName => {
            const fn = fnMap[dependencyName];
            return !fn;
        });

        if (unresolvedDeps.length === 0) {
            require(dependencies, userDefinedCb);
        } else {
            return true;
        }
    });
    registry = unresolvedRegistryItems;
}

As you can see, we are first recording the dependency in fnMap and then checking the registry for functions whose all dependencies are resolved. If so, we are triggering the require (to be implemented).
Finally, we update the registry list with the filtered list containing only functions with unresolved dependencies.

Let us now define require

function require(dependencies, cb){
    const results = [];
    let isResolved = true;

    for (let i = 0; i < dependencies.length; i++) {
        const dependencyName = dependencies[i];
        const fn = fnMap[dependencyName];

        if (!fn) {
            isResolved = false;
            registry.push({
                cb,
                dependencies
            });
            return;
        } 

        const result = resultMap[dependencyName] || fn();
        results.push(result);
        resultMap[dependencyName] = result;
    }
    isResolved && cb.apply(null, results);
}

Finished product:

Countdown timer with React

Rohan Bagchi — Mon, 05 Sep 2022 08:38:25 +0000

Navigating the quirks of React's state and component model to build a countdown timer you can start, pause, resume, stop and reset. Idea is to start an interval and keep track of it's reference in a ref. On pausing said timer, we can clear the interval same way we can start a new timer on resume.

The ask goes like this:

Allow user to enter time in seconds. On click of Start, existing timer if any must be cancelled and it should begin countdown from the newly entered time.

To start with, lets split our work into 2 parts:

Counting down seconds
Formatting seconds into hh:mm:ss

Counting down seconds

Let's add a form with an input and a submit button.

<form onSubmit={handleStart}>
    <input
        type="number"
        placeholder="Enter total seconds to countdown"
        ref={inputRef}
    />

    <button type="submit">Start</button>
</form>

This will give us a basic form with an uncontrolled field (which is fine as we do not really need a state on user enterred value).
There is also inputRef which is a vanilla React ref. Lets define it.

import { useRef } from "react";

export default function App() {
    const inputRef = useRef();

    return (
        <form onSubmit={handleStart}>
            <input
                type="number"
                placeholder="Enter total seconds to countdown"
                ref={inputRef}
            />

            <button type="submit">Start</button>
        </form>
    )
}

Now lets consider the timer. The way it works is by decrementing a count until it reaches 0.
The only way to change a value and have it automatically updated in the DOM in React is by using state.

Let's add it below our inputRef declaration.

// ...
const inputRef = useRef();
const [currentTime, setCurrentTime] = useState(0);
// ...

Next step is the actual countdown. We can make use of setInterval method to execute a decrement after every second. Along with this, we need to clear a running timer before the component unmounts.

Also, as per the ask, every time our form is submitted, we need to reset the timer. So we need reference to the timerID that persists accross re-renders without causing a re-render of it's own. To that effect, we can use a ref.

// ...
const inputRef = useRef();
const timerRef = useRef();
const [currentTime, setCurrentTime] = useState(0);

useEffect(() => {
    return () => {
        clearInterval(timerRef.current);
    };
}, []);

const startTimer = () => {
    timerRef.current = setInterval(() => {
        setCurrentTime((prev) => prev - 1);
    }, 1000);
}; 
// ...

The useEffect here returns a cleanup function that executes on unmount. Here we are clearing up any running timer.

The startTimer function is responsible for starting a timer with a fixed delay of 1000 milliseconds and decrementing currentTime by 1 on every tick.

Let's bring it all together in our handleStart function which get's triggered on form submit.

Things to note:

handleStart will clear any existing timers
set value of currentTime
trigger startTimer

// ...
const handleStart = e => {
    e.preventDefault();

    if (timerRef.current) {
      clearInterval(timerRef.current);
    }

    const secondsInput = inputRef.current.value;

    setCurrentTime(() => secondsInput);

    startTimer();
};
// ...

Here, const secondsInput = inputRef.current.value; gets the current value of the input.

Formatting seconds into hh:mm:ss

Now that we have a decrementing counter, lets also add a utility to format it to hh:mm:ss.

const secondsToHHMMSS = (seconds) => {
  if (seconds < 3600)
    return new Date(seconds * 1000).toISOString().substr(14, 5);

  return new Date(seconds * 1000).toISOString().substr(11, 8);
};

^ is picked from this helpful stackoverflow answer: https://stackoverflow.com/a/1322771/1939344

Now, lets render it below the form:

// ...
return (
    <div className="App">
        <form onSubmit={handleStart}>
            <input
            type="number"
            placeholder="Enter total seconds to countdown"
            ref={inputRef}
            />

            <button type="submit">Start</button>
        </form>

        <div className="time">{secondsToHHMMSS(currentTime)}</div>
    </div>
);
// ...

Finished result:

Using React.memo

Rohan Bagchi — Mon, 05 Sep 2022 08:25:27 +0000

PureComponent is a decent approach for performance optimisation as long as it is not prematurely opted in. It’s functional counterpart, memo is used these days with functional components.

Now there could be 2 ways to declare a component as a memoized one that I can think of:

Inline

import { memo } from 'react'

export const MyAwesomeFormWithInlineMemo = memo(() => (
  <form>
    <label>
      Hey

      <input type="text" />
    </label>
  </form>
))

Not Inline (do not know what to call this approach):

import { memo } from 'react'

const MyAwesomeForm = () => (
  <form>
    <label>
      Yo!

      <input type="text" />
    </label>
  </form>
);

export const MemoedMyAwesomeForm = memo(MyAwesomeForm);

Now while both will have similar behaviour, the 2nd approach provides better DX in browser devtools.

Lets look at how these look in the components tab in devtools:

This is because memo is an HOC which does not attach a readable displayName to the returned component. This gets worse as we add on more inline memo components as children to it.

export const MyAwesomeFormWithInlineMemoX = memo(() => (
  <div style={{ padding: 20 }}>
    <fieldset>
      <MyAwesomeFormWithInlineMemo />
    </fieldset>
  </div>
));

As such, while the inline approach works, it adds friction to maintenance.

The 2nd approach however is wrapping over a component MyAwesomeForm that already has an implicit name. React is now able to set the displayName correctly and it shows up in the devtools as expected.

Suggestion

Please use the second approach if possible. Create a component and then export it using memo. This allows us to find components in devtools and map it to their source code for easier maintainability :)

If we must use the inline approach, please assist memo by defining a named function inside:

import { memo } from 'react'

export const AwesomeComponent = memo(function AwesomeComponent() {
  return ...;
});

^ This will show up as AwesomeComponent in devtools same way

How to write a VanillaJS Router

Rohan Bagchi — Mon, 05 Sep 2022 08:15:43 +0000

Juanjo Jaramillo on Unsplash
"/>

The ask is like this:

React to link clicks by showing route specific content on the page.
When user clicks on browser back or forward, the correct route and its content should be loaded.
If user refreshes, content for the current route should be loaded.

To start with, make your HTML page look like this:



<body>
    <div id="nav"></div>
    <div id="app"></div>

    <script src="src/index.js"></script>
</body>

Now in our index.js, lets add the following config:



const routes = {
  '/': {
    linkLabel: 'Home',
    content: `I am in home page`
  },
  '/about': {
    linkLabel: 'About',
    content: `I am in about page`
  },
  '/friends': {
    linkLabel: 'Friends',
    content: `I am in friends page`,
  },
};

At this point it is clear that we are trying to create a config powered router. This means, we will need to create the nav items and then register the click handlers.

Let's add functions for them.



const app = document.querySelector('#app');
const nav = document.querySelector('#nav');

// function to create new nav items
const renderNavlinks = () => {
  const navFragment = document.createDocumentFragment();
  Object.keys(routes).forEach(route => {
    const { linkLabel } = routes[route];

    const linkElement = document.createElement('a')
    linkElement.href = route;
    linkElement.textContent = linkLabel;
    linkElement.className = 'nav-link';
    navFragment.appendChild(linkElement);
  });

  nav.append(navFragment);
};

// function to register click handlers
const registerNavLinks = () => {
  nav.addEventListener('click', (e) => {
    e.preventDefault();
    const { href } = e.target;
    history.pushState({}, "", href);
    navigate(e); // pending implementation
  });
};

We now need to implement the navigate function. It will handle the actual navigation.



const renderContent = route => app.innerHTML = routes[route].content;

const navigate = e => {
    const route = e.target.pathname;
    // this is responsible for adding the new path name to the history stack
    history.pushState({}, "", route);
    renderContent(route);
};

Now, all we have left to do is to is to handle the pop state event (handle browser back and forth) and to handle the initial page load.



const registerBrowserBackAndForth = () => {
  window.onpopstate = function (e) {
    const route = location.pathname;
    renderContent(route);
  };
};

const renderInitialPage = () => {
  const route = location.pathname;
  renderContent(route);
};

Bringing it all together:



(function bootup() {
  renderNavlinks();
  registerNavLinks();
  registerBrowserBackAndForth();
  renderInitialPage();
})();

Final demo:
This is what we are attempting to create: (check codesandbox demo)

...

Thank you for reading this far.

Preview and View More Animation with React Transition Group

Rohan Bagchi — Sat, 24 Jul 2021 14:29:11 +0000

Using React Transition Group for a Preview & View More kind of layout animation where the Preview & View More components are different.

At a high level, we can think of several ways of CSS animation we can attempt. In this blog, we will speak about Preview & View More kind of layout where the Preview & View More components are different.

Only prerequitite is that the approximate heights of the Expanded content & Collapsed content are known beforehand as we will be animating on the max-height property.

Now if we are to replace the Expanded content with Collapsed content during collapse phase, it happens abruptly with a jank. To resolve this, we should adopt the following animation strategy:

During expand phase

Replace the Collapsed content with Expanded content
Animate height to accomodate Expanded content

During collapse phase

Animate height to Collapsed content height. This is because the Expanded content is taller than the Collapsed content and can accomodate the height transition without abruptly shrinking
Replace the Expanded content with Collapsed content once animation is over

To achieve this, we will be using CSSTransition module of the react-transition-group

Let's say we have the following `Collapsed content` component

const CollapsedContent = (props) => {
  return (
    <div className="collapsed">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>
        Asperiores iste magnam dolores eius ab laboriosam excepturi, consectetur
        consequuntur maiores at voluptas ipsam cum reiciendis assumenda tenetur
        natus in omnis deleniti.
      </p>
    </div>
  );
};

And the following `Expanded content` component

const ExpandedContent = (props) => {
  return (
    <div className="expanded">
      <p>
        It is a long established fact that a reader will be distracted by the
        readable content of a page when looking at its layout. The point of
        using Lorem Ipsum is that it has a more-or-less normal distribution of
        letters, as opposed to using 'Content here, content here', making it
        look like readable English.
      </p>
      <p>
        There are many variations of passages of Lorem Ipsum available, but the
        majority have suffered alteration in some form, by injected humour, or
        randomised words which don't look even slightly believable.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores iste
        magnam dolores eius ab laboriosam excepturi, consectetur consequuntur
        maiores at voluptas ipsam cum reiciendis assumenda tenetur natus in
        omnis deleniti.
      </p>
    </div>
  );
};

In the main or orchestrating component, we need to add 2 booleans:

isCollapsed (to track which component to render)
isAnimating (to track when to run animation)

So when the animation is starting, we will toggle isCollapsed to false and when animation has finished, we will toggle isCollapsed to true.

This way we will be able to animate based on the strategy mentioned above.

Main component

export const Main = () => {
  const [isCollapsed, setIsCollapsed] = useState(true);
  const [isAnimating, setIsAnimating] = useState(false);

  return (
    <div>
      <div className="card">
        <CSSTransition
          in={isAnimating}
          timeout={200}
          classNames="content-switching"
          onEntering={() => {
            setIsCollapsed(false);
          }}
          onExited={() => {
            setIsCollapsed(true);
          }}
        >
          <div className="base">
            {isCollapsed && <CollapsedContent />}
            {!isCollapsed && <ExpandedContent />}
          </div>
        </CSSTransition>
      </div>
      <button
        onClick={() => setIsAnimating((prev) => !prev)}
        style={{ display: "block" }}
      >
        {isCollapsed ? "Show" : "Hide"}
      </button>
    </div>
  );
};

As we see here, the user clicking on the Show or Hide button only toggles the isAnimating flag.

The CSSTransition component then handles toggling the isCollapsed flag based on it's life cycle methods: onEntering and onExited.

Finished result:

Full source code is available here:

github.com/rohanBagchi/react-height-animation-tryout

Thank you for reading this far.

Testing react components

Rohan Bagchi — Mon, 22 Feb 2021 04:41:48 +0000

As usual, opinions are personal and may contain some bias.

Over the years I found a common recurring pattern wherein React component tests are done by asserting on the internal behaviour of the function rather than the actual output.

Frontend unit tests must treat the test subject, our React Component as a black box just like how an end user might.
For example, when I am filtering apartments in Airbnb, I only care about the information I see on the screen and how it reacts to the filters I apply. At no point do I need to know if the underlying React component state has updated or if the text is an h2 or bold.

2 popular ways I know of, using which we can unit test React components:

Enzyme
React Testing Library

TL;DR I would use React Testing Library approach for writing meaningful unit tests.

What are we testing?

Here, how we render the joke is an implementation detail. The fact that the joke gets fetched and rendered on click of the button is the behavior.

For example, later on we could render the joke inside a <p/> tag. The behavior of the component would remain unchanged and as such we should not have to touch our tests for this change.

Enzyme test

Here, you will see we are extracting text content of the <h3/> element using wrapper.find('h3').text(). So based on our contrived example above, if we were to convert the <h3/> into a <p/>, our test will break. For a larger, more complex component, the changes will increase exponentially. This makes refactors hard.

React Testing Library Test

Here, we are only testing for the behavior. So, as long as the behavior stays same, an update in how we render the joke for this case makes no difference. For larger projects with lot more complexity, passing tests across refactors will give developers confidence and help them move fast.

Full repo here

rohanBagchi / devto-testing

Description

Created for showing a demo of testing the same React component using Enzyme and React Testing Library Where with Enzyme, it is more around the implementation details, with React Testing Library it is around the behavior.

Demo and fiddle

Link to dev.to blog post

https://rohanbagchi.vercel.app/testing-react-components/

How to run?

npm i
npm run test

This will trigger the tests and both will pass of course.

What are we testing?

import "./styles.css";
import { useState } from "react";
import { get } from "axios";
export default function App() {
  const [joke, setJoke] = useState(null);
  const [error, setError] = useState(null);

  const fetchJoke = async () => {
    try {
      const { data } = await get("https://api.icndb.com/jokes/random");
      if (data.type ===

…

View on GitHub

Thank you for reading this far. Let me know what you feel in comments.

Travelling with a dog during COVID: from Berlin to Bangalore

Rohan Bagchi — Mon, 08 Feb 2021 03:42:24 +0000

It was around mid September 2020 when my wife, Aurpita and I decided to short circuit our Berlin stay and move back to India so we could be closer to family.

Things were definitely better than they were around March 2020 in a way that there was a process around travels. But it was still a major mess and flights were getting cancelled all the time.

I called up Pawsome. They helped us move Aura, our 2.5 year old cocker spaniel from Bangalore to Berlin for assistance and they shared a process.

As flights were getting cancelled, I planned on moving Aura before my scheduled date of travel. Aurpita agreed to travel to India and drop Aura off to her creche Petcart Nest. Highly recommended for pet stays in Bangalore.

On 11th November 2020, Aurpita and Aura travelled all the way from Berlin to Bangalore. Except for the tiring flight, all went well.

This is all 3 of us in the old abandoned Brandenburg airport few days before travel:

Aura's travel photo: you will need one to request for an NOC from India.

All 3 of us travelled around January 2020 with Lufthansa from Bangalore to Berlin with a layover at Frankfurt. Naturally it was my first choice.

How to book a ticket for yourself and your dog for international relocations?

Go to airline website and select your flight
Fill in all details and reach the payment page
Call the airline customer support and ask them to check if a slot is available for pet-in-hold and if so, add it to your booking. You will have to pay for it at the time of checkin post weight check.
Make payment for your ticket.

Normally, calling customer care is a speedy affair with Lufthansa because COVID, you have to wait on hold for 10-30 minutes on an average until the calls are answered.

Lufthansa was able to find a slot in Berlin to Frankfurt route and the agent moved on to look for a slot in Frankfurt to Bangalore. We got to know there is an embargo on pet travel in Frankfurt - Bangalore route. Had to drop the plan with Lufthansa. This call ate up ~2 hours of my life I will never get back :)

Next hope was Air France. With them, waiting time was worse at times going all the way up to an hour.
Pro tip: buy a subscription from Viber Out for INR 600. This saved me countless Euros.
Yes, times were difficult. So much so that months after buying the tickets and travelling, I could still hear their waiting music in my head :)
Luckily, Air France agreed to take Aura.

There was a catch however: if we took a flight from Berlin to Bangalore with a layover, they would not be able to accommodate a dog. Reason: some issue with support staff unavailability during layovers.

Only way to travel with a dog in Air France was on direct flights.

Travel was broken down into 3 parts:

Berlin to Paris.
Overnight stay at Holiday Inn Express CDG Airport (yes, it is pet friendly)
Paris to Bangalore

I travelled from Berlin to Paris and post that Aurpita continued with Aura onto Bangalore. In Bangalore, Pawsome would take over and post wrap up of formalities will drop Aura off to her home for next 41 days.

Process of booking a ticket with Air France was little different:

Go to airline website, select your flight & fill in all details and reach the payment page
Call the airline customer support and ask them to check if a slot is available for pet-in-hold.
Make payment for your ticket.
Call them again to attach a pet-in-hold slot with your ticket. You can make payment online as it is fixed price until 75kgs.

Required documentation for Aura:

Updated Rabies vaccination
Export health certificate from Germany
Original Export NOC from when Aura travelled to Germany

Rabies vaccination was easy. Any vet will do it. Fun part was locating the place to get the export health certificate from Germany. There was a chat group named "Zalandogs" in Zalando where I asked for help and I was pointed to the right direction.

If any one is looking for the place to go to, search for this

Make sure to take an appointment beforehand. The whole process took around 20 minutes and cost us around 25 Euros.
The doctor will verify the vaccine records and cross reference it with the micro chip number by physically scanning the dog.

How to travel to the airport hotel on reaching Paris?
Pro tip: avoid taxis. They will charge some random number and will not negotiate.
Paris CDG airport has a train directly taking to all the nearby airport hotels. I availed that train.

This is Aura in Paris. Could not get a better photograph of her.

Berlin to Paris was a seamless affair. We booked a taxi from taxi-berlin and reached the new Brandenburg Airport in no time. The checkin experience for all 3 of us was smooth as we had all documents in place. They collected Aura from the heavy luggage loading bay and we moved on to the boarding gate.

Paris checkin was also simple. Holiday Inn Express has an airport shuttle. We availed it to travel to airport from the hotel. Once in airport, I helped Aurpita finish the checkin and once Aura was collected as heavy luggage, Aurpita moved on to her security check + border control.
My flight back to Berlin was in couple of hours from the other side of the airport.

Once in flight, make sure to ask the flight attendant to confirm if the dog attached to your ticket is onboard as a safety check.

To sum it up, this is the flow that worked for me:

Buy tickets for yourself + dog
Schedule RT-PCR test for yourself 1 day before travel. I used Centogene. Make sure to reach early.
Gather all travel documents for the dog: Rabies + Export Health Certificate. It is a good idea to retain a relocation agency. Pawsome worked really well for us.
Travel to Paris
Stay overnight in airport hotel
Travel to India

Please feel free to reach out in comments if any of you are travelling in the coming months and need some information.

Measuring simplicity in code

Rohan Bagchi — Sat, 23 Jan 2021 16:04:11 +0000

Photo by Blake Connally on Unsplash

These are my personal opinions and not intended as an expert view on things. Accept with a pinch of salt :)

Simple and child-like. Elegant. Beautiful. A work of art. These are the few adjectives we might have heard referring to a piece of code over the years. And most of the time these are coloured with personal biases one develops over the years.

I have some. So might you.

While biases in themselves are not wrong, but at times kind of fall short of objectively measuring the concept over which a bias is formed in the first place.

One metric I found to have worked for me over time is this: amount of code (number of files + logic + LOC) one must load into their brain to be able to understand and extend a functionality.

Talk is cheap, show me a contrived example!

Here, we have a form which 'syncs' it's state to some store. Same data is used to render a greeting.

Now in a regular application, you can add redux and few API calls in addition to the codesandbox demo and unknown to you, the developer, a Frankenstein's monster is born. And you, the developer with context is the proverbial Dr. Frankenstein in our story :)

Enter me, a new developer to your team. First task assigned is this:
"Add a share option to the Greeting component"

Looks harmless enough to be marked beginner friendly.

Now, for me to start work, even in the contrived example, I have to go through the following files only to understand how data is flowing:

App.js
withFormContext.js
FormWrapper.js
(Now circling back to App.js) Form.js
(And finally) Greeting.js

If somehow I did not follow the sequence and went from App.js to Form.js directly, I would have had to go back to FormWrapper.js, withFormContext.js and then some how land on Greeting.js

This gets the job done. It uses component state, higher order component and context to achieve dependency injection of state. Nothing wrong with this per se. Except for the level of indirection thrown around over time.

Now, look at the following example. Yes, it is contrived still, but please try to look beyond the obvious.
We used the plain old concept of "lift state up".

Now when I need to add sharing options to Greeting component, this is the set of components / files I need to go through:

App.js
Greeting.js

The indirection is gone and feature wise, both examples are similar.

Please look into your own codebase and be on the lookout for sections of code that need extra documentation or takes new comers longer to onboard into.

Every time you add a new feature / code review, please try to check the amount of code / files you need to load into your runtime (brain) for you to be able to work with the feature.

If it is more than you are able to remember by the time you reach into the depth of it, this could be a prime candidate for refactor.

Thank you for reading this far. Let me know what you feel in comments.

DEV Community: Rohan Bagchi

Building a custom RequireJS

Countdown timer with React

Counting down seconds

Formatting seconds into hh:mm:ss

Using React.memo

Inline

Not Inline (do not know what to call this approach):

Suggestion

How to write a VanillaJS Router

Preview and View More Animation with React Transition Group

During expand phase

During collapse phase

Let's say we have the following Collapsed content component

And the following Expanded content component

Main component

Testing react components

What are we testing?

Enzyme test

React Testing Library Test

Full repo here

rohanBagchi / devto-testing

Description

Demo and fiddle

Link to dev.to blog post

How to run?

What are we testing?

Travelling with a dog during COVID: from Berlin to Bangalore

How to book a ticket for yourself and your dog for international relocations?

Travel was broken down into 3 parts:

Process of booking a ticket with Air France was little different:

Required documentation for Aura:

To sum it up, this is the flow that worked for me:

Measuring simplicity in code

Let's say we have the following `Collapsed content` component

And the following `Expanded content` component