safeFormik.ts

import fromPairs from 'lodash/fromPairs'

export type SafeForFormik<T extends { [key in string]: any }> = {
    safe: { [keyWithoutDots in string]: T['key in string'] }
    originalToSafeKeyDict: { [key in string]: string }
    safeToOriginalKeyDict: { [keyWithoutDots in string]: string }
    getBySafeKey: (data: T, keyWithoutDots: string) => T['key in string']
}

/**
 * Because Formik tries to be smart about dots in Field names and
 * treats them as lodash-like dot paths, we need to replace them.
 * This is a utility function that given a `data` object like:
 *   {
 *      "http://example.com": "value"
 *   }
 * returns:
 *   {
 *      safe: {
 *         "http://example-com": "value"
 *      },
 *      originalToSafeKeyDict: {
 *          "http://example.com": "http://example-com"
 *      },
 *      safeToOriginalKeyDict: {
 *          "http://example-com": "http://example.com"
 *      },
 *      getBySafeKey(data, safeKey) => data[originalKey]
 *   }
 */
export function safeFormikData<T extends { [K in string]: any }>(
    data: T,
): SafeForFormik<T> {
    const originalToSafeKeyDict = fromPairs(
        Object.keys(data).map(key => [key, safeFormikName(key)]),
    )
    const safeToOriginalKeyDict = fromPairs(
        Object.keys(data).map(key => [safeFormikName(key), key]),
    )
    const safe = fromPairs(
        Object.keys(data).map(key => [originalToSafeKeyDict[key], data[key]]),
    )

    return {
        safe,
        originalToSafeKeyDict,
        safeToOriginalKeyDict,
        getBySafeKey: (data: T, keyWithoutDots: string) => {
            const originalKey = safeToOriginalKeyDict[keyWithoutDots]
            return originalKey && data[originalKey]
        },
    }
}

/**
 * Convert a potentially unsafe attribute name with dots into one without dots.
 * To be used with data generated by `safeFormikData()`
 */
export const safeFormikName = (string: string, replacement = '-'): string => {
    return String(string).replace(/\./g, replacement)
}