Gaurav8757’s gists

Gaurav8757 / env.md

Last active July 6, 2024 08:20

Environment Variable

Node.js Environment

CommonJS

npm install dotenv
const dotenv = require("dotenv").config();
const apiKey = process.env.API_KEY;

ModuleJS (ES6)

npm install dotenv

Gaurav8757 / serialNo.js

Created July 2, 2024 07:28

In MongoDB, added serial No.

	import mongoose from "mongoose";
	const { Schema } = mongoose;

	const claimSchema = new Schema({
	sNo: { type: Number, unique: true },
	date: { type: Date },
	companyName: { type: String},
	claimType: { type: String },
	policyNo: { type: String },
	insuredName: { type: String },

Gaurav8757 / contentEditable.jsx

Created June 24, 2024 12:51

Use ContentEditable

	function MasterView() {
	const [allDetailsData, setAllDetailsData] = useState([]);


	const handleNumericInput = (e) => {
	const input = e.target.innerText;
	const numericInput = input.replace(/[^\d.]/g, ''); // Remove any non-numeric characters
	if (input !== numericInput) {
	e.target.innerText = numericInput; // Update the contentEditable element with numeric value
	}

Gaurav8757 / albums.jsx

Created June 23, 2024 20:34

	import { useState } from 'react';
	const App = () => {
	const [albums, setAlbums] = useState([
	{ userId: 1, title: 'Album', id: 1 },
	{ userId: 1, title: 'omnis laborum odio', id: 2 },
	{ userId: 1, title: 'omnis laborum odio 2', id: 3 },
	{ userId: 2, title: 'aque aut omnis a', id: 4 },
	{ userId: 2, title: 'aque aut omnis a laborum odio', id: 5 },
	{ userId: 3, title: 'omnis laque aut omnis', id: 6 },
	]);

Gaurav8757 / date.js

Last active May 27, 2024 13:49

YYYY-MM-DD to DD-MM-YYYY

	import React, { useState } from 'react';

	function AddTerminator() {
	const [terminatedate, setTerminateDate] = useState("");
	const [dateInput, setDateInput] = useState("");

	const convertDateFormat = (dateStr) => {
	const [year, month, day] = dateStr.split('-');
	return `${day}-${month}-${year}`;
	};

Gaurav8757 / UpdateSelectedIdData.js

Created May 23, 2024 12:43

Not sent all data as props only user click or select data pass to update

	import React, { useState } from 'react';
	// List component
	const ListWithUpdate = () => {
	const [APIData, setAPIData] = useState([]);
	// STATE TO MANAGE POPUP AND DATA
	const [showUpdatePopup, setShowUpdatePopup] = useState(false);
	const [selectedItem, setSelectedItem] = useState(null);

	// SEND DATA WITH ID AND POPUP TRUE TO OPEN
	const handleUpdateClick = (id) => {

Gaurav8757 / UpdateOneData.js

Created May 23, 2024 12:32

Update from lists of an API Data send selected data to Pop-up form

	import { useState, useEffect } from "react";
	import axios from 'axios';
	//COMPONENT TEXTLOADER AND TWUPDATESLAB
	import TextLoader from "../../loader/TextLoader.jsx";
	import TwUpdateSlab from "../UpdatePaySlabs/TwUpdateSlab.jsx";
	import { toast } from "react-toastify";
	// BACKEND API CALL
	import VITE_DATA from "../../config/config.jsx";

	function TwLists() {

Gaurav8757 / Suspense.js

Last active September 3, 2024 11:27

A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition. Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that …

	startTransition:

	1. startTransition is a function in React that is used when you're about to update a particular state and its impact shouldn't heavily affect the UI.
	2. Its primary purpose is to ensure that if you're running a long-running process, the user doesn't face significant delays in the UI.
	3. It allows React to defer the update, making it non-blocking for the user interface.



	Suspense:

Gaurav8757 / CompLoader.js

Created May 21, 2024 16:35

Company Name Loader

	const TextLoader = () => {
	return (
	<div className="flex justify-center items-center bg-gray-100">
	<div className="relative flex space-x-1 text-xl font-bold text-gray-800">
	{[...'ELEEDOMIMF'].map((char, index) => (
	<span
	key={index}
	className="animate-bounce bg-gradient-to-r from-stone-900 to-red-600 bg-clip-text text-transparent rounded-full"
	style={{ animationDelay: `${index * 0.1}s` }}
	>

Gaurav8757 / pass_props.js

Last active May 22, 2024 07:11

Solve problem from application error or Uncaught Error: A component suspended while responding to synchronous input.

	<TableData filteredData = {filteredData} onUpdateInsurance={onUpdateInsurance} onDeleteAllData ={onDeleteAllData} totalItems = {totalItems} />


	import React from 'react';
	import UpdateMaster from './UpdateMaster';
	const InsuranceTable = ({ filteredData, onUpdateInsurance, onDeleteAllData, totalItems }) => {
	return (
	<div className="inline-block min-w-full w-full py-0 relative">
	<table className="min-w-full text-center text-sm font-light table border border-black">
	<thead className="border-b font-medium bg-slate-300 sticky top-16">

Gaurav Kumar Gaurav8757

Node.js Environment