Forem: Riyad Hossain

Mastering MongoDB Aggregation Framework: Unraveling the Power of Pipelines

Riyad Hossain — Wed, 31 May 2023 12:31:38 +0000

In the fast-paced world of software development, engineers are often tasked with solving complex problems efficiently. As a Backend Software Engineer, I face numerous challenges while building robust APIs and integrating them with powerful databases. One such scenario arises when I was assigned to create an API for displaying statistics on a service. In this blog, I will illustrate my journey to embark on a quest to implement a MongoDB Aggregation Framework for fetching complex calculated data.

Afew days ago, I was handed the responsibility of writing an API that displays statistics for a service. To obtain this data, I needed to fetch and process information stored in a MongoDB database in different collections. However, my knowledge of the MongoDB Aggregation Framework was initially limited. Nonetheless, I eagerly took on the challenge, realizing that this would be an excellent opportunity to enhance your expertise in MongoDB Aggregation.

Unveiling the Aggregation Pipeline: The MongoDB Aggregation Framework provides a powerful toolset for performing complex data operations on MongoDB collections. It allows you to process, transform, and analyze data through a series of stages known as the Aggregation Pipeline. Each stage in the pipeline takes input from the previous stage and produces output for the subsequent one. Let’s dive into the details of each stage in the Aggregation Framework implemented for your API.

Stage 1: Match Document:

{
  $match: {
    store: storeId,
  }
}

At the beginning of the pipeline, the $match stage filters the documents based on a specific condition. In this case, it matches documents with a particular store ID.

Stage 2: Lookup OfferUsers:

       {
          $lookup: {
            from: "offerusers",
            localField: "_id",
            foreignField: "offer",
            as: "customers"
          }
        }

In the $lookup stage, the Aggregation Framework performs a left outer join with the “offerusers” collection. It connects documents from the “Offers” collection with related documents from the “offerusers” collection using the “offer” and “_id” fields, respectively. The matching documents are stored in the “interestedCustomers” field.

Stage 3: Filter the interestedCustomer:

      {
          $addFields: {
            interestedCustomers: {
              $filter: {
                input: "$customers",
                as: "customer",
                cond: {
                  $and: [
                    { $gte: ["$$customer.viewDate", startDate] },
                    { $lte: ["$$customer.viewDate", endDate] }
                  ]
                }
              }
            }
          }
        }

The $addFields stage is used to filter the “interestedCustomers” based on a date range. The $filter operator selects only the customers whose “viewDate” falls within the specified start and end dates.

Stage 4: Add fields — footTraffic, sales:

{
          $addFields: {
            footTrafficStatus: {
              $filter: {
                input: "$customers",
                as: "customer",
                cond: {
                  $and: [
                    { $gte: ["$$customer.footTrafficDate", startDate] },
                    { $lte: ["$$customer.footTrafficDate", endDate] }
                  ]
                }
              }
            },
            salesStatus: {
              $filter: {
                input: "$customers",
                as: "customer",
                cond: {
                  $and: [
                    { $gte: ["$$customer.claimedAt", startDate] },
                    { $lte: ["$$customer.claimedAt", endDate] }
                  ]
                }
              }
            }
          }
        }

The $addFields stage is used again to add two fields: “footTrafficStatus” and “salesStatus.” These fields contain filtered arrays of “interestedCustomers” based on specific date ranges.

Stage 5: Add fields — interestedUsers, footTraffic, salesCount:

{
          $addFields: {
            interestedUsers: {
              $size: "$interestedCustomers"
            },
            footTraffic: {
              $size: "$footTrafficStatus"
            },
            sales: {
              $size: "$salesStatus"
            },
          }
        }

In this stage, the $addFields operator calculates the number of interested users, foot traffic, and the count of sales. The $size operator counts the number of elements in each array.

Stage 6: Add fields — amount, conversionRate, revenue:

{
          $addFields: {
            salesStatus: {
              $map: {
                input: "$salesStatus",
                as: "status",
                in: {
                  $mergeObjects: [
                    "$$status",
                    {
                      amount: {
                        $cond: {
                          if: { 
                          $eq: ['$__t', 'ParticularProduct'] 
                          },
                          then: "$discountedPrice",
                          else: "$minimumBillAmount",
                        }
                      }
                    }
                  ]
                }
              }
            },
            conversionRate: {
              $cond: {
                if: {
                  $eq: ["$interestedUsers", 0]
                },
                then: 0,
                else: {
                  $multiply: [
                    {
                      $divide: [
                        "$sales", {
                          $max: [1, "$interestedUsers"]
                        }
                      ]
                    },
                    100
                  ]
                }
              }
            },
            revenue: {
              $cond: {
                if: {
                  $eq: ["$sales", 0]
                },
                then: 0,
                else: {
                  $cond: {
                    if: { $eq: ['$__t', 'ParticularProduct'] },
                    then: { $multiply: ["$sales", "$discountedPrice"] },
                    else: { $multiply: ["$sales", "$minimumBillAmount"] }
                  }
                }
              }
            }
          }
        }

Here, the $addFields stage adds additional fields to the “salesStatus” objects. It also calculates the conversion rate and revenue based on certain conditions.

Stage 7: Group by _id to merge salesStatus objects into an array:

{
          $group: {
            _id: null,
            interestedUsers: { $sum: "$interestedUsers" },
            footTraffic: { $sum: "$footTraffic" },
            sales: { $sum: "$sales" },
            revenue: { $sum: "$revenue" },
            conversionRate: { $avg: "$conversionRate" },
            interestedCustomers: { $push: "$interestedCustomers" },
            footTrafficStatus: { $push: "$footTrafficStatus" },
            salesStatus: { $push: "$salesStatus" }
          }
        }

The $group stage groups the documents and merges the “salesStatus” objects into an array. It also calculates the sum of interested users, foot traffic, sales, and revenue. The conversion rate is averaged across all documents.

Stage 8: Add objects in interestedCustomers, footTraffic, salesStatus array to the root level:

{
          $addFields: {
            interestedCustomers: {
              $reduce: {
                input: "$interestedCustomers",
                initialValue: [],
                in: { $concatArrays: ["$$value", "$$this"] }
              }
            },
            footTrafficStatus: {
              $reduce: {
                input: "$footTrafficStatus",
                initialValue: [],
                in: { $concatArrays: ["$$value", "$$this"] }
              }
            },
            salesStatus: {
              $reduce: {
                input: "$salesStatus",
                initialValue: [],
                in: { $concatArrays: ["$$value", "$$this"] }
              }
            }
          }
        }

The $addFields stage extracts the arrays of “interestedCustomers,” “footTrafficStatus,” and “salesStatus” from the grouped documents. It flattens these arrays and brings them to the root level.

Stage 9: Add field — visitedStore, madePurchase in the interestedCustomers & madePurchase in the footTrafficStatus:

{
          $addFields: {
            interestedCustomers: {
              $map: {
                input: "$interestedCustomers",
                as: "status",
                in: {
                  $mergeObjects: [
                    "$$status",
                    {
                      visitedStore: {
                        $cond: {
                          if: { $ifNull: ["$$status.footTrafficDate", false] },
                          then: true,
                          else: false
                        }
                      },
                      madePurchase: {
                        $cond: {
                          if: { $ifNull: ["$$status.claimedAt", false] },
                          then: true,
                          else: false
                        }
                      }
                    }
                  ]
                }
              }
            },
            footTrafficStatus: {
              $map: {
                input: "$footTrafficStatus",
                as: "status",
                in: {
                  $cond: {
                    if: { $ifNull: ["$$status.claimedAt", false] },
                    then: {
                      $mergeObjects: [
                        "$$status",
                        { madePurchase: true }
                      ]
                    },
                    else: {
                      $mergeObjects: [
                        "$$status",
                        { madePurchase: false }
                      ]
                    }
                  }
                }
              }
            }
          }
        }

In this stage, the $addFields operator adds two new fields, “visitedStore” and “madePurchase,” to the “interestedCustomers” array. Similarly, the “madePurchase” field is added to the “footTrafficStatus” array.

Stage 10: Exclude specific fields from the interestedCustomers, footTrafficStatus, and salesStatus array:

{
          $project: {
            validOffersCount: 1,
            _id: 1,
            interestedUsers: 1,
            footTraffic: 1,
            sales: 1,
            revenue: 1,
            conversionRate: 1,
            interestedCustomers: {
              $map: {
                input: "$interestedCustomers",
                as: "customer",
                in: {
                  user: "$$customer.user",
                  timeOfClicking: "$$customer.viewDate",
                  visitedStore: "$$customer.visitedStore",
                  madePurchase: "$$customer.madePurchase",
                }
              }
            },
            footTrafficStatus: {
              $map: {
                input: "$footTrafficStatus",
                as: "customer",
                in: {
                  user: "$$customer.user",
                  visitedTime: "$$customer.footTrafficDate",
                  madePurchase: "$$customer.madePurchase"
                }
              }
            },
            salesStatus: {
              $map: {
                input: "$salesStatus",
                as: "customer",
                in: {
                  user: "$$customer.user",
                  purchasedAt: "$$customer.claimedAt",
                  amount: "$$customer.amount"
                }
              }
            },
          }
        }

The $project stage excludes specific fields from the “interestedCustomers,” “footTrafficStatus” and “salesStatus” arrays, keeping only the desired fields related to user information, timestamps, and purchase details.

Full aggregation framework:

[
        // Stage 1: Match Document
        {
          $match: {
            store: storeId,
          }
        },

        // Stage 2: Lookup OfferUsers
        {
          $lookup: {
            from: "offerusers",
            localField: "_id",
            foreignField: "offer",
            as: "customers"
          }
        },

        // Stage 3: Filter the interestedCustomer
        {
          $addFields: {
            interestedCustomers: {
              $filter: {
                input: "$customers",
                as: "customer",
                cond: {
                  $and: [
                    { $gte: ["$$customer.viewDate", startDate] },
                    { $lte: ["$$customer.viewDate", endDate] }
                  ]
                }
              }
            }
          }
        },

        // Stage 4: Add fields - footTraffic, sales
        {
          $addFields: {
            footTrafficStatus: {
              $filter: {
                input: "$customers",
                as: "customer",
                cond: {
                  $and: [
                    { $gte: ["$$customer.footTrafficDate", startDate] },
                    { $lte: ["$$customer.footTrafficDate", endDate] }
                  ]
                }
              }
            },
            salesStatus: {
              $filter: {
                input: "$customers",
                as: "customer",
                cond: {
                  $and: [
                    { $gte: ["$$customer.claimedAt", startDate] },
                    { $lte: ["$$customer.claimedAt", endDate] }
                  ]
                }
              }
            }
          }
        },

        // Stage 5: Add fields - interestedUsers, footTraffic, salesCount
        {
          $addFields: {
            interestedUsers: {
              $size: "$interestedCustomers"
            },
            footTraffic: {
              $size: "$footTrafficStatus"
            },
            sales: {
              $size: "$salesStatus"
            },
          }
        },

        // Stage 6: Add fields - amount conversionRate, revenue
        {
          $addFields: {
            salesStatus: {
              $map: {
                input: "$salesStatus",
                as: "status",
                in: {
                  $mergeObjects: [
                    "$$status",
                    {
                      amount: {
                        $cond: {
                          if: { $eq: ['$__t', 'ParticularProduct'] },
                          then: "$discountedPrice",
                          else: "$minimumBillAmount",
                        }
                      }
                    }
                  ]
                }
              }
            },
            conversionRate: {
              $cond: {
                if: {
                  $eq: ["$interestedUsers", 0]
                },
                then: 0,
                else: {
                  $multiply: [
                    {
                      $divide: [
                        "$sales", {
                          $max: [1, "$interestedUsers"]
                        }
                      ]
                    },
                    100
                  ]
                }
              }
            },
            revenue: {
              $cond: {
                if: {
                  $eq: ["$sales", 0]
                },
                then: 0,
                else: {
                  $cond: {
                    if: { $eq: ['$__t', 'ParticularProduct'] },
                    then: { $multiply: ["$sales", "$discountedPrice"] },
                    else: { $multiply: ["$sales", "$minimumBillAmount"] }
                  }
                }
              }
            }
          }
        },
        // Stage 7: Group by _id to merge salesStatus objects into an array
        {
          $group: {
            _id: null,
            interestedUsers: { $sum: "$interestedUsers" },
            footTraffic: { $sum: "$footTraffic" },
            sales: { $sum: "$sales" },
            revenue: { $sum: "$revenue" },
            conversionRate: { $avg: "$conversionRate" },
            interestedCustomers: { $push: "$interestedCustomers" },
            footTrafficStatus: { $push: "$footTrafficStatus" },
            salesStatus: { $push: "$salesStatus" }
          }
        },

        // Stage 8: Add objects in interestedCustomers, footTraffic, salesStatus array to the root level
        {
          $addFields: {
            interestedCustomers: {
              $reduce: {
                input: "$interestedCustomers",
                initialValue: [],
                in: { $concatArrays: ["$$value", "$$this"] }
              }
            },
            footTrafficStatus: {
              $reduce: {
                input: "$footTrafficStatus",
                initialValue: [],
                in: { $concatArrays: ["$$value", "$$this"] }
              }
            },
            salesStatus: {
              $reduce: {
                input: "$salesStatus",
                initialValue: [],
                in: { $concatArrays: ["$$value", "$$this"] }
              }
            }
          }
        },

        // Stage 9: Add field - visitedStore, madePurchase in the interestedCustomers & madePurchase in the footTrafficStatus
        {
          $addFields: {
            interestedCustomers: {
              $map: {
                input: "$interestedCustomers",
                as: "status",
                in: {
                  $mergeObjects: [
                    "$$status",
                    {
                      visitedStore: {
                        $cond: {
                          if: { $ifNull: ["$$status.footTrafficDate", false] },
                          then: true,
                          else: false
                        }
                      },
                      madePurchase: {
                        $cond: {
                          if: { $ifNull: ["$$status.claimedAt", false] },
                          then: true,
                          else: false
                        }
                      }
                    }
                  ]
                }
              }
            },
            footTrafficStatus: {
              $map: {
                input: "$footTrafficStatus",
                as: "status",
                in: {
                  $cond: {
                    if: { $ifNull: ["$$status.claimedAt", false] },
                    then: {
                      $mergeObjects: [
                        "$$status",
                        { madePurchase: true }
                      ]
                    },
                    else: {
                      $mergeObjects: [
                        "$$status",
                        { madePurchase: false }
                      ]
                    }
                  }
                }
              }
            }
          }
        },

        // Stage 10: Exclude specific fields from the interestedCustomers, footTrafficStatus and salesStatus array
        {
          $project: {
            validOffersCount: 1,
            interestedUsers: 1,
            footTraffic: 1,
            sales: 1,
            revenue: 1,
            conversionRate: 1,
            interestedCustomers: {
              $map: {
                input: "$interestedCustomers",
                as: "customer",
                in: {
                  user: "$$customer.user",
                  timeOfClicking: "$$customer.viewDate",
                  visitedStore: "$$customer.visitedStore",
                  madePurchase: "$$customer.madePurchase",
                }
              }
            },
            footTrafficStatus: {
              $map: {
                input: "$footTrafficStatus",
                as: "customer",
                in: {
                  user: "$$customer.user",
                  visitedTime: "$$customer.footTrafficDate",
                  madePurchase: "$$customer.madePurchase"
                }
              }
            },
            salesStatus: {
              $map: {
                input: "$salesStatus",
                as: "customer",
                in: {
                  user: "$$customer.user",
                  purchasedAt: "$$customer.claimedAt",
                  amount: "$$customer.amount"
                }
              }
            },
          }
        }
      ]

Conclusion:

Through this blog, I have demonstrated the journey of my implementation of a MongoDB Aggregation Framework to fetch complex calculated data for a statistics API. The Aggregation Pipeline, consisting of ten stages, provided the necessary tools to process, filter, and transform the data at each step. By gaining expertise in the MongoDB Aggregation Framework, I truly empowered myself to tackle similar challenges in the future. As a Backend Software Engineer, mastering powerful tools like MongoDB Aggregation enables me to unlock the full potential of backend APIs and deliver valuable insights to users.

Are variables with let and const keywords hoisted in JavaScript?

Riyad Hossain — Fri, 03 Mar 2023 05:44:12 +0000

In JavaScript, all the variables declared with var, let, and const keywords are hoisted to the top. However, many think variables using let and const keywords are not hoisted because it throws an error if trying to access those variables(declared with let and const) before initialization. In this blog, I'll try to demonstrate the exact reason for the such different behavior of hoisting.

Hoisting in JavaScript

Before we dive into the differences in hoisting behavior, let's first understand Hoisting. when JavaScript compiles the code, all variable declarations using var are lifted to the top of their functional/local scope (if declared inside a function) or to the top of their global scope (if declared outside of a function) regardless of where the actual declaration has been made. This is what we mean by hoisting.

console.log(a) // undefined
var a;
a = 'Hello';

In the above example, if we try to access the a variable it will give us undefined. Because the JavaScript compiler first read the variables and functions declaration and create space for them.

Note: The concept of hosting is not a literal process (ie, the declarations themselves do not move to the top of the file — it is simply a process of the JavaScript compiler reading them first in order to create space in memory for them).

But the problem arises when we try to access a variable (declared with let or const keywords) before initialization. In that case, it'll throw a reference error.

console.log(b) // Uncaught ReferenceError: b is not defined
let b;
b = 'Hello';

console.log(c) // Uncaught ReferenceError: c is not defined
const c = 'Hello';

Here many programmers get confused and think that variable using let and const keywords doesn't hoist. However, in reality, those variables with let and const also hoist. MDN Reference

But, why we can't access before initialization like var variable?

Because of Temporal Dead Zone

Variables (declared with var) are hoisted with a default initialization which is undefined. That’s why if we try to access a variable (with the var keyword), it’ll not throw an error. Rather, it’ll give us undefined.
On the other hand, variables using (let and const) also do hoist but without a default initialization. That’s why accessing before initialization a variable (with let and const) will throw a reference error. It’s also known as the temporal dead zone where compilers know its existence but can’t access it because it’s uninitialized.

var a; // Compilers Read and hoist like: var a = undefined
let b; // Compilers Read and hoist like: var b

If you find this blog helpful, you can follow me on LinkedIn and GitHub. Also, if you have any feedback, please let me know in the comment section below.

Practical Examples of TypeScript

Riyad Hossain — Fri, 03 Mar 2023 04:42:14 +0000

TypeScript is a popular superset of JavaScript that adds static typing and other features to improve the development experience. In this blog post, we’ll explore practical examples of TypeScript that demonstrate how it can be used to solve common development challenges. Rather than focusing solely on syntax, we’ll dive into actual code examples. So, let’s get started!

What is TypeScript & its advangates
TypeScript is a superset of JavaScript that adds optional static typing, as well as other features like interfaces, classes, enums, and more. TypeScript was developed by Microsoft and released in 2012 and has since gained popularity among web developers due to its ability to catch errors at compile time and improve the maintainability and scalability of code.

One of the main benefits of using TypeScript is that it helps catch errors early in the development process. By adding static types to variables, functions, and classes, TypeScript can detect type-related errors before the code is even run. This can save developers a significant amount of time and effort in debugging and testing.

1.Data Types

let _id; // Implicit Declearation
let fb_id: any; // Explicit Declearation
fb_id = true;
fb_id = 23423523;

const firstName = "Riyad";
const lastName: string = "Hossain";
let isLoading: boolean;
isLoading = false;

let roll: string | number = 423;
roll = "423";

let device: string | number | boolean; // Union Type
device = "Mobile";
device = 4323523;

const re: RegExp = /\w+/g;

2. Function

// 2.1 Optionl & Default param
const sum = (
  a: number,
  b: number,
  c?: string, // Optional param
  d: number = 0 // Default param
): number | string => {
  let result: string | number;
  result = a + b + d;
  if (c) {
    result = a + b + c;
  }
  return result;
};

// 2.2 Function Signature
type mathFunc = (a: number, b: number) => number;

const multiply: mathFunc = (num1, num2) => {
  return num1 * num2;
};

const subtract = (num1: number = 10, num2?: number) => {
  if (typeof num2 !== "undefined") {
    return num1 - num2;
  }
  return num1;
};

subtract(undefined, 5); // To avoid sending param use undefined

// 2.3 Rest param
const sumAll = (a: number, ...numbers: number[]): number => {
  return a + numbers.reduce((prev, curr) => prev + curr);
};

// 2.4 'never' return type
const errorMsg = (msg: string): never => {
  // By default return type is - never
  throw new Error(msg);
};

// 2.5 Custom type guard
const isNumber = (a: any): boolean => {
  return typeof a === "number" ? true : false;
};

// 2.6 Usage of 'never' return type
const showStr = (a: number | string): string => {
  if (typeof a === "number") return "Number";
  if (typeof a === "string") return "String";
  return errorMsg("This should not happen");
  // 'never' return type preventing to compile error as this func return type is 'string'
};

3. Array

const anyTypeString = [];
const anyTypeString2: any[] = [];

const stringArr = ["Hello", "how", "are", "you"];
const stringArr2: string[] = ["Hello", "how", "are", "you"];
// X - stringArr.push(34)

const strAndNum = ["Hi", 143];
const strAndNum2: (string | number)[] = ["Hi", 143];
// X - strAndNum2[0](boolean)

const mixedData = ["bye", true, 77];
const mixedData2: (string | boolean | number)[] = ["bye", true, 77];

4. Tuple

const myTuple: [string, number, boolean] = ["hello", 143, false];
// X - const myTuple: [string, number, boolean, number] = ['hello', 143, false]
let anArr = ["hello1", 234, true];

myTuple[1] = 777;

anArr = myTuple;
// X - myTuple = Array

5. Object & Type & Interface

let myObj = {};
myObj = anArr;

myObj = {
  name: "Riyad",
  age: 22,
};

const alAmin: {
  name: string;
  age: number;
  premeum?: boolean;
} = {
  name: "Jobayer",
  age: 26,
  premeum: true,
};

type Person = {
  name: string;
  age: number;
  premeum?: boolean;
};

/*
We also can use 'interface' instead of 'type'. Syntax: interface Person {} interface is more preferrable on object & class.
*/

let jobayer: Person = {
  name: "Jobayer",
  age: 26,
  premeum: true,
};

let sadik: Person = {
  name: "Sadik",
  age: 24,
};

/* type/interface in Function */
const greetPerson = (personObj: Person): string => {
  return `Hello ${personObj.name}`;
};

const personIsPremium = (personObj: Person): string => {
  let result: string;
  /*
    X - result = personObj.premeum.toString()
    'personObj.premeum' is possibly 'undefined'
  */

  result = personObj.name + personObj.premeum;
  return result;
};

6. Enum

enum Alphabet {
  A = 1,
  B,
  C,
  D,
  E,
}

// If not assigned the first value- enum Alphabet { A , B, C, D, E }
console.log(Alphabet.C); // 0

// If assigned the first value
console.log(Alphabet.C); // 3

7. Alias & Literal Types

// 7.1 Type Alias
type numberOrString = number | string;
type stringOrNumArr = (string | number)[];

let job_id: numberOrString;

type Programmer = {
  name: string;
  age: number;
  devices: stringOrNumArr; // Can be used in another alias
};

// 7.2 Literal Type
let myName: "Riyad";
let userName: "Riyad" | "Jobayer" | "Sadik" | "Al-amin";
userName = "Jobayer";

8. Type Assertion

type strType = string
type strOrNum = string | number
type tsType = 'TypeScript'

let ts: strType = 'TypeScript'
let ts2 = ts as strType // less specific
let typeScript = ts as tsType // more specific

let myStr = <strType>'Riyad'
let myStr2 = <number | string>'Riyad'

const addOrConcat = (a: number, b: number, c: 'add' | 'concat'): number | string => {
  if (c === 'add') return a + b
  return '' + a + b
}
let myVal: string = addOrConcat(2, 2, 'concat') as string // To prevent getting error

// The DOM
const img = document.querySelector('img')!
const myImg = document.getElementById('#img') as HTMLImageElement
const nextImg = <HTMLImageElement>document.getElementById('#img')
img.src
myImg.src

const year = document.getElementById("year") as HTMLSpanElement
const thisYear: string = new Date().getFullYear().toString()
year.setAttribute("datetime", thisYear)
year.textContent = thisYear

9. TS Classes

// 9.1 Basic Class__________
class Individual {
  //   name: string;
  //   age: number;
  //   occupation: string;
  //   exp: number;

  // Don't need to write explicitly in the above if you define the type like following
  constructor(
    public readonly name: string,
    readonly age: number,
    protected exp: number, // accessible within class & subclasses
    private occupation: string // accessible within class
  ) {
    this.name = name;
    this.age = age;
    this.occupation = occupation;
    this.exp = exp;
  }

  getOccupation() {
    return `${this.name} is a ${this.occupation}`;
  }
}

const Riyad = new Individual("Riyad", 22, 2, "St Engineer");
console.log(Riyad.name);
console.log(Riyad.getOccupation());
// console.log(Riyad.occupation) - Property 'occupation' is private and only accessible within class 'Individual'
// console.log(Riyad.exp) - Property 'exp' is protected and only accessible within class 'Individual' and its subclasses

// 9.2 Subclass_________
class Engineer extends Individual {
  constructor(
    name: string,
    age: number,
    occupation: string,
    exp: number,
    readonly lang: string = "TypeScript" // Default Value
  ) {
    super(name, age, exp, occupation);
    this.lang = lang;
  }

  getExp(): string {
    return `I've ${this.exp} years of exp`;
  }
}

const SadikEngeer = new Engineer("Sadik", 25, "Std Engeer", 2);

console.log(SadikEngeer.getExp());

// 9.3 Interface__________
interface Player {
  name: string;
  age: number;
  play(action: string): string;
}

class Cricketer implements Player {
  constructor(public name: string, public readonly age: number) {
    this.name = name;
    this.age = age;
  }

  play(action: string): string {
    return `${this.name} is ${action}`;
  }
}

const Mashrafee = new Cricketer("Mashrafee", 32);
console.log(Mashrafee.play("bowling")); // Mashrafee is bowling

// 9.5 Static____________
class People {
  static count: number = 0;
  static getCount(): number {
    return People.count;
  }

  public id: number;

  constructor(public name: string) {
    this.name = name;
    this.id = ++People.count; // accessable because of static type
  }
}

const John = new People("John");
const Steve = new People("Steve");
const Amy = new People("Amy");

console.log(John.id); // 1
console.log(Steve.id); // 2
console.log(Amy.id); // 3
console.log(People.count); // 3

// 9.6 Setter & Getter___________
class School {
  private students: string[];
  constructor() {
    this.students = [];
  }

  public get student(): string[] {
    return this.students;
  }

  public set student(data: string[]) {
    this.students = data;
  }
}

const MySchool = new School();
MySchool.student = ["Neil Young", "Led Zep"];
console.log(MySchool.student);
MySchool.student = [...MySchool.student, "ZZ Top"];
console.log(MySchool.student);
// MySchool.student = ['Van Halen', 5150] - must be string data

10. Index Signature, typeof Assertion & Record utility

// 10.1 Index Signature & keyof Assertion______________
interface income {
  salary: number;
  sidehustle: number;
  passiveIncome: number;
}

const riyadIncome: income = {
  salary: 2000,
  sidehustle: 100,
  passiveIncome: 50,
};

const prop: string = "salary";
// console.log(riyadIncome[prop]) - Error

for (const key in riyadIncome) {
  console.log(`${key}: ${riyadIncome[key as keyof income]}`); // keyof Assertion (1st way)
}

const getValue = (obj: income, key: keyof income) => {
  console.log(`${key}: ${obj[key]}`);
};

Object.keys(riyadIncome).map((key) => {
  console.log(riyadIncome[key as keyof typeof riyadIncome]); // keyof Assertions (2nd way)
});

interface income2 {
  [index: string]: number; // To access dynamically
  salary: number;
  sidehustle: number;
  passiveIncome: number;
}

const riyadIncome2: income2 = {
  salary: 2000,
  sidehustle: 100,
  passiveIncome: 50,
};

const prop2: string = "salary";
console.log(riyadIncome2[prop2]);
console.log(riyadIncome2["hello"]); // Undefined

// 10.2 Record______________

// interface Incomes {
//     [key: string]: number
// }

type Streams = "salary" | "bonus" | "sidehustle";

type Incomes = Record<Streams, number>;
/* Similar to-
type Incomes = {
    salary: number;
    sidehustle: number;
    bonus: number;
} */

const monthlyIncomes: Incomes = {
  salary: 500,
  bonus: 100,
  sidehustle: 250,
};

const prop3: string = "bonus";
console.log(monthlyIncomes["bonus"]);
// console.log(monthlyIncomes[prop3]) Can't do that

for (const revenue in monthlyIncomes) {
  console.log(monthlyIncomes[revenue as keyof Incomes]);
}

11. TS Generics

// 11.1 Basic Generic Usage
const myFunc = <T>(arg: T): T => {
  return arg;
};

interface ObjInterface<T> {
  value: T;
}

interface HasID {
  id: number;
}

const myObj2 = <T extends HasID>(arg: T): T => {
  return arg;
};

// console.log(myObj2({ name: "Riyad" })) - Have to provide id property as extending from HasID
console.log(myObj2({ id: 23, name: "Riyad" }));

// 11.2 Advance Usage
const getUserProp = <T extends HasID, K extends keyof T>(
  users: T[],
  key: K
): T[K][] => {
  return users.map((user) => user[key]);
};

const usersArray = [
  {
    id: 1,
    name: "Leanne Graham",
    username: "Bret",
    email: "Sincere@april.biz",
    address: {
      street: "Kulas Light",
      suite: "Apt. 556",
      city: "Gwenborough",
      zipcode: "92998-3874",
      geo: {
        lat: "-37.3159",
        lng: "81.1496",
      },
    },
    phone: "1-770-736-8031 x56442",
    website: "hildegard.org",
    company: {
      name: "Romaguera-Crona",
      catchPhrase: "Multi-layered client-server neural-net",
      bs: "harness real-time e-markets",
    },
  },
  {
    id: 2,
    name: "Ervin Howell",
    username: "Antonette",
    email: "Shanna@melissa.tv",
    address: {
      street: "Victor Plains",
      suite: "Suite 879",
      city: "Wisokyburgh",
      zipcode: "90566-7771",
      geo: {
        lat: "-43.9509",
        lng: "-34.4618",
      },
    },
    phone: "010-692-6593 x09125",
    website: "anastasia.net",
    company: {
      name: "Deckow-Crist",
      catchPhrase: "Proactive didactic contingency",
      bs: "synergize scalable supply-chains",
    },
  },
];

const allEmails = getUserProp(usersArray, "email"); // It's showing suggetions based on its dynamic arguments

// 11.3 Generics in Class
class Country<T> {
  private resources: T;
  constructor(resources: T) {
    this.resources = resources;
  }

  get data(): T {
    return this.resources;
  }

  set data(arg: T) {
    this.resources = arg;
    return;
  }
}

const Bangladesh = new Country("DB"); // const Bangladesh: Country<string>
console.log(Bangladesh.data);
Bangladesh.data = "USA";
// Bangladesh.data = 12 - Type 'number' is not assignable to type 'string'

const myCountry = new Country<string | number>("Canada");
myCountry.data = 42;
console.log(myCountry.data);

12. Utility

// 12.1 Partial
interface student {
  name: string;
  roll: number;
  age: number;
  dept?: string;
}

const personalInfo: Partial<student> = { name: "Riyad", age: 22 };

const updateStInfo = (student: student, newInfo: Partial<student>): student => {
  return { ...student, ...newInfo };
};

const sadikInfo: student = {
  name: "Sadik",
  roll: 22,
  age: 24,
};

const sadikUpdated = updateStInfo(sadikInfo, { dept: "CSE" });

// 12.2 Required & Readonly
const storeStudent = (student: Required<student>): student => {
  return student;
};

const jkInfo: student = {
  name: "Sadik",
  roll: 22,
  age: 24,
};

const jk: Readonly<student> = storeStudent({ ...jkInfo, dept: "CSE" }); // For Required- have to pass optional prop
const jkAge = jk.age;
// jk.age = 22 - Cannot assign to 'age' because it is a read-only property

// 12.3 Record
const income: Record<string, number> = {
  sadik: 15000,
  jk: 20000,
  shorif: 50000,
};

type Hero = "Superman" | "Spiderman" | "Hulk";
type Power = "spider-net" | "stronger" | "much-power";

const superHeroes: Record<Hero, Power> = {
  Superman: "much-power",
  Spiderman: "spider-net",
  Hulk: "much-power",
};

// 12.4 Pick & Omit
type personalInfo = Pick<student, "name" | "age">;
type dept = Omit<student, "age" | "roll">;

const student1: personalInfo = { name: "someone", age: 23 };
const student2: dept = { name: "someone", dept: 'sth' };

// 12.5 Exclude & Extract
type serial = Exclude<Hero, "age">
type age = Extract<Power, "age" | "dept">

// 12.6 NonNullable
type AllPossibleGrades = 'Dave' | 'John' | null | undefined
type NamesOnly = NonNullable<AllPossibleGrades>

// 12.7 ReturnType
const createNewAssign = (title: string, points: number) => {
    return { title, points }
}

type NewAssign = ReturnType<typeof createNewAssign> // can define types with the help of another func

const tsAssign: NewAssign = createNewAssign("Utility Types", 100)

// 12.8 Parameters
type paramType = Parameters<typeof createNewAssign> // type paramType = [title: string, points: number]

const assignArgs: paramType = ["Generics", 100]
const tsAssign2: NewAssign = createNewAssign(...assignArgs)

// 12.9 Awaited
interface User {
    id: number,
    name: string,
    username: string,
    email: string,
}

const fetchUsers = async (): Promise<User[]> => {

    const data = await fetch(
        'https://jsonplaceholder.typicode.com/users'
    ).then(res => {
        return res.json()
    }).catch(err => {
        if (err instanceof Error) console.log(err.message)
    })
    return data
}

type FetchUsersReturnType = Awaited<ReturnType<typeof fetchUsers>>

fetchUsers().then(users => console.log(users))

How to Use Redux Toolkit & RTK Query in React

Riyad Hossain — Sat, 07 Jan 2023 15:24:04 +0000

Managing states in the entire application became very complicated and tough as the requirements of websites increased. In a React project, Context API and useReducer hook are not sufficient always. To handle such complex states, Redux is one of the most necessary tools in almost every React project. In this blog, I’ll demonstrate how can you use Redux Toolkit and RTK Query in a React Project.

Here is two useful link:

What is Redux

Redux is a predictable state container for JavaScript applications. One major benefit of using Redux is that it allows centralizing the state of JS applications in a single store. This makes it easier to reason about the state of applications and helps to avoid the complexity of managing states across different components of applications.

Configure Store

Firstly, inside the src/app/store.js file, configure your store like this:

import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({
    reducer: {},
})

After that, you must provide the store to the whole React application by the following-

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./app/store.js"; //Configured Store in store.js file

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}> // Provide store in the entire App
      <App />
    </Provider>
  </React.StrictMode>
);

Write your first slice

Now you have to create a slice and write the name of this slice, an initialState and reducers.

import { createSlice } from "@reduxjs/toolkit"

const initialState = {
    name: "",
    email: "",
    role: "",
}

const authSlice = createSlice({
    name: 'auth',
    initialState,
    reducers: {}
})

The reducers will help to change states which can be done anywhere in the application. Besides that don’t forget to export the slice and reducers.

reducers: {
        signInReducer: (state, { payload }) => {
            state.email = payload.email,
            state.name = payload.name,
            state.role = payload.role
        },
        signOutReducer: (state) => {
            state.email = "",
        }
    },

export const { signInReducer, signOutReducer } = authSlice.actions
export default authSlice.reducer

Import and provide the slice in the store.

import authSlice from "../features/auth/authSlice";

export const store = configureStore({
    reducer: {
        auth: authSlice,
    }
})

Now, you can import and use the reducers in other files like in src/page/Login.js file

import React from 'react'
import { signInReducer } from "../../features/auth/authSlice";
import { useDispatch } from "react-redux";

export default function Login() {
const handleSignIn = () => {
    dispatch(signInReducer())
  }

  return (
    <div>Sign In Page
        <button onClick={handleSignIn}> Sign In </button>
    </div>
  )
}

With all these, you can use the states in the entire application which you’ve provided in the slice. Here in src/page/Home.js -

import React from 'react'
import { useSelector } from "react-redux";

export default function Home() {
const auth = useSelector(state => state.auth)

  return (
    <div>
        User Name: {auth.name}
    </div>
  )
}

Handling Async Function

To handle async functions, you have to use extraReducers function in the slice and createAsyncThunk higher-order function. You also can handle pending, fulfilled and rejected cases like the following-

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"

const initialState = {
    name: "",
    email: "",
    role: "",
    isLoading: false,
    isError: false,
    isSuccess: false,
    error: ""
}

export const signUpThunk = createAsyncThunk("auth/signUp", 
    async ({ email, password }) => {
    const data = await thunkFunction(email, password)
    return data.user.email
})

const authSlice = createSlice({
    name: 'auth',
    initialState,
    reducers: {
     // ... Our Reducers
    },
    extraReducers: (builder) => {
       builder.addCase(signUpThunk.pending, (state) => {
                state.isLoading = true
                state.isError = false
                state.error = ''
            }).addCase(signUpThunk.fulfilled, (state, action) => {
                state.isLoading = false
                state.user.email = action.payload
            }).addCase(signUpThunk.rejected, (state, action) => {
                state.user.email = ''
                state.isError = true
                state.isLoading = false
                state.error = action.error
            })
}

Here is the signUpThunk function will take two parameters the name of the function as string and an HoF function. This function can be called any other file.

RTK Query

In this section, I’ll show you how can you implement RTK Query.

First, you need to create API using createAPI function in src/features/api/apiSlice.js file

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

const URL = "https://demourl.com"

export const apiSlice = createApi({
    reducerPath: "api", // Give it a name
    baseQuery: fetchBaseQuery({ baseUrl: URL }), // Define Base URL
    endpoints: (build) => ({
        products: build.query({
            query: (data) => ({
                url: '/products',
                method: 'GET',
                body: data
            }),
        })
    })
})

export const { useProductQuery } = authSlice

Before you start using the useProductQuery hook, you must provide it in the store. Don’t forget to contact the middleware also.

import { configureStore } from "@reduxjs/toolkit";
import { apiSlice } from "../features/api/apiSlice";
import apiSlice from "../features/api/apiSlice";

export const store = configureStore({
    reducer: {
        auth: authSlice,
        [apiSlice.reducerPath]: apiSlice.reducer
    },
    middleware: (getDefaultMiddleware) => 
                getDefaultMiddleware().concat(apiSlice.middleware)
})

Now we can use the useProductQuery hook anywhere.

import React from 'react'
import { useRegistrationMutation } from "../../features/api/apiSlice";

export default function Products() {
const { data, isError, isFetching, isSuccess,error } = useProductQuery()

  return (
    <div>Products Page
      {data.products.map( product => <h4> {product.name} </h4> )}
    </div>
  )
}

You can handle the async result by showing a simple toast:

import { Toaster } from "react-hot-toast";
import { Toaster } from "react-hot-toast";
import React, { useEffect, useState } from "react";
import { useRegistrationMutation } from "../../features/api/apiSlice";

export default function Products() {
const { data, isError, isFetching, isSuccess,error } = useProductQuery()

useEffect(() => {
    if (isFetching) {
      toast.loading("Processing...", {id: 'pending', duration: 2000})
    }
    if (isSuccess) {
      toast.success("Successfully Register your account", {id: 'success'})
    }
    if (isError) {
      toast.error("Failed to Register your account", {id: 'fail'})
    }
  }, [isFetching, isSuccess, isError, error, data])

  return (
    <div>Products Page
      <Toaster />
      {data.products.map( product => <h4> {product.name} </h4> )}
    </div>
  )
}

I Build an Uninstallation Tracker

Riyad Hossain — Wed, 07 Dec 2022 09:46:36 +0000

A few days ago, our business team want to introduce a new feature to our application. The feature is whenever a user gives a Guest Pass(an internal service) to another user, a text message will be sent to that user if the application isn’t installed in the receiving user’s phone. To achieve this feature, we need to build an uninstallation tracker in our backend system. In this blog, I’ll try to demonstrate how I build an uninstallation tracker.

Real-time uninstallation tracking system is a good approach here. However, there is a limitation which is it’ll not support the iOS platform. Our application is a cross-platform app. Both android and iOS users are in the market who are actively using our application. That’s why I have to choose no other approach but to use silent push notifications.

Again, there are many options that provide this service including Firebase, AWS and so on. Here, I choose FCM (Firebase Cloud Messaging) notification powered by Google because after going through the entire structure once again, I found that the FCM notification service is already running for sending push notifications in our backend system. I just need to set some configurations to build a silent push notification system. Hence I choose FCM for sending silent push notifications.

Now, the implementation of FCM began here. But I don’t know anything about FCM let alone implement the entire functionality. Therefore, I googled for it and thoroughly read some blogs on it. Also, I observed the codes in our backend files implementing push notifications (pretty much similar configuration with silent push notifications) which were previously written. Moreover, I discussed with the flutter and iOS developer about how can we achieve that.

Here is how I built the uninstallation tracking system. First of all, every six hours, a silent push notification will be sent to the registered devices using the FCM token from our Node.js server. The FCM token is previously stored when the user installed and logged in to our application. For sending silent notifications periodically, I used the cron job, a Linux command used for scheduling tasks to be executed sometime in the future. If the process of sending silent notifications failed, it simply means the user already uninstalled the application from his/her device. After that, the value for the uninstallStatus field will be true as like {uninstallStatus: true} in that particular user’s document in the user collection in our database. If the process of sending silent notifications succeeds, it means the user didn’t uninstall the app. Now, every six hours we can find that which user has uninstalled our application.

Coming back to our main feature, in this situation whenever one user sends a Guest Pass(mentioned at the top of this blog) to another user, a specific text to his/her device or a notification to the device will be sent based on the uninstallation status. Eventually, our developer team satisfied the requirement of the business team.

To build such a system, it took 2-3 days. I learnt to understand and rewrite previously written code. Additionally, my skills in googling and finding the right content among endless content have increased dramatically for sure.

If you want to learn more about how exactly I set up the configuration and file, please show your interest in the comment section below. Considering your response, I’ll write a separate blog on it in a more detailed-oriented way.

JavaScript - All You Need to Know about JS

Riyad Hossain — Wed, 23 Nov 2022 14:18:18 +0000

There are some core concepts in JavaScript (also known as JS) which is very essential to learn. In this blog, I tried to give a short yet to-the-point demonstration of those crucial concepts of JS. Surely, after you learnt those topics, JavaScript will become less weird to you. So, without any further ado! Let’s get started.

High Abstraction
In programming, high abstraction means comparatively complex parts are hidden and simplifier parts are viewed. The syntax of high-abstraction languages is easy compared to low-level languages like C, and Java which makes it easier for programmers to work with a high-abstraction language like JavaScript, Python, Go and so on.

Garbage Collector
Unlike low-level languages like C, we don’t need to maintain memory manually in JavaScript. Rather, JavaScript uses automatic memory management which is called Garbage Collection. Using the Mark-and-Sweep algorithm, the JavaScript engine automatically collects the unused memory allocations and then removes them.

JIT Compiled
With the help of JIT (just in time) compilation, the program is compiled during the execution time into native code to improve performance. Modern browsers support JIT compilation to compile JavaScript code which makes the execution time faster.

Multi-paradigm
A multi-paradigm language allows programmers to design a program in multiple approaches. JavaScript supports Object-oriented Programming, procedural Programming, Functional Programming and so on.

Prototyped-based
Obviously, JavaScript is a prototyped-based language, meaning the properties and methods of an object can be shared throughout generalized objects that can be cloned and extended. In simple words, you can clone an object’s properties and methods and also can add additional properties and methods to that newly cloned object.

Dynamically Typed
Simply, in JavaScript type of a variable is checked in the run time. For that, we don’t even need to specify the data type of a variable. Moreover, it’s called loosely typed language because data types also can be changed automatically in the execution time which is called type coercion. However, TypeScript, a superset of JavaScript, is a statically typed language.

Single-Threaded
JS has one call stack and one memory heap which means there is only one thread(process) for the instructions to be executed. Straightforwardly, only one statement is executed at a time in JavaScript.

Asynchronous
Although a single-threaded language, JavaScript behaves asynchronously with the help of the callback queue and event loop. The asynchronous statements are stored in the callback queue and get called by the event loop and after that get executed whenever the synchronous operations are executed.

Non-Blocking
Non-blocking refers to the notion of not blocking the execution for further operation. JavaScript doesn’t wait to complete the extended I/O operations and HTTPS requests. Instead of waiting, it stores the asynchronous statement in the callback queue and executes the rest of the synchronous operations. This non-blocking concept is also related to the asynchronous behaviour of JavaScript which we already discussed.

Functions are first-class citizens
Functions are called first-class citizens in JavaScript. Because, in JavaScript, functions can be declared as variables, can be passed as an argument in another function, and can be returned from a function. Also, functions can be set as a method of an object.

Note: In this blog, I just tried to give an overview on most crucial features and characteristic of JavaScript. Now it's your duty to learn more about these above mentioned topics.