SantoshCode

Typeorm Querying data with realtions.

Using Repository

const data = this.userRepository.find({
                    relations: ['photos']
                  })

Using QueryBuilder

SantoshCode

Endpoint to search keyword in the database.

async function getSearchedData (search:string){
  try {
    const searchData = return await this.connection
                                     .getRepository(UserEntity)
                                     .createQueryBuilder("user")
                                     .leftJoinAndSelect("user.roles", "roles")
                                     .where(
 "user.full_name LIKE :search OR user.username LIKE :search OR user.email LIKE :search",

SantoshCode

Mutable and Immutable Data Types

Textbook Definition

A mutable object is an object whose state can be changed or modified over time. A immutable object is an object whose state cannot be modified after it is created.

In Javascript String and Numbers are immutable and Objects and arrays ars mutable.

let a = 7
a += 1

SantoshCode

Redux

Redux is based on FLUX application architecture (by Facebook)

Building Blocks of Redux are:-

• Action Javascript objects that represents what just happend. We could also call them Events e.g. userAdded, userUpdated, userRemoved

SantoshCode

JSON Web Tokens

What are JSON Web Tokens?

• Open-source industry standart (RFC-7519).
• Usable for Authorization or secure exchange of information bretween parties.
• Verify that the sender is who it/he/she claims to be.
• Signed by the issuer, using a secret or keypair (HMAC algorithm, RSA or ECDSA).

JWT Structure

SantoshCode

{
	"workbench.iconTheme": "material-icon-theme",
	"files.autoSaveDelay": 5000,
	"editor.wordWrap": "off",
	// "editor.fontFamily": "'SF Mono','Fira Code','Operator Mono','Monolisa','Cascadia Code','JetBrains Mono', 'monospace', 'Droid Sans Fallback','Segoe Ui Emoji','Noto Color Emoji'",

	"workbench.colorCustomizations": {
		// "editorGutter.addedBackground": "#141A1F",
		// "editorGutter.modifiedBackground": "#141A1F",
		// "editorGutter.background": "#141A1F"

SantoshCode

How to re-render a component even on memoization like when using selectors?

Afte the task has been done simply reset the state but useEffect dependency should have memoized state as dependency

e.g.

if (taskIsCompleted){
  dispatch({type: "RESET_STATE"})
}

SantoshCode

Next.js

The React Framework for Production (A fullstack framework for ReactJS)

By default React is a JavaScript library for building user interfaces

NextJS solves common problems and makes building React apps easier!

In React, for routing we have to use third party libraries for handling various features like for routing we might use react-router-dom.

SantoshCode

Understanding React a bit more

"state dispatch function" accepts current state value as first parameter so use that

setCount(count + 1) --> Wrong way

Problem of using above approach

SantoshCode

Understanding Container

How did we came down to Container or Why Container?

Bare Setup

Historically, in order to host website for a company they usually contact server/hardware providers to setup a sever farm. But this way had some serious down sides

• Managing hardwares was pain in the a**.
• Security risk, if we had another service to run in our server there was no any isolation, every service had access to do any thing with