feat(eslint): add sort-key, sort prop-types, no bind jsx (#167)

packages/eslint-config-react/index.js

@@ -1,49 +1,51 @@
 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',
           'parent',
           '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 }],
   },
 }

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"

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,
     }),
     [

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,16 +162,16 @@ describe('useDataLoader', () => {
 
   test('should render correctly with pooling', async () => {
     const pollingProps = {
+      config: {
+        pollingInterval: 500,
+      },
       key: 'test',
       method: jest.fn(
         () =>
           new Promise(resolve => {
             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,20 +303,20 @@ 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) => {
               setTimeout(() => {
                 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,
       },
     )
 

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',
 }

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 {