Skip to content

Instantly share code, notes, and snippets.

View gabemeola's full-sized avatar
🐛

Gabe gabemeola

🐛
View GitHub Profile
@gabemeola
gabemeola / betterFetch.ts
Last active July 10, 2022 15:55
Better... Fetch
type FetchRes<T> = Response & {
data: T;
};
/**
* A Fetch Request that errors on non 2xx status codes
*/
export default function betterFetch<T>(
input: RequestInfo,
init?: RequestInit
@gabemeola
gabemeola / memoizeAsync.js
Last active March 10, 2022 05:53
Memoize an Async function
/**
* Memoize a async function (any function which returns a promise)
*
* @param {Function} func - Function which returns a promise
* @param {boolean} [cacheError=false] - Should cache promise rejections
* @param {Function} [resolver] - Resolves cache key. Uses first arg as default
* @returns {Function.<Promise>} - Returns memoized function
*/
export default function memoizeAsync(func, cacheError = false, resolver) {
const cache = new Map();
@gabemeola
gabemeola / useRefDimensions.ts
Created February 18, 2022 01:22
Get dimensions of a HTML Element in React
import { useState, useCallback, useLayoutEffect, RefObject, useMemo } from 'react';
import debounce from 'debounce';
export type Dimensions = [number, number];
export default function useRefDimensions(ref: RefObject<HTMLElement>): Dimensions {
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const computeDimensions = useCallback((elem: Element) => {
@gabemeola
gabemeola / combineReducersWithRoot.js
Created October 25, 2018 20:09
Combines Redux reducers with a top level root reducer
/**
* Combines reducers with root reducer
*
* @param {function(Object, Object): Object} rootReducer
* @param {Object<string, function(Object, Object): Object>} [reducers={}]
* @returns {function(Object, Object): Object}
*/
export default function combineReducersWithRoot(rootReducer, reducers = {}) {
const entries = Object.entries(reducers);
@gabemeola
gabemeola / promiseChain.ts
Last active September 4, 2020 17:27
Allows all promises to be awaited while capturing values
function noop() {}
type CatchCallback<T> = Parameters<Promise<T>['catch']>[0];
class PromiseChain<T> {
#chain: Promise<any> = Promise.resolve();
#values: Array<T> = [];
add(promise: Promise<T | void | undefined>, promiseCatch: CatchCallback<T> = noop) {
this.#chain = this.#chain
.then(() => promise)
@gabemeola
gabemeola / requestOnIdle.js
Created November 14, 2019 17:03
requestOnIdle.js
const isRequestIdleCallbackSupported =
'requestIdleCallback' in window &&
typeof window.requestIdleCallback === 'function';
/**
* A higher order function that wraps passed function to run
* inside of a requestIdleCallback or "onload" event
* depending on what is supported in the browser.
*
* This is useful for running low priority app level bootstrapping events.
@gabemeola
gabemeola / simpleDateToIso.ts
Created June 25, 2019 18:52
Converts Java SimpleDataFormat to ISO 8601 format
/**
* Converts Java SimpleDataFormat to ISO 8601 format
*
* @example
* simpleDateIso('2019-01-24T12:42:17:234-0700') => '2019-01-24T12:42:17.234-0700'
*
* @param {string} simpleDate - Java SimpleDataFormat string
* https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html
* @returns {string|null}
*/
@gabemeola
gabemeola / pxToRem.ts
Created June 25, 2019 18:52
px to rem
/**
* Returns rem representation of pixel based on root size.
*
* @param {number} px - Pixel Size
* @param {number} [rootSize=16] - Root Font Size
* @returns {string}
*/
export default function pxToRem(px: number, rootSize: number = 16): string {
return `${px / rootSize}rem`;
}
@gabemeola
gabemeola / useToggle.ts
Last active June 10, 2019 18:57
Simple Toggle Hook for React
import { useReducer } from 'react';
type Toggle = (forceToggle?: boolean) => void;
export default function useToggle(initial: boolean = false) {
return useReducer(
(toggledState: boolean, forceToggle?: boolean) => forceToggle || !toggledState,
initial
) as [boolean, Toggle];
}
@gabemeola
gabemeola / clickKeyPress.js
Last active May 14, 2019 23:37
Higher order function which handles key presses
/**
* Higher order function which handles
* key presses "onKeyDown".
*
* Passes event to function.
*
* @param {Function} fn - Function to be invoked with event
* @return {function(Event): any}
*/
const clickKeyPress = (fn) => (ev) => {