kp-gists

import React from 'react';
import { Satisfy } from 'next/font/google';
import clsx from 'clsx';

const satisfy = Satisfy({
	variable: '--font-satisfy-mono',
	subsets: ['latin'],
	weight: '400',
});

kp-gists

		this.express.get('/api/countries', async (req, res) => {
			console.log('ads');
			const response = await axios.get(
				'https://restcountries.com/v3.1/all',
			);
			console.log('🚀 ~ App ~ this.express.get ~ response:', response);
			const countries = await response.data.map((country: Country) => {
				const hasCurrency =
					country.currencies &&
					Object.keys(country.currencies).length > 0;

kp-gists

button:not(.active):hover {
	background-color: #e5f1b8;
}
        
// when the button is hovered has a different slight color and when it is active it has a different 
//color so this snippet it helps to track the button hover it it is active it should not change the active color 

kp-gists

    // scroll to categories
    const hash = this.$route.query.hash
    if (hash == 'categories') {
      console.log('🚀 ~ hash:', hash)
      const el = document.getElementById('categories')
      el.scrollIntoView({ behavior: 'smooth' })
      this.$router.replace({ query: null })

    } else {
      console.log('this.$route.params', this.$route.query)

kp-gists

import { useState } from "react"
import useEventListener from "../13-useEventListener/useEventListener"

export default function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  })

  useEventListener("resize", () => {

kp-gists

import { useEffect, useState } from "react"

export default function useOnScreen(ref, rootMargin = "0px") {
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    if (ref.current == null) return
    const observer = new IntersectionObserver(
      ([entry]) => setIsVisible(entry.isIntersecting),
      { rootMargin }

kp-gists

import { useEffect, useRef } from "react"

export default function useEventListener(
  eventType,
  callback,
  element = window
) {
  const callbackRef = useRef(callback)

  useEffect(() => {

kp-gists

import { useEffect } from "react"
import useTimeout from "../2-useTimeout/useTimeout"

export default function useDebounce(callback, delay, dependencies) {
  const { reset, clear } = useTimeout(callback, delay)
  useEffect(reset, [...dependencies, reset])
  useEffect(clear, [])
}

kp-gists

import { useCallback, useEffect, useRef } from "react"

export default function useTimeout(callback, delay) {
  const callbackRef = useRef(callback)
  const timeoutRef = useRef()

  useEffect(() => {
    callbackRef.current = callback
  }, [callback])

kp-gists

import { useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';

function PrivateRoute({ children, ...rest }) {
  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
  const history = useHistory();

  if (!isAuthenticated) {
    history.push('/login');
    return null;