Skip to content

Instantly share code, notes, and snippets.

@tvler
tvler / MockedApolloClient.ts
Created Jan 14, 2021
A mocked version of ApolloClient for Jest tests
View MockedApolloClient.ts
import { ApolloCache, ApolloClient, ApolloLink, NormalizedCacheObject } from '@apollo/client';
class MockedApolloLink extends ApolloLink {
split = jest.fn();
concat = jest.fn();
request = jest.fn();
setOnError = jest.fn();
protected onError = jest.fn();
}
@tvler
tvler / IntersectionObserverBox.tsx
Last active Dec 21, 2020
A type-safe, polymorphic Box to wrap any forwardRef component with an Intersection Observer in React
View IntersectionObserverBox.tsx
import { useEffect, useRef } from "react";
/*
* A type-safe, polymorphic Box to wrap any forwardRef component
* with an Intersection Observer. Designed to be used in an
* unknown-length array map setting (infinite feed, etc.).
*
* The `callback` prop is closed over the passed-in `id` prop.
* This allows the `callback` prop to keep reference-equality
* between renders using something like `useCallback`, which
@tvler
tvler / ImplicityTypedActionPayloadByActionType.ts
Last active Apr 22, 2020
Implicitly type an action payload by an action type
View ImplicityTypedActionPayloadByActionType.ts
type ActionTypes = 'actionA' | 'actionB' | 'actionC' | 'actionNoPayload';
type ActionPayloads = {
actionA: { payload: number };
actionB: { payload: string };
actionC: { foo: boolean; bar: boolean };
};
type Actions = {
[key in ActionTypes]: {
@tvler
tvler / DeepRequiredNonNullable.ts
Last active Jan 22, 2020
Recursively remove all undefined and null types from data structures of arbitrary-depth
View DeepRequiredNonNullable.ts
type DeepRequiredNonNullable<T> = T extends null | undefined
? never
: (T extends (infer ElementType)[]
? DeepRequiredNonNullable<ElementType>[]
: (T extends Record<string | number, any>
? { [key in keyof T]-?: DeepRequiredNonNullable<T[key]> }
: T));
// Number test
type BadPrimitive = number | null | undefined | string;
@tvler
tvler / cartesianProduct.js
Created Feb 19, 2019
Get the cartesian product of multiple sets
View cartesianProduct.js
// Thanks to eddmann.com/posts/cartesian-product-in-javascript
const cartesianProduct = (...sets) =>
sets.reduce((sets, set) => sets.flatMap(x => set.map(y => [...x, y])), [[]]);
cartesianProduct(
['a', 'b', 'c'],
['x', 'y', 'z'],
);
@tvler
tvler / useNewKey.jsx
Last active Apr 2, 2020
React hook that returns a new key when its passed in value goes from false to true
View useNewKey.jsx
// React hook that returns a new key
// when its passed in value goes from false to true.
// Use this for resetting a child component, firing events, etc!
const useNewKey = bool => {
const [key, setKey] = useState(bool ? 0 : 1);
const newKey = Boolean(bool) === Boolean(key % 2) ? key + 1 : key;
useEffect(() => {
setKey(newKey);
@tvler
tvler / areUnsortedArraysEqual.js
Last active Apr 18, 2019
A variadic function to see if any number of unsorted arrays all have the same values
View areUnsortedArraysEqual.js
const areUnsortedArraysEqual = (...arrs) => {
const everyEqual = ([first, ...arr], isEqual) =>
arr.every(item => isEqual(first, item));
return (
everyEqual(arrs, (first, arr) => arr.length === first.length) &&
everyEqual(
arrs.map(arr =>
arr.reduce(
(map, item) => map.set(item, (map.get(item) || 0) + 1),
@tvler
tvler / Atom⇧⌘F
Last active May 25, 2018
Atom ⇧⌘F helpers
View Atom⇧⌘F
Exclude file types
!*.snap, !*.test.jsx, !*.test.js
@tvler
tvler / getCircularArrayIndex.js
Created Apr 16, 2018
Get circular array index
View getCircularArrayIndex.js
const getCircularArrayIndex = (i, { length }) =>
(i % length + length) % length;
const testArray = new Array(5);
for (let i = -30; i < 31; i++) {
console.log(i, getCircularArrayIndex(i, testArray))
}
@tvler
tvler / imessage-pics.sh
Created Mar 22, 2018
(MacOS) Open all iMessage attachments in Preview
View imessage-pics.sh
open -a Preview ~/Library/Messages/Attachments