fix(#2424): fixed sorting list of tournaments and matches

src/features/Matches/helpers/prepareMatches.tsx

@@ -1,5 +1,5 @@
 import map from 'lodash/map'
-
+import orderBy from 'lodash/orderBy'
 import format from 'date-fns/format'
 
 import type { Match } from 'requests'
@@ -47,7 +47,14 @@ const prepareMatch = (match: Match) => {
   }
 }
 
-export const prepareMatches = (matches: Array<Match>) => map(
+export const prepareMatches = (matches: Array<Match>) => {
+  const preparedMatches = map(
     matches,
     prepareMatch,
-)
+  )
+  return orderBy(
+    preparedMatches,
+    ['live'],
+    ['desc'],
+  )
+}

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

@@ -1,14 +1,11 @@
 import { ProfileTypes } from 'config'
 
 import { T9n } from 'features/T9n'
-import { useUserFavoritesStore } from 'features/UserFavorites/store'
 import { Icon } from 'features/Icon'
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
 
 import { SportIcon } from 'components/SportIcon/SportIcon'
 
-import { TournamentProps } from '../TournamentMobile/index'
-
 import {
   CardWrapperOuter,
   CardWrapper,
@@ -26,6 +23,8 @@ import {
   HoverFrame,
 } from './styled'
 
+import { TournamentProps } from '../..'
+
 export const CollapseTournament = ({
   tournament,
   tournamentMatches,
@@ -35,18 +34,13 @@ export const CollapseTournament = ({
     setSelectedLeague,
     setSelectTournament,
   } = useHeaderFiltersStore()
-  const { isInFavorites } = useUserFavoritesStore()
   const {
     countryId,
+    isFavorite,
     live,
     sportType,
   } = tournament
 
-  const tournamentInFavorites = isInFavorites(
-    ProfileTypes.TOURNAMENTS,
-    tournament.id,
-  )
-
   const handleClick = () => {
     setIsShowTournament(false)
     setSelectedLeague([tournament.id])
@@ -83,7 +77,7 @@ export const CollapseTournament = ({
 
           <SecondaryInfo>
             <TournamentName nameObj={tournament} />
-            {tournamentInFavorites && (
+            {isFavorite && (
               <FavoriteSign marginLeft={12} color='rgba(255, 255, 255, 0.5)'>
                 <Icon refIcon='Star' />
               </FavoriteSign>

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

@@ -1,7 +1,5 @@
 import { useState } from 'react'
 
-import { ProfileTypes } from 'config'
-
 import { SportIcon } from 'components/SportIcon/SportIcon'
 import { T9n } from 'features/T9n'
 import { Icon } from 'features/Icon'
@@ -12,9 +10,6 @@ import {
   FavoriteSign,
   LiveSign,
 } from 'features/MatchCard/CardFrontside/MatchCardMobile/styled'
-import { useUserFavoritesStore } from 'features/UserFavorites/store'
-
-import type { TournamentType } from 'requests/getMatches/types'
 
 import {
   CardWrapperOuter,
@@ -26,14 +21,7 @@ import {
   ScSecondInfo,
 } from './styled'
 
-export type TournamentProps = {
-  tournament: TournamentType & {
-    countryId: number,
-    live: boolean,
-    sportType: number,
-  },
-  tournamentMatches: Array<Match>,
-}
+import { TournamentProps } from '../..'
 
 export const TournamentMobile = ({
   tournament,
@@ -42,17 +30,13 @@ export const TournamentMobile = ({
   const [open, setOpen] = useState(false)
   const {
     countryId,
+    isFavorite,
     live,
     sportType,
   } = tournament
-  const { isInFavorites } = useUserFavoritesStore()
 
   const currentColor = open ? '#ffffff' : 'rgba(255, 255, 255, 0.5)'
 
-  const tournamentInFavorites = isInFavorites(
-    ProfileTypes.TOURNAMENTS,
-    tournament.id,
-  )
   return (
     <CardWrapperOuter>
       <CardWrapper open={open} onClick={() => setOpen(!open)}>
@@ -62,7 +46,7 @@ export const TournamentMobile = ({
             src={`https://instatscout.com/images/flags/48/${countryId}.png`}
           />
           <TournamentName nameObj={tournament} />
-          {tournamentInFavorites && (
+          {isFavorite && (
             <FavoriteSign marginLeft={12} color={currentColor}>
               <Icon refIcon='Star' />
             </FavoriteSign>

src/features/TournamentList/hooks.tsx

@@ -1,9 +1,20 @@
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
+
+import orderBy from 'lodash/orderBy'
+
 import { getSportLexic } from 'helpers/getSportLexic'
 
+import { ProfileTypes } from 'config'
 import { TournamentListProps } from 'features/TournamentList'
 import type { Match } from 'features/Matches'
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
+import { useUserFavoritesStore } from 'features/UserFavorites/store'
+
+interface TournamentsSortProps {
+  id: number,
+  isFavorite: boolean,
+  isLive: boolean,
+}
 
 export const useTournaments = (matches: Array<Match>) => {
   const {
@@ -12,6 +23,7 @@ export const useTournaments = (matches: Array<Match>) => {
     selectedSport,
     setSportIds,
   } = useHeaderFiltersStore()
+  const { isInFavorites } = useUserFavoritesStore()
 
   const compareSport = (match: Match, sportNames: Array<string>) => {
     if (sportNames[0] === 'all_sports') {
@@ -28,16 +40,24 @@ export const useTournaments = (matches: Array<Match>) => {
     return (selectedLeague.indexOf(id) >= 0)
   }
 
-  const tournamentSort: Array<number> = []
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const tournamentSort: Array<TournamentsSortProps> = []
   const sportIds = new Set<number>([])
 
   const tournaments = matches.reduce((acc: TournamentListProps, match: Match) => {
     if (matches.length === 0) return {}
+
+    const tournamentInFavorites = isInFavorites(
+      ProfileTypes.TOURNAMENTS,
+      match.tournament.id,
+    )
+
     if (!acc[match.tournament.id] && compareSport(match, selectedSport)
       && compareLeague(match.tournament.id)) {
       const tournament = {
         ...match.tournament,
         countryId: match.countryId,
+        isFavorite: tournamentInFavorites,
         live: match.live,
         matches: [match],
         sportType: match.sportType,
@@ -48,7 +68,11 @@ export const useTournaments = (matches: Array<Match>) => {
         },
         tournamentMatches: [match],
       }
-      tournamentSort.push(match.tournament.id)
+      tournamentSort.push({
+        id: match.tournament.id,
+        isFavorite: tournamentInFavorites,
+        isLive: match.live,
+      })
       sportIds.add(match.sportType)
     } else if (compareSport(match, selectedSport) && compareLeague(match.tournament.id)) {
       acc[match.tournament.id] = {
@@ -65,13 +89,19 @@ export const useTournaments = (matches: Array<Match>) => {
     return acc
   }, {})
 
+  const tournamentsSorted = useMemo(() => orderBy(
+    tournamentSort,
+    ['isLive', 'isFavorite'],
+    ['desc', 'desc'],
+  ), [tournamentSort])
+
   useEffect(() => {
     sportIds && setSportIds(sportIds)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedDate, matches])
 
   return {
-    tournamentSort,
+    tournamentSort: tournamentsSorted,
     tournaments,
   }
 }

src/features/TournamentList/index.tsx

@@ -16,15 +16,18 @@ type TournamentTypeProps = {
   matches: Array<Match>,
 }
 
-export type TournamentListProps = {
-  [key: number]: {
+export type TournamentProps = {
   tournament: TournamentType & {
     countryId: number,
+    isFavorite: boolean,
     live: boolean,
     sportType: number,
   },
   tournamentMatches: Array<Match>,
-  },
+}
+
+export type TournamentListProps = {
+  [key: number]: TournamentProps,
 }
 
 export const TournamentList = ({ matches }: TournamentTypeProps) => {
@@ -35,11 +38,11 @@ export const TournamentList = ({ matches }: TournamentTypeProps) => {
     case isMobileDevice && isHomePage:
       return (
         <>
-          {tournamentSort?.map((id) => (
+          {tournamentSort?.map((tournament) => (
             <TournamentMobile
-              key={id}
-              tournament={tournaments[id].tournament}
-              tournamentMatches={tournaments[id].tournamentMatches}
+              key={tournament.id}
+              tournament={tournaments[tournament.id].tournament}
+              tournamentMatches={tournaments[tournament.id].tournamentMatches}
             />
           ))}
         </>
@@ -47,11 +50,11 @@ export const TournamentList = ({ matches }: TournamentTypeProps) => {
     case isHomePage && matches.length >= 12:
       return (
         <>
-          {tournamentSort?.map((id) => (
+          {tournamentSort?.map((tournament) => (
             <CollapseTournament
-              key={id}
-              tournament={tournaments[id].tournament}
-              tournamentMatches={tournaments[id].tournamentMatches}
+              key={tournament.id}
+              tournament={tournaments[tournament.id].tournament}
+              tournamentMatches={tournaments[tournament.id].tournamentMatches}
             />
           ))}
         </>