From 6db5a027c13ec45cc1285984cb2439309d35e848 Mon Sep 17 00:00:00 2001 From: nevainero Date: Wed, 2 Feb 2022 15:57:37 +0300 Subject: [PATCH] feat(ott-2066): add likes in event list --- public/images/event-like-bg.png | Bin 0 -> 17551 bytes public/images/like-active-icon.svg | 16 ++++++++ public/images/like-icon.svg | 37 ++++++++++++++++++ .../components/EventButton/index.tsx | 5 +++ .../components/TabEvents/index.tsx | 37 +++++++++++++----- .../components/TabEvents/styled.tsx | 26 ++++++++++++ src/requests/getMatchEvents.tsx | 3 ++ 7 files changed, 114 insertions(+), 10 deletions(-) create mode 100644 public/images/event-like-bg.png create mode 100644 public/images/like-active-icon.svg create mode 100644 public/images/like-icon.svg diff --git a/public/images/event-like-bg.png b/public/images/event-like-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..97a086e33923b97dd8bb3c1eaba1275d2e13341b GIT binary patch literal 17551 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 + + + + + + + + + + + + + + + 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,