DEV Community: kumar_lav

Implementing AutoLogout Feature in Class Components(React-JS)

kumar_lav — Tue, 09 Apr 2024 13:31:32 +0000

We have noticed that financial applications, log automatically after a certain time of inactivity. This feature is particularly important when dealing with sensitive web applications like financial apps.

NOTE:

In MainDashboardEntry (this should be the base entry file for all component routes),

talking about the solution

When the component mounts, add listeners to the window that listens to the events.
Create a function that logs out a user after 10 seconds using set Timeout.
Each time any of the events is triggered, i.e. mouse move, click, scroll, keypress, etc., the timer to log out the user after 10 seconds of inactivity resets.
However, if none of the events is triggered within 10 seconds, that is app is inactive, the app automatically logs out.

mentioning are some points below these user events to guarantee user activity on the application

let timer; const events = [ "load", "mousemove", "mousedown", "Click", "scroll", "keypress", ];
Note: these variables should be

`class IdleTimerContainer extends React.Component {
constructor(props: any) {
super(props);
}
handleLogoutTimer() {
timer = setTimeout(() => {
// clears any pending timer.
this.resetTimer();
// Listener clean up. Removes the existing event listener from the window
Object.values(events).forEach((item) => {
window.removeEventListener(item, this.resetTimer);
console.log("2 second")
});
// logs out user
this.logoutAction();
}, 2000); // 10000ms = 10secs. You can change the time.
};
resetTimer (){
if (timer) clearTimeout(timer);
};
componentDidMount(): void {
Object.values(events).forEach((item) => {
window.addEventListener(item, () => {
this.resetTimer();
this.handleLogoutTimer();
});
});
}
logoutAction = () => {
localStorage.clear();
window.location.pathname = "/"; // login page while the user is an inactive redirect to login page we can set the path accordingly
};

export default IdleTimerContainer;

//If you are using this functionality we can use the useEffect

All of the following values are falsy

kumar_lav — Sun, 10 Mar 2024 16:19:51 +0000

false null undefined 0 -0 NaN An empty string ('')

Here's a list of numbers. What do you think? Which of them become true and which become false?

console.log(Boolean(100));
console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean(-5));
let name = true
name = false

Example
true
true
false
true
false

Finding Your Way With .Map()

kumar_lav — Mon, 04 Mar 2024 13:05:27 +0000

The map method allows us to transform each element of an array, without affecting the original array. It’s considered a higher-order function and a functional programming technique because it takes a function as an argument and we are performing computation without mutating the state of our application.

Map is a property that is inherited from the array prototype. Prototypes provide built-in-methods that objects come with (arrays are special types of objects in the eyes of JavaScript). While map may be a little more foreign, this prototype is no different than, for example, the Array.length prototype. These are simply methods that are baked into JavaScript. Array prototypes can be added and mutated by: Array.prototype. = ...

So what does .map() do?

Let’s say you have an array of temperatures in Celsius that you want to convert to Fahrenheit.

There are several ways to solve this problem. One way may be to write a for loop to create an array of Fahrenheit temperatures from the given Celsius temperatures.

With the for loop we might write:

const celciusTemps = [22, 36, 71, 54];
const getFahrenheitTemps = (function(temp) {
const fahrenheitTemps = [];
for (let i = 0; i < celciusTemps.length; i += 1) {
temp = celciusTemps[i] * (9/5) + 32
fahrenheitTemps.push(temp);
}
console.log(fahrenheitTemps); [71.6, 96.8, 159.8, 129.2
})();

**So how does a map work?

**
Map takes a function and applies that function to each element in the array. We could write a map a bit more verbose with ES5 to see this a bit more clearly.

const fahrenheitTemps = celciusTemps

   .map(function(elementOfArray) {
      return elementOfArray * (9/5) + 32;
   });
console.log(fahrenheitTemps); // [71.6, 96.8, 159.8, 129.2]

Example

const people = [
   {name: Steve, age: 32},
   {name: Mary, age: 28},
   {name: Bill, age: 41},
];
const getNames = (function(person) {
   const names = [];
   for (let i = 0; i < people.length; i += 1) {
      name = people[i].name;
      names.push(name);
   }
   console.log(names); // [Steve, Mary, Bill];
})();
With map:

const names = people.map(e => e.name);
console.log(names) // [Steve, Mary, Bill];

if you want to learn more deeply, reference this URL
https://www.freecodecamp.org/news/finding-your-way-with-map-aecb8ca038f6

What is a promise

kumar_lav — Sun, 03 Mar 2024 16:17:17 +0000

**The syntax of Promise creation looks like below,

const promise = new Promise(function (resolve, reject) {
  // promise description
})

The usage of a promise would be as below,

`const promise = new Promise(
  (resolve) => {
    setTimeout(() => {
      resolve("I'm a Promise!");
    }, 5000);
  },
  (reject) => {}
);

promise.then((value) => console.log(value));`

The action flow of a promise will be as below,

What is the currying function

kumar_lav — Sun, 03 Mar 2024 16:12:37 +0000

Currying is the process of taking a function with multiple arguments and turning it into a sequence of functions each with only a single argument. Currying is named after a mathematician Haskell Curry. By applying currying, an n-ary function turns into a unary function.

Let's take an example of n-ary function and how it turns into a currying function,

const multiArgFunction = (a, b, c) => a + b + c;
console.log(multiArgFunction(1, 2, 3)); // 6

const curryUnaryFunction = (a) => (b) => (c) => a + b + c;
curryUnaryFunction(1); // returns a function: b => c => 1 + b + c
curryUnaryFunction(1)(2); // returns a function: c => 3 + c
curryUnaryFunction(1)(2)(3); // returns the number 6

What is a higher order function

kumar_lav — Sun, 03 Mar 2024 16:11:46 +0000

A higher-order function is a function that accepts another function as an argument or returns a function as a return value or both.

const firstOrderFunc = () =>
console.log("Hello, I am a First order function");
const higherOrder = (ReturnFirstOrderFunc) => ReturnFirstOrderFunc();
higherOrder(firstOrderFunc);

What is a first order function?

kumar_lav — Sun, 03 Mar 2024 16:10:41 +0000

A first-order function is a function that doesn’t accept another function as an argument and doesn’t return a function as its return value.

const firstOrder = () => console.log("I am a first order function!");

What is the difference between == and === operators

kumar_lav — Sat, 02 Mar 2024 14:58:57 +0000

JavaScript provides both strict(===, !==) and type-converting(==, !=) equality comparison. The strict operators take type of variable in consideration, while non-strict operators make type correction/conversion based upon values of variables. The strict operators follow the below conditions for different types,

Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.
Two numbers are strictly equal when they are numerically equal, i.e., having the same number value. There are two special cases in this,
NaN is not equal to anything, including NaN.
Positive and negative zeros are equal to one another.
Two Boolean operands are strictly equal if both are true or both are false.
Two objects are strictly equal if they refer to the same Object.
Null and Undefined types are not equal with ===, but equal with == . i.e, null===undefined --> false, but null==undefined --> true
Some of the example which covers the above cases:

0 == false // true
0 === false // false
1 == "1" // true
1 === "1" // false
null == undefined // true
null === undefined // false
'0' == false // true
'0' === false // false
NaN == NaN or NaN === NaN // false
[]==[] or []===[] //false, refer different objects in memory
{}=={} or {}==={} //false, refer different objects in memory

Singleton pattern:

kumar_lav — Sat, 02 Mar 2024 14:57:03 +0000

A Singleton is an object which can only be instantiated one time. Repeated calls to its constructor return the same instance. This way one can ensure that they don't accidentally create multiple instances.

var object = new (function () {
this.name = "lavk";
})()

the git repository for interview preparation

kumar_lav — Sat, 02 Mar 2024 14:55:10 +0000

https://github.com/sudheerj/javascript-interview-questions

https://github.com/lydiahallie/javascript-questions

https://github.com/airbnb/javascript

What is Hoisting?

kumar_lav — Sat, 02 Mar 2024 14:51:22 +0000

Hoisting is a JavaScript mechanism where variables, function declarations, and classes are moved to the top of their scope before code execution. Remember that JavaScript only hoists declarations, not initialization. Let's take a simple example of variable hoisting,

console.log(message); //output : undefined
var message = "The variable Has been hoisted";
The above code looks like as below to the interpreter,

var message;
console.log(message);
message = "The variable Has been hoisted";
In the same fashion, function declarations are hoisted too

message("Good morning"); //Good morning

function message(name) {
console.log(name);
}

What is the purpose of the let keyword?

kumar_lav — Sat, 02 Mar 2024 14:50:13 +0000

The let statement declares a block scope local variable. Hence the variables defined with let keyword are limited in scope to the block, statement, or expression on which it is used. Whereas variables declared with the var keyword are used to define a variable globally, or locally to an entire function regardless of block scope.

Let's take an example to demonstrate the usage,

let counter = 30;
if (counter === 30) {
let counter = 31;
console.log(counter); // 31
}
console.log(counter); // 30 (because the variable in if block won't exist here)