gajraj

About

2026-08-22T00:00:00.000Z

Hi, I'm Gajraj Singh Chouhan.

I work at Adalat AI. I mostly write about software — bits of code I want to remember, tools I'm learning, the occasional rabbit hole.

Find me on GitHub or drop a line at gajrajgchouhan@gmail.com.

This blog is built with Eleventy and hosted on GitHub Pages. Source is on GitHub.

My Learning from Advent of TS 2023

2023-12-11T00:00:00.000Z

Day 1,2,3

East peasy for now.

Day 4

type Address = { address: string; city: string };
type PresentDeliveryList<T> = Record<keyof T, Address>;

Learnt that we can make object type using Record and key of.

Day 5

type SantasList<A extends readonly any[],B extends readonly any[]> = [...A, ...B];

You can concat arrays apparently.

Day 6

No idea !!

Day 7

type AppendGood<T extends Record<string, any>> = {[K in keyof T as `good_${string & K}`] : T[K]};

This is string interpolation I believe? Just renaming keys

Day 8

type RemoveNaughtyChildren<T> = {[K in keyof T as K extends `naughty_${string}` ? never : K] : T[K]};

Filtering keys out by making them never !!

Day 9

Wtf? How do I reverse a type?

Day 10

type StreetSuffixTester<A extends string, B extends string> = A extends `${string}${B}` ? true : false;

Similar to the filtering types above.

Day 11

This was difficult, below is my attempt 1.

type SantaListProtector<T> = {readonly [K in keyof T] : (T[K] extends object ? SantaListProtector<T[K]> : T[K])};

I am not sure why this is not correct, the recursive type does not evaluate !!

{ readonly hacksore: SantaListProtector<() => 'santa'>; readonly somekey: string;}

I know the logic is flawed but the evaluation should throw errors and not just stop evaluating at the first level of recursion?

Second attempt !

type SantaListProtector<T> = T extends object ? {readonly [K in keyof T] : SantaListProtector<T[K]>} : T;

now the function got converted into empty type ??? why?

{ readonly hacksore: {}>; readonly somekey: string;}

Tips for better Linux experience as a dev.

2022-09-07T00:00:00.000Z

These tips are from my own experience.

Add a backup method.

I currently use a program called rclone to backup my stuff. I didn't want to install multiple programs for each cloud provider like Drive, Dropbox, also there is not much support in case of Linux. I found rclone to be highly customisable and easy to setup.

I have a script which I run every other day, you can run it manually or set up a cronjob.

#!/bin/bash

/usr/bin/rclone copy -L --update \
         --verbose --transfers 30  \
         --checkers 8 --contimeout 60s \
         --timeout 300s --retries 3 \
         --low-level-retries 10 --stats 1s \
         --max-size "50M" --exclude="**.mp4" \
         --exclude="**.mov" --exclude="**.mkv" \
         --exclude="**.m4v" --exclude="**.pgm" \
         --exclude="env/**" --exclude="__pycache__/**" \
         --exclude="node_modules/**" --exclude=".git/**" \
          "path" "google-drive:Notes"

Check this article on how to configure it on Linux - https://www.howtogeek.com/451262/how-to-use-rclone-to-back-up-to-google-drive-on-linux/.

Backup your configs.

Now vscode has added it's own sync which is connected your Github or MS Live account. For other editors you can find their config files and add it to the rclone !

Use scripting to automate your tasks.

You can use scripting languages such as Python or Bash to make functions that can be executed by you. Later you can add aliases to .bashrc file to run those files.

This will let you avoid writing same stuff again.

I also found this scripting kit recently, this might be good enough too - https://www.scriptkit.com/

Add a script for first time setup of your OS.

This script will remove programs that are not used by you and install useful ones. I have a script which is inspired by John Hammond's - https://github.com/JohnHammond/archlinux/blob/master/bootstrap.sh (s/o - checkout his yt if you are into cybersec!)

Tweak your terminal

Terminal is the most useful to any linux user, checkout https://ezprompt.net/ to customise your terminal.

Thank you for reading!

https://gajraj.dev

How to upload files using react-hook-form in a React app?

2022-05-21T00:00:00.000Z

This tutorial assume basic knowledge of react-hook-form, check out their helpful tutorials first here if you are new. https://react-hook-form.com/get-started/

Let's take an example of a form where you need to upload files.

First we setup react-hook-form with the form along with the validation. I have done it by simply using a <input type="file" />, we can easily setup the validation by using Yup.mixed() as the data type.

We need to understand how javascript really uploads a file in a secure manner. When user uploads a file the metadata and location is stored inside a File object. Details are available at https://developer.mozilla.org/en-US/docs/Web/API/File

To read the File object, use the FileReader object. It will read the file and get its content. It has lots of methods available,

readAsDataURL()

Used for reading the content as an base64 string.

Note : We cant directly decode the string as the data URL contains data: as the prefix of string.
```
        We will see how to do that in the backend below.
```
readAsText()

Used for reading the content as text string, best used with text.
readAsArrayBuffer()
readAsBinaryString()

The FileReader object has two attributes onload and onerror whose value will be a callback function when the file is successfully read and some error occured while reading respectively.

Also there is a result attribute from which you can access the read file.

Since the reading of file is async, we use Promise based approach to avoid any callback hells. The idea is to resolve the promise when the file is read successfully.

function readFile(file) {
    return new Promise((resolve, reject) => {
        const filereader = new FileReader();
        filereader.onload = () => {
            console.log(filereader.result);
            console.log(filereader.result.toString());
            resolve(filereader.result.toString());
        };
        filereader.onerror = (error) => reject(error);
        filereader.readAsDataURL(file);
    });
}

Lets complete the function to handle the submission of form.

<form
    onSubmit={handleSubmit(async (data) => {
        data.fileContent = await readFile(data.Image[0]);
        // upload to backend using API
    })}
>
    <input type="file" />
</form>

For reference the base64 string will look like this data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA9QAAAR+CAMAAAAGKo2wAAAC/ and will be large depending on the size of image.

As we can see the prefix contains the metadata about the file useful for telling its type. After string after base64, is the actual string in the base64 which we will read.

So how can we extract the actual string, why ofcourse using regular expressions. Just define a pattern similiar which can capture all the stuff before the actual string, then use the replace method of string to remove it ! We will read the base64 using Buffer object which is widely supported, I have used AWS in the backend for uploading the process will not be so different for other providers.

const uploadFile = async (base64Data) => {
    try {

        // read the file
        const buf = new Buffer.from(
            base64Data.replace(/^data:.+;base64,/, ""),
            "base64"
        );

        const check = await s3
            .upload({
                Bucket: BUCKET_NAME,
                Key: uuidv4(),
                Body: buf,
                ContentType: base64Data.substring(
                    base64Data.indexOf(":") + 1,
                    base64Data.indexOf(";")
                ),
            })
            .promise();
        return check.Location;
    } catch (error) {
        console.log(base64Data)
        console.error(error);
        return null;
    }
};

Another thing to learn after this is the streaming approach where we dont have to send the whole file due to the large size it may have. I hope to you use that soon in the future.

Did I tell you I love promises ? :P

How to switch between different git accounts on your machine?

2022-03-27T00:00:00.000Z

I'll show you how to switch between git accounts on your machine.

You might have a different git account for work and personal use, switching between those accounts can be time-consuming and prone to error. It's also pretty boring to do. You need to change your email, name and even create a ssh key to use with github.

So what can we do about it ? Why automation, of course!

source - https://www.reddit.com/r/ProgrammerHumor/comments/f0ag3i/automation/

I created a python script to automate this stuff. To use the script you need to create a file called gitConfig. You can create it using

git config --list > gitConfig

Now you need you copy contents of your .ssh folder to another folder called ssh. So the config file and ssh folder is all you need to switch a user.

To use the switch_users.py, install the required dependencies, and make sure the folder structure is of the form as given below.

You can switch your git accounts by specifing the folder name.

python3 switch_users.py -f folderName # folderName can be user or work for the tree below.

.
├── switch_users.py
├── user
│   ├── gitConfig
│   └── ssh
│       ├── authorized_keys
│       ├── id_ed25519
│       ├── id_ed25519.pub
│       ├── id_rsa
│       ├── id_rsa.pub
│       └── known_hosts
└── work
    ├── gitConfig
    └── ssh
        ├── authorized_keys
        ├── id_ed25519
        ├── id_ed25519.pub
        ├── id_rsa
        ├── id_rsa.pub
        └── known_hosts

How does this work?

The code copies the ssh folder for a user, and it sets the email and other keys by reading it from gitConfig.

You can find the whole code here - https://github.com/gajrajgchouhan/Switch_GitConfigs

Stepper Form using react-hook-form and yup

2022-03-27T00:00:00.000Z

Recently, I had to create to a stepper form for a website.

A stepper form looks like this -

source - https://material.angular.io/components/stepper/overview

To create this using react-hook-form, follow these steps.

Install the necessary dependencies

npm i react-hook-form react-form-stepper @hookform/resolvers yup

Create Stepper.js
Import dependencies.

import { FormOne, FormThree, FormTwoSelf, FormTwoOthers } from "./Forms";
import { Stepper } from "react-form-stepper";
import { useEffect, useRef, useState } from "react";
import { Button } from "react-bootstrap";
import { Loader } from "../../components/Loader";

This will import the stepper components, the forms itself and some react hooks.

Create the steps.

const steps = ["One", "Two", "Three"];

const onSubmit = (data) => {
    console.log(data);
    // add necessary logic like POSTing to API or something.
};

// self is a variable, we can use any type of conditions :D
// I'll tell how to create the forms in next steps.
function getStepContent(step, formContent, handleNext, ref, self) {
    switch (step) {
        case 0:
            return <FormOne {...{ handleNext }} _ref={ref} />;
        case 1:
            if (self) return <FormTwoSelf {...{ handleNext }} _ref={ref} />;
            else return <FormTwoOthers {...{ handleNext }} _ref={ref} />;
        case 2:
            return <FormThree {...{ formContent, handleNext }} _ref={ref} />;
    }
}

Now create the form stepper itself.

export const FormStepper = () => {
    const [activeStep, setActiveStep] = useState(0); // store which step is the form at.
    const [compiledForm, setCompiledForm] = useState({}); // store the whole form data
    const ref = useRef(null);
    const [self, setSelf] = useState(true);
    const [loading, setLoading] = useState(false);

    useEffect(() => console.log("compiledForm", compiledForm), [compiledForm]);

    useEffect(() => {
        if (activeStep === steps.length) {
            setLoading(true);
            const data = Object.values(compiledForm).reduce(
                (prev, curr) => ({
                    ...prev,
                    ...curr,
                }),
                {}
            ); 
            // the compiledForm is in form of {0: form_data, 1: form_data, .... } hence using the reducer
            console.log(data);
            // show a loader while POSTing
            // onSubmit(data);
            setLoading(false);
        }
    }, [activeStep]);

    const handleNext = (data) => {
        setCompiledForm({ ...compiledForm, [activeStep]: data });
        setActiveStep((prevActiveStep) => prevActiveStep + 1);
    };

    const handleBack = () => {
        if (activeStep > 0) {
            setCompiledForm({ ...compiledForm, [activeStep]: {} });
            setActiveStep((prevActiveStep) => prevActiveStep - 1);
        }
    };

    return (
        <div>
            <Stepper
                styleConfig={{
                    activeBgColor: "#3a936c",
                    completedBgColor: "#146240",
                    fontWeight: "bold",
                }}
                steps={steps.map((step) => ({
                    label: "Step " + step,
                }))}
                activeStep={activeStep}
            />
            <div>
                {activeStep === steps.length ? (
                    <div className="flex flex-col justify-center">
                        {loading ? (
                            <Loader />
                        ) : (
                            <div className="text-center">Completed</div>
                        )}
                        <Button variant="outline-success" onClick={() => {}}>
                            Close
                        </Button>
                    </div>
                ) : (
                    <div>
                        {getStepContent(
                            activeStep,
                            compiledForm,
                            handleNext,
                            ref,
                            self
                        )}
                        <div className="flex gap-2 justify-center">
                            <Button
                                variant="outline-danger"
                                onClick={handleBack}
                                disabled={activeStep === 0}
                            >
                                Back
                            </Button>
                            // the next button will click on hidden submit button hence allowing the validation to take place.
                            <Button
                                type="submit"
                                variant="outline-success"
                                onClick={() => ref.current.click()}
                            >
                                {activeStep === steps.length - 1
                                    ? "Finish"
                                    : "Next"}
                            </Button>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
};

Store the form components in Forms.js. We can import necessary dependencies and schemas for validation.

import { Controller, FormProvider, useForm } from "react-hook-form";
import {
    fundraiserTypeOptions,
    GradeOptions,
    fundraisingTypeOptions,
    formOneSchema,
} from "./schemas";
import { yupResolver } from "@hookform/resolvers/yup";
import { isAuthenticatedSelector } from "../../redux/selectors";
import { useSelector } from "react-redux";

export const FormOne = ({ handleNext, _ref }) => {
    const isAuthenticated = useSelector(isAuthenticatedSelector);
    const methods = useForm({
        resolver: yupResolver(formOneSchema[!!isAuthenticated]),
    });
    const { handleSubmit } = methods;

    return (
        <FormProvider {...methods}>
            <form
                onSubmit={handleSubmit(handleNext)}
                className="flex flex-col gap-4 my-4"
            >
                <RenderSelect
                    inputName="fundraisingType"
                    options={fundraisingTypeOptions}
                    placeholder="Fundraising Type"
                />
                <RenderSelect
                    inputName="fundraiserType"
                    options={fundraiserTypeOptions}
                    placeholder="You are raising funds for.."
                />
                {!isAuthenticated ? (
                    <>
                        <InputRender
                            inputName="Tel"
                            label="+91"
                            props={{
                                type: "tel",
                                placeholder: "Mobile Number",
                            }}
                        />
                        <div className="flex gap-2">
                            <InputRender
                                inputName="FirstName"
                                props={{
                                    type: "text",
                                    placeholder: "First Name",
                                    autoComplete: "given-name",
                                }}
                            />
                            <InputRender
                                inputName="LastName"
                                props={{
                                    type: "text",
                                    placeholder: "Last Name",
                                    autoComplete: "family-name",
                                }}
                            />
                        </div>
                        <InputRender
                            props={{
                                type: "text",
                                placeholder: "Address",
                                autoComplete: "street-address",
                            }}
                            inputName="StreetAddress"
                        />
                        <InputRender
                            props={{
                                type: "text",
                                placeholder: "City",
                                autoComplete: "address-level2",
                            }}
                            inputName="City"
                        />
                        <RenderSelect
                            inputName="State"
                            options={StatesOptions}
                            placeholder="State"
                        />
                    </>
                ) : null}
                // this is the important part as clicking on next will actually submit the form using this hidden button 
                <button type="submit" hidden={true} ref={_ref}></button>
            </form>
        </FormProvider>
    );
};

As seen above the hidden button allows the submission, this has to be used in each form. Also make sure the field names in each form is unique so that they are not over written after the form is finished.

I also used tailwind and bootstrap button in this project.

References:

https://codesandbox.io/embed/stepper-with-react-hook-form-qpjc1