From ea52728198eef0fa7e9edeb9a754f1dac283d38e Mon Sep 17 00:00:00 2001 From: Rakov Roman Date: Mon, 23 May 2022 17:49:53 +0300 Subject: [PATCH] fix(#2424): fixed sorting list of tournaments and matches --- .../Matches/helpers/prepareMatches.tsx | 17 +++++--- .../components/CollapseTournament/index.tsx | 14 ++----- .../components/TournamentMobile/index.tsx | 22 ++-------- src/features/TournamentList/hooks.tsx | 40 ++++++++++++++++--- src/features/TournamentList/index.tsx | 35 ++++++++-------- 5 files changed, 73 insertions(+), 55 deletions(-) diff --git a/src/features/Matches/helpers/prepareMatches.tsx b/src/features/Matches/helpers/prepareMatches.tsx index cf3c83fa..fd694072 100644 --- a/src/features/Matches/helpers/prepareMatches.tsx +++ b/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) => map( - matches, - prepareMatch, -) +export const prepareMatches = (matches: Array) => { + const preparedMatches = map( + matches, + prepareMatch, + ) + return orderBy( + preparedMatches, + ['live'], + ['desc'], + ) +} diff --git a/src/features/TournamentList/components/CollapseTournament/index.tsx b/src/features/TournamentList/components/CollapseTournament/index.tsx index 806d0aa1..0a204083 100644 --- a/src/features/TournamentList/components/CollapseTournament/index.tsx +++ b/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 = ({ - {tournamentInFavorites && ( + {isFavorite && ( diff --git a/src/features/TournamentList/components/TournamentMobile/index.tsx b/src/features/TournamentList/components/TournamentMobile/index.tsx index bdd1ce0a..afa47920 100644 --- a/src/features/TournamentList/components/TournamentMobile/index.tsx +++ b/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, -} +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 ( setOpen(!open)}> @@ -62,7 +46,7 @@ export const TournamentMobile = ({ src={`https://instatscout.com/images/flags/48/${countryId}.png`} /> - {tournamentInFavorites && ( + {isFavorite && ( diff --git a/src/features/TournamentList/hooks.tsx b/src/features/TournamentList/hooks.tsx index dca855b9..ade8691b 100644 --- a/src/features/TournamentList/hooks.tsx +++ b/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) => { const { @@ -12,6 +23,7 @@ export const useTournaments = (matches: Array) => { selectedSport, setSportIds, } = useHeaderFiltersStore() + const { isInFavorites } = useUserFavoritesStore() const compareSport = (match: Match, sportNames: Array) => { if (sportNames[0] === 'all_sports') { @@ -28,16 +40,24 @@ export const useTournaments = (matches: Array) => { return (selectedLeague.indexOf(id) >= 0) } - const tournamentSort: Array = [] + // eslint-disable-next-line react-hooks/exhaustive-deps + const tournamentSort: Array = [] const sportIds = new Set([]) 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)) { + && 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) => { }, 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) => { 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, } } diff --git a/src/features/TournamentList/index.tsx b/src/features/TournamentList/index.tsx index 358858aa..50ed262c 100644 --- a/src/features/TournamentList/index.tsx +++ b/src/features/TournamentList/index.tsx @@ -16,15 +16,18 @@ type TournamentTypeProps = { matches: Array, } -export type TournamentListProps = { - [key: number]: { - tournament: TournamentType & { - countryId: number, - live: boolean, - sportType: number, - }, - tournamentMatches: Array, +export type TournamentProps = { + tournament: TournamentType & { + countryId: number, + isFavorite: boolean, + live: boolean, + sportType: number, }, + tournamentMatches: Array, +} + +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) => ( ))} @@ -47,11 +50,11 @@ export const TournamentList = ({ matches }: TournamentTypeProps) => { case isHomePage && matches.length >= 12: return ( <> - {tournamentSort?.map((id) => ( + {tournamentSort?.map((tournament) => ( ))}