Author: Learners Store

Showing Greeting Message using ReactJS

In ReactJS, To Display Personalized Greeting message (like “Good Morning”, “Good Afternoon” ) based on the current time, we need to follow the following code.

import React, { useEffect, useState } from 'react';
import { Typography } from '@mui/material';

const Greeting = ({ user }) => {
    const [greeting, setGreeting] = useState('');
    const [color, setColor] = useState('');

    const updateGreeting = () => {
        const hour = new Date().getHours();

        if (hour < 12) {
            setGreeting('Good Morning');
            setColor('#FFA726');
        } else if (hour < 17) {
            setGreeting('Good Afternoon');
            setColor('#29B6F6');
        } else if (hour < 20) {
            setGreeting('Good Evening');
            setColor('#9AB7BC');
        } else {
            setGreeting('Good Night');
            setColor('#0FFDE4');
        }
    };

    useEffect(() => {
        updateGreeting();
        const interval = setInterval(updateGreeting, 60 * 1000);
        return () => clearInterval(interval);
    }, []);

    return (
        <Typography variant="h6">
            <span style={{ color, fontWeight: 500 }}>{greeting}</span>{' '}
            <span>{user.name || user.role}</span>
        </Typography>
    );
};

export default Greeting;

const [greeting, setGreeting] = useState(”) ==> This holds the current Greeting string (like “Good Morning”, “Good Afternoon” ).

const [color, setColor] = useState(”) ==> This holds the current color for the Greeting Text.

const hour = new Date().getHours() ==> Gives current hour. Based on the current hour, it will compare with 12, 17, 20 and sets different greeting message and associated color.

useEffect() ==> For the first render calls updateGreeting(), and displays the Greeting message. Then we used setInterval(updateGreeting, 60 * 1000), to update the Greeting message for every 1 minute. Finally this line return () => clearInterval(interval), cleans up the interval when the component unmounts to prevent the memory leaks.

error ‘@testing-library/react’ should be listed in the project’s dependencies, not devDependencies

This is an ESLint error

This error comes from the import/no-extraneous-dependencies rule, which expects any module you import in non-test code to be in the regular dependencies section, not in the devDependencies.

To fix this issue, we need to configure ESLint to allow this import. If the file which is throwing this error is only used in tests, update the ESLint configuration file (.eslintrc.js) as follows

rules: {
    'import/no-extraneous-dependencies': 'off'
}

Difference between map and flatmap in javascript with examples.

map() in JavaScript :

  1. map() method creates a new Array by applying a function to each element of the original Array.
  2. map() returns a new Array of the Same Length.
  3. map() does not modify the original Array.

Example of returning an Array : 

const array = [5, 10, 15, 20];
const newArray = array.map(n => n * 2);
console.log(newArray);

Output :

[ 10, 20, 30, 40 ]

Example of returning nested Array Structure :

const array = [5, 10, 15, 20];
const nestedArray = array.map(n => [n, n * 2]);
console.log(nestedArray);

Output : 

[ [ 5, 10 ], [ 10, 20 ], [ 15, 30 ], [ 20, 40 ] ]

Example with null / undefined values in the Array :

const array = ["Hello", null, "World", undefined];
const newArray = array.map(word => word ? [word] : []);
console.log(newArray);

Output :

[ [ 'Hello' ], [], [ 'World' ], [] ]

flatMap() in JavaScript :

  1. flatMap() method first maps each element using a function, then flattens the result by one level.
  2. Applies a function like map()
  3. flattens one level deep of nesting.
  4. useful to remove null/undefined from Array.

Example of returning an Array like map() :

const array = [5, 10, 15, 20];
const newArray = array.flatMap(n => n * 2);
console.log(newArray);

Output :

[ 10, 20, 30, 40 ]

Example of nested structure into a flat Array : 

const array = [5, 10, 15, 20];
const nestedArray = array.flatMap(n => [n, n * 2]);
console.log(nestedArray);

Output :

[ 5, 10, 10, 20, 15, 30, 20, 40 ]

Example with null / undefined values in the Array :

const array = ["Hello", null, "World", undefined];
const newArray = array.flatMap(word => word ? [word] : []);
console.log(newArray);

Ouput : 

[ 'Hello', 'World' ]

NOTE : flatMap() only flattens one level deep.

Recreating the dropped table using Prisma and PostgreSQL

Following command will do a soft reset

npx prisma migrate reset

This command will drop all tables and Recreate Schema with correct column order.

After that, following command will recreate the migration for version control

npx prisma migrate dev --name recreate-tradingdata-table