Ott 2067 events list rendering

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;

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: [{

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}
                       />

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 = {