ali-sabry

//=== Custom Hook useMediaQuery
import { useState, useEffect } from 'react';

export const useMediaQuery = (query) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia(query);
    /* window.matchMedia() match if the media query you passed
       is match with current media query and return boolean value

ali-sabry

import { useState, useEffect } from 'react';

export const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

Alimjanov-Ibragim

How to force a page to reload from server at browser launch with JavaScript

I spent weeks finding a way to refresh a page or a tab from the server once a user starts or restarts the browser. I was very surprised to find nothing about this topic.

Let's dig into the context, tries and the solution I came up with.

Context

Typically, once a user opens a browser and gets to a page, it directly provides the page in cache without refreshing any data from the server. Obviously, this only applies if the user is not in a private navigation.

In this case, as a user, I always need to open the browser and then manually reload the page to get the last updated data. What? Am I too lazy? Sure I am a developer!

KamaMakh

export const isSafari = () => {
  const ua = window.navigator.userAgent.toLowerCase();
  return (
    ua.includes('safari') &&
    !ua.includes('crios') &&
    !ua.includes('fxios') &&
    !ua.includes('android')
  );
};

loonywizard

import React, { useEffect, useState } from 'react'

import { useThrottle } from './useThrottle'

export default function App() {
  const [value, setValue] = useState('hello')
  const throttledValue = useThrottle(value)

  useEffect(() => console.log(`throttledValue changed: ${throttledValue}`), [
    throttledValue,

loonywizard

import { useEffect, useRef, useState } from 'react'

function useThrottle<T>(value: T, interval = 500): T {
  const [throttledValue, setThrottledValue] = useState<T>(value)
  const lastExecuted = useRef<number>(Date.now())

  useEffect(() => {
    if (Date.now() >= lastExecuted.current + interval) {
      lastExecuted.current = Date.now()
      setThrottledValue(value)

KamaMakh

{
  toBase64: file => new Promise((resolve, reject) => {
    if (file) {
      const reader = new FileReader()
      reader.readAsDataURL(file.raw)
      reader.onload = () => resolve(reader.result)
      reader.onerror = error => reject(error)
    } else {
      reject()
    }

KamaMakh

let axios = require("axios")

let axiosInstance = axios.create({
  httpsAgent: new https.Agent({
    rejectUnauthorized: false
  }),
  transformRequest: [(data, headers) => {
    headers["Accept-Language"] = "en";
    if (/* token */) {

KamaMakh

/**
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

/**
 * @param {string} str

rickyhaswifi

#https://stackoverflow.com/questions/58065603/netlify-renders-404-on-page-refresh-using-react-and-react-router 
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200