joepuzzo

import { useEffect, useState } from 'react';

import * as media from '../utils/media';

const useMedia = () => {
  const [isDesktopUp, setIsDesktopUp] = useState(media.isDesktopUp());

  useEffect(() => {
    const handleResize = () => {
      setIsDesktopUp(media.isDesktopUp());

joepuzzo

const mediaQueries = {
  "phone-only": "(max-width: 599px)",
  "tablet-portrait-only": "(min-width: 600px) and (max-width: 899px)",
  "tablet-portrait-up": "(min-width: 600px)",
  "tablet-landscape-only": "(min-width: 900px) and (max-width: 1199px)",
  "tablet-landscape-up": "(min-width: 900px)",
  "desktop-only": "(min-width: 1200px) and (max-width: 1799px)",
  "desktop-up": "(min-width: 1200px)",
  "desktop-large-up": "(min-width: 1800px)",
  "density--2x": "only screen and (-o-min-device-pixel-ratio: 5/4), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-device-pixel-ratio: 1.25), only screen and (min-resolution: 1.25dppx)",

joepuzzo

const ldap = require('ldapjs');

const LDAP_HOST = "ldap://ldap.foobar.com";
const LDAP_PASSWORD = "**********";
const LDAP_USER = "**********";

const createClient = async () => {
  const client = ldap.createClient({
    url: LDAP_HOST,
  });

joepuzzo

 const MAP_NUM_TO_PRECISION = {
  '-5': 'Hundred Thousandths',
  '-4': 'Ten Thousandths',
  '-3': 'Thousandths',
  '-2': 'Hundredths',
  '-1': 'Tenths',
  '0': 'Ones',
  '1': 'Tens',
  '2': 'Hundreds',

joepuzzo

// Based on: https://stackoverflow.com/questions/5645058/how-to-add-months-to-a-date-in-javascript

const isLeapYear = ( year ) => { 
    return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0)); 
};

const getDaysInMonth = (d) => { 
    const year = d.getFullYear();
		const month = d.getMonth();
    return [31, (isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];

joepuzzo

// PHONE FORMATTING

// -------------------------------------------------------
// First we take a look at numberFormatter to get idea of how things work

let numberFormatter = new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR'});

numberFormatter.formatToParts('300');
// ====> 
// [

joepuzzo

Problem Statement

• input formatting ( making it look correct )
• input validation ( checking that the number is valid )

Standards

E.164

Terminology

joepuzzo

const s1 =  [
	{ id: 1, key: 'a', value: 20 },	// --- a
	{ id: 2, key: 'b', value: 50 },
	{ id: 3, key: 'c', value: 30 }, // ------ c
	{ id: 4, key: 'd', value: 40 }, // ------------------ d
];

const s2 = [
	{ id: 5, key: 'a', value: 10 }, // --- a
	{ id: 6, key: 'c', value: 70 }, // ----- c

joepuzzo

import { useRef, useEffect } from 'react';

// https://reactjs.org/docs/hooks-faq.html#can-i-run-an-effect-only-on-updates

/**
 * 
 * Acts as a react useEffect that does not run on first render.
 * 
 * @example
 * useUpdateEffect(()=>{...}, [foo])

joepuzzo

{
   "version": 4,
   "countries": {
      "AC": {
         "phone_code": "247",
         "idd_prefix": "00",
         "national_number_pattern": "(?:[01589]\\d|[46])\\d{4}",
         "types": {
            "uan": {
               "pattern": "(?:0[1-9]|[1589]\\d)\\d{4}",