This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { TextField, TextFieldProps } from '@material-ui/core'; | |
import { ChangeEvent, memo, useCallback, useEffect, useRef, useState } from 'react'; | |
function DebouncedTextField({ value, onChange, timeout = 1000, ...props }: TextFieldProps & { timeout?: number }) { | |
const timeoutHandlerRef = useRef<ReturnType<typeof setTimeout>>(); | |
const [currentValue, setCurrentValue] = useState(value); | |
const handleChange = useCallback((event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { | |
const value = event.target.value; | |
setCurrentValue(value); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// inspired by https://github.com/bellawatt/use-debounce-effect | |
import { DependencyList, useEffect, useRef } from 'react' | |
export default function useDebounceEffect(cb: () => void, delay: number, values: DependencyList, runOnInit = false) { | |
const didMountRef = useRef<boolean>(false); | |
useEffect(() => { | |
if (!runOnInit && !didMountRef.current) { | |
didMountRef.current = true; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { isEqual } from 'lodash'; | |
import { useRef } from 'react'; | |
/** | |
* usage: | |
* `useEffect(() => { ... }, [useDeepCompareMemoize(param)]);` | |
*/ | |
export default function useDeepCompareMemoize<T>(value: T) { | |
const ref = useRef<T>(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useEffect, useRef, useState } from 'react'; | |
import { TypedUseSelectorHook, useSelector } from 'react-redux'; | |
// S is the RootState. If used with reselect, it can be derived. Otherwise, it could also initialized here with S = RootState | |
export function useDebouncedSelector<T, S>(selector: (state: S) => T, time = 100, equalityFn?: (left: T, right: T) => boolean) { | |
const useAppSelector: TypedUseSelectorHook<S> = useSelector; | |
const [state, setState] = useState<{ data: T | undefined }>({ data: undefined }); | |
const result = useRef<T>(); | |
const data = useAppSelector<T>(selector, equalityFn); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type ValueOf<T> = T[keyof T]; | |
// Since I find the typing in record not as convenient I return an object type. | |
// The record type could be returned as well. Just omit the return type definition. | |
export function mapObject<IN extends Record<string, unknown>, VAL>( | |
map: (v: ValueOf<IN>, k: keyof IN) => VAL, | |
obj: IN, | |
): { [K in keyof IN]: VAL } { | |
const result = {} as Record<keyof IN, VAL>; | |
for (const i in obj) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function fromEntries<K extends string, V>(entries: [K, V][]) { | |
return Object.fromEntries(entries) as { | |
[key in K]: V | |
}; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/******************************************************************************* | |
* @author: Dave Gööck<dave@goeoeck.net> | |
* | |
* This small filter is just a workaround for some problem with angular-meteor. | |
* | |
* It doesn't really filter any element of the input array but returns a clone | |
* of the input. The clone is the same instance for each input configuration. | |
* It's not a deep clone. If the input array contains objects, the result array | |
* will contain the same instances. | |
* |