From d927435c21e499d816630bee4960a748b6d256e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D1=82=D0=B0=D0=BB=D0=B8?=
 =?UTF-8?q?=D0=B5=D0=B2=20=D0=9C=D0=B8=D1=80=D0=BB=D0=B0=D0=BD?=
 <mirlan.maksitaliev@instatsport.com>
Date: Tue, 14 Dec 2021 08:43:17 +0000
Subject: [PATCH] Ott 2067 events list rendering

---
 src/features/MatchPage/styled.tsx             |  2 +-
 .../components/EventsList/index.tsx           | 21 +++++++++++++----
 .../components/TabEvents/index.tsx            | 10 ++------
 .../components/TabEvents/styled.tsx           | 23 ++++++++++++-------
 4 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/features/MatchPage/styled.tsx b/src/features/MatchPage/styled.tsx
index 07344844..c0534a4c 100644
--- a/src/features/MatchPage/styled.tsx
+++ b/src/features/MatchPage/styled.tsx
@@ -32,7 +32,7 @@ export const Wrapper = styled.div`
 `
 
 export const Container = styled.div`
-  width: calc(100% - 375px);
+  width: 100%;
   max-width: 2090px;
   max-height: 896px;
   display: flex;
diff --git a/src/features/MatchSidePlaylists/components/EventsList/index.tsx b/src/features/MatchSidePlaylists/components/EventsList/index.tsx
index 1d676ecd..18cdfc5b 100644
--- a/src/features/MatchSidePlaylists/components/EventsList/index.tsx
+++ b/src/features/MatchSidePlaylists/components/EventsList/index.tsx
@@ -2,21 +2,25 @@ import map from 'lodash/map'
 
 import type { Events, MatchInfo } from 'requests'
 
+import { T9n } from 'features/T9n'
 import type {
   EventPlaylistOption,
   PlaylistOption,
-  Playlists,
 } from 'features/MatchPage/types'
 import { PlaylistTypes } from 'features/MatchPage/types'
 
 import { isEqual } from '../../helpers'
 import { EventButton } from '../EventButton'
-import { Event, List } from '../TabEvents/styled'
+import {
+  BlockTitle,
+  Event,
+  TextEvent,
+  List,
+} from '../TabEvents/styled'
 
 type Props = {
   events: Events,
   onSelect: (option: PlaylistOption) => void,
-  playlists: Playlists,
   profile: MatchInfo,
   selectedPlaylist?: PlaylistOption,
 }
@@ -24,12 +28,21 @@ type Props = {
 export const EventsList = ({
   events,
   onSelect,
-  playlists,
   profile,
   selectedPlaylist,
 }: Props) => (
   <List>
     {map(events, (event) => {
+      if (!event.t && !event.pl) {
+        return (
+          <TextEvent key={event.n}>
+            <BlockTitle>
+              <T9n t={event.l} />
+            </BlockTitle>
+          </TextEvent>
+        )
+      }
+
       const repeatedEpisodes = event.rep || []
       const eventPlaylist = {
         data: [{
diff --git a/src/features/MatchSidePlaylists/components/TabEvents/index.tsx b/src/features/MatchSidePlaylists/components/TabEvents/index.tsx
index fc6d4a7a..00cd37d2 100644
--- a/src/features/MatchSidePlaylists/components/TabEvents/index.tsx
+++ b/src/features/MatchSidePlaylists/components/TabEvents/index.tsx
@@ -10,7 +10,7 @@ import type { Events, MatchInfo } from 'requests'
 
 import { useToggle } from 'hooks'
 
-import type { PlaylistOption, Playlists } from 'features/MatchPage/types'
+import type { PlaylistOption } from 'features/MatchPage/types'
 import { T9n } from 'features/T9n'
 
 import { EventsList } from '../EventsList'
@@ -26,7 +26,6 @@ import {
 type Props = {
   events: Events,
   onSelect: (option: PlaylistOption) => void,
-  playlists: Playlists,
   profile: MatchInfo,
   selectedPlaylist?: PlaylistOption,
 }
@@ -34,7 +33,6 @@ type Props = {
 export const TabEvents = ({
   events,
   onSelect,
-  playlists,
   profile,
   selectedPlaylist,
 }: Props) => {
@@ -52,7 +50,7 @@ export const TabEvents = ({
         reverseStatus
           ? reverse([...events])
           : events,
-        'h',
+        ({ h }) => h,
       ),
     )
     return reverseStatus
@@ -101,13 +99,9 @@ export const TabEvents = ({
                           </BlockTitle>
                         )
                       }
-                      <BlockTitle>
-                        <T9n t={firstEvent.l} />
-                      </BlockTitle>
                       <EventsList
                         events={halfEvents}
                         onSelect={onSelect}
-                        playlists={playlists}
                         profile={profile}
                         selectedPlaylist={selectedPlaylist}
                       />
diff --git a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx b/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
index 2019ef87..e4676c4b 100644
--- a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
+++ b/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx
@@ -20,23 +20,30 @@ export const HalfList = styled.ul`
   width: 100%;
 `
 
-export const HalfEvents = styled.li`
-  :not(:last-child) {
-    margin-bottom: 12px;
-  }
-`
+export const HalfEvents = styled.li``
 
-export const List = styled.ul`
-  margin-top: 12px;
-`
+export const List = styled.ul``
 
 export const Event = styled.li`
   width: 100%;
   height: 48px;
+  margin-bottom: 12px;
+
+  :first-child {
+    margin-top: 12px;
+  }
+`
+
+export const TextEvent = styled.li`
+  width: 100%;
 
   :not(:last-child) {
     margin-bottom: 12px;
   }
+
+  :last-child {
+    margin-bottom: 0px;
+  }
 `
 
 type AvatarProps = {