chore(update): update deps

3 years ago · e357fa8d6c
parent d5e2964e19
commit e357fa8d6c
28 changed files with 28245 additions and 22554 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -80,8 +80,16 @@
    ],
    "typescript-sort-keys/interface": 1,
    "typescript-sort-keys/string-enum": 1,
-
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      },
+    ],
+    "react/jsx-no-useless-fragment": [2, { "allowExpressions": true }],
    "camelcase": "off",
+    "default-param-last": 0,
    "import/no-unresolved": "off",
    "import/prefer-default-export": "off",
    "indent": "off",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -27,6 +27,7 @@
    "@stripe/stripe-js": "^1.13.2",
    "babel-polyfill": "^6.26.0",
    "date-fns": "^2.14.0",
+    "eslint-plugin-typescript-sort-keys": "^2.3.0",
    "history": "^4.10.1",
    "hls.js": "^1.1.1",
    "lodash": "^4.17.15",
@ -53,10 +54,10 @@
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-docs": "^6.3.12",
    "@storybook/addon-links": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
+    "@storybook/addons": "^7.0.2",
    "@storybook/preset-create-react-app": "^3.0.0",
    "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^6.3.12",
+    "@storybook/react": "^7.0.2",
    "@testing-library/jest-dom": "^5.15.0",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^7.1.2",
@ -73,8 +74,8 @@
    "@types/react-window": "^1.8.5",
    "@types/styled-components": "^5.1.15",
    "commitizen": "^4.2.4",
-    "eslint": "^7.0.1",
-    "eslint-config-airbnb": "18.2.1",
+    "eslint": "^8.38.0",
+    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
@ -82,13 +83,12 @@
    "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": "^7.2.13",
    "gzipper": "^3.7.0",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.7",
    "miragejs": "^0.1.45",
-    "storybook-addon-styled-component-theme": "^1.3.0",
+    "storybook-addon-styled-component-theme": "^2.0.0",
    "stylelint": "^13.13.1",
    "stylelint-config-recommended": "^5.0.0",
    "stylelint-config-styled-components": "^0.1.1",
--- a/src/config/clients/facr.tsx
+++ b/src/config/clients/facr.tsx
@ -9,7 +9,7 @@ import {
 } from './types'

 const randomHash = () => (
-  (Math.random() ** Math.random()) * 9999999999999999
+  (Math.random() ** Math.random()) * 100000000000000
 )

 const params = {
--- a/src/config/clients/tunisia.tsx
+++ b/src/config/clients/tunisia.tsx
@ -7,7 +7,7 @@ import {
 } from './types'

 const randomHash = () => (
-  (Math.random() ** Math.random()) * 9999999999999999
+  (Math.random() ** Math.random()) * 100000000000000
 )

 export const tunisia: ClientConfig = {
--- a/src/features/AudioTracks/index.tsx
+++ b/src/features/AudioTracks/index.tsx
@ -89,13 +89,11 @@ export const AudioTracks = ({
  return (
    <Fragment>
      {audioTracks?.length > 1 && (
-        <Fragment>
-          <SelectedAudioTrack onClick={open}>
-            {!selectedAudioTrack && audioTracks[0].name}
-            {selectedAudioTrack?.name}
-            <IconArrow active={isOpen} />
-          </SelectedAudioTrack>
-        </Fragment>
+        <SelectedAudioTrack onClick={open}>
+          {!selectedAudioTrack && audioTracks[0].name}
+          {selectedAudioTrack?.name}
+          <IconArrow active={isOpen} />
+        </SelectedAudioTrack>
      )}
      {content}
    </Fragment>
--- a/src/features/AuthServiceApp/hooks/useParamsUrl.tsx
+++ b/src/features/AuthServiceApp/hooks/useParamsUrl.tsx
@ -22,12 +22,14 @@ export const useParamsUrl = () => {
  const urlSearchParams = useMemo(() => new URLSearchParams(location.search), [location.search])

  // safari начал поддержку Object.fromEntries с версии 12.1
-  const params = useMemo(() => (
-    Array.from(urlSearchParams.entries()).reduce((acc, [key, value]) => ({
-      ...acc,
-      [key]: value,
-    }), {})),
-  [urlSearchParams])
+  const params = useMemo(
+    () => (
+      Array.from(urlSearchParams.entries()).reduce((acc, [key, value]) => ({
+        ...acc,
+        [key]: value,
+      }), {})),
+    [urlSearchParams],
+  )

  return {
    client_id,
--- a/src/features/BuyMatchPopup/components/SelectSubscription/index.tsx
+++ b/src/features/BuyMatchPopup/components/SelectSubscription/index.tsx
@ -45,12 +45,12 @@ export const SelectSubscriptionStep = () => {
    selectedSubscription,
  } = useBuyMatchPopupStore()

-  const getPackagesCurrency = useCallback(
-    (packages: Record<SubscriptionType, Array<MatchPackage>>) => {
-      const packageWithValue = Object.entries(packages).find(([key, value]) => value.length)?.[1][0]
-      return packageWithValue ? packageWithValue.currency : 'RUB'
-    }, [],
-  )
+  const getPackagesCurrency = useCallback((
+    packages: Record<SubscriptionType, Array<MatchPackage>>,
+  ) => {
+    const packageWithValue = Object.entries(packages).find(([key, value]) => value.length)?.[1][0]
+    return packageWithValue ? packageWithValue.currency : 'RUB'
+  }, [])

  if (!match || !matchSubscriptions) return null

--- a/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
+++ b/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
@ -83,9 +83,7 @@ export const useSubscriptions = () => {
    })
    setMatchSubscriptionsList(convertedSubscriptions)
    fetchLexics(subscriptions.data || [])
-    const firstPackage = find(
-      convertedSubscriptions, (subscription) => !isEmpty(subscription),
-    )
+    const firstPackage = find(convertedSubscriptions, (subscription) => !isEmpty(subscription))
    setSelectedPeriod(getInitialPeriod(firstPackage))
  }, [fetchLexics, suffix])

--- a/src/features/CompanyInfo/index.tsx
+++ b/src/features/CompanyInfo/index.tsx
@ -43,11 +43,9 @@ export const CompanyInfo = ({
        return ''
      case ClientNames.Lff:
        return (
-          <Fragment>
-            <CompanyInfoText>
-              <T9n t='19590' />
-            </CompanyInfoText>
-          </Fragment>
+          <CompanyInfoText>
+            <T9n t='19590' />
+          </CompanyInfoText>
        )
      case ClientNames.Insports:
        return (
--- a/src/features/HeaderMobile/styled.tsx
+++ b/src/features/HeaderMobile/styled.tsx
@ -12,7 +12,8 @@ import { customScrollbar } from 'features/Common'
 export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'

 export const defaultHeaderStyles = (
-  color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
+  color: string = DEFAULT_HEADER_COLOR,
+  headerImage: string | undefined | null,
 ) => {
  if (['lff', 'tunisia'].includes(client.name)) {
    return client.styles.homePageHeader
--- a/src/features/MatchPage/components/MatchDescription/index.tsx
+++ b/src/features/MatchPage/components/MatchDescription/index.tsx
@ -89,8 +89,10 @@ export const MatchDescription = () => {

  const isChangedTimeFormat = includes(['US', 'CA'], user?.profile.country_code)
  const localDate = format(parseDate(date), isMobileDevice ? 'MMM d, y' : 'MMMM d, y')
-  const changedTimeFormat = format(parseDate(date),
-    isChangedTimeFormat ? 'h:mm a' : 'HH:mm')
+  const changedTimeFormat = format(
+    parseDate(date),
+    isChangedTimeFormat ? 'h:mm a' : 'HH:mm',
+  )

  return (
    <Description isHidden={!profileCardShown}>
--- a/src/features/MatchPage/store/hooks/index.tsx
+++ b/src/features/MatchPage/store/hooks/index.tsx
@ -160,20 +160,23 @@ export const useMatchPage = () => {
    let getIntervalMatch: ReturnType<typeof setInterval>
    if (matchProfile?.live && !matchProfile.youtube_link) {
      getIntervalMatch = setInterval(
-        () => getMatchInfo(sportType, matchId).then(setMatchProfile), 1000 * 60 * 3,
+        () => getMatchInfo(sportType, matchId).then(setMatchProfile),
+        1000 * 60 * 3,
      )
    }
    return () => clearInterval(getIntervalMatch)
  }, [
    matchProfile,
    sportType,
-    matchId])
+    matchId,
+  ])

  useEffect(() => {
    if (user || !userInfo?.email) return

    const counter = setInterval(
-      () => getMatchViewDuration(Number(userInfo?.email)), 1000 * 30,
+      () => getMatchViewDuration(Number(userInfo?.email)),
+      1000 * 30,
    )
    // eslint-disable-next-line
    return () => clearInterval(counter)
--- a/src/features/MatchPage/store/hooks/useFitersPopup.tsx
+++ b/src/features/MatchPage/store/hooks/useFitersPopup.tsx
@ -46,10 +46,12 @@ export const useFiltersPopup = ({

  const isAllActionsChecked = every(uniqEvents, (el) => (includes(activeEvents, el)))
  const isFirstTeamPlayersChecked = every(
-    uniqPlayersTeam1, (el) => (includes(activeFirstTeamPlayers, el)),
+    uniqPlayersTeam1,
+    (el) => (includes(activeFirstTeamPlayers, el)),
  )
  const isSecondTeamPlayersChecked = every(
-    uniqPlayersTeam2, (el) => (includes(activeSecondTeamPlayers, el)),
+    uniqPlayersTeam2,
+    (el) => (includes(activeSecondTeamPlayers, el)),
  )

  const toggle = () => {
--- a/src/features/MatchPage/store/hooks/useStatsTab.tsx
+++ b/src/features/MatchPage/store/hooks/useStatsTab.tsx
@ -89,8 +89,8 @@ export const useStatsTab = ({
  })) as Array<EventPlaylistOption>

  const playNextEpisode = ({
-    order,
    episodesToPlay = stateEpisodesToPlay,
+    order,
  }: PlayNextEpisodeArgs = {}) => {
    const currentOrder = order === 0 ? order : plaingOrder
    const isLastEpisode = currentOrder === episodesToPlay.length
--- a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx
+++ b/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx
@ -46,13 +46,15 @@ const Item = styled.li`
 `

 export const MatchPlaylists = forwardRef(
-  ({
-    live,
-    onSelect,
-    playlists,
-    selectedMathPlaylist,
-  }: Props,
-  ref: ForwardedRef<HTMLUListElement>) => (
+  (
+    {
+      live,
+      onSelect,
+      playlists,
+      selectedMathPlaylist,
+    }: Props,
+    ref: ForwardedRef<HTMLUListElement>,
+  ) => (
    <List ref={ref}>
      {
        map(playlists, (playlist) => (
--- a/src/features/MatchSidePlaylists/components/PlayersTable/index.tsx
+++ b/src/features/MatchSidePlaylists/components/PlayersTable/index.tsx
@ -1,5 +1,3 @@
-import { Fragment } from 'react'
-
 import { useTour } from '@reactour/tour'

 import map from 'lodash/map'
@ -88,18 +86,16 @@ export const PlayersTable = (props: PlayersTableProps) => {
            onScroll={handleScroll}
          >
            {!isExpanded && paramsCount > DISPLAYED_PARAMS_COLUMNS && (
-              <Fragment>
-                <ArrowButtonRight
-                  aria-label='Scroll to right'
-                  onClick={slideRight}
-                  visible={showRightArrow}
-                >
-                  <Arrow direction='right' data-step={Steps.ShowMoreStats} />
-                  {Boolean(currentStep === Steps.ShowMoreStats && isOpen) && (
-                    <Spotlight />
-                  )}
-                </ArrowButtonRight>
-              </Fragment>
+              <ArrowButtonRight
+                aria-label='Scroll to right'
+                onClick={slideRight}
+                visible={showRightArrow}
+              >
+                <Arrow direction='right' data-step={Steps.ShowMoreStats} />
+                {Boolean(currentStep === Steps.ShowMoreStats && isOpen) && (
+                  <Spotlight />
+                )}
+              </ArrowButtonRight>
            )}
            <Table
              role='marquee'
--- a/src/features/ProfileHeader/index.tsx
+++ b/src/features/ProfileHeader/index.tsx
@ -1,4 +1,3 @@
-import { Fragment } from 'react'
 import type { ReactNode } from 'react'
 import { Link } from 'react-router-dom'

@ -56,34 +55,32 @@ export const ProfileHeader = ({
    && profileType === ProfileTypes.TOURNAMENTS ? `/images/${profileId}` : headerImage

  return (
-    <Fragment>
-      <HeaderStyled
-        headerImage={imageHeader}
-        color={headerColor || color}
-        height={height}
+    <HeaderStyled
+      headerImage={imageHeader}
+      color={headerColor || color}
+      height={height}
+    >
+      <Position
+        top={client.styles.logoTop}
+        left={client.styles.logoLeft}
      >
-        <Position
-          top={client.styles.logoTop}
-          left={client.styles.logoLeft}
-        >
-          <HeaderGroup>
-            <Link to={PAGES.home}>
-              <HeaderLogo />
-            </Link>
+        <HeaderGroup>
+          <Link to={PAGES.home}>
+            <HeaderLogo />
+          </Link>

-            {client.showSearch && <Search />}
-          </HeaderGroup>
-        </Position>
+          {client.showSearch && <Search />}
+        </HeaderGroup>
+      </Position>

-        {children}
+      {children}

-        <Position top={isMobileDevice ? client.styles.logoTop : undefined} right={0.71}>
-          <HeaderGroup>
-            {!isMobileDevice ? <ScoreSwitch /> : null}
-            <Menu />
-          </HeaderGroup>
-        </Position>
-      </HeaderStyled>
-    </Fragment>
+      <Position top={isMobileDevice ? client.styles.logoTop : undefined} right={0.71}>
+        <HeaderGroup>
+          {!isMobileDevice ? <ScoreSwitch /> : null}
+          <Menu />
+        </HeaderGroup>
+      </Position>
+    </HeaderStyled>
  )
 }
--- a/src/features/ProfileHeader/styled.tsx
+++ b/src/features/ProfileHeader/styled.tsx
@ -14,7 +14,8 @@ import { isMatchPage } from 'helpers/isMatchPage'
 export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'

 export const defaultHeaderStyles = (
-  color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
+  color: string = DEFAULT_HEADER_COLOR,
+  headerImage: string | undefined | null,
 ) => {
  if ([ClientNames.Lff, ClientNames.Tunisia, ClientNames.Facr].includes(client.name)
    && !isMatchPage()) {
--- a/src/features/SportsFilter/components/SelectSportPopup/index.tsx
+++ b/src/features/SportsFilter/components/SelectSportPopup/index.tsx
@ -33,33 +33,31 @@ export const SelectSportPopup = ({

  // TODO: переделать на вариант без указания all_sports
  return (
-    <>
-      <ScModal
-        isOpen={isOpen}
-        withCloseButton={isMobileDevice}
-        close={onModalClose}
-        closeSize={9}
-      >
-        <ScHeaderGroup>
-          <ScHeaderTitle>
-            <T9n t='choose_sport' />
-          </ScHeaderTitle>
-        </ScHeaderGroup>
-        <ScBody>
-          {sportNames?.map((sport: string) => (
-            <ScSport
-              key={sport}
-              onClick={() => onSportClick(sport)}
-              className={selectedSport.indexOf(sport) >= 0 ? 'active' : ''}
-              active={selectedSport.indexOf(sport) >= 0}
-            >
-              <ScSportName>
-                <T9n t={getSport({ sportName: sport })?.lexic ?? 'all_sports'} />
-              </ScSportName>
-            </ScSport>
-          ))}
-        </ScBody>
-      </ScModal>
-    </>
+    <ScModal
+      isOpen={isOpen}
+      withCloseButton={isMobileDevice}
+      close={onModalClose}
+      closeSize={9}
+    >
+      <ScHeaderGroup>
+        <ScHeaderTitle>
+          <T9n t='choose_sport' />
+        </ScHeaderTitle>
+      </ScHeaderGroup>
+      <ScBody>
+        {sportNames?.map((sport: string) => (
+          <ScSport
+            key={sport}
+            onClick={() => onSportClick(sport)}
+            className={selectedSport.indexOf(sport) >= 0 ? 'active' : ''}
+            active={selectedSport.indexOf(sport) >= 0}
+          >
+            <ScSportName>
+              <T9n t={getSport({ sportName: sport })?.lexic ?? 'all_sports'} />
+            </ScSportName>
+          </ScSport>
+        ))}
+      </ScBody>
+    </ScModal>
  )
 }
--- a/src/features/SportsFilter/components/SelectSportPopup/styled.tsx
+++ b/src/features/SportsFilter/components/SelectSportPopup/styled.tsx
@ -13,7 +13,8 @@ import { customScrollbar } from 'features/Common'
 export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'

 export const defaultHeaderStyles = (
-  color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
+  color: string = DEFAULT_HEADER_COLOR,
+  headerImage: string | undefined | null,
 ) => {
  if (headerImage && client.name !== 'facr') {
    return css`background: url(${headerImage}.png);
--- a/src/features/TeamPage/hooks.tsx
+++ b/src/features/TeamPage/hooks.tsx
@ -17,14 +17,16 @@ export const useTeamPage = () => {
  const { profileId: teamId, sportType } = usePageParams()
  const { open: openBuyMatchPopup } = useBuyMatchPopupStore()

-  useEffect(() => {
-    getTeamInfo(sportType, teamId)
-      .then(setTeamProfile)
-  },
-  [
-    sportType,
-    teamId,
-  ])
+  useEffect(
+    () => {
+      getTeamInfo(sportType, teamId)
+        .then(setTeamProfile)
+    },
+    [
+      sportType,
+      teamId,
+    ],
+  )

  useEffect(() => {
    openSubscribePopup({
--- a/src/features/TournamentPage/hooks.tsx
+++ b/src/features/TournamentPage/hooks.tsx
@ -34,18 +34,20 @@ export const useTournamentPage = () => {

  const { isFavorite, toggleFavorites } = useProfileCard()

-  useEffect(() => {
-    if (!isPermittedTournament(tournamentId, sportType)) {
-      history.push('/')
-    }
-    getTournamentInfo(sportType, tournamentId)
-      .then(setTournamentProfile)
-  },
-  [
-    history,
-    sportType,
-    tournamentId,
-  ])
+  useEffect(
+    () => {
+      if (!isPermittedTournament(tournamentId, sportType)) {
+        history.push('/')
+      }
+      getTournamentInfo(sportType, tournamentId)
+        .then(setTournamentProfile)
+    },
+    [
+      history,
+      sportType,
+      tournamentId,
+    ],
+  )

  useEffect(() => {
    !isFavorite
--- a/src/features/UserAccount/components/PagePersonalInfo/hooks/index.tsx
+++ b/src/features/UserAccount/components/PagePersonalInfo/hooks/index.tsx
@ -77,8 +77,7 @@ export const useUserInfo = () => {
    saveUserInfo(data).then(() => {
      fetchUserInfo()

-      const lang_iso = find(languageList,
-        (language) => language.id === data.language_id)?.iso_639_1
+      const lang_iso = find(languageList, (language) => language.id === data.language_id)?.iso_639_1

      if (lang_iso) {
        changeLang(lang_iso)
--- a/src/helpers/bodyScrollLock/index.tsx
+++ b/src/helpers/bodyScrollLock/index.tsx
@ -212,7 +212,8 @@ export const enableBodyScroll = (targetElement: HTMLElement | Element) => {

 // Disable body scroll locking
 export const disableBodyScroll = (
-  targetElement: HTMLElement | Element, options?: BodyScrollOptions,
+  targetElement: HTMLElement | Element,
+  options?: BodyScrollOptions,
 ) => {
  // targetElement must be provided
  if (!targetElement) {
--- a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx
+++ b/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx
@ -378,7 +378,8 @@ export const useHighlightsForm = () => {
  useEffect(() => {
    formState?.selectedTeam?.id
    && getTeamPlayers(
-      formState?.sport?.id || playerHighlight.sportType, formState?.selectedTeam?.id
+      formState?.sport?.id || playerHighlight.sportType,
+      formState?.selectedTeam?.id
        || playerHighlight?.profile?.additionalInfo?.id,
    )
      .then((state) => {
--- a/src/requests/getSelectedSubscriptions.tsx
+++ b/src/requests/getSelectedSubscriptions.tsx
@ -2,8 +2,7 @@ import { callApi } from 'helpers'
 import { Subscriptions } from './getSubscriptions'
 import { API_ROOT } from '../config'

-export const getSelectedSubscriptions = async (
-): Promise<Subscriptions> => {
+export const getSelectedSubscriptions = async (): Promise<Subscriptions> => {
  const config = {
    method: 'GET',
  }
--- a/src/requests/getTeamPlayers.tsx
+++ b/src/requests/getTeamPlayers.tsx
@ -21,8 +21,10 @@ export type Player = {
  weight: string | number | null,
 }

-export const getTeamPlayers = (_p_sport_id: number,
-  _p_team_id: number)
+export const getTeamPlayers = (
+  _p_sport_id: number,
+  _p_team_id: number,
+)
 : Promise<Array<Player>> => {
  const config = {
    body: {