DEV Community: Sourabh Parmar

Setting up Visual Studio Code for React Development

Sourabh Parmar — Tue, 21 Feb 2023 08:51:00 +0000

https://iamsourabhh.dev/setting-up-visual-studio-code-for-react-development

How can you do your custom implementation for events.

Sourabh Parmar — Tue, 15 Dec 2020 09:16:29 +0000

I have been working on Node for quite some time and have extensively used Events. But never knew how it works internally until very recently.

What are Events?

So basically, when something happens in your app like a user gets logged in, you fire an event to notify everybody listening to that event, that a user has logged in.


function login(data) {
    // fires an event
    CustomEvent.emit('user_logged_in', data);
}

function someOtherFunc() {
    // event listeners
    CustomEvent.subscribe('user_logged_in', function(data) {
        // do some operation
    })
}

Events Implementation

The Event class that we are designing will have the following methods:

emit - It fires an event, with an event name and data.
subscribe - It subscribes to the event and gets executed every time the given event is fired.
unsubscribe - It will unsubscribe the function from the event.
unsubscribeAll - It will unsubscribe all the functions listening to that event.

/**
 * Disclaimer: This is not a production-quality code, lots of checks are not in place.
 */
function CustomEvent() {
    // listers is an object
    // it will be a map of event_name
    // and all the functions subscribing to it
    this.listeners = {};
}

CustomEvent.prototype.subscribe = function(eventName, someFunction) {
    // checks if eventName exists
    // if doesn't initialise a new array
    // else push the function to the existing array
    if(!this.listeners[eventName]) {
        this.listeners[eventName] = [someFunction];
        return;
    }
    this.listeners[eventName].push(someFunction);
}

CustomEvent.prototype.emit = function(eventName, data) {
    // gets the event name
    // and loops over all the functions that it has to call
    const listeners = this.listeners[eventName];
    listeners && Array.isArray(listeners) && listeners.map(listenr => {
        listenr.call(null, data);
    })

}

CustomEvent.prototype.unsubscribeAll = function(eventName) {
    this.listeners[eventName] = undefined;
}

CustomEvent.prototype.unsubscribe = function(eventName, someFunction) {

    const funcs = this.listeners[eventName];

    const filteredFuncs = funcs.filter(func => func.toString() !== someFunction.toString());

    this.listeners[eventName] = filteredFuncs;

}

If you guys have a better implementation for unsubscribing in mind, please suggest.
Keep coding. Keep learning.
Thanks.

How I use axios in React

Sourabh Parmar — Mon, 30 Sep 2019 10:52:08 +0000

Axios is the one of the most common networking library used in React Ecosystem. We will go through multiple features of axios, which might make your life easier. The whole blog is based on one philosophy, DRY(Do Not Repeat Yourslef)

Q) I have to set the base path each time I make a request via axios, what other approach can I use?

Common Approach

import axios from 'axios';
import { BASE_PATH } from "./main.local";

const getBlogs = () => {
  return axios.get(BASE_PATH+"getBlogs");
}

The other approach that I mostly use is to create an axios instance for a base path, and use that axios instance so we don't need to add base path explicitly in every request we make, we can also define timeout, default headers, etc.

import axios from "axios";

export const axiosInstance = axios.create({
  baseURL: 'https://iamsourabhh.com/',
  timeout: 1000,
});

Now when you need to make a network request, import the axios instance instead of the node_module axios.

import { axiosInstance } from './axiosInstance';
import {BASE_PATH} from "./main.local";

const getBlogs = () => {
  return axiosInstance.get("getBlogs");
}

Q) I have to add auth token in my request explicitly in every request, what other approach I can use?

The axios provides a feature named interceptors, if you add a request interceptor on axios instance, every request will go through the interceptor before hitting to server.

import axios from "axios";

export const axiosInstance = axios.create({
  baseURL: 'https://iamsourabhh.com/',
  timeout: 1000,
});

axiosInstance.interceptors.request.use(function (config) {
    config.headers = { ...config.headers, auth_token: getAuthToken() };
    // you can also do other modification in config
    return config;
  }, function (error) {
    return Promise.reject(error);
  });

Q) I have to explicitly write logic to handle auth failures, what other approach can I use?

In this case, we will use a response interceptor, the request will go through the response interceptor, before returning the actual response.

import axios from "axios";

export const axiosInstance = axios.create({
  baseURL: 'https://iamsourabhh.com/',
  timeout: 1000,
});

axiosInstance.interceptors.request.use(function (config) {
    config.headers = { ...config.headers, auth_token: getAuthToken() };
    // you can also do other modification in config
    return config;
  }, function (error) {
    return Promise.reject(error);
  });

axiosInstance.interceptors.response.use(function (response) {
    if(response.status === 401) {
        // your failure logic
    }
    return response;
  }, function (error) {
    return Promise.reject(error);
  });

I hope you enjoyed this article, I am looking to join some open source project based on JS, if you guys got any ideas, let me know. Thanks.

Basic Node Server Stuff

Sourabh Parmar — Fri, 25 Jan 2019 04:47:03 +0000

If you have been thinking to start NodeJs in 2019. Here are some cool code snippets that can give you kickstart and let you know, how easy it is.

1) A simple server setup

2) Implementing routing in a simple server setup

3) Code to parse the incoming request body from the client

I hope these code snippets might have helped you. This is my first ever blog post, any feedback or ideas for any other articles are quite welcome!