donavon

/*
Write a function to flatten any object such that the flatten keys are a camelCased
concatination of the key and all parent keys. If the value is an array, name the key with the
position of the array (base 1) and remove the plural "s" (assume all arrays end with an "s").
Should work with infinite layers, not just two. Arrays can contain objects.

In the example `user` below, the output would be as follows:
{
  nameFirst: 'John',
  nameLast: 'Doe',

donavon

// set page tracking for Single Page Applications
// see https://developers.google.com/analytics/devguides/collection/gtagjs/single-page-applications

import { createBrowserHistory, Update } from 'history'; // 5.0.1
import { useEffect } from 'react';

const history = createBrowserHistory();

const onLocationChange = ({ location }: Update) => {
  const { gtag } = window;

donavon

import { useState, KeyboardEvent } from 'react';
import useEventListener from '@use-it/event-listener';

export const useKeyDown = (key: string) => {
  const [keyDown, setKeyDown] = useState(false);

  useEventListener('keydown', (ev: KeyboardEvent) => {
    if (ev.key === key) {
      setKeyDown(true);
    }

donavon

const githubUsernames = ['donavon', 'revelcw', '#^%$', 'sessionsfm'];

const fetchGithubUser = async (username) => {
  const resp = await fetch(`https://api.github.com/users/${username}`);
  return resp.ok ? await resp.json() : null;
}

const users = await Promise.all(
  githubUsernames.map(fetchGithubUser)
);

donavon

const someFunction = (arg: string | string[]) => {
  if (Array.isArray(arg)) {
    return arg.map<string>(someFunction);
  }
  return arg.toUpperCase();
};

const x = someFunction('a'); // should be type string
const arr = someFunction(['a']);  // should be type string[]

donavon

const formData = { foo: "foo", bar: "M&Ms" };

// Good 🔥
const postBody = Object.keys(formData)
  .map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(body[key]))
  .join("&");

// Better 🔥🔥
const postBody = Object.entries(formData)
  .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)

donavon

const segmentize = (str: string, maxLength: number): string[] => {
  const regex = new RegExp(`.{1,${maxLength}}`, 'g');
  return str.match(regex) ?? [];
};

donavon

{
  "tsx": {
    "prefix": "tsx",
    "description": "Create a TypeScript React Function Component",
    "body": [
      "import React from 'react';",
      "",
      "type ${1:MyComponent}Props = {",
      "  children: React.ReactNode;",
      "};",

donavon

import React from "react";
import { OrderProps } from "./OrderProps.types";

export const Order = ({ order }: OrderProps) => {
  return <div>...</div>;
};

donavon

// Example component using StateRouter

const MyComponent = () => {               
  const [state] = useMachine(myMachine);
  
  return (
    <StateRouter state={state}>
      <Loading path="loading" />
      <Ready path="ready" />
      <Error path="error" />