donaldpipowitch

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

// use this instead of useMemo of you need a stable value
// see https://twitter.com/0xca0a/status/1314326386555924480
export function useStableMemo<T>(factory: () => T, deps: DependencyList): T {
  const [value, setValue] = useState<T>(factory);
  const firstRun = useRef(true);

  useEffect(
    () => {

donaldpipowitch

import React, { FC, useMemo } from 'react';
import {
  LocalStorageProvider,
  SessionStorageProvider,
} from './use-storage';

// this is just a dumb mock of the storage interface
class MemoryStorage implements Storage {
  private data: Record<string, string> = {};

donaldpipowitch

import { useState, useEffect } from 'react';
import { useLocation, useHistory } from 'react-router-dom';
import { useSessionStorage } from './use-storage'; // see https://gist.github.com/donaldpipowitch/7310d7b9e4b6d467134c425e8732adc6

type UseLocationStateOptions<T> = {
  defaultValue?: T;
  scope?: string;
  filter?: (value: T) => boolean;
};

donaldpipowitch

// @ts-check

/** @type {import("eslint").Rule.RuleModule} */
const rule = {
  meta: {
    docs: {
      description: `If you use a Jest test name like "hello (world)" you can't run \`$ jest -t "hello (world)"\` to select this test.`,
    },
    fixable: 'code',
  },

donaldpipowitch

// @ts-check

/** @type {import("eslint").Rule.RuleModule} */
const rule = {
  meta: {
    docs: {
      description: `You can export a type and a value with the same name in the same file, but that confuses refactoring tools.`,
    },
  },
  create(context) {

donaldpipowitch

Know your brackets!

  ( ) – parentheses, round brackets, first brackets
  { } – braces, curly brackets, second brackets, moustache brackets 👨🏻
  [ ] – square brackets, third brackets
  ⟨ ⟩ - angle brackets (aka. _not_ less-than/greater-than signs 👀)
  ‹ › - angle quotes (aka. _not_ less-than/greater-than signs 👀)
  < > - less-than/greater-than signs

donaldpipowitch

import {
  CognitoUserPool,
  CognitoUserAttribute,
  CognitoUser,
  AuthenticationDetails,
  CognitoUserSession,
  CodeDeliveryDetails,
} from 'amazon-cognito-identity-js';
import React, { FC, useState } from 'react';

donaldpipowitch

A simple hook which can be used to create Axios mock. The hook will throw an error if an unmocked route was found.

Works great in Storybook stories:

export const EmptyResult = () => {
  useMock((mock) => {
    const result = [];
    mock.onGet(searchUrl).reply(200, result);
 });

donaldpipowitch

// from https://en.wikipedia.org/wiki/ISO_3166-2#cite_note-iso31661-2, 4th Oct. 2019
[
  {
    "code": "AD",
    "name": "Andorra"
  },
  {
    "code": "AE",
    "name": "United Arab Emirates"
  },

donaldpipowitch

import { useState, useEffect } from 'react';
import { useFormikContext, FieldMetaProps } from 'formik';

export function useTouchedHandler(name: string, meta: FieldMetaProps<any>) {
  const { setFieldTouched } = useFormikContext<any>();

  // use meta.touched as the initial value to keep the state,
  // in case this field was unmounted
  const [wasChanged, setWasChanged] = useState(meta.touched);