react update (#226)

* chore: updated react, ts and types

* fix: updated React imports using codemod

.eslintrc

@@ -89,6 +89,7 @@
     "no-unused-vars": "off",
     "no-shadow": "off",
     "react/jsx-one-expression-per-line": "off",
+    "react/react-in-jsx-scope": "off",
     "react/jsx-fragments": "off",
     "react/require-default-props": "off",
     "semi": "off"

package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",
-    "build": "DISABLE_NEW_JSX_TRANSFORM=true GENERATE_SOURCEMAP=false react-scripts build && gzipper --verbose ./build",
+    "start": "react-scripts start",
+    "build": "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,9 +17,9 @@
     "history": "^4.10.1",
     "hls.js": "^0.14.15",
     "lodash": "^4.17.15",
-    "react": "^16.13.1",
+    "react": "^17.0.1",
     "react-datepicker": "^3.1.3",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.1",
@@ -44,12 +44,12 @@
     "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.154",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
+    "@types/react": "^17.0.0",
     "@types/react-datepicker": "^3.0.2",
-    "@types/react-dom": "^16.9.0",
+    "@types/react-dom": "^17.0.0",
     "@types/react-responsive": "^8.0.2",
-    "@types/react-router": "^5.1.7",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/react-router": "^5.1.8",
+    "@types/react-router-dom": "^5.1.6",
     "@types/styled-components": "^5.1.0",
     "commitizen": "^4.1.2",
     "eslint": "^7.14.0",
@@ -67,7 +67,7 @@
     "lint-staged": "^10.2.7",
     "storybook-addon-styled-component-theme": "^1.3.0",
     "ts-loader": "^7.0.5",
-    "typescript": "^4.0.5"
+    "typescript": "^4.1.2"
   },
   "config": {
     "commitizen": {

src/features/App/AuthenticatedApp.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Route,
   Redirect,

src/features/App/UnauthenticatedApp.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Route,
   Redirect,

src/features/App/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Router } from 'react-router-dom'
 
 import { history } from 'config'

src/features/AuthStore/index.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import React, {
+import {
   createContext,
   useContext,
   useState,

src/features/Background/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 
 import { GradientBackground, ImageBackground } from './styled'
 

src/features/Combobox/components/Arrow/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import styled from 'styled-components/macro'
 
 type Props = {

src/features/Combobox/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useRouteMatch } from 'react-router-dom'
 
 import isEmpty from 'lodash/isEmpty'

src/features/Common/Arrows/stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ArrowLeft, ArrowRight } from 'features/Common'
 
 const Story = {

src/features/Common/Button/stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { action } from '@storybook/addon-actions'
 
 import { ButtonOutline, ButtonSolid } from 'features/Common'

src/features/Common/Checkbox/index.tsx

@@ -1,4 +1,4 @@
-import React, { InputHTMLAttributes } from 'react'
+import { InputHTMLAttributes } from 'react'
 
 import {
   Wrapper,

src/features/Common/Checkbox/stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Checkbox } from 'features/Common'
 
 const Story = {

src/features/Common/Image/index.tsx

@@ -1,5 +1,5 @@
 import type { BaseSyntheticEvent } from 'react'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 
 import styled from 'styled-components/macro'
 

src/features/Common/Input/index.tsx

@@ -1,5 +1,4 @@
 import type { ChangeEvent, FocusEvent } from 'react'
-import React from 'react'
 import { useRouteMatch } from 'react-router-dom'
 
 import { T9n } from 'features/T9n'

src/features/Common/Input/stories.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 
 import { Input } from 'features/Common'
 

src/features/Common/Radio/index.tsx

@@ -1,4 +1,4 @@
-import React, { InputHTMLAttributes } from 'react'
+import { InputHTMLAttributes } from 'react'
 import { useRouteMatch } from 'react-router-dom'
 
 import { PAGES } from 'config'

src/features/Common/Radio/stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Radio } from 'features/Common'
 
 const Story = {

src/features/Common/SportName/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { SportTypes } from 'config'
 
 import { getSportColor, getSportLexic } from 'helpers'

src/features/Common/StarIcon/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 type StarProps = {
   fill: string,
 }

src/features/ExtendedSearchPage/components/DesktopHeader/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Menu } from 'features/Menu'
 import { LanguageSelect } from 'features/LanguageSelect'
 import {

src/features/ExtendedSearchPage/components/Filters/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 
 import { SportTypeFilter } from '../SportTypeFilter'
 import { SearchInput } from '../SearchInput'

src/features/ExtendedSearchPage/components/GenderFilter/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Gender } from 'requests'
 
 import { T9n } from 'features/T9n'

src/features/ExtendedSearchPage/components/MobileHeader/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 import { Link } from 'react-router-dom'
 
 import { PAGES } from 'config'

src/features/ExtendedSearchPage/components/ProfileFilter/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ProfileTypes } from 'config'
 
 import { T9n } from 'features/T9n'

src/features/ExtendedSearchPage/components/Results/index.tsx

@@ -1,7 +1,4 @@
-import React, {
-  Fragment,
-  memo,
-} from 'react'
+import { Fragment, memo } from 'react'
 
 import { isEmpty } from 'lodash'
 

src/features/ExtendedSearchPage/components/SearchInput/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 
 import styled from 'styled-components/macro'
 

src/features/ExtendedSearchPage/components/SportTypeFilter/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { SportTypeFilter as Filter } from 'features/SportTypeFilter'
 
 import { useExtendedSearchStore } from '../../store'

src/features/ExtendedSearchPage/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { MediaQuery } from 'features/MediaQuery'
 import { UserFavorites } from 'features/UserFavorites'
 import { MainWrapper } from 'features/MainWrapper'

src/features/ExtendedSearchPage/store/index.tsx

@@ -1,8 +1,5 @@
 import type { ReactNode } from 'react'
-import React, {
-  createContext,
-  useContext,
-} from 'react'
+import { createContext, useContext } from 'react'
 
 import { useExtendedSearch } from './hooks'
 

src/features/FormStore/index.tsx

@@ -1,8 +1,5 @@
 import type { ReactNode } from 'react'
-import React, {
-  createContext,
-  useContext,
-} from 'react'
+import { createContext, useContext } from 'react'
 
 import { useFormState } from './hooks/useFormState'
 

src/features/Gender/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import styled from 'styled-components/macro'
 
 import { Gender } from 'requests'

src/features/GlobalStores/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 
 import { AuthStore } from 'features/AuthStore'
 import { LexicsStore } from 'features/LexicsStore'

src/features/HeaderFilters/components/DateFilter/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { OutsideClick } from 'features/OutsideClick'
 
 import { useDateFilter } from './hooks'

src/features/HeaderFilters/components/DatePicker/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import type { ReactDatePickerProps } from 'react-datepicker'
 import DatePickerComponent from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'

src/features/HeaderFilters/components/MatchStatusFilter/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { T9n } from 'features/T9n'
 import {
   RadioButtonGroup,

src/features/HeaderFilters/components/SportTypeFilter/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { css } from 'styled-components/macro'
 
 import { devices } from 'config'

src/features/HeaderFilters/components/TournamentFilter/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { T9n } from 'features/T9n'
 import { Name } from 'features/Name'
 import { OutsideClick } from 'features/OutsideClick'

src/features/HeaderFilters/components/TournamentList/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import map from 'lodash/map'
 
 import type { Tournaments } from 'requests'

src/features/HeaderFilters/store/index.tsx

@@ -1,8 +1,5 @@
 import type { ReactNode } from 'react'
-import React, {
-  useContext,
-  createContext,
-} from 'react'
+import { useContext, createContext } from 'react'
 
 import { useFilters } from './hooks'
 

src/features/HeaderMobile/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Link, useRouteMatch } from 'react-router-dom'
 
 import { PAGES } from 'config'

src/features/HomePage/components/Header/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Menu } from 'features/Menu'
 import { LanguageSelect } from 'features/LanguageSelect'
 import { ScoreSwitch, AvailableMatchesSwitch } from 'features/MatchSwitches'

src/features/HomePage/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { MediaQuery } from 'features/MediaQuery'
 import { HeaderMobile } from 'features/HeaderMobile'
 import { Matches } from 'features/Matches'

src/features/InfiniteScroll/index.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react'
-import React from 'react'
 
 import { useIntersectionObserver } from './hooks'
 import { Root, Target } from './styled'

src/features/ItemsList/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import map from 'lodash/map'
 
 import { SportTypes, ProfileTypes } from 'config'

src/features/LanguageSelect/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import map from 'lodash/map'
 
 import { useLexicsStore } from 'features/LexicsStore'

src/features/LexicsStore/index.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import React, {
+import {
   createContext,
   useContext,
   useEffect,

src/features/Loader/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { LoaderProps } from './types'
 import { Wrapper, Circles } from './styled'
 

src/features/Login/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { PAGES } from 'config'
 import { formIds } from 'config/form'
 

src/features/MatchCard/CardFinished/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import type { Match } from 'features/Matches'
 
 import { useCard } from '../hooks'

src/features/MatchCard/CardFinishedHover/index.tsx

@@ -1,5 +1,4 @@
 import type { MouseEvent } from 'react'
-import React from 'react'
 
 import { Link } from 'react-router-dom'
 

src/features/MatchCard/CardLive/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import type { Match } from 'features/Matches'
 
 import { useCard } from '../hooks'

src/features/MatchCard/CardLiveHover/index.tsx

@@ -1,5 +1,4 @@
 import type { MouseEvent } from 'react'
-import React from 'react'
 
 import { Link } from 'react-router-dom'
 

src/features/MatchCard/CardSoon/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import styled from 'styled-components/macro'
 
 import { ProfileTypes } from 'config'

src/features/MatchCard/MatchInfoCard/index.tsx

@@ -1,5 +1,4 @@
 import type { KeyboardEvent } from 'react'
-import React from 'react'
 
 import { ProfileTypes } from 'config'
 

src/features/MatchCard/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useRouteMatch } from 'react-router'
 
 import { PAGES } from 'config'

src/features/MatchPage/MatchProfileCard/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import format from 'date-fns/format'
 
 import type { MatchInfo } from 'requests'

src/features/MatchPage/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import isEmpty from 'lodash/isEmpty'
 
 import { StreamPlayer } from 'features/StreamPlayer'

src/features/MatchSwitches/components/AvailableMatchesSwitch/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import styled from 'styled-components/macro'
 
 import { Tooltip, TooltipWrapper } from 'features/Tooltip'

src/features/MatchSwitches/components/ScoreSwitch/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import styled from 'styled-components/macro'
 
 import { useMatchSwitchesStore } from 'features/MatchSwitches'

src/features/MatchSwitches/store.tsx

@@ -1,8 +1,5 @@
 import type { ReactNode } from 'react'
-import React, {
-  createContext,
-  useContext,
-} from 'react'
+import { createContext, useContext } from 'react'
 
 import { useMatchSwitches } from './hooks'
 

src/features/Matches/components/MatchesList/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 
 import isEmpty from 'lodash/isEmpty'
 

src/features/Matches/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 
 import { InfiniteScroll } from 'features/InfiniteScroll'
 import { Loading } from 'features/HomePage/styled'

src/features/MatchesGrid/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import map from 'lodash/map'
 
 import type { Match } from 'features/Matches'

src/features/MatchesSlider/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import map from 'lodash/map'
 import isEmpty from 'lodash/isEmpty'
 

src/features/Menu/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Link, useRouteMatch } from 'react-router-dom'
 
 import { PAGES } from 'config'

src/features/Modal/index.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 import ReactDOM from 'react-dom'
 
 import { OutsideClick } from 'features/OutsideClick'

src/features/MultiSourcePlayer/components/Chapters/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import map from 'lodash/map'
 
 import {

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

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { secondsToHms } from 'helpers'
 
 import { useSlider } from 'features/StreamPlayer/hooks/useSlider'

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

@@ -1,5 +1,4 @@
 import type { ReactElement } from 'react'
-import React from 'react'
 
 import styled from 'styled-components/macro'
 

src/features/MultiSourcePlayer/components/Settings/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 
 import map from 'lodash/map'
 

src/features/MultiSourcePlayer/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { VolumeBar } from 'features/StreamPlayer/components/VolumeBar'
 import {
   PlayerWrapper,

src/features/Name/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import styled from 'styled-components/macro'
 
 import { useLexicsStore } from 'features/LexicsStore'

src/features/OutsideClick/index.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react'
-import React from 'react'
 
 import styled from 'styled-components'
 

src/features/PlayerPage/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ProfileTypes } from 'config'
 
 import { ProfileHeader } from 'features/ProfileHeader'

src/features/ProfileCard/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import map from 'lodash/map'
 
 import { T9n } from 'features/T9n'

src/features/ProfileHeader/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 import { useRouteMatch } from 'react-router-dom'
 
 import { PAGES } from 'config'

src/features/ProfileLink/index.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode, MouseEvent } from 'react'
-import React from 'react'
 import { Link } from 'react-router-dom'
 
 import { ProfileTypes, SportTypes } from 'config'

src/features/ProfileLogo/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ProfileTypes, SportTypes } from 'config'
 import { getProfileFallbackLogo, getProfileLogo } from 'helpers'
 

src/features/Register/components/AdditionalSubscription/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Checkbox } from 'features/Common'
 
 import { Price } from '../Price'

src/features/Register/components/CardStep/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { T9n } from 'features/T9n'
 import { Input, ButtonSolid } from 'features/Common'
 import {

src/features/Register/components/MainSubscription/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Radio } from 'features/Common'
 
 import { Price } from '../Price'

src/features/Register/components/Price/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useLexicsStore } from 'features/LexicsStore'
 
 import {

src/features/Register/components/RegistrationStep/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { formIds } from 'config/form'
 
 import { T9n } from 'features/T9n'

src/features/Register/components/RegistrationSuccessful/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { PAGES } from 'config'
 
 import { T9n } from 'features/T9n'

src/features/Register/components/SubscriptionsStep/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 import { useRouteMatch } from 'react-router-dom'
 
 import { PAGES } from 'config'

src/features/Register/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Route } from 'react-router'
 import { useRouteMatch } from 'react-router-dom'
 

src/features/Search/components/Header/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import {
   Wrapper,
   Icon,

src/features/Search/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 import { useRouteMatch } from 'react-router-dom'
 import isEmpty from 'lodash/isEmpty'
 

src/features/SportTypeFilter/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import map from 'lodash/map'
 
 import { T9n } from 'features/T9n'

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

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { secondsToHms } from 'helpers'
 
 import { useSlider } from 'features/StreamPlayer/hooks/useSlider'

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

@@ -1,5 +1,4 @@
 import type { ReactElement } from 'react'
-import React from 'react'
 
 import styled from 'styled-components/macro'
 

src/features/StreamPlayer/components/TimeTooltip/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Wrapper, Time } from './styled'
 
 type Props = {

src/features/StreamPlayer/components/VolumeBar/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useSlider } from 'features/StreamPlayer/hooks/useSlider'
 
 import {

src/features/StreamPlayer/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Settings } from 'features/MultiSourcePlayer/components/Settings'
 
 import type { Props } from './hooks'

src/features/T9n/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components/macro'
 
 import { useLexicsStore } from 'features/LexicsStore'

src/features/TeamPage/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ProfileTypes } from 'config'
 
 import { ProfileHeader } from 'features/ProfileHeader'

src/features/Theme/index.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   useState,
   ReactNode,
   useCallback,

src/features/Tooltip/index.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 
 import styled from 'styled-components/macro'
 

src/features/TournamentPage/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ProfileTypes } from 'config'
 
 import { ProfileHeader } from 'features/ProfileHeader'