React scripts update (#223)

* chore: updated react-scripts and fixed eslint warnings

* chore: file loader problem

* chore: added eslint cache to gitignore

.eslintrc

@@ -26,6 +26,7 @@
         "requireLast": false
       }
     }],
+    "@typescript-eslint/no-shadow": "warn",
     "@typescript-eslint/semi": ["error", "never"],
     "import/extensions": [
       "warn",
@@ -86,8 +87,10 @@
     "no-plusplus": "off",
     "no-underscore-dangle": "off",
     "no-unused-vars": "off",
+    "no-shadow": "off",
     "react/jsx-one-expression-per-line": "off",
     "react/jsx-fragments": "off",
+    "react/require-default-props": "off",
     "semi": "off"
   }
 }

.gitignore

@@ -26,3 +26,4 @@ yarn.lock
 package-lock.json
 # IntelliJ IDEA products
 .idea
+.eslintcache

package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "react-scripts start",
-    "build": "GENERATE_SOURCEMAP=false react-scripts build && gzipper --verbose ./build",
+    "start": "DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",
+    "build": "DISABLE_NEW_JSX_TRANSFORM=true GENERATE_SOURCEMAP=false react-scripts build && gzipper --verbose ./build",
     "test": "react-scripts test --testMatch '**/__tests__/*' --passWithNoTests --watchAll=false",
     "test:watch": "react-scripts test --testMatch '**/__tests__/*'",
     "eject": "react-scripts eject",
@@ -17,14 +17,13 @@
     "history": "^4.10.1",
     "hls.js": "^0.14.15",
     "lodash": "^4.17.15",
-    "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-datepicker": "^3.1.3",
     "react-dom": "^16.13.1",
     "react-responsive": "^8.1.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
+    "react-scripts": "^4.0.1",
     "screenfull": "^5.0.2",
     "styled-components": "^5.1.1"
   },
@@ -43,7 +42,7 @@
     "@testing-library/user-event": "^7.1.2",
     "@types/history": "^4.7.6",
     "@types/hls.js": "^0.13.2",
-    "@types/jest": "^24.0.0",
+    "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.154",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
@@ -54,22 +53,22 @@
     "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.0",
     "commitizen": "^4.1.2",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "18.1.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint": "^7.14.0",
+    "eslint-config-airbnb": "18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-postro4no": "^0.0.7",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "2.5.0",
-    "eslint-plugin-sort-destructure-keys": "^1.3.4",
-    "eslint-plugin-typescript-sort-keys": "^1.2.0",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-sort-destructure-keys": "^1.3.5",
+    "eslint-plugin-typescript-sort-keys": "^1.5.0",
     "fork-ts-checker-webpack-plugin": "^4.1.6",
     "gzipper": "^3.7.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.7",
     "storybook-addon-styled-component-theme": "^1.3.0",
     "ts-loader": "^7.0.5",
-    "typescript": "^4.0.2"
+    "typescript": "^4.0.5"
   },
   "config": {
     "commitizen": {

src/features/Common/Arrows/stories.tsx

@@ -2,11 +2,13 @@ import React from 'react'
 
 import { ArrowLeft, ArrowRight } from 'features/Common'
 
-export default {
+const Story = {
   component: ArrowLeft,
   title: 'Arrows',
 }
 
+export default Story
+
 const backgroundStyles = {
   backgroundColor: '#333',
   height: '200px',

src/features/Common/Button/stories.tsx

@@ -4,10 +4,12 @@ import { action } from '@storybook/addon-actions'
 
 import { ButtonOutline, ButtonSolid } from 'features/Common'
 
-export default {
+const Story = {
   title: 'Button',
 }
 
+export default Story
+
 export const Solid = () => (
   <ButtonSolid onClick={action('clicked')}>
     Solid

src/features/Common/Checkbox/stories.tsx

@@ -2,11 +2,13 @@ import React from 'react'
 
 import { Checkbox } from 'features/Common'
 
-export default {
+const Story = {
   component: Checkbox,
   title: 'Checkbox',
 }
 
+export default Story
+
 const backgroundStyles = {
   backgroundColor: '#333',
   height: '200px',

src/features/Common/Input/stories.tsx

@@ -2,11 +2,13 @@ import React, { Fragment } from 'react'
 
 import { Input } from 'features/Common'
 
-export default {
+const Story = {
   component: Input,
   title: 'Input',
 }
 
+export default Story
+
 export const Empty = () => (
   <Input
     type='email'

src/features/Common/Radio/stories.tsx

@@ -2,11 +2,13 @@ import React from 'react'
 
 import { Radio } from 'features/Common'
 
-export default {
+const Story = {
   component: Radio,
   title: 'Radio',
 }
 
+export default Story
+
 const backgroundStyles = {
   backgroundColor: '#333',
   height: '200px',

src/features/FormStore/index.tsx

@@ -6,12 +6,12 @@ import React, {
 
 import { useFormState } from './hooks/useFormState'
 
-type FormStore = ReturnType<typeof useFormState>
+type Context = ReturnType<typeof useFormState>
 type Props = {
   children: ReactNode,
 }
 
-const FormContext = createContext({} as FormStore)
+const FormContext = createContext({} as Context)
 
 /**
  * стор формы, содержит состояние формы[значение полей, ошибки]

src/features/HeaderFilters/store/index.tsx

@@ -8,9 +8,9 @@ import { useFilters } from './hooks'
 
 export * from './hooks'
 
-type HeaderFiltersStore = ReturnType<typeof useFilters>
+type Context = ReturnType<typeof useFilters>
 
-const FiltersContext = createContext({} as HeaderFiltersStore)
+const FiltersContext = createContext({} as Context)
 
 type Props = { children: ReactNode }
 

src/features/ItemsList/index.tsx

@@ -6,6 +6,7 @@ import { SportTypes, ProfileTypes } from 'config'
 
 import { Gender } from 'requests'
 
+import type { ObjectWithName } from 'features/Name'
 import { SportName } from 'features/Common'
 
 import { useItemsList } from './hooks'
@@ -21,11 +22,6 @@ import {
   GenderComponent,
 } from './styled'
 
-type Name = {
-  name_eng: string,
-  name_rus: string,
-}
-
 type SearchItemsListProps = {
   className?: string,
   close?: () => void,
@@ -35,7 +31,7 @@ type SearchItemsListProps = {
     name_eng: string,
     name_rus: string,
     sport: SportTypes,
-    teamOrCountry?: Name,
+    teamOrCountry?: ObjectWithName,
   }>,
   profileType: ProfileTypes,
 }

src/features/LanguageSelect/flags.scss

@@ -1,30 +0,0 @@
-@mixin flag-position($col, $row, $offsetX, $offsetY) {
-  background-position: $col*(-1)*$offsetX $row*(-1)*$offsetY;
-}
-
-@mixin flags-list($width, $height, $bgSize) {
-  background-size: $bgSize;
-  height: $height;
-  width: $width;
-
-  &.flag-icon-ru { @include flag-position(8, 9, $width, $height); } /* Russia */
-  &.flag-icon-gb { @include flag-position(4, 12, $width, $height); } /* United Kingdom */
-}
-
-/*
- * PNG images
- */
-.flag-icon {
-  background-image: url('/images/flags-sprite.png');
-  background-position: 1000px 1000px;
-  background-repeat: no-repeat;
-  display: inline-block;
-  position: relative;
-
-  &.flag-icon-24x16 {
-    @include flags-list(24px, 16px, 360px);
-  }
-  &.flag-icon-15x10 {
-    @include flags-list(15px, 10px, 225px);
-  }
-}

src/features/LanguageSelect/index.tsx

@@ -15,7 +15,6 @@ import {
   LangsItem,
   FlagIcon,
 } from './styled'
-import './flags.scss'
 
 export const LanguageSelect = () => {
   const { changeLang, translate } = useLexicsStore()
@@ -55,13 +54,7 @@ export const LanguageSelect = () => {
                     title={title}
                     onClick={handleLangChange(locale)}
                   >
-                    <FlagIcon
-                      className={`
-                        flag-icon
-                        flag-icon-24x16
-                        flag-icon-${className}
-                      `}
-                    />
+                    <FlagIcon flag={className} />
                   </LangsItem>
                 ),
               )

src/features/LanguageSelect/styled.tsx

@@ -71,9 +71,46 @@ export const LangsItem = styled.li`
   }
 `
 
-export const FlagIcon = styled.span`
+type Position = {
+  col: number,
+  row: number,
+}
+
+const flagPositions: Record<string, Position> = {
+  gb: {
+    col: 4,
+    row: 12,
+  },
+  ru: {
+    col: 8,
+    row: 9,
+  },
+}
+
+const getFlagPosition = (flag: string) => {
+  const { col, row } = flagPositions[flag]
+  return `${col * -24}px ${row * -16}px`
+}
+
+type FlagIconProps = {
+  flag: string,
+}
+
+export const FlagIcon = styled.span<FlagIconProps>`
   display: inline-block;
   width: 28px;
   height: 16px;
   transition: .3s;
+
+  background-image: url('/images/flags-sprite.png');
+  background-position: 1000px 1000px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  position: relative;
+
+  background-size: 360px;
+  height: 16px;
+  width: 24px;
+
+  background-position: ${({ flag }) => getFlagPosition(flag)};
 `

src/features/LexicsStore/index.tsx

@@ -8,10 +8,10 @@ import React, {
 import { LexicsConfig } from './types'
 import { useLexics } from './hooks'
 
-type LexicsStore = ReturnType<typeof useLexics>
+type Context = ReturnType<typeof useLexics>
 type Props = { children: ReactNode }
 
-const LexicsContext = createContext({} as LexicsStore)
+const LexicsContext = createContext({} as Context)
 
 export const LexicsStore = ({ children }: Props) => {
   const lexics = useLexics()

src/features/MatchesSlider/hooks.tsx

@@ -2,6 +2,7 @@ import type { SyntheticEvent } from 'react'
 import {
   useEffect,
   useRef,
+  useMemo,
   useState,
   useCallback,
 } from 'react'
@@ -43,11 +44,11 @@ export const useMatchesSlider = (matches: Array<Match>) => {
     setShowRigthArrow((targetScrollWidth - (targetScrollLeft + targetClientWidth)) > 1)
   }, [])
 
-  const slideLeft = useCallback(throttle(() => {
+  const slideLeft = useMemo(() => throttle(() => {
     slidesRef.current!.scrollBy(-((MATCH_CARD_WIDTH + MATCH_CARD_GAP) * MATCHES_TO_SCROLL), 0)
   }, SCROLLING_DELAY), [])
 
-  const slideRight = useCallback(throttle(() => {
+  const slideRight = useMemo(() => throttle(() => {
     slidesRef.current!.scrollBy((MATCH_CARD_WIDTH + MATCH_CARD_GAP) * MATCHES_TO_SCROLL, 0)
   }, SCROLLING_DELAY), [])
 

src/features/MultiSourcePlayer/components/ProgressBar/stories.tsx

@@ -12,11 +12,13 @@ import {
 
 import { ProgressBar } from '.'
 
-export default {
+const Story = {
   component: ProgressBar,
   title: 'ProgressBarWithChapters',
 }
 
+export default Story
+
 const Wrapper = styled.div`
   position: relative;
   width: 95vw;

src/features/StreamPlayer/components/ProgressBar/stories.tsx

@@ -12,11 +12,13 @@ import {
 
 import { ProgressBar } from '.'
 
-export default {
+const Story = {
   component: ProgressBar,
   title: 'ProgressBar',
 }
 
+export default Story
+
 const Wrapper = styled.div`
   position: relative;
   width: 95vw;

src/features/StreamPlayer/hooks/index.tsx

@@ -1,5 +1,9 @@
 import type { MouseEvent } from 'react'
-import { useCallback, useState } from 'react'
+import {
+  useCallback,
+  useState,
+  useMemo,
+} from 'react'
 
 import once from 'lodash/once'
 
@@ -32,12 +36,12 @@ export const useVideoPlayer = ({
   const [loadedProgress, setLoadedProgress] = useState(0)
   const [playedProgress, setPlayedProgress] = useState(toMilliSeconds(resumeFrom))
 
-  const startPlaying = useCallback(once(() => {
+  const startPlaying = useMemo(() => once(() => {
     setReady(true)
 
     setPlaying(true)
     onPlayingChange(true)
-  }), [])
+  }), [onPlayingChange])
 
   const togglePlaying = () => {
     if (ready) {

src/features/UserAccount/components/SubscriptionsForm/index.tsx

@@ -45,7 +45,6 @@ export const SubscriptionsForm = ({
       {isNumber(selectedSubscription) && (
         <UserAccountSubscription
           amount={1999}
-          inputType='radio'
           packageName={selectedSubscriptionLexic}
         />
       )}

src/features/UserAccount/components/UserAccountSubscription/index.tsx

@@ -16,9 +16,7 @@ import { PriceWrapper } from '../CardNumber/styled'
 
 type Props = {
   amount: number,
-  checked?: boolean,
   deleteSubscription?: () => void,
-  inputType?: string,
   label?: ObjectWithName,
   noMarginBottom?: boolean,
   noMarginTop?: boolean,

src/features/UserAccount/components/UserAccountSubscriptionMatch/index.tsx

@@ -22,7 +22,6 @@ import { PriceWrapper } from '../CardNumber/styled'
 type Props = {
   amount: number,
   deleteSubscription?: () => void,
-  inputType?: string,
   matchData: Match,
   noMarginBottom?: boolean,
   noMarginTop?: boolean,

src/features/UserAccount/hooks/useCities.tsx

@@ -1,4 +1,5 @@
 import {
+  useMemo,
   useState,
   useCallback,
 } from 'react'
@@ -19,9 +20,9 @@ const useCitiesList = () => {
     getCountryCities(city, selectedCountryId).then(setCities)
   }, [])
 
-  const getCitiesDebounced = useCallback(
-    debounce(getCities, 500),
-    [],
+  const getCitiesDebounced = useMemo(
+    () => debounce(getCities, 500),
+    [getCities],
   )
 
   const resetCities = useCallback(() => setCities([]), [])
@@ -37,7 +38,10 @@ export const useCities = () => {
   const { updateFormValue } = useForm()
   const [selectedCity, setSelectedCity] = useState<City | null>(null)
 
-  const setCityQuery = useCallback(updateFormValue(formIds.city), [])
+  const setCityQuery = useMemo(
+    () => updateFormValue(formIds.city),
+    [updateFormValue],
+  )
 
   const {
     cities,

src/features/UserFavorites/store/index.tsx

@@ -8,9 +8,9 @@ import { useUserFavorites } from '../hooks'
 
 export * from '../hooks'
 
-type UserFavoritesStore = ReturnType<typeof useUserFavorites>
+type Context = ReturnType<typeof useUserFavorites>
 
-const UserFavoritesContext = createContext({} as UserFavoritesStore)
+const UserFavoritesContext = createContext({} as Context)
 
 type Props = { children: ReactNode }
 

tsconfig.json

@@ -19,7 +19,8 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react",
-    "noUnusedLocals": true
+    "noUnusedLocals": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"