DEV Community: Asim Dahal

amazing read

Asim Dahal — Fri, 05 Sep 2025 05:36:26 +0000

Mohamed Hassan

Sep 4 '25

Simply Order (Part 2) — Designing and Implementing the Saga Workflow with Temporal

#microservices #temporal #saga #distributedtransaction

Comments

6 min read

Introducing React hook for stateful CRUD 🚀️‍🔥

Asim Dahal — Fri, 23 Jul 2021 06:54:50 +0000

As a react developer, one of the challenging thing is managing the collection of data in the state and manupulating it. Performing stateful CRUD and maintaining is quite a tedious process. While working with redux-toolkit, I found createEntityAdapter method, which has a very nice API to perform operation in a stateful data. So, I thought about wrapping the createEntityAdapter method with a hook which provides all the method required to perform state manipulation.

use-stateful-adapter

useStatefulAdapter is the hook over createEntityAdapter method provided by @redux/toolkit that helps to maintain CRUD operation of the state.

useStatefulAdapter provides an API to manipulate the state without worrying about handling all the states.

Reduces boilerplate for creating reducers that manage state.
Provides performant CRUD operations for managing stateful entity collections.

usage

const [state, handler, { selectById }] = useStatefulAdapter<{
  id: string;
  text: string;
}>({
  name: 'my-adapter',
  selectId: (item) => item.id,
});

Installation

npm i use-stateful-adapter

yarn add use-stateful-adapter

The initialisation

import * as React from 'react';
import useStatefulAdapter from 'use-stateful-adapter';

export default function App() {
  const [state, handler, { selectById }] = useStatefulAdapter<{
    id: string;
    text: string;
  }>({
    name: 'my-adapter',
    selectId: (item) => item.id,
  });
}

useStatefulAdapter returns [
currentState,
handler,
selectors
]

`handler` methods

addOne: Add one entity to the collection
addMany: Add multiple entities to the collection
addAll: Replace current collection with provided collection
removeOne: Remove one entity from the collection
removeMany: Remove multiple entities from the collection, by id or by predicate
removeAll: Clear entity collection
updateOne: Update one entity in the collection
updateMany: Update multiple entities in the collection
upsertOne: Add or Update one entity in the collection
upsertMany: Add or Update multiple entities in the collection
map: Update multiple entities in the collection by defining a map function, similar to Array.map

`selector` methods

selectById(id:string):void: Select item by ID

example todo application

import * as React from 'react';
import useStatefulAdapter from '../src';

export default function App() {
  const [state, handler, { selectById }] = useStatefulAdapter<{
    id: string;
    text: string;
  }>({
    name: 'my-adapter',
    selectId: (item) => item.id,
  });
  const [currentId, setCurrentId] = React.useState<string | null>(null);

  const [todo, setTodo] = React.useState('');

  const handleSubmit = React.useCallback(
    (e) => {
      e.preventDefault();
      if (currentId) {
        handler.updateOne({
          id: currentId,
          changes: {
            text: todo,
          },
        });
        setCurrentId(null);
      } else {
        handler.addOne({
          id: String(Math.random()),
          text: todo,
        });
      }
      setTodo('');
    },
    [handler, todo]
  );

  const currentValue = React.useMemo(() => {
    return selectById(currentId!);
  }, [currentId]);

  React.useEffect(() => {
    if (!currentValue) return;
    setTodo(currentValue.text);
  }, [currentValue]);

  return (
    <form onSubmit={handleSubmit} className="App">
      <input
        key={currentId}
        name="todo"
        value={todo}
        onChange={(e) => setTodo(e.currentTarget.value)}
        placeholder="Add Todo"
        type="text"
      />
      <button type="button" onClick={handler.removeAll}>
        Remove All
      </button>
      {currentId && <div>Currently editing {currentId}</div>}
      {state.map((item) => (
        <React.Fragment key={item.id}>
          <li>{item.text}</li>
          <button type="button" onClick={() => handler.removeOne(item.id)}>
            Delete
          </button>
          <button type="button" onClick={() => setCurrentId(item.id)}>
            Edit
          </button>
        </React.Fragment>
      ))}
    </form>
  );
}

Github link

Codesandbox link

with ❤️ from Asim

Things you might not know about Typescript

Asim Dahal — Mon, 21 Jun 2021 04:00:49 +0000

Things you might not know about Typescript

Typescript is an awesome language. I have been using it for a year now and my love towards the language is infinity. It's commonly known as the superset of Javascript, but it's much more than that. Typescript helps a lot during the day to day development work, also it helps a lot to avoid the unnecessary painful bugs.

Here, in this articles I am going to present some features ina Typescript that you might not know and that may come handy in your day to day life. Are you excited to go through the features?

@ts-expect-error

Let's assume a case where the ts compiling is yelling at you that you are doing something wrong,

const multiply = (a:number,b:number) => a+b;
multiply('12',13);

Here, TS compiler yells at you with the message
Argument of type 'string' is not assignable to parameter of type

Let's say you cannot change the type of the first argument and temporarily want to surpress the error being shown by the TS compiler, normally we use @ts-ignore to surpress the error

const multiply = (a:number,b:number) => a*b;
// @ts-ignore
multiply('12',13);

Now, after some time, you fixed the error and changed the first argument of the multiply function from '12' to 12

const multiply = (a:number,b:number) => a+b;
// @ts-ignore
multiply(12,13);

but, you forgot to remove the @ts-ignore directive we used previously, so basically it will keep ignoring the next line forever unless you remove it which may cause bug in the future.

So in this case, we can make use of @ts-expect-error directive, which does the same job as the @ts-ignore directive but as soon as the error is fixed, the TS compiler yells at you.

const multiply = (a:number,b:number) => a+b;
// @ts-expect-error
multiply(12,13);

Unused '@ts-expect-error' directive.

This reminds you to remove the directive as soon as the error is fixed.

never type

You have a function that takes an error status code and always throws an error according to the status, the never type comes handy when you know a function is never going to reach it's end point.

The difference between never and void is, while void means atleast undefined or null is being returned, never means the function's end point is never reached.

function throwError(error: string): never { 
        throw new Error(error); 
}

Template Literal Types

Template literal types are similar to string litreral types in javascript but are specific to types. Let's say you have a library that implements a popover and there is a type for positioning the popover

type popoverPositions = 'top'|'bottom'|'left'|'right'|'top-left'|'top-right'|'top-center'|'bottom-left'|'bottom-right'|'bottom-center';

It can be hectic to combine all the possible permutations and combinations for all the types.

Using template literal types, you can separate the directions and combine the types to get a new type that consists of all the possible combinations

type positions = 'top'|'bottom'|'center';
type directions = 'left'|'right'|'center'
type popoverPositions = positions | directions | `${positions}-${directions}`

which will generate all the types as

type popoverPositions = positions | directions | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center-left" | "center-right"

Null assertions

Null assertions basically tells your TS compiler that your value is nor null neither undefined. Let's say you have initialized the value as
let myNumber:null | number = null;
but later on you update the value of myNumber
myNumber = 69;

Now, lets assume you have a function that accepts only numbers,

const add = (a:number,b:number) => {
    return a + b;
}
add(myNumber,1);

The compiler yells at you saying
Argument of type 'null' is not assignable to parameter of type 'number'.

So here, you can make use of null assertions with bang ! in the end of the variable to tell the compiler that the value we are sending is not null.

const add = (a:number,b:number) => {
    return a + b;
}
add(myNumber!,1);

The code above compiles successfully.

Merging Interfaces

Megring Interfaces is the type of declaration merging, when you have two interfeces with the same name, it merges and creates a single interface

interface Box {
  height: number;
  width: number;
}
interface Box {
  scale: number;
}
let box: Box = { height: 5, width: 6, scale: 10 };

So here, we can create two separate interfaces with the same name which in turn gets merged to a single one and can be used as per the example mentioned above.

I hope, you learnt something new from the list above.

You can follow me on my Twitter, Github

Making day-night animation only using svg and css animations

Asim Dahal — Mon, 12 Apr 2021 04:29:55 +0000

Hey guys, I have tried making day and night animation with the help of css and svgs for all the designs. Hoping for suggestions on what can be improved.

Implementation
Source code

Order of arguments in HOF

Asim Dahal — Wed, 01 Jan 2020 14:32:08 +0000

Does anybody know what's the specific reason for having the arguments in the methods like map, reduce etc which are found in different js libraries is in the data-first, function last order?

Let's take an example below

function square(n) {
  return n * n;
}

_.map([4, 8], square);

So in the above method _.map, the first argument is array while the second is the method. Is there any specific reason behind this?

Client-side image upload ⬆️ in React

Asim Dahal — Sun, 29 Dec 2019 08:13:18 +0000

Image upload is one of the important and most used features in your web application. Let's take an example of facebook when you have to update your profile picture, you need to upload an image so that facebook can use it as your profile picture.

Today we will learn to build a simple image uploader which enables the user to select the image and display it in the browser. I hope it will be fun going through the tutorial and getting something out of it 😁. Let's go.

Setting up the project

For setting up your project, you can use either create-react-app or also you can go to CodeSandBox.

After creating your project, at first, let's create a simple file input which accepts images for upload

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <input type="file" accept="image/*" multiple = "false" />
    </div>
  );
}

Here we are creating a file input that accepts only images and will allow uploading only one file at a time.

Now, let's create a container where the uploaded image will be displayed.

function App() {
  return (
    <div className="App">
      <input type="file" accept="image/*" multiple = "false"/>
      <div
        style={{
          height: "60px",
          width: "60px",
          border: "2px dashed black"
        }}
      >
        <img
          style={{
            width: "100%",
            height: "100%",
            position: "absolute"
          }}
        />
      </div>
    </div>
  );
}

Here, we created a container where the image that is uploaded will be shown and also in the future, will be used as the image upload button.
**I wrote the inline styles for tutorial purposes.

Now the fun part let's add an onChange handler in the image input and then access the image file in the handleImageUpload method.

function App() {
  const handleImageUpload = e => {
    const [file] = e.target.files;
    if (file) {
      console.log(file);
    }
  };

  return (
    <div className="App">
      <input type="file" accept="image/*" onChange={handleImageUpload} multiple = "false" />
      <div
        style={{
          height: "60px",
          width: "60px",
          border: "1px dashed black"
        }}
      >
        <img
          style={{
            width: "100%",
            height: "100%",
            position: "absolute"
          }}
        />
      </div>
    </div>
  );
}

We attach an handleImageUpload method to the onChange event in the file input we created. In the handleImageUpload method we get an e(event) object which gives access to the list of files uploaded via the file input we created. We are uploading only one image so we will be accessing the first file from the FileList and display the file for now.

Now we will attach a ref to the img we created where we can display the uploaded image using the useRef() hook.

function App() {
  const uploadedImage = React.useRef(null);
  const handleImageUpload = e => {
    const [file] = e.target.files;
    if (file) {
      console.log(file);
    }
  };

  return (
    <div className="App">
      <input type="file" accept="image/*" onChange={handleImageUpload} />
      <div
        style={{
          height: "60px",
          width: "60px",
          border: "1px dashed black"
        }}
      >
        <img
          ref={uploadedImage}
          style={{
            width: "100%",
            height: "100%",
            position: "absolute"
          }}
        />
      </div>
    </div>
  );
}

Now we will be using the FileReader constructor in order to read the content of the file and will attach the content to the img we attached the ref to.

function App() {
  const uploadedImage = React.useRef(null);

  const handleImageUpload = e => {
    const [file] = e.target.files;
    if (file) {
      const reader = new FileReader();
      const {current} = uploadedImage;
      current.file = file;
      reader.onload = (e) => {
          current.src = e.target.result;
      }
      reader.readAsDataURL(file);
    }
  };

  return (
    <div className="App">
      <input type="file" accept="image/*" onChange={handleImageUpload} />
      <div
        style={{
          height: "60px",
          width: "60px",
          border: "1px dashed black"
        }}
      >
        <img
          ref={uploadedImage}
          style={{
            width: "100%",
            height: "100%",
            position: "absolute"
          }}
        />
      </div>
    </div>
  );
}

In the handleImageUpload method we create a reader using FileReader constructor and then select the current from the uploadedImage ref which represents the img element. We then attach an onload event listener to the reader we created which when loaded will attach the file url it will read to the img element. We then read the file as URL using the reader.readAsDataURL() method and pass the file selected into it.

So let's see our progress till now

Now lets remove that ugly input button and use the box created as the image uploader

function App() {
  const uploadedImage = React.useRef(null);
  const imageUploader = React.useRef(null);

  const handleImageUpload = e => {
    const [file] = e.target.files;
    if (file) {
      const reader = new FileReader();
      const { current } = uploadedImage;
      current.file = file;
      reader.onload = e => {
        current.src = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center"
      }}
    >
      <input
        type="file"
        accept="image/*"
        onChange={handleImageUpload}
        ref={imageUploader}
        style={{
          display: "none"
        }}
      />
      <div
        style={{
          height: "60px",
          width: "60px",
          border: "1px dashed black"
        }}
        onClick={() => imageUploader.current.click()}
      >
        <img
          ref={uploadedImage}
          style={{
            width: "100%",
            height: "100%",
            position: "absolute"
          }}
        />
      </div>
      Click to upload Image
    </div>
  );
}

Here we create a imageUploader ref and assign it to the file input, we then hide the ugly file input element using the css display:none. After that we will attach an onClick listener to the div which clicks the file input when the div is clicked, so that means the image can be uploaded when the div is clicked. We apply some styling to our parent container so that everything appears in the center, now lets see how our output looks like.

You can find the completed code here

Thankyou.

You can also follow me on Twitter.

Cancel navigation on route change.

Asim Dahal — Mon, 23 Dec 2019 06:18:42 +0000

I have a component which requires confirmation before navigating to another component. There is a Prompt component in react router which enables to ask confirmation before navigating to another component but I can't find any similar solution in reach-router. Is there any way I can ask the user for confirmation before they navigate to another route and cancel the navigation if the user responds no?

Simple search form in REACT using hooks 🔎.

Asim Dahal — Sat, 14 Sep 2019 06:52:49 +0000

Searching is one of the most important components of your web application. Let's take an example of an E-commerce platform where there are thousands of item on sale but to find the specific item you are looking for, you need to search 🔍 for the item using the search component provided by the platform.

Today we will learn to build a simple search form which searches from a list of data using react.

Setting up the project

For setting up your project, you can use either create-react-app or also you can go to CodeSandBox.
You can find an article on setting up your react project here.

After creating the project, at first, let's make a simple UI that has an input field and displays the list of search results.

Go to the index.js file which is at the root of your project and clean up all the code inside and add the following code.



import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
      />
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  );
}

In the component above, we create a simple input form(which currently doesn't do anything) and a mock list of the results that are going to be displayed.

Now we apply two-way data binding to the input field, which basically takes the value from the user and saves it into the state.



import React from "react";
import ReactDOM from "react-dom";

function App() {
 const [searchTerm, setSearchTerm] = React.useState("");
  const handleChange = event => {
    setSearchTerm(event.target.value);
  };
  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  );
}

We have now created an state named searchTerm which saves the data from the search input on every occurance of the change event. The handleChange method takes the event object as the arguement and sets the current value of the form to the searchTerm state using setSearchTerm method provided by React.useState method.

Now we create a mock list of data and search the data based on the input provided by the user on the input box we created.



import React from "react";
import ReactDOM from "react-dom";

const people = [
  "Siri",
  "Alexa",
  "Google",
  "Facebook",
  "Twitter",
  "Linkedin",
  "Sinkedin"
];

function App() {
 const [searchTerm, setSearchTerm] = React.useState("");
 const [searchResults, setSearchResults] = React.useState([]);
 const handleChange = event => {
    setSearchTerm(event.target.value);
  };

  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  );
}

In the above code snippet, we create a mock list/array named people, from which we are going display the list in our component. We also create a state named searchResults which is used to set the search result.

Now we apply the search functionality to our component.



import React from "react";
import ReactDOM from "react-dom";

const people = [
  "Siri",
  "Alexa",
  "Google",
  "Facebook",
  "Twitter",
  "Linkedin",
  "Sinkedin"
];

function App() {
 const [searchTerm, setSearchTerm] = React.useState("");
 const [searchResults, setSearchResults] = React.useState([]);
 const handleChange = event => {
    setSearchTerm(event.target.value);
  };
 React.useEffect(() => {
    const results = people.filter(person =>
      person.toLowerCase().includes(searchTerm)
    );
    setSearchResults(results);
  }, [searchTerm]);

  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
         {searchResults.map(item => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Now in the above code snippet, React.useEffect hook is used which executes whenever the dependency of the method gets changed. The React.useEffect hook takes two arguments. The first argument is the function to execute when the data in the dependency is modified and the second argument is an array of dependencies the React.useEffect hook is dependent on. So whenever the value of the dependencies in the React.useEffect hook changes the function in its first argument executes.

So in the React.useEffect hook above, the dependency is searchTerm which gets changed on every input by the user which in turn executes the function in the first argument of the React.useEffect hook. The following function gets executed



() => {
    const results = people.filter(person =>
      person.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setSearchResults(results);
  }

In the above function, the filter method is applied to the people array which returns a new array according to the condition returned in every iteration. The condition is person.toLowerCase().includes(searchTerm.toLowerCase()) which means if the person in the people's list includes the searchTerm then return true otherwise return false.

After the filtered list is set on the searchResults state using the setSearchResult provided by React.useState hook.

Now we have set the search results to the state, we display it by using the searchResults.map method in our component which iterates over all the searchResults and renders them inside the ul.



  <ul>
     {searchResults.map(item => (
          <li>{item}</li>
     ))}
  </ul>

The final result looks something like this

You can find the completed code here

Thankyou.

You can also follow me on Twitter.

Preparing for a tech talk.

Asim Dahal — Thu, 05 Sep 2019 02:27:43 +0000

Hello guys. I am giving a tech talk about react(the present and the future) on a local meetup this week.
This is my first time so I am a little bit anxious about it.

Any ideas about how to prepare for it and how to make myself confident before the meeting would be great.

Also you can suggest me about the topics i can discuss in the talk.

Thank you.

Contributing to open source community

Asim Dahal — Mon, 19 Aug 2019 15:02:47 +0000

Hello guys, I wanted ideas about contributing towards opensource community. I see so many people talking about open source and other platforms. I also want to get involved but I don't know how and from where to start. Suggestions would be awesome.

Using grep and history command to find previous commands in Linux

Asim Dahal — Sat, 10 Aug 2019 14:23:18 +0000

You input command in your linux terminal which is very long and hard to remember. It is needed to input the command again to the terminal. You find it hard to search for the command that is needed. You keep pressing up arrow again and again until the required command is found. Time is wasted during this process.

This is where history command comes in. Go to your linux terminal and type the command history. You will find the list of commands you previously used like this.

In the above image you can see all the previous commands you have used along with their respective numbers. Now let's assume you have to use the command git clone https://github.com/asimdahall/wethanks/ which is number 56. Now you can execute the command by typing ```

asims-MacBook-Pro:~ !56

which will execute the command on number 56.
Now let'say we have to search the previous command that we have used. For that, we can combine grep with the history command. Let's take a case here. I have to search for the command 
```xcrun

 simctl shutdown all 

``` which I have used before but I don't remember the full command and only remember `xcrun`. So for searching the command, we can combine the `history` and `grep` command like this:

asims-MacBook-Pro:~ asim$ history|grep xcrun

after that you will get the following output

422 xcrun simctl shutdown all
452 xcrun simctl shutdown all
454 xcrun simctl shutdown all
502 history|grep xcrun


you get all the commands where `xcrun` command is used with their respective numbers. Now you can execute the command like this:

asims-MacBook-Pro:~ asim$ !422

which will then execute the needed command.

 I am sorry for the bad grammar. Feedbacks and suggestions are kindly welcome. Thank you. 


You can follow me on [Twitter](https://twitter.com/asimdahall)

React state management. What should I use?

Asim Dahal — Sat, 03 Aug 2019 20:25:29 +0000

When I first started developing apps in react, I used redux along with redux-saga for state management and async tasks but after I came to know about the react hook 'useReducer' combined with the context API, I don't feel there is any necessity to use redux but I say many big companies using redux for state management. I am confused what should I be using. Should I stick to using redux or should I use the new useReducer hook combined with context API?

DEV Community: Asim Dahal

amazing read

Simply Order (Part 2) — Designing and Implementing the Saga Workflow with Temporal

Introducing React hook for stateful CRUD 🚀️‍🔥

use-stateful-adapter

usage

Installation

handler methods

selector methods

example todo application

Things you might not know about Typescript

Things you might not know about Typescript

@ts-expect-error

never type

Template Literal Types

Null assertions

Merging Interfaces

Making day-night animation only using svg and css animations

Order of arguments in HOF

Client-side image upload ⬆️ in React

Setting up the project

Cancel navigation on route change.

Simple search form in REACT using hooks 🔎.

Setting up the project

Preparing for a tech talk.

Contributing to open source community

Using grep and history command to find previous commands in Linux

React state management. What should I use?

`handler` methods

`selector` methods