diff --git a/public/images/event-like-bg.png b/public/images/event-like-bg.png
new file mode 100644
index 00000000..97a086e3
Binary files /dev/null and b/public/images/event-like-bg.png differ
diff --git a/public/images/like-active-icon.svg b/public/images/like-active-icon.svg
new file mode 100644
index 00000000..257c60af
--- /dev/null
+++ b/public/images/like-active-icon.svg
@@ -0,0 +1,16 @@
+
diff --git a/public/images/like-icon.svg b/public/images/like-icon.svg
new file mode 100644
index 00000000..28643d60
--- /dev/null
+++ b/public/images/like-icon.svg
@@ -0,0 +1,37 @@
+
diff --git a/src/features/MatchSidePlaylists/components/EventButton/index.tsx b/src/features/MatchSidePlaylists/components/EventButton/index.tsx
index 1959b6f9..e44b4796 100644
--- a/src/features/MatchSidePlaylists/components/EventButton/index.tsx
+++ b/src/features/MatchSidePlaylists/components/EventButton/index.tsx
@@ -15,6 +15,7 @@ import {
Title,
SubTitle,
EventTime,
+ EventLike,
} from '../TabEvents/styled'
type Props = {
@@ -57,6 +58,7 @@ export const EventButton = ({
active={active}
disabled={disabled}
isHomeTeam={isHomeTeam}
+ like={event.like}
>
{avatarId && (
)}
+ {event.like && (
+
+ )}
{clearTime}
diff --git a/src/features/MatchSidePlaylists/components/TabEvents/index.tsx b/src/features/MatchSidePlaylists/components/TabEvents/index.tsx
index 00cd37d2..d4a40425 100644
--- a/src/features/MatchSidePlaylists/components/TabEvents/index.tsx
+++ b/src/features/MatchSidePlaylists/components/TabEvents/index.tsx
@@ -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 = ({
+
{
map(reversedGroupEvents, (halfEvents, idx) => {
diff --git a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx b/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
index e4676c4b..39917470 100644
--- a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
+++ b/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
@@ -14,6 +14,7 @@ export const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
+ position: relative;
`
export const HalfList = styled.ul`
@@ -86,6 +87,7 @@ export const Avatar = styled(ProfileLogo)`
export const EventInfo = styled.div`
display: flex;
width: 100%;
+ position: relative;
`
export const EventDesc = styled.div`
@@ -117,6 +119,14 @@ export const SubTitle = styled(Title)`
margin-top: 2px;
`
+export const EventLike = styled.img`
+ position: absolute;
+ left: -14px;
+ top: 2px;
+ width: 10px;
+ height: 10px;
+`
+
export const EventTime = styled(Title)`
font-size: 14px;
font-weight: normal;
@@ -139,6 +149,15 @@ export const Tab = styled(TabBase)`
}
`
+export const LikeToggle = styled.img`
+ position: absolute;
+ right: 0;
+ top: 9px;
+ width: 15px;
+ height: 15px;
+ cursor: pointer;
+`
+
export const BlockTitle = styled(BlockTitleBase)`
text-align: center;
width: 100%;
@@ -147,9 +166,16 @@ export const BlockTitle = styled(BlockTitleBase)`
type ButtonProps = {
isHomeTeam: boolean,
+ like?: boolean,
}
export const Button = styled(ButtonBase)`
+ ${({ like }) => (
+ like ? css`
+ background: url(/images/event-like-bg.png);
+ ` : ''
+ )}
+
&:hover ${EventDesc} {
overflow: visible;
}
diff --git a/src/requests/getMatchEvents.tsx b/src/requests/getMatchEvents.tsx
index 06276575..8b95a494 100644
--- a/src/requests/getMatchEvents.tsx
+++ b/src/requests/getMatchEvents.tsx
@@ -27,6 +27,9 @@ export type Event = Episode & {
/** event lexic */
l: number,
+ /** like */
+ like?: boolean,
+
/** event id */
n: number,