tanpld

export function useWhatChanged(props: { [prop: string]: unknown }) {
  // cache the last set of props
  const prev = useRef(props);

  useEffect(() => {
    // check each prop to see if it has changed
    const changed = Object.entries(props).reduce(
      (a, [key, prop]: [string, unknown]) => {
        if (prev.current[key] === prop) return a;
        return {

tanpld

import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/solid";
import clsx from "clsx";
import { useState, useMemo } from "react";

interface YearCalendarProps {
  availableYears?: number[];
  defaultYear?: number;
  onChange: (year: number) => void;
}

tanpld

/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z])(?=.*[*.!@$%^&(){}[\]\:\;\<\>\,\.\?\/\~\_\+\-\=\|\\]).{8,32}$/gm

At least one digit [0-9]
At least one lowercase character [a-z]
At least one uppercase character [A-Z]
At least one special character [*.!@#$%^&(){}[]:;<>,.?/~_+-=|\]
At least 8 characters in length, but no more than 32.

tanpld

const maskedFirst4Char = (value: string): string => {
  return value.replace(/.(?=.{4})/g, '*');
}

const maskPhoneNumber = (phone: string): string => {
  if (!phone) return 'N/A';
  const code = phone.slice(0, 2);
  const number = phone.slice(2);
  const maskedFirst4Number = maskedFirst4Char(number)
    .replace(/.(?=(.{4})+$)/g, '$& '); // add a space after every 4 number

tanpld

import React, { useState, useEffect } from "react";
import {
  makeStyles,
  Theme,
  createStyles,
  useTheme,
} from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton";

tanpld

Keybase proof

I hereby claim:

• I am tanpld on github.
• I am tanpld (https://keybase.io/tanpld) on keybase.
• I have a public key ASCG0FTgifE1whPE5JoopsdgHI7xhTmFkDPK4iVNEtFIuQo

To claim this, I am signing this object: