DEV Community: Purbayan Chowdhury

Automate Your Vue Deployment: A Step-by-Step Guide to Using GitHub Actions

Purbayan Chowdhury — Thu, 01 Aug 2024 17:31:43 +0000

Deploying a Vue application can be a tedious and error-prone process, especially when done manually. But what if you could automate this process, ensuring that your app is deployed quickly, reliably, and with minimal effort? Enter GitHub Actions, a powerful tool that allows you to automate your deployment workflow directly within your GitHub repository.

In this blog post, we'll take you through a step-by-step guide on how to deploy your Vue application using GitHub Actions. We'll cover the benefits of automation, the basics of GitHub Actions, and provide a hands-on tutorial on setting up your first workflow. By the end of this article, you'll be able to streamline your deployment process, focus on building amazing Vue apps, and take your development workflow to the next level.

Getting Started

We start with a VueJS project already pushed to GitHub and use GitHub Actions to deploy it.

Understanding workflow structure

All workflow files should be stored in the .github/workflows directory. To achieve this, utilize the actions/checkout and actions/setup-node actions.

name: Vue app deployment

on:
    push:
        branches: ["vuetify"]
    pull_request:
        branches: ["vuetify"]

jobs:
    build:
        runs-on: ubuntu-latest

        strategy:
            matrix:
                node-version: [18.x, 20.x]

        steps:
            - uses: actions/checkout@v3
              with:
                token: ${{ secrets.GH_TOKEN }}
            - name: Use Node.js ${{ matrix.node-version }}
              uses: actions/setup-node@v3
              with:
                  node-version: ${{ matrix.node-version }}
            - name: Build the dist
              run: |
                  npm ci
                  npm run build --if-present
            - name: Commit build to gp-vue
              run: |
                  git config user.name github-actions
                  git config user.email github-actions@github.com
                  git --work-tree dist add --all 
                  git commit -m "Vue deployment run by github-actions"
                  git push origin HEAD:gp-vue --force
              shell: bash

Defining the workflow name and the actions to be used. Using a node version of 20.x. and we are welcome to rename the user name and email. The branch name for the deployment is gp-vue, you can change it too.

Create a vuetify branch and push to github

We don't have a branch named vuetify, let's create one

git branch vuetify

git checkout vuetify

git push -u origin vuetify

After successful push, we go to Actions tab in the repo of Github.

Select the recent workflow, to see details if there is a green tick ✅ then the run is successful else check FAQ section of articles for list of errors in details. The details of workflow page is similar to image below:

Setting up the root folder

The final setup for the github pages is selecting the branch and root folder.

Select the Settings tab and click on Pages option in sidebar.
Select branch gp-vue in Source option and /root as root folder.

The url for the site is available in the same page as visible above.

There is a custom workflow for github-pages deployment that is also available in Actions tab.

Fixing subdirectory hosting

The subdirectory is not supported by github pages by default. We have to configure the homepage in our package.json and configure vue.config.js to use the subdirectory url.

For example, in the given instance, our url is https://shivishbrahma.github.io/kodakriti/. So our homepage should be https://shivishbrahma.github.io/kodakriti/ and the config looks something like below:

{
...
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
],
"homepage": "https://shivishbrahma.github.io/vue-tools/",
"description": "Web Tools built in Vue",
"keywords": [
    "portfolio",
    "web-tools",
    "vue3"
],
...
}

For vue.config.js file, use the below code:

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
    transpileDependencies: true,
    publicPath: (process.env.NODE_ENV === "production") ? "/kodakriti/" : "/"
});

Now the /kodakriti will be the relative url to the subdirectory, customise accordingly.

FAQs

Why using multiple versions for node-setup?

Ans: We are using 18.x and 20.x node versions, because there might be some new or old packages that won't be compiled in one of the 2. But it is advisable to use the node version that you are using in the local setup.
What are the possible reasons for failing vue compilation in Github Workflow?

Ans: Here a list of reasons where vue compilation might fail:
- If there are depreciation warnings or any other vue or eslint warnings showing in terminal after npm run serve in local.
- If you miss to create the same branch name mentioned as trigger on push or pull_request.
- If the node packages being used doesn't support node versions mentioned in the node versions array.

References

Building a Seamless OTP Input Field in React: A Step-by-Step Guide

Purbayan Chowdhury — Sat, 27 Jul 2024 17:25:05 +0000

In today's digital age, ensuring secure access to online services is paramount, and One-Time Passwords (OTPs) play a crucial role in this process. OTPs provide an additional layer of security by requiring users to enter a unique code sent to their mobile device or email. Implementing an OTP input field that is both user-friendly and secure can significantly enhance the user experience of your application.

In this step-by-step guide, we will walk you through the process of building a seamless OTP input field in React. We will cover essential features such as automatically moving to the next input box upon entering a digit, handling backspace for deleting digits, navigating between input fields with arrow keys, and efficiently handling paste operations. By the end of this tutorial, you will have a robust OTP input component ready to integrate into your React application, ensuring a smooth and intuitive user experience for your users.

Features of OTPInput Component

Flexible Length: The OTP input field will accommodate either 4 or 6 individual text boxes, each representing a single digit.
Backspace Handling: Efficiently delete digits and automatically move the focus to the previous input box when the backspace key is pressed.
Automatic Navigation: Seamlessly move to the next input box as soon as a digit is entered, ensuring a smooth and intuitive user experience.
Arrow Key Navigation: Use the left and right arrow keys to easily navigate between input boxes, with the selected input box receiving focus.
Paste Support: Effortlessly paste an entire OTP code into the input field, with the component intelligently distributing the digits across the appropriate text boxes.

By incorporating these features, our OTP input component will enhance user interaction, making the process of entering and verifying OTPs both quick and user-friendly.

Getting Started

Starting with the basic cra-template of create-react app

OTPInput.jsx

import React from 'react'
import PropTypes from 'prop-types'

function OTPInput({...otherProps}) {
  return (
    <div className="OTPInput" {...otherProps}></div>
  );
}

OTPInput.propTypes = {};

export default OTPInput;

A simple functional component with otherProps.

Implementation

Input Fields for Each Digit

We will add input fields for each digit in the OTP using length prop spreading over list of numbers from 1 to length . A shortcut to generate numbers from 1 to length is Array(length).fill(i + 1).

...
function OTPInput({length, ...otherProps}) {
    const [otp, setOtp] = React.useState("");
    const inputs = [];

    return (
        <div className="OTPInput" {...otherProps}>
            {Array(length)
                .fill((_, i) => i + 1)
                .map((_, index) => (
                    <input
                        className="OTPInput__input"
                        key={index}
                        type="text"
                        maxLength="1"
                        value={otp[index]?.toString() || ""}
                        placeholder="0"
                        ref={(input) => (inputs[index] = input)}
                    />
                ))}
        </div>    
    );
}

OTPInput.propTypes = {
    length: PropTypes.number
};

OTPInput.defaultProps = {
    length: 6
};
...

Introducing a state for otp and a setOtp function to update the state. We will use otp to store the current OTP value and setOtp to update the state. Each input element value is indexed over this state variable. The inputs array will be used to store the input elements used to render the OTP. The length prop is used to determine the number of input fields to render and is set to 6 by default.

Styling OTP Inputs

OTPInput.css

.OTPInput__input {
    width: 40px;
    height: 40px;
    text-align: center;
    margin: 0 5px;
    font-size: 20px;
}

...
import './OTPInput.css';
...

The OTPInput__input class is used to style the input elements.

Handling Input

...
function OTPInput({length, pattern, ...otherProps}) {
    ...

    const handleChange = (element, index) => {
        const value = element.value;
        if (!pattern.test(value)) return; // Only allow digits

        let newOtp = [...otp];
        newOtp[index] = value;

        setOtp(newOtp);

        // Move to the next input field
        if (value && index < length - 1) {
            inputs[index + 1].focus();
        }
    };

    return (
        <div className="OTPInput" {...otherProps}>
            {Array(length)
                .fill((_, i) => i + 1)
                .map((_, index) => (
                    <input
                        className="OTPInput__input"
                        key={index}
                        type="text"
                        maxLength="1"
                        value={otp[index]?.toString() || ""}
                        onChange={(e) => handleChange(e.target, index)}
                        placeholder="0"
                        ref={(input) => (inputs[index] = input)}
                    />
                ))}
        </div>
    );
}

OTPInput.propTypes = {
    ...
    pattern: PropTypes.instanceOf(RegExp)
};

OTPInput.defaultProps = {
    ...
    pattern: /\d/
};
...

The pattern prop is used to validate the input value, which is set to /\d/ by default. The function handleChange updates the otp state with the new value, avoids the change if it doesn't match the pattern, also sets the focus to the next input field.

Handling Paste

...
function OTPInput({length, pattern, ...otherProps}) {
    ...
    const handlePaste = (e) => {
        e.preventDefault();
        const paste = e.clipboardData.getData("text");
        if (!pattern.test(paste)) return; // Only allow digits

        const newOtp = paste.slice(0, length).split("");
        for (let i = 0; i < length; i++) {
            inputs[i].value = newOtp[i] || "";

            if (newOtp[i] && i < length - 1) {
                inputs[i + 1].focus();
            }
        }
        setOtp(newOtp);
    };

    return (
        <div className="OTPInput" {...otherProps} onPaste={handlePaste}>
            {Array(length)
                .fill((_, i) => i + 1)
                .map((_, index) => (
                    <input
                        className="OTPInput__input"
                        key={index}
                        type="text"
                        maxLength="1"
                        value={otp[index]?.toString() || ""}
                        onChange={(e) => handleChange(e.target, index)}
                        placeholder="0"
                        ref={(input) => (inputs[index] = input)}
                    />
                ))}
        </div>
    );
}
...

The function handlePaste matches the pasted value with the pattern, updates the otp state from the pasted value and sets the focus to the next empty input field. The paste function is set to the whole OTPInput component.

Deleting Values and Moving Focus

...
function OTPInput({length, pattern, ...otherProps}) {
    ...

    const handleKeyDown = (e, index) => {
        if (e.key === "Backspace") {
            e.preventDefault();
            let newOtp = [...otp];
            newOtp[index] = "";
            setOtp(newOtp);

            if (index > 0) {
                inputs[index - 1].focus();
            }
        } else if (e.key === "ArrowLeft" && index > 0) {
            inputs[index - 1].focus();
        } else if (e.key === "ArrowRight" && index < length - 1) {
            inputs[index + 1].focus();
        }
    };
    ...

    return (
        <div className="OTPInput" {...otherProps} onPaste={handlePaste}>
            {Array(length)
                .fill((_, i) => i + 1)
                .map((_, index) => (
                    <input
                        className="OTPInput__input"
                        key={index}
                        type="text"
                        maxLength="1"
                        value={otp[index]?.toString() || ""}
                        onChange={(e) => handleChange(e.target, index)}
                        onKeyDown={(e) => handleKeyDown(e, index)}
                        placeholder="0"
                        ref={(input) => (inputs[index] = input)}
                    />
                ))}
        </div>
    );
}
...

The function handleKeyDown is used for keypress events. For deletion via backspace, the function sets the focus to the previous input field and removes the value of the current input field. For moving focus via arrow keys, the function sets the focus to the next / previous input field.

Final Code

OTPInput.jsx

https://github.com/shivishbrahma/nuclear-reactor/blob/main/src/OTPInput/OTPInput.jsx

Use within App component

import OTPInput from './OTPInput';
import './App.css';

function App() {
    return (
        <div className="App">
            <OTPInput />
        </div>
    )
}

export default App;

Preview

OTPInput Preview

Traversing through OTPInput Preview

Copy Paste in OTPInput Preview

References

Creating a DotEnv Loader in PHP

Purbayan Chowdhury — Sun, 10 Apr 2022 06:46:27 +0000

From the list of some of the most common libraries that are heavily used in a PHP framework project is DotEnv. The package that is used to load .env variables into the program from .env file. These env values are usually secrets patched for each environment and there is a subtle security issue in the process.
Anyways, in this blog today, we gonna build a DotEnv class from scratch.

Getting started

Let's create a sample .env file to be read and include variables with all cornered cases.

.env

# A PostgreSQL connection string
DATABASE_URL=postgres://localhost:5432/noah_arc

# The lowest level of logs to output
LOG_LEVEL=debug

# The environment to run the application in
NODE_ENV=development

# The HTTP port to run the application on
PORT=8080

# The secret to encrypt session IDs with
SESSION_SECRET=development

API_KEY="hwhhwhshs6585gahwhgwuwjwusuhs"

APP_KEY=VGhpcyBpcyBhbiBlbmNvZGVkIHN0cmluZw==
APP_DESCRIPTION="This is a long sentence with whitespace and characters "

Final Code

DotEnv.php

<?php
namespace PHPizer\DotEnv;

use Exception;

class DotEnv
{
    protected $path;
    public $variables;

    public function __construct(string $path)
    {
        if (!file_exists($path)) {
            throw new Exception("File not found: {$path}");
        }
        $this->path = $path;
    }

    public function load(): void
    {
        if (!is_readable($this->path)) {
            throw new Exception("File not readable: {$this->path}");
        }

        $lines = file($this->path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
        foreach ($lines as $line) {
            if (strpos(trim($line), '#') === 0) {
                continue;
            }

            list($name, $value) = explode('=', $line, 2);
            $name = trim($name);
            $value = trim($value,"\x00..\x1F\"");
            $this->variables[$name] = $value;

            if (!array_key_exists($name, $_SERVER) && !array_key_exists($name, $_ENV)) {
                putenv(sprintf('%s=%s', $name, $value));
                $_ENV[$name] = $value;
                $_SERVER[$name] = $value;
            }
        }
    }
}

Dotenv class create an object with path and if file doesn't exists throws an Exception. Object needs to called with load() fn which checks if file is readable and then tokenize each into key-value pair if not blank space or comment and set as env variable.

Testing

<?php

declare(strict_types=1);

namespace Tests;

use PHPizer\DotEnv\DotEnv;
use PHPUnit\Framework\TestCase;

final class DotEnvTest extends TestCase
{
    protected $path;
    protected DotEnv $dotEnv;


    public function testLoadEnv(): void
    {
        $this->path = "./tests/test.env";
        $this->dotEnv = new DotEnv($this->path);
        $this->assertNull($this->dotEnv->variables);
        $this->dotEnv->load();
        $envArray = [
            "DATABASE_URL" => "postgres://localhost:5432/noah_arc",
            "LOG_LEVEL" => "debug",
            "NODE_ENV" => "development",
            "PORT" => 8080,
            "SESSION_SECRET" => "development",
            "API_KEY" => "hwhhwhshs6585gahwhgwuwjwusuhs",
            "APP_KEY" => "VGhpcyBpcyBhbiBlbmNvZGVkIHN0cmluZw==",
            "APP_DESCRIPTION" => "This is a long sentence with whitespace and characters "
        ];
        foreach ($this->dotEnv->variables as $key => $value) {
            $this->assertEquals($value, $_ENV[$key]);
            $this->assertEquals($value, $_SERVER[$key]);
            $this->assertEquals($value, $envArray[$key]);
        }
        $this->assertTrue(true);
    }
}

DotEnvTest tests values if every variables are properly parsed out of the env file.

References

symfony/dotenv

Building a ToDo App in React

Purbayan Chowdhury — Tue, 22 Mar 2022 16:30:41 +0000

A ToDo App is a very beginner level app for any frontend developer. A basic ToDo app has functionality of adding, deleting and updating the todos from the list. Being a developer, we easily tend to forget the tasks for the day or a span of time. It's always advisable to have such an app where we can add or delete or modify todos.

In this tutorial, let's design a ToDo App from scratch with basic crud (Create, Read, Update, Delete) functionality and added features like filter search, hide todos, and update status.

Getting Started

Creating a React App from cra-template using create-react-app, we will require no external libraries for the project, except react-icons that we will need for icons used in the application.

ToDoApp.jsx

import React from 'react';

export default function ToDoApp() {
    return (
        <section className="ToDoApp">
            <h1>ToDo App</h1>
        </section>
    );
}

We will implement two components namely ToDoCard and ToDoForm for the app.

Implementation

Adding Basic Styles

ToDoApp.css

.ToDoApp {
    width: 800px;
    max-width: 100%;
    margin: auto;
    padding: 0.5rem;
    color: var(--black);
}

.grey_text {
    color: var(--grey);
}
.red_text {
    color: var(--red);
}
.blue_text {
    color: var(--blue);
}
.green_text {
    color: var(--green);
}

.ToDoApp input,
.ToDoApp textarea,
.ToDoApp select {
    width: 100%;
    padding: 0.5rem 0.75rem;
}

.ToDoApp textarea {
    height: 10rem;
}

.ToDoApp button {
    padding: 0.5rem 1.5rem;
    background: var(--white);
    border: 1px solid var(--black);
}

.ToDoApp__Search {
    margin-top: 0.5rem;
    display: flex;
    gap: 1.5rem;
}

.ToDoApp__Search input {
    border: 1px solid var(--black);
}

/* @ToDoList Layout */

.ToDoList {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
}

.ToDoList__action {
    width: 100%;
}

Card Component

Before we get started, let's install react-icons by executing

npm i react-icons

Defining the json schema for each todo

{
    "title": "string",
    "description": "string",
    "status": "integer(0,1,2)",
    "hide": "boolean",
    "id": "integer"
}

ToDoCard.jsx

import React from 'react';
// Icons for Todo Card
import {
    FaCheckCircle,
    FaClock,
    FaExclamationCircle,
    FaEye,
    FaEyeSlash,
    FaPencilAlt,
    FaTimesCircle,
} from 'react-icons/fa';


export default function ToDoCard({
    id,
    title,
    description,
    status,
    hide,
    ...otherProps
}){
    // Checking if the card is to be hidden
    if (hide) return null;

    return (
        <div className="ToDoCard" {...otherProps}>
            <div className="ToDoCard__left">
                <span>
                    {status === 0 && <FaExclamationCircle title="Pending" className="ToDoCard__icon grey_text" />}
                    {status === 1 && <FaClock title="Working" className="ToDoCard__icon blue_text" />}
                    {status === 2 && <FaCheckCircle title="Done" className="ToDoCard__icon green_text" />}
                </span>
            </div>
            <div className="ToDoCard__center">
                <h2>{title}</h2>
                <p>{description}</p>
            </div>
            <div className="ToDoCard__right">
                <FaTimesCircle
                    className="ToDoCard__icon red_text"
                />
                <span>
                    <FaEye title="Show Description" className="ToDoCard__icon" />
                </span>

                <FaPencilAlt
                    className="ToDoCard__icon"
                />
            </div>
        </div>
    );
}

The ToDoCard component takes all properties of ToDo schema, where hide is used to return null on true and status shows three different symbols on three different integer values.

Furthermore we can toggle description using a state variable,

ToDoCard.jsx

...
export default function ToDoCard({
...
}){
    const [showDescription, setShowDescription] = React.useState(false);
    ...
    return (
        <div className="ToDoCard" {...otherProps}>
            ...
            <div className="ToDoCard__center">
                <h2>{title}</h2>
                {showDescription && <p>{description}</p>}
            </div>
            <div className="ToDoCard__right">
                ...
                <span
                    onClick={() => {
                        setShowDescription(!showDescription);
                    }}
                >
                    {showDescription && <FaEye title="Show Description" className="ToDoCard__icon" />}
                    {!showDescription && <FaEyeSlash title="Hide Description" className="ToDoCard__icon" />}
                </span>
                ...
            </div>
        </div>
    );
}

Using React.useState(), we solve the problem of visibility of description and its toggling.

Styling the card is less of a trouble,

ToDoApp.css

...
/* @ToDo Card Layout */

.ToDoCard {
    border: 1px solid var(--black);
    width: 900px;
    max-width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ToDoCard div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ToDoCard .ToDoCard__left {
    flex: 0 2.5rem;
}

.ToDoCard .ToDoCard__center {
    flex: 3;
    display: inline-block;
}

.ToDoCard .ToDoCard__right {
    flex: 0 2.5rem;
    gap: 0.5rem;
}

.ToDoCard h2 {
    font-size: larger;
}

.ToDoCard__icon {
    cursor: pointer;
}

@media screen and (max-width: 900px) {
    .ToDoCard {
        width: 100%;
        flex-direction: column;
    }
    .ToDoCard div {
        flex-direction: row;
        justify-content: flex-start;
    }
}

Show/Hide Cards with Limit

In this section, we use a state variable todos to store the value of todos and a variable maxDisplayTodos for defining max no of visible todo cards.

ToDoApp.jsx

import React from 'react';
import ToDoCard from './ToDoCard';
import './ToDoApp.css';
import { FaPlusCircle } from 'react-icons/fa';


export default function ToDoApp() {
    const [todos, setTodos] = React.useState([]);
    const [hideTodos, setHideTodos] = React.useState(true);

    const maxDisplayTodos = 5;

    React.useEffect(() => {
        setTodos([
            {
                title: 'Learn React',
                description: 'Learn React and its ecosystem',
                status: 0,
                hide: false,
                id: 1,
            },
            {
                title: 'Create a React Component',
                description:
                    'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis esse aut similique reprehenderit fuga cupiditate porro. Nostrum, ipsam perferendis! Fuga nisi nostrum odit nulla quia, sint harum eligendi recusandae dolore!',
                status: 0,
                hide: false,
                id: 2,
            },
            {
                title: 'Learn Vue',
                description:
                    'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary.',
                status: 0,
                hide: false,
                id: 3,
            },
            {
                title: 'Learn Angular',
                description:
                    'A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my',
                status: 0,
                hide: false,
                id: 4,
            },
            {
                title: 'Vue Typewriter',
                description:
                    'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta.',
                status: 0,
                hide: false,
                id: 5,
            },
            {
                title: 'Learn jQuery',
                description:
                    'Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa',
                status: 0,
                hide: false,
                id: 14,
            },
            {
                title: 'Learn Javascript',
                description:
                    'The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one',
                status: 0,
                hide: false,
                id: 15,
            },
        ]);
    }, []);

    function handleHideTodos() {
        const newHideTodos = !hideTodos;
        setHideTodos(newHideTodos);
        if (newHideTodos) {
            const newTodos = todos.map((todo, index) => {
                if (index >= maxDisplayTodos) todo.hide = false;
                return todo;
            });
            setTodos(newTodos);
        } else {
            const newTodos = todos.map((todo, index) => {
                if (index >= maxDisplayTodos) todo.hide = true;
                return todo;
            });
            setTodos(newTodos);
        }
    }


    return (
        <section className="ToDoApp">
            <h1>ToDo App</h1>
            <div className="ToDoList">
                {(todos || []).map((todo, index) => (
                    <ToDoCard
                        key={index}
                        {...todo}
                    />
                ))}
                {(!todos || todos.length === 0) && (
                    <div className="ToDoList__empty">
                        <p>No todos found</p>
                    </div>
                )}
                {todos.length > maxDisplayTodos && (
                    <button className="ToDoList__action" type="button" onClick={() => handleHideTodos()}>
                        {hideTodos ? 'HIDE' : 'SHOW'}
                    </button>
                )}
            </div>
        </section>
    );

}

There is another state variable hideTodos used to determine when to hide the todos and when not to. Also there is a function handleHideTodos() that handles the state variable hideTodos and based on the current status of hideTodos we either hide or show off the maxDisplayTodos limit. We also have a no todos found for no todos and a togglable show/hide button based on hideTodos.

Form Component

Before we start on with the add, edit and delete of todos, let's introduce our form component.

ToDoForm.jsx

import React from 'react';
import { FaTimes } from 'react-icons/fa';

function ToDoForm({
    title: titleProps,
    description: descriptionProps,
    status: statusProps,
    id,
}) {
    const [title, setTitle] = React.useState(titleProps);
    const [description, setDescription] = React.useState(descriptionProps);
    const [status, setStatus] = React.useState(statusProps);

    function handleTitleChange(e) {
        setTitle(e.target.value);
    }

    function handleDescriptionChange(e) {
        setDescription(e.target.value);
    }

    function handleStatusChange(e) {
        setStatus(parseInt(e.target.value));
    }

    return (
        <form className="ToDoForm">
            <FaTimes className="close-btn"/>
            <h2>ToDo Form</h2>
            <div className="ToDoForm__field">
                <label htmlFor="title">Title</label>
                <input type="text" id="title" value={title} onChange={(e) => handleTitleChange(e)} />
            </div>
            <div className="ToDoForm__field">
                <label htmlFor="description">Description</label>
                <textarea
                    type="text"
                    id="description"
                    value={description}
                    onChange={(e) => handleDescriptionChange(e)}
                />
            </div>
            <div className="ToDoForm__field">
                <label htmlFor="status">Status</label>
                <select id="status" value={status} onChange={(e) => handleStatusChange(e)}>
                    <option value="0">Pending</option>
                    <option value="1">Working</option>
                    <option value="2">Done</option>
                </select>
            </div>
            <div className="ToDoForm__action">
                <button type="submit">{id === -1 ? 'Add' : 'Update'}</button>
            </div>
        </form>
    );
}

ToDoForm.defaultProps = {
    title: '',
    description: '',
    status: 0,
    id: -1,
};

export default ToDoForm;

Handling form elements poses a trouble in React if being handled with state variables, we need to handle inputChange with event handler. So there are three state variables (title, description and status) and three inputChange handlers (handleTitleChange, handleDescriptionChange, handleStatusChange).

Styling ToDoForm Component

ToDoApp.css

...
/* @ToDo Form Layout */
.ToDoForm {
    padding: 0.5rem;
    border: 1px solid var(--black);
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: space-around;
    position: relative;
}
.ToDoForm .close-btn {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
}
.ToDoForm__field,
.ToDoForm__action {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 0.5rem;
}
.ToDoForm__field label {
    flex: 0 0 6rem;
    font-size: 1rem;
}
.ToDoForm__action button {
    margin-left: auto;
}

Adding Form Component & Close Form

ToDoApp.jsx

...
export default function ToDoApp(){
    ...
    const [showForm, setShowForm] = React.useState(false);

    ...

    return (
        <section className="ToDoApp">
            ...
            {showForm && (
                <ToDoForm
                    closeForm={() => {
                        setShowForm(false);
                    }}
                />
            )}
        </section>
    );
}

Added a showForm state variable, pass it to the form component.

ToDoForm.jsx

...
function ToDoForm({
    title: titleProps,
    description: descriptionProps,
    status: statusProps,
    id,
    closeForm,
)} {
    ...
    function handleCloseForm() {
        setTitle('');
        setDescription('');
        setStatus(0);
        closeForm();
    }

    return (
        <form className="ToDoForm">
            <FaTimes className="close-btn" onClick={() => handleCloseForm()} />
            ...
        </form>
    );
}
...

Adding a handler for closeform with setting all state variables to initial state.

Searching Todo Items

ToDoApp.jsx

...
export default function ToDoApp() {
    ...
    const [searchText, setSearchText] = React.useState('');

    ...

    function handleSearchChange(evt) {
        setSearchText(evt.target.value);

        const newTodos = todos.map((todo) => {
            todo.hide = !(
                todo.title.toLowerCase().includes(evt.target.value.toLowerCase()) ||
                todo.description.toLowerCase().includes(evt.target.value.toLowerCase())
            );
            return todo;
        });
        setTodos(newTodos);
    }

    return (
        <section className="ToDoApp">
            <h1>ToDo App</h1>
            <div className="ToDoApp__Search">
                <input
                    type="text"
                    value={searchText}
                    onChange={(evt) => handleSearchChange(evt)}
                    placeholder="Search"
                />
                <button className="ToDoApp__create_btn">
                    <FaPlusCircle />
                </button>
            </div>
            ...
        </section>

    );
}

Used a state variable searchText for storing search input value, also handled the search change with hiding the list that didn't match the search. In case of long list, might have queried it from a database with a loader.

Add Todo Items

ToDoApp.jsx

...
export default function ToDoApp() {
    ...

    function handleAddTodo(todo) {
        const newTodo = {
            title: todo.title,
            description: todo.description,
            status: 0,
            hide: false,
            id: Date.now() % 1000000,
        };
        setTodos([...todos, newTodo]);
        setShowForm(false);     
    }
    ...
    return (
        <section className="ToDoApp">
            <h1>ToDo App</h1>
            <div className="ToDoApp__Search">
                ...
                <button className="ToDoApp__create_btn" onClick={() => setShowForm(true)}>
                    <FaPlusCircle />
                </button>
            </div>

            {showForm && (
                <ToDoForm
                    handleAddTodo={handleAddTodo}
                    closeForm={() => {
                        setShowForm(false);
                    }}
                />
            )}
            ...
        </section>
    );
}

Defining a handleAddToDo handler function, to add a new ToDo object to the ToDos and maintaining closing form on submit. Opening form on click of create Todo button.

ToDoForm.jsx

...
function ToDoForm({
    title: titleProps,
    description: descriptionProps,
    status: statusProps,
    id,
    closeForm,
    handleAddTodo,
}) {
    ...

    function handleFormSubmit(e) {
        e.preventDefault();
        if (title === '' || description === '') {
            alert('Please fill in all fields');
            return;
        }
        handleAddTodo({ title, description, status });
        setTitle('');
        setDescription('');
        setStatus(0);
    }

    return (
        <form className="ToDoForm" onSubmit={(e) => handleFormSubmit(e)}>
            ...
        </form>
    );
}
...

Defining handleFormSubmit function to set to initial values and trigger addtodo handler.

Edit Todo Item

Editing Todo Item is little bit tricky, because we need remember the id of the element to be edit with its value passed onto the todo form. Let's see how that happens.

ToDoApp.jsx

...
export default function ToDoApp() {
    const [currentTodo, setCurrentTodo] = React.useState({});
    ...
    function handleEditTodo(id) {
        setShowForm(true);
        const todo = todos.find((todo) => todo.id === id);
        setCurrentTodo(todo);
    }

    function handleAddTodo(todo) {
        if (todo.id === undefined) {
            const newTodo = {
                title: todo.title,
                description: todo.description,
                status: 0,
                hide: false,
                id: Date.now() % 1000000,
            };
            setTodos([...todos, newTodo]);
        } else {
            const newTodos = todos.map((todo_) => {
                if (todo.id === todo_.id) {
                    todo_.title = todo.title;
                    todo_.description = todo.description;
                    todo_.status = todo.status;
                }
                return todo_;
            });
            setTodos(newTodos);
        }
        setCurrentTodo({});
        setShowForm(false);
    }

    return (
        <section className="ToDoApp">
            ...

            {showForm && (
                <ToDoForm
                    handleAddTodo={handleAddTodo}
                    {...currentTodo}
                    closeForm={() => {
                        setCurrentTodo({});
                        setShowForm(false);
                    }}
                />
            )}


            <div className="ToDoList">
                {(todos || []).map((todo, index) => (
                    <ToDoCard
                        key={index}
                        {...todo}
                        handleEditTodo={handleEditTodo}
                    />
                ))}
                ...
            </div>
        </section>
    );
}

Adding a state variable currentTodo to set the current Todo object for edit and passing as prop to the ToDo Form and also modifying handleAddTodo function to update already existing Todo object. Add handleEditTodo function to set currentTodo for current element.

ToDoForm.jsx

...
function ToDoForm({
    title: titleProps,
    description: descriptionProps,
    status: statusProps,
    id,
    closeForm,
    handleAddTodo,
}) {
    ...

    function handleFormSubmit(e) {
        e.preventDefault();
        if (title === '' || description === '') {
            alert('Please fill in all fields');
            return;
        }
        if (id >= 0) handleAddTodo({ title, description, status, id: id });
        else handleAddTodo({ title, description, status });
        setTitle('');
        setDescription('');
        setStatus(0);
    }
    ...
}
...

Modifying handleFormSubmit function to handle both create and update cases.

ToDoCard.jsx

...
export default function ToDoCard({
    id,
    title,
    description,
    status,
    hide,
    handleEditTodo,
    ...otherProps
}){
    ...
    return (
        <div className="ToDoCard" {...otherProps}>
            ...
            <div className="ToDoCard__right">
                ...
                <FaPencilAlt
                    className="ToDoCard__icon"
                    onClick={() => {
                        handleEditTodo(id);
                    }}
                />
            </div>
        </div>
    );
}

Triggering handleEditTodo function for current ToDo element.

Delete ToDo

ToDoApp.jsx

...

export default function ToDoApp() {
    ...

    function handleDeleteTodo(id) {
        const newTodos = todos.filter((todo) => todo.id !== id);
        setTodos(newTodos);
    }

    return (
        <section className="ToDoApp">
            ...

            <div className="ToDoList">
                {(todos || []).map((todo, index) => (
                    <ToDoCard
                        key={index}
                        {...todo}
                        handleEditTodo={handleEditTodo}
                        handleDeleteTodo={handleDeleteTodo}
                    />
                ))}
                ...
            </div>
        </section>
    );
}

Creating a handleDeleteTodo function for an id, updating the todos without the given id todo object and pass on to ToDoCard.

ToDoCard.jsx

...
export default function ToDoCard({
    id,
    title,
    description,
    status,
    hide,
    handleEditTodo,
    handleDeleteTodo,
    ...otherProps
}){
    ...
    return (
        <div className="ToDoCard" {...otherProps}>
            ...
            <div className="ToDoCard__right">
                <FaTimesCircle
                    className="ToDoCard__icon red_text"
                    onClick={() => {
                        handleDeleteTodo(id);
                    }}
                />
                ...
            </div>
        </div>
    );
}
...

ToDoCard element on click of delete button trigger handleDeleteTodo for current element id.

Change Status

ToDoApp.jsx

...
export default function ToDoApp() {
    ...

    function handleChangeStatus(id) {
        const newTodos = todos.map((todo) => {
            if (todo.id === id) {
                todo.status = todo.status === 2 ? 0 : todo.status + 1;
            }
            return todo;
        });
        setTodos(newTodos);
    }


    return (
        <section className="ToDoApp">
            ...

            <div className="ToDoList">
                {(todos || []).map((todo, index) => (
                    <ToDoCard
                        key={index}
                        {...todo}
                        handleChangeStatus={handleChangeStatus}
                        handleEditTodo={handleEditTodo}
                        handleDeleteTodo={handleDeleteTodo}
                    />
                ))}
                ...
            </div>
        </section>
    );  
}

Added a handler for changestatus for id and is passed to ToDoCard for invokation. The handler updates the last status from 0 to 2 and back to 0 in a circular fashion.

ToDoCard.jsx

...
export default function ToDoCard({
    id,
    title,
    description,
    status,
    hide,
    handleEditTodo,
    handleDeleteTodo,
    handleChangeStatus,
    ...otherProps
}) {
    ...

    return (
        <div className="ToDoCard" {...otherProps}>
            <div className="ToDoCard__left">
                <span
                    onClick={() => {
                        handleChangeStatus(id);
                    }}
                >
                    {status === 0 && <FaExclamationCircle title="Pending" className="ToDoCard__icon grey_text" />}
                    {status === 1 && <FaClock title="Working" className="ToDoCard__icon blue_text" />}
                    {status === 2 && <FaCheckCircle title="Done" className="ToDoCard__icon green_text" />}
                </span>
            </div>
            ...
        </div>
    );
}

Passed function for status change is onclick triggered for status icon that is changed with varied status value.

Final Code

ToDoApp.css
https://github.com/shivishbrahma/nuclear-reactor/blob/main/src/ToDoApp/ToDoApp.css

ToDoApp.jsx
https://github.com/shivishbrahma/nuclear-reactor/blob/main/src/ToDoApp/ToDoApp.jsx

ToDoCard.jsx
https://github.com/shivishbrahma/nuclear-reactor/blob/main/src/ToDoApp/ToDoCard.jsx

ToDoForm.jsx
https://github.com/shivishbrahma/nuclear-reactor/blob/main/src/ToDoApp/ToDoForm.jsx

Preview

Designing a Markdown Editor in React

Purbayan Chowdhury — Mon, 14 Mar 2022 18:36:08 +0000

Ever since the popularity of open-source libraries, Markdown has always been the primary text format for documentation of these libraries after txt. Since Markdown supports word processing like formatting along with text like script, it is more readable and can easily formatted to a HTML script for web rendering. By the recent updates, Github has standardised many other formatting syntaxes to support more HTML like features into markdown.

In this blog, we will be designing a react component that parses markdown content to convert into HTML code for rendering as preview.

Getting Started

Starting with create-react-app template, we need to install markdown-it library for markdown to html conversion.

MarkdownEditor.jsx

import React from 'react';

export default function MarkdownEditor() {
    return (
        <div className="MarkdownEditor">
            <div className="MarkdownEditor__Editor"></div>
            <div className="MarkdownEditor__Preview"></div>
        </div>
    );
}

This functional component MarkdownEditor has two tabs for markdown input, i.e., Editor and for html output, i.e., Preview.

Implementation

Basic Tab Components

We add a textarea for the Editor component and a html div for Preview component and also a titleBar for each.

MarkdownEditor.jsx

...
export default function MarkdownEditor({ content: contentProps }) {
    const [content, setContent] = React.useState(contentProps);
    function handleChange(evt) {
        console.log(evt.target.value);
        setContent(evt.target.value);
    }
    return (
        <div className="MarkdownEditor">
            <div className="MarkdownEditor__Editor">
                <div className="titleBar">Editor</div>
                <textarea className="MarkdownEditor__Editor__Textarea" value={content} onChange={(evt)=>handleChange(evt)} />
            </div>
            <div className="MarkdownEditor__Preview">
                <div className="titleBar">Preview</div>
                <div className="MarkdownEditor__Preview__Content"></div>
            </div>
        </div>
    );
}

Adding a onChange handler function for the textarea value change and content props is passed for pre-initialization.

Adding Styles

Styling both the tabs for editor with preview mode view.

MarkdownEditor.css

.MarkdownEditor {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.MarkdownEditor__Editor,
.MarkdownEditor__Preview {
    flex: 1;
}

.MarkdownEditor .titleBar {
    width: 100%;
    height: 3rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    background-color: #391a42;
    color: #fff;
}

.MarkdownEditor__Editor__Textarea {
    width: calc(100% - 1.25rem);
    height: calc(100% - 5rem);
    border: none;
    resize: none;
    padding: 0.5rem;
    background-color: #57659c;
    color: #fff;
    font-family: 'Tlw Typewriter', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    overflow: auto;
}

.MarkdownEditor__Preview__Content {
    width: calc(100% - 1.25rem);
    height: calc(100% - 5rem);
    padding: 0.5rem;
    font-family: 'Tlw Typewriter', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    overflow: auto;
}

Using Markdown-It

Installing markdown-it

npm i markdown-it

MarkdownEditor.jsx

...
import markdownIt from 'markdown-it';
import './MarkdownEditor.css';

export default function MarkdownEditor({ content: contentProps }) {
    ...
    function toMarkdown(content) {
        const md = markdownIt({
            html: true,
            linkify: true,
            typographer: true,
        });
        return md.render(content);
    }
    return (
        <div className="MarkdownEditor">
            ...
            <div className="MarkdownEditor__Preview">
                ...
                <div
                    className="MarkdownEditor__Preview__Content"
                    dangerouslySetInnerHTML={{ __html: toMarkdown(content) }}
                ></div>
            </div>
        </div>
    );
}

We use dangerouslySetInnerHTML for setting html content for the Preview Component and define a function toMarkdown to convert markdown content into HTML.

Adding Fullscreen

...
export default function MarkdownEditor({ content: contentProps }) {
    ...
    const [editorMaximized, setEditorMaximized] = React.useState(false);
    const [previewMaximized, setPreviewMaximized] = React.useState(false);
    ...

    function handleEditorMaximize() {
        if (!previewMaximized) setEditorMaximized(!editorMaximized);
        else setPreviewMaximized(false);
    }
    function handlePreviewMaximize() {
        if (!editorMaximized) setPreviewMaximized(!previewMaximized);
        else setEditorMaximized(false);
    }

    return (
        <div className="MarkdownEditor">
            {previewMaximized ? (
                <></>
            ) : (
                <div className="MarkdownEditor__Editor">
                    <div className="titleBar">
                        Editor
                        <div style={{ marginLeft: 'auto' }} onClick={handleEditorMaximize}>
                            {editorMaximized ? <span>-&gt;&lt;-</span> : <span>&lt;--&gt;</span>}
                        </div>
                    </div>
                    <textarea
                        className="MarkdownEditor__Editor__Textarea"
                        value={content}
                        onChange={(evt) => handleChange(evt)}
                    />
                </div>
            )}

            {editorMaximized ? (
                <></>
            ) : (
                <div className="MarkdownEditor__Preview">
                    <div className="titleBar">
                        Preview
                        <div style={{ marginLeft: 'auto' }} onClick={handlePreviewMaximize}>
                            {previewMaximized ? <span>-&gt;&lt;-</span> : <span>&lt;--&gt;</span>}
                        </div>
                    </div>
                    <div
                        className="MarkdownEditor__Preview__Content"
                        dangerouslySetInnerHTML={{ __html: toMarkdown(content) }}
                    ></div>
                </div>
            )}
        </div>
    );
}

Having two states editorMaximized and previewMaximized, for toggling of the editor and preview maximize with two functions as handlers for click.

Final Code

MarkdownEditor.css

https://github.com/shivishbrahma/nuclear-reactor/blob/main/src/MarkdownEditor/MarkdownEditor.css

MarkdownEditor.jsx

https://github.com/shivishbrahma/nuclear-reactor/blob/main/src/MarkdownEditor/MarkdownEditor.jsx

Preview

Reference

React Markdown Editor

Deploying React App in GitHub Pages

Purbayan Chowdhury — Sun, 06 Mar 2022 07:33:46 +0000

Developing a React App has always been a fascinating experience as a Frontend Developer. To build exotic components and embed them in our websites that we develop as a part of job or hobby, is an adventure in itself. When the time comes to share with friends and family, nothing is best than to host it over a website. There are quite a lot of options for free hosting, but for an open-source developer, Github Pages has separate place. In this article, we will try to learn to deploy an React App in Github Pages.

Getting Started

Everything starts with the React project already pushed into a Github repo.

The best way of using Github architecture is by writing workflows in .yml files where we use predefined actions to perform command functionalities in Github server.

Understanding workflow structure

All workflow files needs to be placed in .github/workflows. The action to be used for this objective is actions/checkout and actions/setup-node.

name: React app deployment

on:
  push:
    branches: [ 'reactify' ]
  pull_request:
    branches: [ 'reactify' ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.x,20.x]

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm ci
      shell: bash
    - run: npm run build --if-present
      shell: bash

    - run : git config user.name github-actions
      shell: bash
    - run : git config user.email github-actions@github.com
      shell: bash
    - run : git --work-tree build add --all
      shell: bash
    - run : git commit -m "Automatic Deploy action run by github-actions"
      shell: bash
    - run : git push origin HEAD:gp-react --force
      shell: bash

First defining the name of the workflow, and selecting the trigger for workflow as push or pull_request on certain branches like reactify in this case. Furthermore, defining the job with ubuntu-latest as os and selecting node version as 20.x. In the steps, we use checkout action to checkout in the repo. Next, we setup node with npm for versions. Install the node modules from package.json and create the build with the build script if present. Change user.name and user.email and add build in the work tree and commit as github-actions user to a gp-react branch with force.

Create a reactify branch and push to github

Since we don't have a branch named reactify, let's create one

git branch reactify

git checkout reactify

git commit -m "Added github actions for gh pages"

# Set the upstream so that from the next time we can only do git push for updating repo
git push --set-upstream origin reactify

After successful push, we go to Actions tab in the repo of Github.

Setting up the root folder

The final setup for the github pages is selecting the branch and root folder.

Select the Settings tab and click on Pages option in sidebar.
Select branch gp-react in Source option and /root as root folder.

The url for the site is available in the same page as visible above.

There is a custom workflow for github-pages deployment that is also available in Actions tab.

FAQ

Why using multiple versions for node-setup? Ans: We are using 18.x and 20.x node versions, because there might be some new or old packages that won't be compiled in one of the 2. But it is advisable to use the node version that you are using in the local setup.
What are the possible reasons for failing react compilation in Github Workflow? Ans: Here a list of reasons where react compilation might fail:
- If there are depreciation warnings or any other react warnings showing in terminal after npm start in local.
- If you miss to create the same branch name mentioned as trigger on push or pull_request.
- If the node packages being used doesn't support node versions mentioned in the node versions array.

Reference

Designing an Activity Calendar in React

Purbayan Chowdhury — Sun, 27 Feb 2022 07:48:23 +0000

Activity Calendar has become popular after open-source platforms like Github, Kaggle starting used to show contributions data in this format. As a developer, people often tries to analyse what are the days I am productive the most. The measure might be a quantitative and not qualitative, but it gives a clear picture overall. We gonna build an Activity Calendar Component today in React from Scratch.

Activity Calendar or Graph is a heatmap graph distribution over months and days of week.

Getting Started

Starting from the basic cra-template of creact-react app

ActivityCalendar.jsx

import React from 'react';

function ActivityCalendar({ children, style, ...otherProps }) {
    return (
        <article className="ActivityCalendar" style={style} {...otherProps}>
            <svg></svg>
            {children}
        </article>
    );
}

export default ActivityCalendar;

This functional component has children and style props where children helps to populate any child component and style to populate with inline CSS style.

Implementation

Formatting Data

We need to have some utilities function to format data or generate an empty data. Few libraries that we need to install here are a colour utility library tinycolor2 and a date manipulation library date-fns.

npm install tinycolor2 date-fns

NormalizeCalendarDays

util.js

import eachDayOfInterval from 'date-fns/eachDayOfInterval';
import formatISO from 'date-fns/formatISO';
import parseISO from 'date-fns/parseISO';

function normalizeCalendarDays(days) {
    const daysMap = days.reduce((map, day) => {
        map.set(day.date, day);
        return map;
    }, new Map());

    return eachDayOfInterval({
        start: parseISO(days[0].date),
        end: parseISO(days[days.length - 1].date),
    }).map((day) => {
        const date = formatISO(day, { representation: 'date' });

        if (daysMap.has(date)) {
            return daysMap.get(date);
        }

        return {
            date,
            count: 0,
            level: 0,
        };
    });
}

The function normalizeCalendarDays takes in list of days and creates a daysMap for each date. The daysMap is used to get all the days from starting date to ending date, and if a date is missing in the array days, a default count and level of 0 is added to the resulting array against that date.

Group by Weeks

utils.js

...
import parseISO from 'date-fns/parseISO';
import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
import getDay from 'date-fns/getDay';
import subWeeks from 'date-fns/subWeeks';
import nextDay from 'date-fns/nextDay';

...
export function groupByWeeks(days, weekStart) {
    if (days.length === 0) return [];

    // The calendar expects a continuous sequence of days, so fill gaps with empty activity.
    const normalizedDays = normalizeCalendarDays(days);

    // Determine the first date of the calendar. If the first contribution date is not
    // specified week day the desired day one week earlier will be selected.
    const firstDate = parseISO(normalizedDays[0].date);
    const firstCalendarDate = getDay(firstDate) === weekStart ? firstDate : subWeeks(nextDay(firstDate, weekStart), 1);

    // In order to correctly group contributions by week it is necessary to left pad the list,
    // because the first date might not be desired week day.
    const paddedDays = [
        ...Array(differenceInCalendarDays(firstDate, firstCalendarDate)).fill(undefined),
        ...normalizedDays,
    ];

    return Array(Math.ceil(paddedDays.length / 7))
        .fill(undefined)
        .map((_, calendarWeek) => paddedDays.slice(calendarWeek * 7, calendarWeek * 7 + 7));
}

The function groupByWeeks takes in list of days (days) and weekStart as input parameters where it groups the given list of days into weeks starting with weekStart.

Get Labels for Months

utils.js

...
import nextDay from 'date-fns/nextDay';
import getMonth from 'date-fns/getMonth';
...

export const MIN_DISTANCE_MONTH_LABELS = 2;
export const DEFAULT_MONTH_LABELS = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec',
];

...
export function getMonthLabels(weeks, monthNames = DEFAULT_MONTH_LABELS) {
    return weeks
        .reduce((labels, week, index) => {
            const firstWeekDay = week.find((day) => day !== undefined);

            if (!firstWeekDay) {
                throw new Error(`Unexpected error: Week is empty: [${week}]`);
            }

            const month = monthNames[getMonth(parseISO(firstWeekDay.date))];
            const prev = labels[labels.length - 1];

            if (index === 0 || prev.text !== month) {
                return [
                    ...labels,
                    {
                        x: index,
                        y: 0,
                        text: month,
                    },
                ];
            }

            return labels;
        }, [])
        .filter((label, index, labels) => {
            if (index === 0) {
                return labels[1] && labels[1].x - label.x > MIN_DISTANCE_MONTH_LABELS;
            }

            return true;
        });
}

The function getMonthLabels takes in list of weeks and monthNames as input parameters. For each week, find the first day and get the monthName for the first day. If the last month in the label is not same or it's first value then x and y is set to 0 else return labels. Filter out the labels for each starting index with greater than minimum distance between the labels or other indexes.

Creating a Calendar Theme

utils.js

...
import getMonth from 'date-fns/getMonth';
import color from 'tinycolor2';

const DEFAULT_THEME = createCalendarTheme('#042a33');
...
export function createCalendarTheme(baseColor, emptyColor = color('white').darken(8).toHslString()) {
    const base = color(baseColor);

    if (!base.isValid()) {
        return DEFAULT_THEME;
    }

    return {
        level4: base.setAlpha(0.44).toHslString(),
        level3: base.setAlpha(0.6).toHslString(),
        level2: base.setAlpha(0.76).toHslString(),
        level1: base.setAlpha(0.92).toHslString(),
        level0: emptyColor,
    };
}

The function createCalendarTheme takes baseColor and emptyColor as input parameters and returns a theme with 5 different colors for each level.

Helper Functions

utils.js

...
export const NAMESPACE = 'ActivityCalendar';

export const DEFAULT_WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

export const DEFAULT_LABELS = {
    months: DEFAULT_MONTH_LABELS,
    weekdays: DEFAULT_WEEKDAY_LABELS,
    totalCount: '{{count}} contributions in {{year}}',
    legend: {
        less: 'Less',
        more: 'More',
    },
};
...

export function getTheme(theme, color) {
    if (theme) {
        return Object.assign({}, DEFAULT_THEME, theme);
    }

    if (color) {
        return createCalendarTheme(color);
    }

    return DEFAULT_THEME;
}

export function getClassName(name, styles) {
    if (styles) {
        return `${NAMESPACE}__${name} ${styles}`;
    }

    return `${NAMESPACE}__${name}`;
}

export function generateEmptyData() {
    const year = new Date().getFullYear();
    const days = eachDayOfInterval({
        start: new Date(year, 0, 1),
        end: new Date(year, 11, 31),
    });

    return days.map((date) => ({
        date: formatISO(date, { representation: 'date' }),
        count: 0,
        level: 0,
    }));
}

Calculating Size

ActivityCalendar.jsx

import React from 'react';

import { groupByWeeks } from './utils';

function ActivityCalendar({
    blockMargin,
    children,
    color,
    data,
    fontSize,
    hideMonthLabels,
    labels: labelsProp,
    style,
    theme: themeProp,
    weekStart,
    ...otherProps
}) {
    if (data.length === 0) return null;

    const weeks = groupByWeeks(data, weekStart);
    const textHeight = hideMonthLabels ? 0 : fontSize + 2 * blockMargin;

    function getDimensions() {
        return {
            width: weeks.length * (blockSize + blockMargin) - blockMargin,
            height: textHeight + (blockSize + blockMargin) * 7 - blockMargin,
        };
    }
...
}

ActivityCalendar.defaultProps = {
    blockMargin: 4,
    blockSize: 12,
    color: undefined,
    fontSize: 14,
    hideMonthLabels: false,
    style: {},
    weekStart: 0,
};
...

Using blockSize, blockMargin, length of weeks array and textHeight, calculate width and height of the Activity Calendar.

Adding Styles Module

styles.module.css

.calendar {
    display: block;
    max-width: 100%;
    height: auto;
    overflow: visible;
}

.calendar text {
    fill: currentColor;
}

.block {
    stroke: rgba(0, 0, 0, 0.1);
    stroke-width: 1px;
    shape-rendering: geometricPrecision;
}

.footer {
    display: flex;
}

.legendColors {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.2em;
}

@keyframes loadingAnimation {
    0% {
        fill: var(--ActivityCalendar-loading);
    }
    50% {
        fill: var(--ActivityCalendar-loading-active);
    }
    100% {
        fill: var(--ActivityCalendar-loading);
    }
}

Using CSS module, ActivityCalendar uses loadingAnimation and other necessary styles.

Rendering Blocks

ActivityCalendar.jsx

...
import { getClassName, getTheme, groupByWeeks, NAMESPACE } from './utils';

import styles from './styles.module.css';
import tinycolor from 'tinycolor2';

function ActivityCalendar({
    blockMargin,
    blockRadius,
    blockSize,
    children,
    color,
    data,
    dateFormat,
    fontSize,
    hideMonthLabels,
    loading,
    labels: labelsProp,
    style,
    theme: themeProp,
    weekStart,
    ...otherProps
}) {
    if (loading) data = generateEmptyData();
    ...
    const theme = getTheme(themeProp, color);
    ...

    function renderBlocks() {
        return weeks
            .map((week, weekIndex) =>
                week.map((day, dayIndex) => {
                    if (!day) {
                        return null;
                    }

                    const style = loading
                        ? {
                                animation: `${styles.loadingAnimation} 1.5s ease-in-out infinite`,
                                animationDelay: `${weekIndex * 20 + dayIndex * 20}ms`,
                          }
                        : undefined;

                    return (
                        <rect
                            // {...getEventHandlers(day)}
                            x={0}
                            y={textHeight + (blockSize + blockMargin) * dayIndex}
                            width={blockSize}
                            height={blockSize}
                            fill={theme[`level${day.level}`]}
                            rx={blockRadius}
                            ry={blockRadius}
                            className={styles.block}
                            data-date={day.date}
                            key={day.date}
                            style={style}
                        />
                    );
                })
            )
            .map((week, x) => (
                <g key={x} transform={`translate(${(blockSize + blockMargin) * x}, 0)`}>
                    {week}
                </g>
            ));
    }
    const { width, height } = getDimensions();
    const additionalStyles = {
        maxWidth: width,
        // Required for correct colors in CSS loading animation
        [`--${NAMESPACE}-loading`]: theme.level0,
        [`--${NAMESPACE}-loading-active`]: tinycolor(theme.level0).darken(8).toString(),
    };

    return (
        <article className="ActivityCalendar" style={{ ...style, ...additionalStyles }} {...otherProps}>
            <svg
                className={getClassName('calendar', styles.calendar)}
                width={width}
                height={height}
                viewBox={`0 0 ${width} ${height}`}
            >
                {renderBlocks()}
            </svg>
            {children}
        </article>
    );
}
...

The function renderBlocks renders coloured blocks for each day chunked in weeks and coloured according to the theme.

Rendering Labels

ActivityCalendar.jsx

...
import getDay from 'date-fns/getDay';

import { DEFAULT_LABELS, DEFAULT_WEEKDAY_LABELS, generateEmptyData, getClassName, getMonthLabels, getTheme, groupByWeeks, MIN_DISTANCE_MONTH_LABELS, NAMESPACE } from './utils';
...

function ActivityCalendar({
    blockMargin,
    blockRadius,
    blockSize,
    children,
    color,
    data,
    dateFormat,
    fontSize,
    hideMonthLabels,
    loading,
    labels: labelsProp,
    style,
    showWeekdayLabels,
    theme: themeProp,
    weekStart,
    ...otherProps
}) {
    if (loading) data = generateEmptyData();

    if (data.length === 0) return null;

    const weeks = groupByWeeks(data, weekStart);
    const textHeight = hideMonthLabels ? 0 : fontSize + 2 * blockMargin;
    const theme = getTheme(themeProp, color);
    const labels = Object.assign({}, DEFAULT_LABELS, labelsProp);
    ...

    function renderLabels() {
        const style = {
            fontSize,
        };

        if (!showWeekdayLabels && hideMonthLabels) {
            return null;
        }

        return (
            <>
                {showWeekdayLabels && (
                    <g className={getClassName('legend-weekday')} style={style}>
                        {weeks[1].map((day, y) => {
                            if (!day || y % 2 === 0) {
                                return null;
                            }

                            const dayIndex = getDay(parseISO(day.date));

                            return (
                                <text
                                    x={-2 * blockMargin}
                                    y={textHeight + (fontSize / 2 + blockMargin) + (blockSize + blockMargin) * y}
                                    textAnchor="end"
                                    key={day.date}
                                >
                                    {labels.weekdays ? labels.weekdays[dayIndex] : DEFAULT_WEEKDAY_LABELS[dayIndex]}
                                </text>
                            );
                        })}
                    </g>
                )}
                {!hideMonthLabels && (
                    <g className={getClassName('legend-month')} style={style}>
                        {getMonthLabels(weeks, labels.months).map(({ text, x }, index, labels) => {
                            // Skip the first month label if there's not enough space to the next one
                            if (index === 0 && labels[1] && labels[1].x - x <= MIN_DISTANCE_MONTH_LABELS) {
                                return null;
                            }

                            return (
                                <text x={(blockSize + blockMargin) * x} alignmentBaseline="hanging" key={x}>
                                    {text}
                                </text>
                            );
                        })}
                    </g>
                )}
            </>
        );
    }
...

    return (
        <article className="ActivityCalendar" style={{ ...style, ...additionalStyles }} {...otherProps}>
            <svg
                className={getClassName('calendar', styles.calendar)}
                width={width}
                height={height}
                viewBox={`0 0 ${width} ${height}`}
            >
                {!loading && renderLabels()}
                {renderBlocks()}
            </svg>
            {children}
        </article>
    );

}
...

The function renderLabels renders labels for weeks and days based on hideMonthLabels(props) and showWeekdayLabels(props).

Render Footer

ActivityCalendar.jsx

...
import {
    DEFAULT_LABELS,
    DEFAULT_WEEKDAY_LABELS,
    generateEmptyData,
    getClassName,
    getMonthLabels,
    getTheme,
    groupByWeeks,
    MIN_DISTANCE_MONTH_LABELS,
    NAMESPACE,
} from './utils';

...

function ActivityCalendar({
    blockMargin,
    blockRadius,
    blockSize,
    children,
    color,
    data,
    dateFormat,
    fontSize,
    hideColorLegend,
    hideMonthLabels,
    hideTotalCount,
    loading,
    labels: labelsProp,
    style,
    showWeekdayLabels,
    theme: themeProp,
    weekStart,
    ...otherProps
}) {
    ...
    const labels = Object.assign({}, DEFAULT_LABELS, labelsProp);
    const totalCount = data.reduce((sum, day) => sum + day.count, 0);
    const year = getYear(parseISO(data[0].date));
    ....

    function renderFooter() {
        if (hideTotalCount && hideColorLegend) {
            return null;
        }

        return (
            <footer className={getClassName('footer', styles.footer)} style={{ marginTop: 2 * blockMargin, fontSize }}>
                {/* Placeholder */}
                {loading && <div>&nbsp;</div>}

                {!loading && !hideTotalCount && (
                    <div className={getClassName('count')}>
                        {labels.totalCount
                            ? labels.totalCount
                                    .replace('{{count}}', String(totalCount))
                                    .replace('{{year}}', String(year))
                            : `${totalCount} contributions in ${year}`}
                    </div>
                )}

                {!loading && !hideColorLegend && (
                    <div className={getClassName('legend-colors', styles.legendColors)}>
                        <span style={{ marginRight: '0.4em' }}>{labels.legend.less ?? 'Less'}</span>
                        {Array(5)
                            .fill(undefined)
                            .map((_, index) => (
                                <svg width={blockSize} height={blockSize} key={index}>
                                    <rect
                                        width={blockSize}
                                        height={blockSize}
                                        fill={theme[`level${index}`]}
                                        rx={blockRadius}
                                        ry={blockRadius}
                                    />
                                </svg>
                            ))}
                        <span style={{ marginLeft: '0.4em' }}>{labels.legend.more ?? 'More'}</span>
                    </div>
                )}
            </footer>
        );
    }

    ...

    return (
        <article className="ActivityCalendar" style={{ ...style, ...additionalStyles }} {...otherProps}>
            <svg
                className={getClassName('calendar', styles.calendar)}
                width={width}
                height={height}
                viewBox={`0 0 ${width} ${height}`}
            >
                {!loading && renderLabels()}
                {renderBlocks()}
            </svg>
            {renderFooter()}
            {children}
        </article>
    );
}

...

The function renderFooter renders the footer with total no of contributions and showsLegend for colours used in the heatmap graph.

Final Code

ActivityCalendar.jsx

https://github.com/shivishbrahma/nuclear-reactor/blob/main/src/ActivityCalendar/ActivityCalendar.jsx

utils.js

https://github.com/shivishbrahma/nuclear-reactor/blob/main/src/ActivityCalendar/utils.js

styles.module.css

https://github.com/shivishbrahma/nuclear-reactor/blob/main/src/ActivityCalendar/styles.module.css

Use within App component

import ActivityCalendar from './ActivityCalendar';
import './App.css';

const DEFAULT_THEME = {
        level4: '#216e39',
        level3: '#30a14e',
        level2: '#40c463',
        level1: '#9be9a8',
        level0: '#ebedf0',
    },
    calendarData = [
        {
            count: 0,
            date: '2022-01-01',
            level: 0,
        },
        {
            count: 0,
            date: '2022-01-02',
            level: 0,
        }
        ...
    ];
function App() {
    return (
        <div className="App">
            <ActivityCalendar data={calendarData} theme={DEFAULT_THEME}/>
        </div>
    );
}

export default App;

Preview

Reference

React Activity Calendar

Designing a Typewriter React Component

Purbayan Chowdhury — Fri, 18 Feb 2022 19:30:57 +0000

We are pretty much familiar with the Typewriter effect, although we might not be acquainted with a Typewriter. In words, the typewriter effect is the gradual revealing of the words as if it is being typed infront of our eyes with sound of a typewriter key pressing. A popular Typewriter Animation in Web usually involves slowling revealing of the text with a blinking cursor and slowling erasing of the text with a pause.

Though in our today's exercise, we will be implementing a typewriter effect where a list of words are being typed on the screen with a blinking caret or cursor. After each word is being typed, it's also erased after a little pause to erase slowly one letter at a time and finally typed in for the next word.

Getting Started

We won't require no extra libraries except the ones installed by create-react-app template.

Typewriter.jsx

import React from 'react';

function Typewriter({ text, ...otherProps }) {
    return (
        <div className="Typewriter" {...otherProps}>
            <span className="Typewriter__text">{text}</span>
            <span className="Typewriter__cursor">|</span>
        </div>
    );
}

export default Typewriter;

A classic functional component that has text (string) prop for content and two child components, i.e., typewriter_text and typewriter_cursor.

Implementation

Blinking caret

To design the blinking caret, we will need css into action.

Typewriter.css

.Typewriter__text {
    display: inline-block;
}

.Typewriter__cursor {
    display: inline-block;
    color: currentColor;
    animation: blink 1s ease-in-out 0s infinite alternate;
}

@keyframes blink {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

CSS3 Animations is used for blinking and both child components are made inline-block for making them side by side. Add a import in Typewriter jsx after React import

import React from 'react';
import './Typewriter.css';

...

Typing Effect

We will use two React Hooks namely useState and useEffect for this purpose.

function Typewriter({ text, speed, ...otherProps }) {
    const [currentText, setCurrentText] = React.useState('');
    const [__timeout, set__Timeout] = React.useState(null);

    React.useEffect(() => {
        startTyping();

        return () => {
            __timeout && clearTimeout(__timeout);
        };
    }, []);

    React.useEffect(() => {
        let rawText = text;
        if (currentText.length < rawText.length) {
            set__Timeout(setTimeout(type, speed));
        }
        return () => {
            __timeout && clearTimeout(__timeout);
        };
    }, [currentText]);

    function startTyping() {
        set__Timeout(
            setTimeout(() => {
                type();
            }, speed)
        );
    }

    function type() {
        let rawText = text;

        if (currentText.length < rawText.length) {
            let displayText = rawText.substr(0, currentText.length + 1);
            setCurrentText(displayText);
        }
    }

    return (
        <div className="Typewriter" {...otherProps}>
            <span className="Typewriter__text">{currentText}</span>
            <span className="Typewriter__cursor">|</span>
        </div>
    );
}

The function startTyping initiates the first call for text change. The function type updates the current text while on every update of currentText, type function is called after every speed (which is passed as a prop) milliseconds.

Erasing Effect

We have already implemented the typing effect, and for erasing effect, we need a flag to know whether we are typing or erasing. Thereby, we can create a cycle of typing to erasing and vice-versa.

function Typewriter({ text, speed, eraseSpeed, typingDelay, eraseDelay, ...otherProps }) {
    ...
    const [isTyping, setIsTyping] = React.useState(true);

    ...

    React.useEffect(() => {
        let rawText = text;
        if (isTyping) {
            if (currentText.length < rawText.length) {
                set__Timeout(setTimeout(type, speed));
            } else {
                setIsTyping(false);
                set__Timeout(setTimeout(erase, eraseDelay));
            }
        } else {
            if (currentText.length === 0) {
                setIsTyping(true);
                setTimeout(startTyping, typingDelay);
            } else {
                set__Timeout(setTimeout(erase, eraseSpeed));
            }
        }
        return () => {
            __timeout && clearTimeout(__timeout);
        };
    }, [currentText]);

    ...

    function erase() {
        if (currentText.length !== 0) {
            let displayText = currentText.substr(-currentText.length, currentText.length - 1);
            setCurrentText(displayText);
        }
    }

    ...

}

Added an erase function for diminishing effect and a state variable isTyping for erasing or typing switch. Updated the useEffect on currentText for startTyping when currentText.length is zero with typingDelay (added to the props) seconds and switch to typing, else erase is called after every eraseSpeed (added to the props) milliseconds. For typing mode, added switch to erasing after erasingDelay when currentText.length reaches full length.

Enabling Array of Text

We need to add an index for the array and function to handle array or string for text prop.

function Typewriter({ text, speed, eraseSpeed, typingDelay, eraseDelay, ...otherProps }) {
    ...
    const [currentIndex, setCurrentIndex] = React.useState(0);

    ...
    React.useEffect(() => {
        let rawText = getRawText()[currentIndex];
        if (isTyping) {
        ...
        } else {
            if (currentText.length === 0) {
                const textArray = getRawText();
                let index = currentIndex + 1 === textArray.length ? 0 : currentIndex + 1;
                if (index === currentIndex) {
                    setIsTyping(true);
                    setTimeout(startTyping, typingDelay);
                } else {
                    setTimeout(() => setCurrentIndex(index), typingDelay);
                } 
            }
            else {
                set__Timeout(setTimeout(erase, eraseSpeed));
            }
        }
        ...
    }, [currentText]);   


    React.useEffect(() => {
        if (!isTyping) {
            setIsTyping(true);
            startTyping();
        }
        return () => {
            __timeout && clearTimeout(__timeout);
        };
    }, [currentIndex]);

    function getRawText() {
        return typeof text === 'string' ? [text] : [...text];
    }

    ...
    function type() {
        let rawText = getRawText()[currentIndex];
        ...
    }

    function erase() {
        let index = currentIndex;
        if (currentText.length !== 0) {
            let displayText = currentText.substr(-currentText.length, currentText.length - 1);
            setCurrentText(displayText);
        } else {
            const textArray = getRawText();
            index = index + 1 === textArray.length ? 0 : index + 1;
            setCurrentIndex(index);
        }
    }

    ...
}

Added getRawText function to handle string or array at the same time from text prop and added state variable currentIndex for array index. Updated useEffect for currentText, in erasing mode, to switch to next string in array and start typing. Added useEffect for currentIndex, to setTyping true and startTyping.

Alternate cursor

...
function Typewriter({ text, speed, eraseSpeed, cursor, typingDelay, eraseDelay, ...otherProps }) {
    ...
    return (
        <div className="Typewriter" {...otherProps}>
            <span className="Typewriter__text">{currentText}</span>
            <span className="Typewriter__cursor">{cursor}</span>
        </div>
    );
}

Added cursor to the prop and added the same in return section of the function

Adding PropTypes and default Props

Added import for proptypes

import React from 'react';
import PropTypes from 'prop-types';
import './Typewriter.css';
...

Added defaultProps for speed, eraseSpeed, typingDelay and eraseDelay

Typewriter.propTypes = {
    speed: PropTypes.number.isRequired,
    eraseSpeed: PropTypes.number.isRequired,
    typingDelay: PropTypes.number.isRequired,
    eraseDelay: PropTypes.number.isRequired,
    cursor: PropTypes.string,
    text: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]).isRequired,
};

Typewriter.defaultProps = {
    speed: 500,
    eraseSpeed: 400,
    typingDelay: 2500,
    eraseDelay: 5000,
};

Final Code

Final Code for Typewriter.jsx

https://github.com/shivishbrahma/nuclear-reactor/blob/main/src/Typewriter/Typewriter.jsx

Use withtin App Component

import './App.css';
import Typewriter from './Typewriter';

function App() {
    return <div className="App">
        <Typewriter text={["Typewriter Effect", "A React Component"]}/>
    </div>;
}

export default App;