kp-gists

import { useState, useEffect } from 'react';

const GetFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchUsers = async () => {
    try {
      const response = await fetch(url);

kp-gists

import { useQuery } from "react-query";

function App() {
  const { status, data, error, isFetching } = useQuery(
    ["posts", { page: 1 }],
    () => fetch(`https://my-api.com/posts?page=1`).then((res) => res.json())
  );

  const handleScroll = () => {
    if (

kp-gists

// get current day according to the date
const dayOfYear = date => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

kp-gists

import React, { useState, useEffect } from 'react';
import InfiniteScroll from './InfiniteScroll';
const DataList = () => {
  const [data, setData] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const fetchData = (page) => {
    fetch(`https://api.example.com/data?page=${page}`)
      .then((res) => res.json())
      .then((res) => {
        if (res.length === 0) {

kp-gists

import { Tooltip } from 'antd';
import React, { useState } from 'react';
import './style.scss'
//keep in mind to fix stylin and the copied icon
// TODO make a notification

/**
 * @param {text} : to be copied
 * @returns returns only the text passed in
 */

kp-gists

import React from 'react';

export default function ClickOutsideDiv ({ children }){
  
  useEffect(() => {
    const concernedElement = document.querySelector(".click-text");
    document.addEventListener("mousedown", (event) => {
      if (concernedElement.contains(event.target)) {
        console.log("Clicked Inside");
      } else {

kp-gists

import { useEffect, useState } from "react"

export function useLocalStorage<T>(key: string, initialValue: T | (() => T)) {
  const [value, setValue] = useState<T>(() => {
    const jsonValue = localStorage.getItem(key)
    if (jsonValue == null) {
      if (typeof initialValue === "function") {
        return (initialValue as () => T)()
      } else {
        return initialValue

kp-gists

// Absolute import in React
// When initializing React Project with create-react-app, we can configure our React application to support importing modules with absolute paths.

// Just open jsconfig.json file (in the root of the project) and add baseUrl setting inside compilerOptions like this:

{
  "compilerOptions": {
  //  ..., other options
    "baseUrl": "src"
  },

kp-gists

/*!
 * Get the amount of time from now for a date
 * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String|Date} time The date to get the time from now for
 * @return {Object}           The time from now data
 */
function timeFromNow (time) {

	// Get timestamps
	let unixTime = new Date(time).getTime();

kp-gists

/**
 * Randomly shuffle an array
 * https://stackoverflow.com/a/2450976/1293256
 * @param  {Array} array The array to shuffle
 * @return {Array}       The shuffled array
 */
function shuffle (array) {

	let currentIndex = array.length;
	let temporaryValue, randomIndex;