feat(ott-1456): disable buttons for unanalyzed match (#443)

src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx

@@ -4,6 +4,8 @@ import map from 'lodash/map'
 
 import { isMobileDevice } from 'config/userAgent'
 import type { MatchPlaylistOptions, PlaylistOption } from 'features/MatchPage/types'
+import type { MatchInfo } from 'requests'
+import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
 
 import { T9n } from 'features/T9n'
 import { isEqual } from 'features/MatchSidePlaylists/helpers'
@@ -13,6 +15,7 @@ import { PlayButton } from '../PlayButton'
 type Props = {
   onSelect?: (selectedMathPlaylist: PlaylistOption) => void,
   playlists: MatchPlaylistOptions,
+  profile: MatchInfo,
   selectedMathPlaylist?: PlaylistOption,
 }
 
@@ -33,6 +36,7 @@ const Item = styled.li`
 export const MatchPlaylists = ({
   onSelect,
   playlists,
+  profile,
   selectedMathPlaylist,
 }: Props) => (
   <List>
@@ -42,6 +46,7 @@ export const MatchPlaylists = ({
           <PlayButton
             duration={playlist.duration}
             active={isEqual(playlist, selectedMathPlaylist)}
+            disabled={playlist.id !== FULL_GAME_KEY && !profile?.calc}
             onClick={() => onSelect?.(playlist)}
           >
             <T9n t={playlist.lexic} />

src/features/MatchSidePlaylists/components/PlayButton/index.tsx

@@ -9,6 +9,7 @@ import { Button, Title } from '../../styled'
 type Props = {
   active?: boolean,
   children: ReactNode,
+  disabled?: boolean,
   duration?: number,
   leftContent?: ReactNode,
   onClick: () => void,
@@ -22,6 +23,7 @@ const Duration = styled(Title)`
 export const PlayButton = ({
   active,
   children,
+  disabled,
   duration,
   leftContent,
   onClick,
@@ -29,6 +31,7 @@ export const PlayButton = ({
   <Button
     onClick={onClick}
     active={active}
+    disabled={disabled}
   >
     {leftContent}
     <Title>

src/features/MatchSidePlaylists/components/TabWatch/index.tsx

@@ -25,6 +25,7 @@ export const TabWatch = ({
 }: Props) => (
   <Fragment>
     <MatchPlaylists
+      profile={profile}
       playlists={playlists.match}
       selectedMathPlaylist={selectedPlaylist}
       onSelect={onSelect}