DEV Community: Em Ha Tuan

The Compound Component Pattern in React

Em Ha Tuan — Mon, 14 Oct 2024 06:02:48 +0000

The Compound Component Pattern is a powerful design approach in React that allows for flexible and intuitive component APIs. This pattern is perfect for creating components that work together seamlessly, offering developers more control over the structure and behavior of their UI elements.

In my latest article, I explain how the Compound Component Pattern works, its advantages, and how to implement it in your React projects. This pattern simplifies code and improves the maintainability of complex interfaces.

Read the full article here: The Compound Component Pattern in React.

Discover how this pattern can enhance your React development process!

Higher-Order Components (HOCs) in React

Em Ha Tuan — Mon, 14 Oct 2024 05:58:14 +0000

Higher-Order Components (HOCs) are a powerful pattern in React that allow developers to reuse logic and enhance components with additional functionality. Whether you’re working on authentication, logging, or enhancing UI features, HOCs provide an efficient solution to common problems.

In my latest article, I break down the concept of Higher-Order Components, explain why they’re essential for managing code complexity, and demonstrate how you can use them to streamline your React applications.

Discover more in my full article here: Higher-Order Components (HOCs) in React

Check it out to see how HOCs can simplify and improve your React development workflow!

Exploring JavaScript: From Scripting to Object-Oriented Programming

Em Ha Tuan — Mon, 14 Oct 2024 05:56:24 +0000

JavaScript has come a long way from its origins as a simple scripting language for adding interactivity to web pages. Today, it stands as a powerful, versatile language capable of supporting complex object-oriented programming (OOP) principles.

In my latest article, I dive deep into the evolution of JavaScript from its scripting roots to becoming a fully-fledged object-oriented programming language. Whether you’re a beginner looking to understand the basics or an experienced developer exploring the advanced features, this article provides valuable insights.

Read the full post here: JavaScript: From Scripting to Object-Oriented Programming

Check it out and explore how JavaScript’s flexibility continues to empower modern development!

Unit test in programming

Em Ha Tuan — Fri, 21 Apr 2023 16:20:17 +0000

What is that 🙋?

In computer programming, unit testing is a software testing method by which individual units of source code-sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures—are tested to determine whether they are fit for use.

Unit tests are typically automated tests written and run by software developers to ensure that a section of an application (known as the "unit") meets its design and behaves as intended. In procedural programming, a unit could be an entire module, but it is more commonly an individual function or procedure. - Wikipedia.

Why do we use it? I think it is making us spend more effort to do something which end-users never use ...

Yes, it is true. Unit testing may not be directly used by end-users 🦹‍♂️. BUT it is still a critical part of the software development process. Here are some reasons why we use unit testing.

To ensure correctness

Unit testing helps to ensure that each component of a software system behaves as expected. By testing each unit of code in isolation. We can verify that is works correctly before integrating it with other parts of the system.

To catch bugs early

Unit testing help to catch bugs early in the development process, when they are less expensive to fix. By detecting issues as soon as they are introduced, we can avoid downstream problems that might be more difficult and time-consuming to solve.

To facilitate change

Unit testing helps to make it easier to change software over time. By have a suite of tests in place, developers can be confident that their changes do not break existing functionality.

To improve code quality

Unit testing helps to improve the quality of software by encouraging good programming practices. By writing tests for each unit of code, developers are forced to think about the expected behavior of their code, which can lead to better-designed and more maintainable software.

Fetching image function by Javascript

Here's an example of a simple function in JavaScript that fetches an image from https://picsum.photos/1080:

async function fetchImage() {
  const response = await fetch('https://picsum.photos/1080');
  const blob = await response.blob();
  const url = URL.createObjectURL(blob);
  return url;
}

And here's an example of a unit test for this function using the Jest testing framework:

test('fetchImage returns a URL', async () => {
  const url = await fetchImage();
  expect(typeof url).toBe('string');
  expect(url).toMatch(/^blob:/);
});

This test ensures that the fetchImage function returns a URL string that starts with blob: (since the response from the fetch API is a Blob object). If the test passes, it means that the function is working as expected and can be used in other parts of the code with confidence.

Summary

Unit testing is a software testing technique.
Unit tests are typically automated and use specialized testing frameworks or libraries, such as JUnit for Java or Jest for JavaScript.
The goal of unit testing is to ensure that each unit of code is correct, reliable, and meets its design requirements.
Unit testing is just one part of the software testing process, and it should be used in conjunction with other testing techniques, such as integration testing and system testing, to ensure that the software is of high quality and meets the needs of its users.

Publishing and set up Postgres in Ubuntu [Sharing knowledge]

Em Ha Tuan — Sun, 26 Feb 2023 13:11:23 +0000

Hi,

I just hired the Linux VPS - Ubuntu 20.04 from A supplier. So my purpose is to host my website on the internet. So my technical stack, I need to create a Postgres database. So here are the things which I set up and also public Postgres to the internet which I can access without ssh.

What will you read:

Connect to VPS.
Update Ubuntu and install Postgres Database.
Change the password and create a database for postgres users.
Customize Postgres config and public database to the internet.
ufw ****- Uncomplicated Firewall.

1. Connect to VPS by ssh.

ssh root@<VPS_IP_ADDRESS>

First, I need to make sure everything is updated. So I run the command in the terminal. I don’t run with sudo because I accessed to VPS by root account ssh root@...

apt-get update

2. Update Ubuntu and install Postgres Database.

After the command is done. I will run the command to install Postgres in VPS.

apt-get install postgresql postgresql-contrib

3. Change the password and create a database for `postgres` users.

The user postgres is the default account when installing Postgres. So I will keep this account to process my database. So I will access to Postgres by command:

su - postgres
psql

Then I will set the password to postgres user to make sure the database that is assigned to postgres user is accessed by password. I will set the password by command:

\password postgres

I will create a database name demo. Do not forget the ; at the end of the command.

CREATE DATABASE demo;

Okay, we have a user with a password and database assigned to that user. Now, we will custom Postgres server to publicize this database outside the VPS.

4. Customize Postgres config and public database to the internet.

Checking status of Postgres database is active or inactive? Use the command:

systemctl status postgresql

Customize the address listener of Postgres in VPS. Use the command:

vim /etc/postgresql/10/main/postgresql.conf

I use vim editor. You can use any editor which you want. I press / to find

listen_addresses = '[localhost](http://localhost)'
then open the comment by removing # and editing localhost to '*'.

listen_address = '*'

Update the IP address which can access only Postgres. I use 0.0.0.0/0 is the whitelist IP address to which any user can access this database on the internet:

vim /etc/postgresql/10/main/pg_hba.conf

Finding:

# IPv4 local connections: host all all 127.0.0.1/32 md5

And replace to:

# IPv4 local connections: host all all 0.0.0.0/0 md5

Then save it.

5. `ufw` ****- Uncomplicated Firewall.

I will use ufw to enable port 5432 - default port of Postgres, to user outside can only access to database via port 5432.

apt-get install ufw
ufw enable
ufw allow 5432/tcp

Here is the result after running the command:

Rule added
Rule added (v6)

Finally, I will reset the Postgres service to apply all the changes:

systemctl restart postgresql
// don't forget check the status of postgres.
systemctl status postgresql

Test - try to connect to VPS with pgAdmin4

Hope, you can get something in this post.

Thank you for reading.

Understanding Single responsibility principle by Javascript - [Sharing knowledge]

Em Ha Tuan — Sat, 25 Feb 2023 09:24:45 +0000

I believe someone like me who does not know what are SOLID principles in design software? So badly, I am not learning at university or a degree. But luckily, I do self-learning information technology by myself. Until now, I am learning the SOLID principle to get cool skills or awesome knowledge about designing the application system - I think. Here are a few things about the Single responsibility principle (SRP) in the programming language. I use Javascript to code the example. Hope, you can archive something from my post.

What will you read?

What is Single-Responsibility Principle?
Why is Single-Responsibility Principle?
When we use Single-Responsibility Principle?
Example code by Javascript.
Summary.

1. What is Single-Responsibility Principle - SRP?

SRP is a software design principle that states that a software component such as a class, an object, or a module must have only one responsibility and only one reason to change.

In other words, a class or module should have only one primary purpose. All the methods and attributes should be related to that responsibility.

It helps to reduce complexity or coupling between modules or classes. Making the code easier to understand, read or maintain and making it more reusable.

SRP is a part of the SOLID principles of object-oriented design.

SRP was first introduced in 2003 in the book “Agile Software Development, Principles, Patterns, and Practices” by Robert C. Martin (a well-known software engineer) author.

2. Why is Single-Responsibility Principle?

We ask ourselves, why do we need to follow this principle in the design system? In my experience, I am working on a lot of projects. A project has a few people to a big project has 20 or more people working together. In that case, we will meet the problems about the scaleable, complex business requirement, maintaining, fixing bugs, i.e. So in this case, the principle is powerful to control the structure of the system to ensure every gear is working smoothly in a big machine. That is why we talk about a principle - SRP. Here are several important reasons we need to follow in SRP:

Encourages modularity: by having a single purpose per module or component. The system is easier to understand, read or maintain, fixing bugs without impacting or affecting other parts of the system.
Improves maintainability: because each module has a single responsibility so there is only one reason to change that makes the modules less affecting to the other parts of the system.
Promotes reusability: modules only have one purpose so it’s easier to reuse. Because they are only focused on a specific task and do not have any coupling or complexity dependencies.
Reduces coupling: if the module or component has a lot of dependencies. it makes the application harder to change or replace. So keep the module simple as we can.

3. When we use Single-Responsibility Principle?

SRP can be applied whenever we are designing or refactoring software components or modules. It is useful in object-oriented programming where the classes are the primary building blocks of the system. We can use the SRP in the following scenarios:

Designing new modules: by creating a new module, we should consider making sure that it has a single purpose to do one thing - well-defined responsibility.
Refactoring existing modules: when we are refactoring the existing modules. Consider the complexity of coupling dependencies of the module. If the module has more than 2 purposes. We should break them into small modules that have a well-defined responsibility and do not overlap with other modules.
Design software architecture: when we design the architecture of a software system. We can use the SRP to ensure that each module has a well-defined responsibility and does not overlap other modules.
Writing tests: writing test is a part of software development. We can use the SRP to ensure that each test focuses on a single aspect of the module logic or behavior.

4. Example code by Javascript.

We look at the example below:

function Question(questions) {
  this.questions = questions;

  this.printReport = () => {
    console.log("Printer called");
    console.log("3th party printer function called");
  };

  this.saveDatabase = (questions) => {
    console.log({questions});
    console.log(`Saved to database`);
  };

  this.remove = (question) => {
    console.log("removed question " + question);
    this.questions = this.questions.filter(q => q !== question);
    this.saveDatabase(this.questions);
  }

  this.add = (question) => {
    console.log("added " + question);
    this.questions.push(question);
        this.saveDatabase(this.questions);
  }
}

const q = new Question([
  "Question 1",
  "Question 2",
  "Question 3",
  "Question 4"
]);

q.remove("Question 1");
q.printReport();
q.add("Question 5");
q.printReport();

The purpose of Question object is to process the questions as save, list out, remove question and also printing. In this approach, the problem is the printReport, saveDatabase , remove function, and also the mechanism log of the system - console.log.

In this context, we change the method saveDatabase from Postgres to MongoDB, so we are going to change all the functions of objects reference to save the data method. The printReport , remove and console.log are the same like that.

Now, look at the new code below:

function printer(data) {
    console.log("3th party function called");
  log(`[${new Date().toLocaleString()}]--------------------------------`);
  log(data, "info");
}

function log(message, type = "log") {
  console?.[type](message);
}

function saveDatabase(data) {
  log({data}, "info");
  log(`Saved data to database`, "info");
}

function Question(questions) {
  this.questions = questions;

  this.printReport = () => {
    printer(this.questions);
  };

  this.remove = (question) => {
    log("removed question " + question);
    this.questions = this.questions.filter(q => q !== question);
    saveDatabase(this.questions);
  }

  this.add = (question) => {
    log("added " + question);
    this.questions.push(question);
        saveDatabase(this.questions);
  }
}

const q = new Question([
    "Question 1",
    "Question 2",
    "Question 3",
    "Question 4"
]);

q.remove("Question 1");
q.printReport();
q.add("Question 5");
q.printReport();

The printReport , saveDatabase , log functions moved to other objects, implementing the remove method. So now every function just does one thing. If each function changes the logic, we only go to this function and do/change logic based on another requirement without modifying other functions which used them and prevent the unexpected bug.

Summary

There are some important keywords related to Single-Responsibility Principle (SRP):

Responsibility: well-defined responsibility. One module - one purpose - one reason to change.
Cohesion: make the design system a low cohesive module that is unrelated.
Coupling: make the modules low coupling that is the module is not dependent on other modules.
Separation of Concerns: break the big module into small modules. Each module is resolved by a small part of the system.
Refactoring: by breaking application to the small peace. Refactoring is easier to understand, read and maintain the module without impacting or affecting other modules.

CRUD - React and Google Firebase

Em Ha Tuan — Tue, 27 Sep 2022 14:39:22 +0000

Hi, It's me again.
In this post, I share to you how can I manage or CRUD the file in google firebase - storage with React.

Create react app with nextjs framework

create-next-app nextjs-crud-gg --ts

Installing the libraries

npm i -s firebase uuid && npm i --dev @types/uuid

Creating the structure of project.

storage.ts in libs folder - (root_project)/libs/storage.ts
fileManage.ts in utils folder - (root_project)/utils/fileManage.ts
Add env variable to next.config.js
Custom the index.tsx page - We just use one page to CRUD the file as the demo page.

I. Setup google firebase storage in storage.ts

import { initializeApp } from 'firebase/app';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
  apiKey: process.env.GOOGLE_API_KEY,
  authDomain: process.env.GOOGLE_AUTH_DOMAIN,
  projectId: process.env.GOOGLE_PROJECT_ID,
  storageBucket: process.env.GOOGLE_STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId: process.env.GOOGLE_APP_ID,
  measurementId: process.env.GOOGLE_MEASUREMENT_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

export { storage };

II. Setup environment variables in the next.config.js

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  env: {
    GOOGLE_API_KEY: <value_here>,
    GOOGLE_AUTH_DOMAIN:  <value_here>,
    GOOGLE_PROJECT_ID: <value_here>,
    GOOGLE_STORAGE_BUCKET: <value_here>,
    MESSAGING_SENDER_ID: <value_here>,
    GOOGLE_APP_ID:  <value_here>,
    GOOGLE_MEASUREMENT_ID:  <value_here>,
  },
};
module.exports = nextConfig;

To figure out, how we can get

<value_here>

. Please refer to this link firebase.google.com

III. Make a library to manage the file in fileManage.ts

import { storage } from '../libs/storage';
import {
  deleteObject,
  getDownloadURL,
  listAll,
  ref,
  uploadBytes,
  UploadResult,
} from 'firebase/storage';
import { v4 } from 'uuid';

/**
 * Get all file by folder name.
 *
 * @param string folder image.
 * @returns array File of url.
 */
export async function getAllFile(folder: string) {
  const filesRef = ref(storage, `${folder}`);
  const files = (await listAll(filesRef)).items;
  return Promise.all(
    files.map(async (fileRef) => {
      return await getDownloadURL(fileRef);
    }),
  );
}

/**
 * Get file by url.
 *
 * @param string url image.
 * @returns boolean true if deleted file.
 */
export async function getFile(url: string) {
  const fileRef = ref(storage, url);
  return await getDownloadURL(fileRef);
}

/**
 * Delete file by url.
 *
 * @param string url image.
 * @returns boolean true if deleted file.
 */
export async function deleteFile(url: string) {
  const fileRef = ref(storage, url);
  await deleteObject(fileRef);
}

/**
 * Upload file to google firebase storage.
 *
 * @param string folder name.
 * @param array filesUpload list of file
 * @returns array list of url file.
 */
export async function uploadFile(folder: string, filesUpload: File[]) {
  return Promise.all(
    [...filesUpload].map(async (file: File) => {
      const fileRef = ref(storage, `${folder}/${file.name + v4()}`);
      const value: UploadResult = await uploadBytes(fileRef, file);
      return await getDownloadURL(value.ref);
    }),
  );
}

Method	Description
getAllFile	Get all the file in google firebase storage base the the fodler name
getFile	Get single file based on the url of file
deleteFile	Delete file based on the url of file
uploadFile	Upload multiple file
updateFile	Well, we can delete the file which uploaded before we upload the new file. That make easy and simple. We can use the methods: "deleteFile" + "uploadFile".

VI. Manage the file with React

I will edit the index.tsx page

import type { NextPage } from 'next';
import { useRef, useState } from 'react';
import { deleteFile, getAllFile, uploadFile } from '../utils/fileManager';

const Home: NextPage = () => {
  // Hook for upload the file
  const [images, setImages] = useState<File[]>([]);
  // Hook for preview the file uploaded.
  const [imagesUploaded, setImageUploaded] = useState<string[]>([]);
  // Hook for list all the file in the "images" folder.
  const [imageGallery, setImageGallery] = useState<string[]>([]);
  // Use fileRef to clean the file after uploaded.
  const fileRef = useRef<HTMLInputElement>(null);
  // Creating the folder in google firebase storage. I named the "images" for contain only the type of image.
  const FOLDER_NAME = 'images';

  /**
   * Add file uploaded
   * @param e Event HTML Input Change
   */
  const handleOnChange = (e: any) => {
    setImages(e.target.files as File[]);
    e.target.files = null;
  };

  /**
   * Delete the file with url file.
   * @param url string
   */
  const handleOnDelete = (url: string) => {
    deleteFile(url).then(() => {
      setImageUploaded((prev) => prev.filter((img) => img !== url));
      setImageGallery((prev) => prev.filter((img) => img !== url));
      alert(`Deleted file`);
    });
  };

  /**
   * Upload file, and show alert if success.
   */
  const handleOnUpload = () => {
    if (images.length === 0) return false;
    uploadFile(FOLDER_NAME, images).then((imageList) => {
      setImageUploaded(imageList);
      alert('Upload file successed');
      if (fileRef.current) {
        fileRef.current.value = '';
      }
    });
  };

  /**
   * Get all the files base on the folder name.
   */
  const handleGetFiles = () => {
    getAllFile(FOLDER_NAME)
      .then((listImages) => {
        setImageGallery(listImages);
      })
      .catch((err) => {
        console.log('Something went wrong', err);
      });
  };

  return (
    <div className="app">
      <div className="form-control">
        <label htmlFor="file">
          <input
            type="file"
            ref={fileRef}
            onChange={handleOnChange}
            multiple
          />
        </label>
        <button
          className="button"
          onClick={handleOnUpload}
        >
          Upload file to firebase storage
        </button>
      </div>
      <div className="image-container">
        <p>Image preview</p>
        <ul className="image-container__list">
          {imagesUploaded.length > 0 &&
            imagesUploaded.map((image) => (
              <li
                style={{ listStyle: 'none' }}
                key={image}
              >
                <img
                  src={image}
                  width="100%"
                />
                <button
                  type="button"
                  onClick={() => handleOnDelete(image)}
                >
                  Delete file
                </button>
              </li>
            ))}
        </ul>
      </div>
      <div className="image-container-gallery">
        <h1>
          Image Gallery
          <button
            className="button"
            onClick={handleGetFiles}
          >
            Click me to get it !!!
          </button>
        </h1>
        <div className="image-container">
          <ul className="image-container__list">
            {imageGallery.length > 0 &&
              imageGallery.map((image) => (
                <li
                  style={{ listStyle: 'none' }}
                  key={image}
                >
                  <img
                    src={image}
                    width="100%"
                  />
                  <button
                    type="button"
                    onClick={() => handleOnDelete(image)}
                  >
                    Delete file
                  </button>
                </li>
              ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default Home;

V. That it's. Hope you doing great.

Thank for reading
Have a good day.

Thang Em No Dev.

DEV Community: Em Ha Tuan

The Compound Component Pattern in React

Higher-Order Components (HOCs) in React

Exploring JavaScript: From Scripting to Object-Oriented Programming

Unit test in programming

What is that 🙋?

Why do we use it? I think it is making us spend more effort to do something which end-users never use ...

To ensure correctness

To catch bugs early

To facilitate change

To improve code quality

Fetching image function by Javascript

Summary

Publishing and set up Postgres in Ubuntu [Sharing knowledge]

What will you read:

1. Connect to VPS by ssh.

2. Update Ubuntu and install Postgres Database.

3. Change the password and create a database for postgres users.

4. Customize Postgres config and public database to the internet.

5. ufw ****- Uncomplicated Firewall.

Understanding Single responsibility principle by Javascript - [Sharing knowledge]

What will you read?

1. What is Single-Responsibility Principle - SRP?

2. Why is Single-Responsibility Principle?

3. When we use Single-Responsibility Principle?

4. Example code by Javascript.

Summary

CRUD - React and Google Firebase

Create react app with nextjs framework

Installing the libraries

Creating the structure of project.

I. Setup google firebase storage in storage.ts

II. Setup environment variables in the next.config.js

III. Make a library to manage the file in fileManage.ts

VI. Manage the file with React

V. That it's. Hope you doing great.

3. Change the password and create a database for `postgres` users.

5. `ufw` ****- Uncomplicated Firewall.