From 41086e88ee4fc040c1277e99cd65ead8f9d294e8 Mon Sep 17 00:00:00 2001 From: philibeaux Date: Tue, 11 May 2021 14:14:04 +0200 Subject: [PATCH] feat(eslint): add sort-key, sort prop-types, no bind jsx (#167) --- packages/eslint-config-react/index.js | 36 ++++--- packages/eslint-config-react/package.json | 4 + .../use-dataloader/src/DataLoaderProvider.js | 10 +- .../src/__tests__/useDataLoader.test.js | 60 +++++------ packages/use-dataloader/src/constants.js | 8 +- packages/use-dataloader/src/reducer.js | 2 +- packages/use-dataloader/src/useDataLoader.js | 32 +++--- packages/use-i18n/src/__tests__/index.js | 102 +++++++++--------- packages/use-i18n/src/__tests__/locales/en.js | 4 +- packages/use-i18n/src/__tests__/locales/es.js | 4 +- packages/use-i18n/src/__tests__/locales/fr.js | 4 +- packages/use-i18n/src/index.js | 20 ++-- .../use-query-params/src/__tests__/index.js | 67 +++++++----- packages/use-query-params/src/index.js | 4 +- 14 files changed, 189 insertions(+), 168 deletions(-) diff --git a/packages/eslint-config-react/index.js b/packages/eslint-config-react/index.js index 0c602c568..0cf8c940b 100644 --- a/packages/eslint-config-react/index.js +++ b/packages/eslint-config-react/index.js @@ -1,21 +1,17 @@ module.exports = { - extends: ['airbnb', 'airbnb/hooks', 'prettier'], env: { browser: true, jest: true, }, + extends: ['airbnb', 'airbnb/hooks', 'prettier'], rules: { - 'sort-imports': [ - 'error', - { - ignoreDeclarationSort: true, - memberSyntaxSortOrder: ['single', 'multiple', 'all', 'none'], - }, - ], - 'import/order': [ 'error', { + alphabetize: { + caseInsensitive: false, + order: 'asc', + }, groups: [ ['builtin', 'external'], 'internal', @@ -23,27 +19,33 @@ module.exports = { 'sibling', 'index', ], - alphabetize: { - order: 'asc', - caseInsensitive: false, - }, 'newlines-between': 'never', }, ], - 'padding-line-between-statements': [ 'error', { blankLine: 'always', - prev: '*', next: 'return', + prev: '*', }, ], - 'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], + 'react/jsx-no-constructed-context-values': 'warn', 'react/jsx-no-script-url': 'error', 'react/jsx-no-useless-fragment': 'error', 'react/no-adjacent-inline-elements': 'error', - 'react/jsx-no-constructed-context-values': 'warn', + 'react/sort-prop-types': [ + 'error', + { ignoreCase: true, requiredFirst: false, sortShapeProp: true }, + ], + 'sort-imports': [ + 'error', + { + ignoreDeclarationSort: true, + memberSyntaxSortOrder: ['single', 'multiple', 'all', 'none'], + }, + ], + 'sort-keys': ['error', 'asc', { caseSensitive: true, natural: true }], }, } diff --git a/packages/eslint-config-react/package.json b/packages/eslint-config-react/package.json index 05ed9798c..501e95865 100644 --- a/packages/eslint-config-react/package.json +++ b/packages/eslint-config-react/package.json @@ -2,6 +2,10 @@ "name": "@scaleway/eslint-config-react", "version": "1.4.0", "description": "Scaleway React eslint shared config", + "keywords": [ + "eslint", + "eslintconfig" + ], "main": "index.js", "publishConfig": { "access": "public" diff --git a/packages/use-dataloader/src/DataLoaderProvider.js b/packages/use-dataloader/src/DataLoaderProvider.js index 1e6deefe0..1ed650d5e 100644 --- a/packages/use-dataloader/src/DataLoaderProvider.js +++ b/packages/use-dataloader/src/DataLoaderProvider.js @@ -119,14 +119,14 @@ const DataLoaderProvider = ({ children }) => { const value = useMemo( () => ({ addCachedData, - clearCachedData, - getCachedData, - reload, - getReloads, addReload, - clearReload, clearAllCachedData, clearAllReloads, + clearCachedData, + clearReload, + getCachedData, + getReloads, + reload, reloadAll, }), [ diff --git a/packages/use-dataloader/src/__tests__/useDataLoader.test.js b/packages/use-dataloader/src/__tests__/useDataLoader.test.js index 42be429da..bd40aeada 100644 --- a/packages/use-dataloader/src/__tests__/useDataLoader.test.js +++ b/packages/use-dataloader/src/__tests__/useDataLoader.test.js @@ -4,15 +4,15 @@ import DataLoaderProvider, { useDataLoaderContext } from '../DataLoaderProvider' import useDataLoader from '../useDataLoader' const initialProps = { + config: { + enabled: true, + keepPreviousData: true, + }, key: 'test', method: () => new Promise(resolve => { setTimeout(() => resolve(true), 500) }), - config: { - enabled: true, - keepPreviousData: true, - }, } // eslint-disable-next-line react/prop-types const wrapper = ({ children }) => ( @@ -24,8 +24,8 @@ describe('useDataLoader', () => { const { result, waitForNextUpdate, rerender } = renderHook( props => useDataLoader(props.key, props.method), { - wrapper, initialProps, + wrapper, }, ) expect(result.current.data).toBe(undefined) @@ -41,11 +41,11 @@ describe('useDataLoader', () => { const { result, waitForNextUpdate } = renderHook( props => useDataLoader(props.key, props.method), { - wrapper, initialProps: { ...initialProps, key: 2, }, + wrapper, }, ) expect(result.current.data).toBe(undefined) @@ -60,13 +60,13 @@ describe('useDataLoader', () => { const { result, waitForNextUpdate } = renderHook( props => useDataLoader(props.key, props.method, props.config), { - wrapper, initialProps: { ...initialProps, config: { keepPreviousData: false, }, }, + wrapper, }, ) expect(result.current.data).toBe(undefined) @@ -81,12 +81,12 @@ describe('useDataLoader', () => { const { result, waitForNextUpdate } = renderHook( props => useDataLoader(props.key, props.method, props.config), { - wrapper, initialProps: { ...initialProps, method: () => new Promise(resolve => setTimeout(() => resolve(null), 100)), }, + wrapper, }, ) expect(result.current.data).toBe(undefined) @@ -101,8 +101,8 @@ describe('useDataLoader', () => { const { result, waitForNextUpdate } = renderHook( props => useDataLoader(props.key, props.method, props.config), { - wrapper, initialProps, + wrapper, }, ) expect(result.current.data).toBe(undefined) @@ -130,10 +130,10 @@ describe('useDataLoader', () => { test('should render correctly with key update', async () => { const propsToPass = { ...initialProps, - key: 'test', config: { reloadOnKeyChange: true, }, + key: 'test', } const { result, waitForNextUpdate, rerender } = renderHook( () => @@ -162,6 +162,9 @@ describe('useDataLoader', () => { test('should render correctly with pooling', async () => { const pollingProps = { + config: { + pollingInterval: 500, + }, key: 'test', method: jest.fn( () => @@ -169,9 +172,6 @@ describe('useDataLoader', () => { setTimeout(() => resolve(true), 250) }), ), - config: { - pollingInterval: 500, - }, } const method2 = jest.fn( @@ -184,8 +184,8 @@ describe('useDataLoader', () => { const { result, waitForNextUpdate, rerender } = renderHook( props => useDataLoader(props.key, props.method, props.config), { - wrapper, initialProps: pollingProps, + wrapper, }, ) expect(result.current.data).toBe(undefined) @@ -206,10 +206,10 @@ describe('useDataLoader', () => { expect(result.current.isLoading).toBe(false) rerender({ ...pollingProps, - method: method2, config: { pollingInterval: 800, }, + method: method2, }) act(() => { result.current.reload() @@ -227,10 +227,10 @@ describe('useDataLoader', () => { rerender({ ...pollingProps, - method: method2, config: { pollingInterval: 500, }, + method: method2, }) await waitForNextUpdate() expect(result.current.data).toBe(2) @@ -249,13 +249,13 @@ describe('useDataLoader', () => { const { result, waitForNextUpdate } = renderHook( props => useDataLoader(props.key, props.method, props.config), { - wrapper, initialProps: { ...initialProps, config: { enabled: false, }, }, + wrapper, }, ) expect(result.current.data).toBe(undefined) @@ -279,13 +279,13 @@ describe('useDataLoader', () => { const { result, waitForNextUpdate } = renderHook( props => useDataLoader(props.key, props.method, props.config), { - wrapper, initialProps: { ...initialProps, config: { onSuccess, }, }, + wrapper, }, ) expect(result.current.data).toBe(undefined) @@ -303,8 +303,11 @@ describe('useDataLoader', () => { const { result, waitForNextUpdate } = renderHook( props => useDataLoader(props.key, props.method, props.config), { - wrapper, initialProps: { + config: { + onError, + onSuccess, + }, key: 'test', method: () => new Promise((resolve, reject) => { @@ -312,11 +315,8 @@ describe('useDataLoader', () => { reject(error) }, 500) }), - config: { - onError, - onSuccess, - }, }, + wrapper, }, ) expect(result.current.data).toBe(undefined) @@ -340,8 +340,11 @@ describe('useDataLoader', () => { const { result, waitForNextUpdate } = renderHook( props => useDataLoader(props.key, props.method, props.config), { - wrapper, initialProps: { + config: { + onError, + onSuccess, + }, key: 'test', method: () => new Promise((resolve, reject) => { @@ -353,11 +356,8 @@ describe('useDataLoader', () => { } }, 500) }), - config: { - onError, - onSuccess, - }, }, + wrapper, }, ) expect(result.current.data).toBe(undefined) @@ -392,8 +392,8 @@ describe('useDataLoader', () => { }), ], { - wrapper, initialProps, + wrapper, }, ) @@ -431,11 +431,11 @@ describe('useDataLoader', () => { useDataLoaderContext(), ], { - wrapper, initialProps: { ...initialProps, method: mockedFn, }, + wrapper, }, ) diff --git a/packages/use-dataloader/src/constants.js b/packages/use-dataloader/src/constants.js index 02e096748..3ddf7b626 100644 --- a/packages/use-dataloader/src/constants.js +++ b/packages/use-dataloader/src/constants.js @@ -1,14 +1,14 @@ export const StatusEnum = { - LOADING: 'loading', - SUCCESS: 'success', ERROR: 'error', IDLE: 'idle', + LOADING: 'loading', + SUCCESS: 'success', } export const ActionEnum = { - RESET: 'RESET', + ON_ERROR: 'ON_ERROR', ON_LOADING: 'ON_LOADING', ON_SUCCESS: 'ON_SUCCESS', ON_UPDATE_DATA: 'ON_UPDATE_DATA', - ON_ERROR: 'ON_ERROR', + RESET: 'RESET', } diff --git a/packages/use-dataloader/src/reducer.js b/packages/use-dataloader/src/reducer.js index 00b95ffaf..106ee325f 100644 --- a/packages/use-dataloader/src/reducer.js +++ b/packages/use-dataloader/src/reducer.js @@ -18,8 +18,8 @@ export default (state, action) => { } case ActionEnum.RESET: return { - status: StatusEnum.IDLE, error: undefined, + status: StatusEnum.IDLE, } case ActionEnum.ON_ERROR: return { diff --git a/packages/use-dataloader/src/useDataLoader.js b/packages/use-dataloader/src/useDataLoader.js index 8ee4cad41..a369984cd 100644 --- a/packages/use-dataloader/src/useDataLoader.js +++ b/packages/use-dataloader/src/useDataLoader.js @@ -4,10 +4,10 @@ import { ActionEnum, StatusEnum } from './constants' import reducer from './reducer' const Actions = { - createReset: () => ({ type: ActionEnum.RESET }), + createOnError: error => ({ error, type: ActionEnum.ON_ERROR }), createOnLoading: () => ({ type: ActionEnum.ON_LOADING }), createOnSuccess: () => ({ type: ActionEnum.ON_SUCCESS }), - createOnError: error => ({ type: ActionEnum.ON_ERROR, error }), + createReset: () => ({ type: ActionEnum.RESET }), } /** @@ -43,23 +43,19 @@ const useDataLoader = ( key, method, { - onSuccess, - onError, - initialData, - pollingInterval, enabled = true, + initialData, keepPreviousData = true, + onError, + onSuccess, + pollingInterval, } = {}, ) => { - const { - addCachedData, - addReload, - clearReload, - getCachedData, - } = useDataLoaderContext() + const { addCachedData, addReload, clearReload, getCachedData } = + useDataLoaderContext() const [{ status, error }, dispatch] = useReducer(reducer, { - status: StatusEnum.IDLE, error: undefined, + status: StatusEnum.IDLE, }) const previousDataRef = useRef() @@ -148,14 +144,14 @@ const useDataLoader = ( }, [method]) return { - isLoading, - isIdle, - isSuccess, + data: getCachedData(key) || initialData, + error, isError, + isIdle, + isLoading, isPolling, + isSuccess, previousData: previousDataRef.current, - data: getCachedData(key) || initialData, - error, reload: args => handleRequest.current(key, args), } } diff --git a/packages/use-i18n/src/__tests__/index.js b/packages/use-i18n/src/__tests__/index.js index 6f6e3567d..d1d1dbefb 100644 --- a/packages/use-i18n/src/__tests__/index.js +++ b/packages/use-i18n/src/__tests__/index.js @@ -9,29 +9,32 @@ import fr from './locales/fr' const LOCALE_ITEM_STORAGE = 'locales' -const wrapper = ({ - loadDateLocale = async locale => import(`date-fns/locale/${locale}/index`), - defaultLoad = async ({ locale }) => import(`./locales/${locale}`), - defaultLocale = 'en', - defaultTranslations = {}, - enableDebugKey = false, - enableDefaultLocale = false, - localeItemStorage = LOCALE_ITEM_STORAGE, - supportedLocales = ['en', 'fr', 'es'], -} = {}) => ({ children }) => ( - - {children} - -) +const wrapper = + ({ + loadDateLocale = async locale => import(`date-fns/locale/${locale}/index`), + defaultLoad = async ({ locale }) => import(`./locales/${locale}`), + defaultLocale = 'en', + defaultTranslations = {}, + enableDebugKey = false, + enableDefaultLocale = false, + localeItemStorage = LOCALE_ITEM_STORAGE, + supportedLocales = ['en', 'fr', 'es'], + } = {}) => + ({ children }) => + ( + + {children} + + ) describe('i18n hook', () => { afterEach(() => { @@ -98,11 +101,11 @@ describe('i18n hook', () => { await waitForNextUpdate() expect(result.current.translations).toStrictEqual({ en: { - 'user.name': 'Name', - 'user.lastName': 'Last Name', - 'user.languages': 'Languages', - 'profile.name': 'Name', 'profile.lastName': 'Last Name', + 'profile.name': 'Name', + 'user.languages': 'Languages', + 'user.lastName': 'Last Name', + 'user.name': 'Name', }, }) @@ -118,17 +121,17 @@ describe('i18n hook', () => { expect(result.current.translations).toStrictEqual({ en: { - 'user.name': 'Name', - 'user.lastName': 'Last Name', - 'user.languages': 'Languages', - 'profile.name': 'Name', 'profile.lastName': 'Last Name', + 'profile.name': 'Name', + 'user.languages': 'Languages', + 'user.lastName': 'Last Name', + 'user.name': 'Name', }, fr: { - 'user.name': 'Prénom', - 'user.lastName': 'Nom', - 'profile.name': 'Prénom', 'profile.lastName': 'Nom', + 'profile.name': 'Prénom', + 'user.lastName': 'Nom', + 'user.name': 'Prénom', }, }) @@ -148,8 +151,8 @@ describe('i18n hook', () => { () => useTranslation(['user'], load), { wrapper: wrapper({ - enableDefaultLocale: true, defaultLocale: 'fr', + enableDefaultLocale: true, supportedLocales: ['en', 'fr'], }), }, @@ -158,9 +161,9 @@ describe('i18n hook', () => { await waitForNextUpdate() expect(result.current.translations).toStrictEqual({ en: { - 'user.name': 'Name', - 'user.lastName': 'Last Name', 'user.languages': 'Languages', + 'user.lastName': 'Last Name', + 'user.name': 'Name', }, fr: { 'user.lastName': 'Nom', @@ -244,9 +247,9 @@ describe('i18n hook', () => { const { result, waitForNextUpdate } = renderHook(() => useI18n(), { wrapper: wrapper({ defaultLocale: 'en', - supportedLocales: ['en', 'fr'], defaultTranslations: { en }, enableDebugKey: true, + supportedLocales: ['en', 'fr'], }), }) expect(result.current.t('test')).toEqual('test') @@ -294,17 +297,17 @@ describe('i18n hook', () => { expect(result.current.formatNumber(2)).toEqual('2') expect( result.current.formatNumber(2, { - style: 'currency', currency: 'EUR', currencyDisplay: 'symbol', + style: 'currency', }), ).toEqual('€2.00') expect( result.current.formatNumber(2, { - style: 'currency', currency: 'USD', currencyDisplay: 'symbol', + style: 'currency', }), ).toEqual('$2.00') @@ -321,11 +324,14 @@ describe('i18n hook', () => { // https://stackoverflow.com/questions/54242039/intl-numberformat-space-character-does-not-match expect( - result.current.formatNumber(2, { style: 'currency', currency: 'EUR' }), + result.current.formatNumber(2, { + currency: 'EUR', + style: 'currency', + }), ).toEqual('2,00\xa0€') expect( - result.current.formatNumber(2, { style: 'currency', currency: 'USD' }), + result.current.formatNumber(2, { currency: 'USD', style: 'currency' }), ).toEqual('2,00\xa0$US') }) @@ -399,8 +405,8 @@ describe('i18n hook', () => { expect( result.current.datetime(date, { - month: 'numeric', day: 'numeric', + month: 'numeric', year: 'numeric', }), ).toEqual('12/17/1995') @@ -408,25 +414,25 @@ describe('i18n hook', () => { expect( result.current.datetime(date, { day: '2-digit', + era: 'short', month: 'short', year: 'numeric', - era: 'short', }), ).toEqual('Dec 17, 1995 AD') expect( result.current.datetime(date, { day: '2-digit', + era: 'long', month: 'long', year: 'numeric', - era: 'long', }), ).toEqual('December 17, 1995 Anno Domini') expect( result.current.datetime(date, { - month: 'numeric', day: 'numeric', + month: 'numeric', year: 'numeric', }), ).toEqual('12/17/1995') @@ -440,8 +446,8 @@ describe('i18n hook', () => { expect( result.current.datetime(date, { - month: 'numeric', day: 'numeric', + month: 'numeric', year: 'numeric', }), ).toEqual('17/12/1995') @@ -449,9 +455,9 @@ describe('i18n hook', () => { expect( result.current.datetime(date, { day: '2-digit', + era: 'long', month: 'long', year: 'numeric', - era: 'long', }), ).toEqual('17 décembre 1995 après Jésus-Christ') }) diff --git a/packages/use-i18n/src/__tests__/locales/en.js b/packages/use-i18n/src/__tests__/locales/en.js index e5cb7bc09..4f0c139fa 100644 --- a/packages/use-i18n/src/__tests__/locales/en.js +++ b/packages/use-i18n/src/__tests__/locales/en.js @@ -1,7 +1,7 @@ export default { - title: 'Welcome on @scaelway/ui i18n hook', - subtitle: 'Here is a subtitle', plurals: 'You have {numPhotos, plural, =0 {no photos.} =1 {one photo.} other {# photos.}}', + subtitle: 'Here is a subtitle', 'tests.test.namespaces': 'test', + title: 'Welcome on @scaelway/ui i18n hook', } diff --git a/packages/use-i18n/src/__tests__/locales/es.js b/packages/use-i18n/src/__tests__/locales/es.js index 7fe7bdccb..bd7372cdd 100644 --- a/packages/use-i18n/src/__tests__/locales/es.js +++ b/packages/use-i18n/src/__tests__/locales/es.js @@ -1,7 +1,7 @@ export default { - title: 'Bienvenido @scaelway/ui i18n hook', - subtitle: 'Aquí hay un subtítulo', plurals: 'You have {numPhotos, plural, =0 {no photos.} =1 {one photo.} other {# photos.}}', + subtitle: 'Aquí hay un subtítulo', 'tests.test.namespaces': 'test', + title: 'Bienvenido @scaelway/ui i18n hook', } diff --git a/packages/use-i18n/src/__tests__/locales/fr.js b/packages/use-i18n/src/__tests__/locales/fr.js index 9717e00a7..c3c5c2cf2 100644 --- a/packages/use-i18n/src/__tests__/locales/fr.js +++ b/packages/use-i18n/src/__tests__/locales/fr.js @@ -1,7 +1,7 @@ export default { - title: 'Bienvenue sur @scaelway/ui i18n hook', - subtitle: 'Voici un sous-titre', plurals: 'You have {numPhotos, plural, =0 {no photos.} =1 {one photo.} other {# photos.}}', + subtitle: 'Voici un sous-titre', 'tests.test.namespaces': 'test', + title: 'Bienvenue sur @scaelway/ui i18n hook', } diff --git a/packages/use-i18n/src/index.js b/packages/use-i18n/src/index.js index 4d83b1508..d888584af 100644 --- a/packages/use-i18n/src/index.js +++ b/packages/use-i18n/src/index.js @@ -91,16 +91,19 @@ const I18nContextProvider = ({ const loadTranslations = useCallback( async (namespace, load = defaultLoad) => { const result = { - defaultLocale: { default: {} }, [currentLocale]: { default: {} }, + defaultLocale: { default: {} }, } // load default en language if (enableDefaultLocale && currentLocale !== defaultLocale) { - result.defaultLocale = await load({ namespace, locale: defaultLocale }) + result.defaultLocale = await load({ + locale: defaultLocale, + namespace, + }) } result[currentLocale] = await load({ - namespace, locale: currentLocale, + namespace, }) const trad = { @@ -196,8 +199,9 @@ const I18nContextProvider = ({ ) const namespaceTranslation = useCallback( - (namespace, t = translate) => (identifier, ...args) => - t(`${namespace}.${identifier}`, ...args) || t(identifier, ...args), + (namespace, t = translate) => + (identifier, ...args) => + t(`${namespace}.${identifier}`, ...args) || t(identifier, ...args), [translate], ) @@ -214,8 +218,8 @@ const I18nContextProvider = ({ currentLocale, dateFnsLocale, datetime, - formatNumber, formatList, + formatNumber, loadTranslations, locales, namespaceTranslation, @@ -251,19 +255,19 @@ const I18nContextProvider = ({ I18nContextProvider.defaultProps = { defaultTranslations: {}, + enableDebugKey: false, enableDefaultLocale: false, localeItemStorage: LOCALE_ITEM_STORAGE, - enableDebugKey: false, } I18nContextProvider.propTypes = { children: PropTypes.node.isRequired, defaultLoad: PropTypes.func.isRequired, - loadDateLocale: PropTypes.func.isRequired, defaultLocale: PropTypes.string.isRequired, defaultTranslations: PropTypes.shape({}), enableDebugKey: PropTypes.bool, enableDefaultLocale: PropTypes.bool, + loadDateLocale: PropTypes.func.isRequired, localeItemStorage: PropTypes.string, supportedLocales: PropTypes.arrayOf(PropTypes.string).isRequired, } diff --git a/packages/use-query-params/src/__tests__/index.js b/packages/use-query-params/src/__tests__/index.js index 5c8a0bc6a..e1755956f 100644 --- a/packages/use-query-params/src/__tests__/index.js +++ b/packages/use-query-params/src/__tests__/index.js @@ -3,12 +3,15 @@ import React from 'react' import { MemoryRouter } from 'react-router-dom' import useQueryParams from '..' -// eslint-disable-next-line react/prop-types -const wrapper = ({ pathname = 'one', search }) => ({ children }) => ( - - {children} - -) +const wrapper = + ({ pathname = 'one', search }) => + // eslint-disable-next-line react/prop-types + ({ children }) => + ( + + {children} + + ) describe('useQueryParam', () => { it('should set one object', () => { @@ -34,16 +37,22 @@ describe('useQueryParam', () => { expect(result.current.queryParams).toEqual({ user: 'John' }) act(() => { - result.current.setQueryParams({ user: 'Doe', name: 'Doe' }) + result.current.setQueryParams({ + name: 'Doe', + user: 'Doe', + }) + }) + expect(result.current.queryParams).toEqual({ + name: 'Doe', + user: 'Doe', }) - expect(result.current.queryParams).toEqual({ user: 'Doe', name: 'Doe' }) act(() => { result.current.setQueryParams({ user: 'Scaleway' }) }) expect(result.current.queryParams).toEqual({ - user: 'Scaleway', name: 'Doe', + user: 'Scaleway', }) }) @@ -54,19 +63,19 @@ describe('useQueryParam', () => { act(() => { result.current.setQueryParams({ - user: 'John Doe', - name: 'John', lastName: 'Doe', - version: 1234, lib: 'useQueryParams', + name: 'John', + user: 'John Doe', + version: 1234, }) }) expect(result.current.queryParams).toEqual({ - user: 'John Doe', - name: 'John', lastName: 'Doe', - version: 1234, lib: 'useQueryParams', + name: 'John', + user: 'John Doe', + version: 1234, }) }) @@ -86,10 +95,10 @@ describe('useQueryParam', () => { }) expect(result.current.queryParams).toEqual({ - string: 'john', + array: ['handle', 'array', 'format'], boolean: true, number: 123, - array: ['handle', 'array', 'format'], + string: 'john', }) }) @@ -103,16 +112,16 @@ describe('useQueryParam', () => { act(() => { result.current.setQueryParams({ lastName: 'Doe', - version: 1234, lib: 'useQueryParams', + version: 1234, }) }) expect(result.current.queryParams).toEqual({ - user: 'john', lastName: 'Doe', - version: 1234, lib: 'useQueryParams', + user: 'john', + version: 1234, }) }) @@ -129,8 +138,8 @@ describe('useQueryParam', () => { result.current.setQueryParams({ lastName: 'Doe' }) }) expect(result.current.queryParams).toEqual({ - name: 'JOHN', lastName: 'Doe', + name: 'JOHN', }) rerender() @@ -144,8 +153,8 @@ describe('useQueryParam', () => { }) expect(result.current.queryParams).toEqual({ - name: 'john', lastName: 'Doe', + name: 'john', test: 'Scaleway', }) }) @@ -165,9 +174,9 @@ describe('useQueryParam', () => { }) expect(result.current.queryParams).toEqual({ - name: 'John', - lastName: 'Doe', compagny: 'Scaleway', + lastName: 'Doe', + name: 'John', }) act(() => { @@ -175,9 +184,9 @@ describe('useQueryParam', () => { }) expect(result.current.queryParams).toEqual({ - name: 'John', - lastName: 'Doe', compagny: 'Scaleway', + lastName: 'Doe', + name: 'John', }) }) @@ -196,8 +205,8 @@ describe('useQueryParam', () => { result.current.setQueryParams({ lastName: 'Doe' }) }) expect(result.current.queryParams).toEqual({ - name: 'John', lastName: 'Doe', + name: 'John', }) act(() => { result.current.replaceQueryParams({ compagny: 'Scaleway' }) @@ -287,12 +296,12 @@ describe('useQueryParam', () => { }) expect(result.current.qp1.queryParams).toEqual({ - user: 'John', compagny: 'Scaleway', + user: 'John', }) expect(result.current.qp2.queryParams).toEqual({ - user: 'John', compagny: 'Scaleway', + user: 'John', }) }) }) diff --git a/packages/use-query-params/src/index.js b/packages/use-query-params/src/index.js index 89a377b24..06257ec59 100644 --- a/packages/use-query-params/src/index.js +++ b/packages/use-query-params/src/index.js @@ -9,9 +9,9 @@ const useQueryParams = () => { const currentState = useMemo( () => parse(location.search, { - parseNumbers: true, - parseBooleans: true, arrayFormat: 'comma', + parseBooleans: true, + parseNumbers: true, }), [location.search], )