DEV Community: Bijish O B

Introducing nextjs-server-action-tester

Bijish O B — Sun, 18 Aug 2024 16:32:45 +0000

Why I Built `nextjs-server-action-tester` 💡

In a recent project, I was responsible for developing the frontend using Next.js, while a colleague handled the backend logic. As a core Node.js developer, my colleague was accustomed to using Postman for testing API endpoints. However, when it came to server actions in Next.js—functions that are executed directly on the server and aren't exposed as API endpoints—he found it challenging to test them using traditional tools like Postman.

This challenge sparked the idea to create a tool that could scan a Next.js codebase, identify all server actions, and provide a user interface to test these actions 🎯. The goal was to streamline the testing process for server actions, especially for developers who are more familiar with traditional API testing methods. This led to the creation of nextjs-server-action-tester 🚀.

What Is `nextjs-server-action-tester`? 🤖

nextjs-server-action-tester is an npm package designed to make the testing of server actions in Next.js projects as straightforward as possible. It automates the process of scanning your project, generates metadata, and creates a user-friendly UI for listing, searching, and executing server functions 🎨. The tool supports both JavaScript and TypeScript, and it comes with customizable configurations and a built-in light/dark mode.

Key Features ✨

1. Automatic Scanning: Scans your Next.js project to identify server actions.
2. UI for Testing: Generates a page within your project where you can list and test server actions.
3. Customizable Configurations: Offers flexibility in how the tool is configured and used within your project.
JavaScript and TypeScript Support: Works seamlessly with both languages.
4. Light/Dark Mode: UI that adapts to your preferred theme.

Libraries Used 🛠️

1. babel/parser: For parsing JavaScript/TypeScript code into an Abstract Syntax Tree (AST).
2. babel/traverse: For traversing the AST and identifying server actions.
3. fs-extra: For handling file operations during the setup and scanning process.

How to Use `nextjs-server-action-tester` 🚀

1. Installation: First, install the package in your Next.js project:

npm install nextjs-server-action-tester

2. Running the Tool: After installation, run the following command to start the scanning and testing process:

npx actions-scan

This command will automatically set up the necessary files, initiate the scanning process, and generate a UI for testing server actions.

3. Testing Server Actions: Open the generated page in your browser (e.g.,http://localhost:3000/list-actions). Here, you can view all detected server actions, search for specific actions, input parameters, and execute them 🔍.

Why It Improves Developer Experience 🚀

nextjs-server-action-tester bridges the gap between traditional API testing tools like Postman and the server actions feature in Next.js. It empowers developers, especially those familiar with Node.js and API testing, to test server actions with ease. The tool integrates directly into your project, giving you full control while keeping the development process smooth and efficient.

Links 🔗

1. npm Package: nextjs-server-action-tester
2. Demo Video: Watch on YouTube

Contributing 🤝

Contributions are welcome! If you have ideas for improvements or find any issues, feel free to submit a pull request or open an issue on the GitHub repository.

By sharing this tool, I hope to make the development and testing of server actions in Next.js projects more accessible and efficient. Whether you're working on a solo project or collaborating with a team, nextjs-server-action-tester can be a valuable addition to your development toolkit 💼.

A Developer's Journey: Building GPT-in-Terminal, a Side Project That Unlocks the Power of OpenAI's GPT-3 in terminal

Bijish O B — Sat, 01 Apr 2023 19:08:33 +0000

As a developer, I've always been fascinated by the potential of artificial intelligence and natural language processing. When I first learned about OpenAI's GPT-3 language model, I was captivated by its capabilities and knew that it could be a game-changer for developers like me. That's when I decided to embark on an exciting journey to create a user-friendly command-line tool that would make interacting with GPT-3 more accessible and enjoyable.

I chose Node.js as my trusty companion for this adventure, knowing that it's versatility and extensive ecosystem would provide the perfect foundation for my side project. And thus, GPT-in-Terminal was born.

Throughout the development process, my primary focus has been on ease of use and seamless integration. To achieve this, I made sure that GPT-in-Terminal could be installed globally with just one simple command:

npm install -g gpt-in-terminal

Command to install package globally in local machine
I also understood the importance of API key management when working with OpenAI's platform. To streamline this process, I devised an intuitive way for users to add their API key directly within the tool:

terminal-gpt-add-key your_api_key_here

Command to add API key to project configuration
To set GPT-in-Terminal apart from other tools out there, I wanted to enhance the user experience by adding colourful highlights for chats, prompts, code sections, and important terms. This touch of visual flair not only made interactions more engaging but also improved readability.

As a developer myself, I know how crucial it is to monitor API usage—especially when it comes to managing costs. That's why I incorporated a feature that allows users to check their API key used within specified date ranges:

terminal-gpt-check-usage start_date_here end_date_here

Command to check API key usage
While I'm proud of what I've achieved so far, I believe that there's always room for improvement. GPT-in-Terminal is a work in progress, and I'm committed to enhancing and expanding its features in the future.

I invite you to join me on this ongoing adventure and harness the power of GPT-3 using GPT-in-Terminal. To get started, visit GPT-in-Terminal's GitHub repository and learn more about my background and passions.
Together, let's explore the wonders of AI and natural language processing as we shape the future of GPT-in-Terminal. Happy coding!

Finding all children of a node in a tree

Bijish O B — Mon, 28 Nov 2022 17:36:49 +0000

In an E-commerce project, I had to address the problem of creating a coupon assigned for a specific category of products. If a type of category is chosen for a coupon then all the sub-categories of that will also be applied. My task was to create a logic to find all these sub-categories. To illustrate the logic behind this, we can consider the case with a tree.

The above tree can be represented as an array of objects. Where each object represents a node, each object is having an id and parent_node as fields.



let tree = [
    // root node
    {
        id: "A",
        parent_node: "",

    },
    {
        id: "B",
        parent_node: "A",

    },
    {
        id: "C",
        parent_node: "A",

    },
    {
        id: "D",
        parent_node: "B",

    },
    {
        id: "E",
        parent_node: "B",

    },
    {
        id: "F",
        parent_node: "B",

    },
    {
        id: "G",
        parent_node: "C",

    },
    {
        id: "H",
        parent_node: "C",

    },
    {
        id: "I",
        parent_node: "E",

    },
    {
        id: "J",
        parent_node: "E",

    },
    {
        id: "K",
        parent_node: "G",

    }
]

Let us have an array to store the sub-node ids of the node we wish to find.



let subNodes = []

Get sub-node ids

Let us have a function to get the ids of sub-nodes of a node. It is a recursive function that traverses through the tree to sub-nodes and backtracks when a sub-node with no child is met.



// recursive function to get sub nodes 
function getSubNodes(node) {

    let isParent = false
    for (let j = 0; j < tree.length; j++) {
        if (tree[j].parent_node === node) {
            isParent = true
            break;
        }
    }
    // return if the node is not a parent 
    if (isParent === false) {
        return
    }
    else {
        // find the sub-nodes of the given node 
        // the undefined results are filtered out
        let intermediateNodes = tree.map((eachNode) => {
            if (eachNode.parent_node === eachNode.id) {
                // to cancel self loop
            }
            else if (eachNode.parent_node === node) {
                return eachNode.id
            }
        }).filter(ele => ele !== undefined)
        // spread the results into the subNodes array 
        // with the previous data
        subNodes = [...subNodes, ...intermediateNodes]
        //recursive calling to go into depth
        intermediateNodes.map((item) => { getSubNodes(item) })
    }
    // Set is used to remove duplicates
    subNodes = Array.from(new Set(subNodes))

}

List sub-nodes

Let us have a function to list sub-nodes of a node. This function call getSubNodes(node) to get sub-nodes ids and displays the sub-nodes data.



// function to list sub nodes 
function listSubNodes(node) {
    subNodes = []
    getSubNodes(node)
    console.log(tree.filter(item => subNodes.includes(item.id)))
}

So we can find all the sub-nodes of node "C", by calling the listSubNodes("C") function.



listSubNodes("C")

Output



[
  { id: 'G', parent_node: 'C' },
  { id: 'H', parent_node: 'C' },
  { id: 'K', parent_node: 'G' }
]

This is the logic I used for solving the addressed problem, after analysing the above solution please share your thoughts, and ways to improve it.

Thank you.

Using a Custom Hook to Control a Popup

Bijish O B — Sun, 28 Aug 2022 13:49:00 +0000

Intro

The ability to reuse code is a great thing. I have encountered a situation where I have to build four different types of popups for an application.

Instead of writing four separate components, a single hybrid component would cater for the need.

The global popup I created makes use of some state checks to render individual UI elements. I used recoil for state management such that the various states of the component can be controlled globally. Wrapping up the control aspect into a hook will make it easy to use from various parts of the application.

In this post, I used Next.js for the demonstration.

Folder Structure

States

Each unit of state(atom) is stored in separate files and these are served from the index.js file of src/recoil/popup.

There are states included to

open or close the popup,
add a heading,
enable or disable the close button,
display content with a custom component,
enable or disable images, and
pass event handlers to buttons.

Also, it is given a provision to reset the state of the popup to its default value.

src/recoil/popup/index.js

import popupOpenOrClose from './popupOpenOrClose'
import popupHeading from './popupHeading'
import popupContentCloseMark from './popupContentCloseMark'
import popupCustomContent from './popupCustomContent'
import popupThumbsUp from './popupThumbsUp'
import popupThumbDown from './popupThumbDown'
import popupOkButton from './popupOkButton'
import popupCancelButton from './popupCancelButton'
import popupYesButton from './popupYesButton'
import useResetPopupState from './resetStates'
export {
    popupOpenOrClose,
    popupHeading,
    popupContentCloseMark,
    popupCustomContent,
    popupThumbsUp,
    popupThumbDown,
    popupOkButton,
    popupCancelButton,
    popupYesButton,
    useResetPopupState
}

src/recoil/popup/popupCancelButton.js

import { atom } from "recoil"

const popupCancelButton = atom({
    key: "popupCancelButton",
    default: false
})

export default popupCancelButton

The popupCancelButton atom store the function that must be executed on the onClick event of the cancel button.

src/recoil/popup/popupContentCloseMark.js

import { atom } from "recoil"

const popupContentCloseMark = atom({
    key: "popupContentCloseMark",
    default: false
})

export default popupContentCloseMark

The popupContentCloseMark atom store the state of whether the close button must be present or not in the popup.

src/recoil/popup/popupCustomContent.js

import { atom } from "recoil"

const popupCustomContent = atom({
    key: "popupCustomContent",
    default: <></>
})

export default popupCustomContent

The popupCustomContent atom store the custom content component that must be present or not in the popup.

src/recoil/popup/popupHeading.js

import { atom } from "recoil"

const popupHeading = atom({
    key: "popupHeading",
    default: ''
})

export default popupHeading

The popupHeading atom store the heading that must be present or not in the popup.

src/recoil/popup/popupOkButton.js

import { atom } from "recoil"

const popupOkButton = atom({
    key: "popupOkButton",
    default: false
})

export default popupOkButton

The popupOkButton atom store the function that must be executed on the onClick event of the Ok button.

src/recoil/popup/popupOpenOrClose.js

import { atom } from "recoil"

const popupOpenOrClose = atom({
    key: "popupOpenOrClose",
    default: false
})

export default popupOpenOrClose

The popupOpenOrClose atom store the state of whether the popup must be present or not.

src/recoil/popup/popupThumbDown.js

import { atom } from "recoil"

const popupThumbDown = atom({
    key: "popupThumbDown",
    default: false
})

export default popupThumbDown

The popupThumbDown atom store the state of whether the thumb down image must be present or not in the popup.

src/recoil/popup/popupThumbsUp.js

import { atom } from "recoil"

const popupThumbsUp = atom({
    key: "popupThumbsUp",
    default: false
})

export default popupThumbsUp

The popupThumbsUp atom store the state of whether the thumb up image must be present or not in the popup.

src/recoil/popup/popupYesButton.js

import { atom } from "recoil"

const popupYesButton = atom({
    key: "popupYesButton",
    default: false
})

export default popupYesButton

The popupYesButton atom store the function that must be executed on the onClick event of the Yes button.

src/recoil/popup/resetStates.js

import { useResetRecoilState } from "recoil";
import {
    popupOpenOrClose,
    popupHeading,
    popupContentCloseMark,
    popupCustomContent,
    popupThumbsUp,
    popupThumbDown,
    popupOkButton,
    popupCancelButton,
    popupYesButton,
} from '../../recoil/popup'

const useResetPopupState = () => {
    // reset state references
    const resetOpenOrClosePopup = useResetRecoilState(popupOpenOrClose);
    const resetPopupHeading = useResetRecoilState(popupHeading);
    const resetContentCloseMarkPopup = useResetRecoilState(popupContentCloseMark);
    const resetCustomContentPopup = useResetRecoilState(popupCustomContent);
    const resetThumbsUpPopup = useResetRecoilState(popupThumbsUp);
    const resetThumbDownPopup = useResetRecoilState(popupThumbDown);
    const resetOkButtonPopup = useResetRecoilState(popupOkButton);
    const resetCancelButtonPopup = useResetRecoilState(popupCancelButton);
    const resetYesButtonPopup = useResetRecoilState(popupYesButton);

    const resetState=()=>{
        //reset to default
    resetOpenOrClosePopup()
    resetPopupHeading()
    resetContentCloseMarkPopup()
    resetCustomContentPopup()
    resetThumbsUpPopup()
    resetThumbDownPopup()
    resetOkButtonPopup()
    resetCancelButtonPopup()
    resetYesButtonPopup()
    }
    return [resetState]

}
export default useResetPopupState

The useResetPopupState is a hook used to reset the states related to the popup. It returns resetState, by invoking resetState we can reset the popup states to their default values.

Custom Hook

src/hooks/usePopUp.js

import { useSetRecoilState } from "recoil";
import {
    popupOpenOrClose,
    popupHeading,
    popupContentCloseMark,
    popupCustomContent,
    popupThumbsUp,
    popupThumbDown,
    popupOkButton,
    popupCancelButton,
    popupYesButton,
    useResetPopupState

} from '../recoil/popup'
export const usePopUp = () => {
    //states
    const setOpenOrClosePopup = useSetRecoilState(popupOpenOrClose);
    const setPopupHeading = useSetRecoilState(popupHeading);
    const setContentCloseMarkPopup = useSetRecoilState(popupContentCloseMark);
    const setcustomContentPopup = useSetRecoilState(popupCustomContent);
    const setThumbsUpPopup = useSetRecoilState(popupThumbsUp);
    const setThumbDownPopup = useSetRecoilState(popupThumbDown);
    const setOkButtonPopup = useSetRecoilState(popupOkButton);
    const setCancelButtonPopup = useSetRecoilState(popupCancelButton);
    const setYesButtonPopup = useSetRecoilState(popupYesButton);
    // hook
    const [resetPopUp] = useResetPopupState()
    // showPopup implmentation
    const showPopup = (
        {
            heading,
            showClose,
            customContent,
            ThumbUp,
            ThumbDown,
            onOkPressed,
            onCancelpressed,
            onYesPressed,
        }) => {
        resetPopUp()
        setOpenOrClosePopup(true)
        setPopupHeading(heading)
        setContentCloseMarkPopup(showClose)
        setcustomContentPopup(customContent)
        setThumbsUpPopup(ThumbUp)
        setThumbDownPopup(ThumbDown)

        if (onOkPressed) {
            setOkButtonPopup({ onClick: onOkPressed })
        }

        if (onCancelpressed) {
            setCancelButtonPopup({ onClick: onCancelpressed })
        }
        if (onYesPressed) {
            setYesButtonPopup({ onClick: onYesPressed })
        }

    }
    // hidePopup implmentation
    const hidePopup = () => {
        resetPopUp()
    }
    return [showPopup, hidePopup]

}

The usePopUp() hook return [showPopup,hidePopup].

The showPopup() function takes an object as an argument which is used to set the properties as well as various event handlers for the popup.
The hidePopup() function hides the popup and sets its states to default value.

Popup Component

src/components/globalPopup/index.js

import React, { useEffect } from 'react'
import { useRecoilState, useRecoilValue } from "recoil";
import {
    popupOpenOrClose,
    popupHeading,
    popupContentCloseMark,
    popupCustomContent,
    popupThumbsUp,
    popupThumbDown,
    popupOkButton,
    popupCancelButton,
    popupYesButton,
    useResetPopupState
} from '../../recoil/popup'
import closeButton from '../../images/closeButton.png'
import thumbsUpImg from '../../images/thumbsUp.jpeg'
import innerClose from '../../images/innerClose.png'
import thumbsDownImg from '../../images/thumbsDown.jpeg'
import Image from 'next/image'
import styles from './globalPopup.module.css'

const GlobalPopup = () => {
    // states
    const [openOrClosePopup, setOpenOrClosePopup] = useRecoilState(popupOpenOrClose);
    // values
    const headingPopup = useRecoilValue(popupHeading);
    const contentCloseMarkPopup = useRecoilValue(popupContentCloseMark);
    const customContent = useRecoilValue(popupCustomContent);
    const thumbsUpPopup = useRecoilValue(popupThumbsUp);
    const thumbDownPopup = useRecoilValue(popupThumbDown);
    const okButtonPopup = useRecoilValue(popupOkButton);
    const cancelButtonPopup = useRecoilValue(popupCancelButton);
    const yesButtonPopup = useRecoilValue(popupYesButton);
    // hook
    const[resetPopUp]=useResetPopupState()
    // handling background scroll of body
    useEffect(() => {

        document.body.style.overflow = 'hidden'
        return () => {
            document.body.style.overflow = 'visible'
            //reset to default values
            resetPopUp()
        }
    }, [])
    //event handlers
    const toggleOpenOrClosePopup = () => {
        setOpenOrClosePopup((prev) => { return !prev })
    }

    return (
        openOrClosePopup && (
            <div className={styles.popupWrap}>
                <div className={styles.closeButtonWrap}>
                    {contentCloseMarkPopup && (
                        <div
                            className={styles.closeButton}
                            onClick={toggleOpenOrClosePopup}
                        >
                            <Image src={closeButton} layout="fill" />
                        </div>
                    )}
                </div>
                <div className={styles.boxBig}>
                    <div className={styles.boxSmall}>
                        {contentCloseMarkPopup && (
                            < div className={styles.innerCloseWrap} onClick={toggleOpenOrClosePopup}>
                                <Image src={innerClose} width="20" height="20" />
                            </div>
                        )}
                        {thumbsUpPopup && (
                            <div className={styles.popUpMainImage}>
                                <Image src={thumbsUpImg} layout="fill" />
                            </div>
                        )}
                        {thumbDownPopup && (
                            <div className={styles.popUpMainImage}>
                                <Image src={thumbsDownImg} layout="fill" />
                            </div>
                        )}
                        <div className={styles.newHeading}>
                            <div className={styles.newHeadingInner}>
                                <h1> {headingPopup}
                                </h1>
                            </div>
                        </div>
                        <p className={styles.prompt}>
                            {customContent}
                        </p>
                        {(okButtonPopup || yesButtonPopup || cancelButtonPopup) && (
                            <div className={styles.actionButtions}>
                                {okButtonPopup && <div className={styles.actionButtionWrap} onClick={okButtonPopup.onClick}>
                                    <button className={styles.buttonSmall} >Ok</button>
                                </div>
                                }
                                {yesButtonPopup && <div className={styles.actionButtionWrap} onClick={yesButtonPopup.onClick}>
                                    <button className={styles.buttonSmall} >Yes</button>
                                </div>}
                                {cancelButtonPopup && <div className={styles.actionButtionWrap} onClick={cancelButtonPopup.onClick}>
                                    <button className={styles.buttonSmall} >Cancel</button>
                                </div>}
                            </div>
                        )}
                    </div>
                </div>
            </div >)
    )
}
export default GlobalPopup

The GlobalPopup makes use of the states that are available globally to render UI. The code inside the useEffect block prevents the scroll of the body when the popup is active and makes overflow visible when the popup is inactive.

Popup CSS

src/components/globalPopup/globalPopup.module.css

.popupWrap {
  position: fixed;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.1);
  background-size: cover;
  top: 0;
  left: 0;
  z-index: 99;
}
.closeButtonWrap {
  position: absolute;
  top: 10%;
  right: 10%;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}
.closeButton {
  position: relative;
  width: 30px;
  height: 30px;
}
.boxBig {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.boxSmall {
  background: #fff;
  border-radius: 16px;
  border-top: 6px solid #5ddfb6;
  padding: 40px 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.actionButtions {
  padding: 15px 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.actionButtionWrap {
  margin: 0px 5px;
}
.actionButtionWrap button {
  cursor: pointer;
}
.popUpMainImage {
  position: relative;
  width: 100px;
  aspect-ratio: 1/1;
}
.specificEmail {
  color: #9e8959;
}

.newHeading {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.newHeadingInner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
}
.newHeading h1 {
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 500;
  color: #000000;
  text-align: center;
}
.prompt {
  font-size: 16px;
  line-height: 150%;
  margin-top: 10px;
  text-align: center;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.68);
}
.prompt span {
  color: #1cd7b8;
}
.innerCloseWrap {
  display: none;
}
.buttonSmall {
  width: 74px;
  height: 27px;
  font-family: "Poppins";
  font-size: 0.8rem;
  line-height: 24px;
  background: #58c0ce;
  border-radius: 3px;
  border-color: #525251;
  box-shadow: 0 0 0 0;
  color: white;
  border: none;
  padding: 0;
  padding: 2px 8px 2px 8px;
  transition: 0.4s;
}

.buttonSmall:hover {
  background: #5ddfb6;
}
@media screen and (max-width: 560px) {
  .prompt {
    font-size: 14px;

    margin-top: 10px;
  }
  .closeButtonWrap {
    display: none;
  }
  .boxBig {
    width: 80%;
  }
  .boxSmall {
    width: 100%;
  }
  .innerCloseWrap {
    display: block;
    position: absolute;
    width: 30px;
    right: 0px;
    top: 15px;
  }
  .popUpMainImage {
    position: relative;
    width: 70px;
    aspect-ratio: 1/1;
  }
  .newHeading h1 {
    margin-bottom: 5px;
    font-size: 25px;
    font-weight: 500;
    color: #000000;
  }
  .prompt {
    margin-top: 10px;
  }
}
@media screen and (max-width: 425px) {
  .boxSmall {
    padding: 40px 50px;
  }
}

This is the CSS used for the popup. The popup is mobile responsive also.

Include Component

src/pages/_app.js

import { RecoilRoot } from 'recoil'
import GlobalPopup from '../components/globalPopup'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
    return (
        <RecoilRoot>
            <>
                <Component {...pageProps} />
                <GlobalPopup/>
            </>
        </RecoilRoot>)
}

export default MyApp

To make the popup available as a global entity in the application. It is included as a component in _app.js. The component is wrapped with the context provided by RecoilRoot to ensure the availability of atom states.

Test the Popup

src/pages/testPopUps/index.js

import React from 'react'
import { usePopUp } from '../../hooks/usePopUp';

const TestPopup = () => {
    const [showPopup, hidePopup] = usePopUp()
    // showPopup - use it for diplaying popups with specified options
    // hidePopup - use it for hiding the popup (as well as to reset to default state)
    return (
        <div>
            <button onClick={() => {
                showPopup({
                    ThumbUp: true,
                    heading: 'Success !',
                    showClose: true,
                    customContent: <>The process is <span>Successful</span></>
                })
            }}>
                Activate Popup 1
            </button>
            <button onClick={() => {
                showPopup({
                    showClose: true,
                    ThumbDown: true,
                    heading: 'Error !',
                    customContent: <>An Error Occured.</>
                })
            }}>
                Activate Popup 2
            </button>
            <button onClick={() => {
                showPopup({
                    customContent: <>An account with email <span>John@gmail.com</span> already exist</>,
                    onCancelpressed: () => {
                        console.log("onCancelpressed");
                        hidePopup()
                    },
                    onYesPressed: () => {
                        console.log("onYesPressed");
                        hidePopup()
                    }
                })
            }}>
                Activate Popup 3
            </button>
            <button onClick={() => {
                showPopup({
                    customContent: <>An account with email <span>John@gmail.com</span> already exist</>,
                    onOkPressed: () => {
                        console.log("onOkPressed");
                        hidePopup()
                    }
                })
            }}>
                Activate Popup 4
            </button>
        </div >
    )
}
export default TestPopup

For testing the popup we created a page, in that page, there are four buttons and each of these buttons presents the popup in a different specification.

Using the showPopup() we can configure the popup with various options.

Output

In this way, the same component is made to be reused, rendered conditionally and controlled from anywhere in the application.

Thank you.

Async Task inside Loop in Javascript

Bijish O B — Sun, 14 Aug 2022 14:41:00 +0000

In a project, I had a situation to perform an asynchronous task inside a loop. I majorly used the map method to do looping tasks.

myIterable.map((item) => {
    //  task 1 - normal
    //  task 2 - async
})

But the map method does not natively support async tasks, when something is made asynchronous inside the map method it returns some 'pending promises'.

[ Promise{ <pending> },... ]

To make the map method asynchronous I wrapped it with the concept of promises.

The logic is split into three code blocks.

In the first block, we have a function named myAsyncIteration which returns a promise. Inside the promise we perform the asynchronous task and we can confirm the completion by resolving the promise by passing someData

const myAsyncIteration = (item) =>
    new Promise(async (resolve, reject) => {
        //  task 1 - normal
        //  task 2 - async
        return resolve(someData)

    })

In the second block, inside myAsyncLoop we map over every instance in myIterable to myAsyncIteration that returns a promise.

If there are 'n' instances inside myIterable then 'n' promises will be returned. This is wrapped with Promise.all which will ensure all the promises are executed and will contain the data which was resolved from the promises.

const myAsyncLoop = async () => {
    return Promise.all(myIterable.map(async (item) =>
        myAsyncIteration(item)

    ))
}

In the third block, we call myAsyncLoop which returns an array of data sent after resolving each promise. It means 'n' number of someData contributes to arrayOfSomeData.

myAsyncLoop().then((arrayOfSomeData) => {
    console.log(arrayOfSomeData)
    // perform the other work

})

In this way, I performed async tasks inside the map method. This is my first blog post, please share your thoughts and if there are any better methods please mention them also.

Thank you.

DEV Community: Bijish O B

Introducing nextjs-server-action-tester

Why I Built nextjs-server-action-tester 💡

What Is nextjs-server-action-tester? 🤖

Key Features ✨

Libraries Used 🛠️

How to Use nextjs-server-action-tester 🚀

Why It Improves Developer Experience 🚀

Links 🔗

Contributing 🤝

A Developer's Journey: Building GPT-in-Terminal, a Side Project That Unlocks the Power of OpenAI's GPT-3 in terminal

Finding all children of a node in a tree

Get sub-node ids

List sub-nodes

Output

Using a Custom Hook to Control a Popup

Intro

Folder Structure

States

Custom Hook

Popup Component

Popup CSS

Include Component

Test the Popup

Output

Async Task inside Loop in Javascript

Why I Built `nextjs-server-action-tester` 💡

What Is `nextjs-server-action-tester`? 🤖

How to Use `nextjs-server-action-tester` 🚀