|
|
|
|
@ -1,17 +1,21 @@ |
|
|
|
|
import { Fragment, useMemo } from 'react' |
|
|
|
|
import { |
|
|
|
|
Fragment, |
|
|
|
|
useCallback, |
|
|
|
|
useMemo, |
|
|
|
|
useState, |
|
|
|
|
} from 'react' |
|
|
|
|
|
|
|
|
|
import groupBy from 'lodash/groupBy' |
|
|
|
|
import isEmpty from 'lodash/isEmpty' |
|
|
|
|
import map from 'lodash/map' |
|
|
|
|
import reverse from 'lodash/reverse' |
|
|
|
|
import filter from 'lodash/filter' |
|
|
|
|
import values from 'lodash/values' |
|
|
|
|
|
|
|
|
|
import type { Events, MatchInfo } from 'requests' |
|
|
|
|
|
|
|
|
|
import { useToggle } from 'hooks' |
|
|
|
|
|
|
|
|
|
import type { PlaylistOption } from 'features/MatchPage/types' |
|
|
|
|
import { T9n } from 'features/T9n' |
|
|
|
|
import type { PlaylistOption } from 'features/MatchPage/types' |
|
|
|
|
import { useToggle } from 'hooks' |
|
|
|
|
import type { Events, MatchInfo } from 'requests' |
|
|
|
|
|
|
|
|
|
import { EventsList } from '../EventsList' |
|
|
|
|
import { |
|
|
|
|
@ -21,6 +25,7 @@ import { |
|
|
|
|
HalfEvents, |
|
|
|
|
Tabs, |
|
|
|
|
Tab, |
|
|
|
|
LikeToggle, |
|
|
|
|
} from './styled' |
|
|
|
|
|
|
|
|
|
type Props = { |
|
|
|
|
@ -42,22 +47,33 @@ export const TabEvents = ({ |
|
|
|
|
open: setReversed, |
|
|
|
|
} = useToggle() |
|
|
|
|
|
|
|
|
|
const [likesOnly, setLikesOnly] = useState(false) |
|
|
|
|
const likeToggle = useCallback(() => setLikesOnly((state) => !state), []) |
|
|
|
|
const likeImage = likesOnly ? '/images/like-active-icon.svg' : '/images/like-icon.svg' |
|
|
|
|
|
|
|
|
|
const isLiveMatch = profile?.live |
|
|
|
|
const reverseStatus = (areEventsReversed || isLiveMatch) && (areEventsReversed !== isLiveMatch) |
|
|
|
|
const activeStatus = isLiveMatch ? areEventsReversed : !areEventsReversed |
|
|
|
|
|
|
|
|
|
const reversedGroupEvents = useMemo(() => { |
|
|
|
|
const eventsList = likesOnly ? filter(events, 'like') : events |
|
|
|
|
const groupedEvents = values( |
|
|
|
|
groupBy( |
|
|
|
|
reverseStatus |
|
|
|
|
? reverse([...events]) |
|
|
|
|
: events, |
|
|
|
|
? reverse([...eventsList]) |
|
|
|
|
: eventsList, |
|
|
|
|
({ h }) => h, |
|
|
|
|
), |
|
|
|
|
) |
|
|
|
|
return reverseStatus |
|
|
|
|
? reverse(groupedEvents) |
|
|
|
|
: groupedEvents |
|
|
|
|
}, [events, reverseStatus]) |
|
|
|
|
const activeStatus = isLiveMatch ? areEventsReversed : !areEventsReversed |
|
|
|
|
}, [ |
|
|
|
|
events, |
|
|
|
|
likesOnly, |
|
|
|
|
reverseStatus, |
|
|
|
|
]) |
|
|
|
|
|
|
|
|
|
if (!profile) return null |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
@ -84,6 +100,7 @@ export const TabEvents = ({ |
|
|
|
|
<T9n t='from_end_match' /> |
|
|
|
|
</Tab> |
|
|
|
|
</Tabs> |
|
|
|
|
<LikeToggle src={likeImage} onClick={likeToggle} /> |
|
|
|
|
<HalfList> |
|
|
|
|
{ |
|
|
|
|
map(reversedGroupEvents, (halfEvents, idx) => { |
|
|
|
|
|
nevainero
4 years ago
