linter improvements

services/app/apps/codebattle/.eslintrc.yml

@@ -6,6 +6,7 @@ plugins:
   - jsx-a11y
   - jest
   - react-hooks
+  - sort-destructure-keys
 env:
   node: true
   browser: true
@@ -15,6 +16,7 @@ parser: "@babel/eslint-parser"
 extends:
   - "airbnb"
   - "plugin:jest/recommended"
+  - "plugin:prettier/recommended"
 
 rules:
   no-console: 0
@@ -43,13 +45,31 @@ rules:
         group: internal
     pathGroupsExcludedImportTypes:
       - internal
+  import/extensions:
+    - error
+    - js: never
+      jsx: never
   no-param-reassign: 0
   arrow-parens:
     - 2
-    - "as-needed"
+    - "always"
   react/jsx-props-no-spreading: 0
   react/static-property-placement: 0
   react/state-in-constructor: 0
+  react/function-component-definition: "off"
+  react/jsx-sort-props:
+    - 1
+    - callbacksLast: true
+      shorthandFirst: true
+      shorthandLast: false
+      ignoreCase: false
+      noSortAlphabetically: false
+      reservedFirst: true
+      multiline: last
+  react/no-unstable-nested-components:
+    - warn
+    - allowAsProps: true
+  class-methods-use-this: "off"
   jest/no-disabled-tests: "warn"
   jest/no-focused-tests: "error"
   jest/no-identical-title: "error"
@@ -60,3 +80,6 @@ rules:
   template-curly-spacing: "off"
   indent: "off"
   max-len: ["error", 140, 2]
+  sort-destructure-keys/sort-destructure-keys:
+    - 1
+    - caseSensitive: false

services/app/apps/codebattle/.prettierrc.json

@@ -0,0 +1,9 @@
+{
+  "printWidth": 100,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSameLine": false,
+  "arrowParens": "always"
+}

services/app/apps/codebattle/assets/js/__mocks__/react-select.jsx

@@ -1,32 +1,26 @@
 import React, { useState } from 'react';
 
-const Select = ({ options, onChange, filterOption }) => {
+function Select({ filterOption, onChange, options }) {
   const [selectInput, setSelectInput] = useState('task');
 
   return (
     <div>
       {options
-        .filter(option => (
-          filterOption({ value: { name: option.value.name } }, selectInput)
-        ))
-        .map(option => (
+        .filter((option) => filterOption({ value: { name: option.value.name } }, selectInput))
+        .map((option) => (
           <button
+            key={option.value.name}
             type="button"
             onClick={() => onChange({ value: option.value })}
-            key={option.value.name}
           >
             {option.value.name}
           </button>
-      ))}
-      <button
-        type="button"
-        onClick={() => setSelectInput('nAme')}
-        key="filterOption"
-      >
+        ))}
+      <button key="filterOption" type="button" onClick={() => setSelectInput('nAme')}>
         filter tasks by name
       </button>
     </div>
   );
-};
+}
 
 export default Select;

services/app/apps/codebattle/assets/js/__mocks__/react-select/async.jsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
 
-const AsyncSelect = ({ loadOptions, onChange }) => {
+function AsyncSelect({ loadOptions, onChange }) {
   const [entities, setEntities] = useState([]);
 
   useEffect(() => {
-    const callback = options => {
-      setEntities(options.map(option => option.value));
+    const callback = (options) => {
+      setEntities(options.map((option) => option.value));
     };
 
     loadOptions('test', callback);
@@ -14,17 +14,13 @@ const AsyncSelect = ({ loadOptions, onChange }) => {
 
   return (
     <div>
-      {entities.map(entity => (
-        <button
-          type="button"
-          onClick={() => onChange({ value: entity })}
-          key={entity.name}
-        >
+      {entities.map((entity) => (
+        <button key={entity.name} type="button" onClick={() => onChange({ value: entity })}>
           {entity.name}
         </button>
       ))}
     </div>
   );
-};
+}
 
 export default AsyncSelect;

services/app/apps/codebattle/assets/js/__tests__/ContributorsList.test.jsx

@@ -9,16 +9,20 @@ import { Provider } from 'react-redux';
 import ContributorsList from '../widgets/pages/game/ContributorsList';
 import reducers from '../widgets/slices';
 
-jest.mock('gon', () => {
-  const gonParams = { local: 'en' };
-  return { getAsset: type => gonParams[type] };
-}, { virtual: true });
+jest.mock(
+  'gon',
+  () => {
+    const gonParams = { local: 'en' };
+    return { getAsset: (type) => gonParams[type] };
+  },
+  { virtual: true },
+);
 
 jest.mock('axios');
 const users = [];
 axios.get.mockResolvedValue({ data: users });
 
-test('test rendering ContributorsList', async () => {
+test('rendering of ContributorsList', async () => {
   const reducer = combineReducers(reducers);
 
   const preloadedState = {
@@ -28,6 +32,10 @@ test('test rendering ContributorsList', async () => {
     reducer,
     preloadedState,
   });
-  const { findByText } = render(<Provider store={store}><ContributorsList /></Provider>);
-    expect(await findByText(/This users have contributed to this task:/)).toBeInTheDocument();
+  const { findByText } = render(
+    <Provider store={store}>
+      <ContributorsList />
+    </Provider>,
+  );
+  expect(await findByText(/This users have contributed to this task:/)).toBeInTheDocument();
 });