Ott 952 popup player actions (#340)

* refactor(952): light settings popup refactoring

* fix(952): fetch player actions on format select

src/features/MatchPage/components/FinishedMatch/hooks/index.tsx

@@ -1,7 +1,5 @@
 import { useEffect } from 'react'
 
-import isEqual from 'lodash/isEqual'
-
 import type { MatchInfo } from 'requests'
 
 import {
@@ -23,14 +21,12 @@ export type Props = {
 
 export const useFinishedMatch = ({ profile }: Props) => {
   const {
-    actions,
     fetchMatchPlaylists,
     handlePlaylistClick,
     matchPlaylists,
     selectedPlaylist,
     setMatch,
     setSettings,
-    settings,
   } = useMatchPopupStore()
   const { sportType } = useSportNameParam()
   const matchId = usePageId()
@@ -64,15 +60,11 @@ export const useFinishedMatch = ({ profile }: Props) => {
   ])
 
   const setEpisodesSettings = (newSettings: Settings) => {
-    const settingsChanged = !isEqual(newSettings, settings)
-    if (settingsChanged) {
-      setSettings(newSettings)
-    }
+    setSettings(newSettings)
     closeSettingsPopup()
   }
 
   return {
-    actions,
     closeSettingsPopup,
     isSettingsPopupOpen,
     onPlaylistSelect: handlePlaylistClick,
@@ -81,7 +73,6 @@ export const useFinishedMatch = ({ profile }: Props) => {
     profile,
     selectedPlaylist,
     setEpisodesSettings,
-    settings,
     ...useChapters({
       episodes,
       selectedPlaylist,

src/features/MatchPage/components/FinishedMatch/index.tsx

@@ -16,7 +16,6 @@ import { Modal } from './styled'
 export const FinishedMatch = (props: Props) => {
   const { profile } = props
   const {
-    actions,
     chapters,
     closeSettingsPopup,
     isSettingsPopupOpen,
@@ -27,7 +26,6 @@ export const FinishedMatch = (props: Props) => {
     playlists,
     selectedPlaylist,
     setEpisodesSettings,
-    settings,
   } = useFinishedMatch(props)
 
   return (
@@ -38,9 +36,7 @@ export const FinishedMatch = (props: Props) => {
         withCloseButton={false}
       >
         <SettingsPopup
-          actions={actions}
           onWatchEpisodesClick={setEpisodesSettings}
-          settings={settings}
           closePopup={closeSettingsPopup}
           profile={profile}
           selectedPlaylist={selectedPlaylist}

src/features/MatchPage/components/SettingsDesktop/index.tsx

@@ -2,14 +2,10 @@ import { Fragment } from 'react'
 
 import styled from 'styled-components/macro'
 
-import type { Actions } from 'requests'
+import isEqual from 'lodash/isEqual'
 
-import {
-  EpisodeDuration,
-  PlayerPlaylistFormats,
-  SelectedActions,
-  Settings,
-} from 'features/MatchPopup'
+import type { Settings } from 'features/MatchPopup'
+import { PlayerPlaylistFormats } from 'features/MatchPopup'
 import { ButtonSolid } from 'features/Common'
 import { T9n } from 'features/T9n'
 import { PlaylistFormats } from 'features/MatchPopup/components/PlaylistFormats'
@@ -30,59 +26,50 @@ const WatchButton = styled(ButtonSolid)`
 `
 
 type Props = {
-  actions: Actions,
-  episodeDuration: EpisodeDuration,
   isMatchPlaylist?: boolean,
   onWatchEpisodesClick: (values: Settings) => void,
-  selectedActions: SelectedActions,
-  selectedPlaylistFormat: PlayerPlaylistFormats,
 }
 
 export const SettingsDesktop = ({
-  actions,
-  episodeDuration,
   isMatchPlaylist,
   onWatchEpisodesClick,
-  selectedActions,
-  selectedPlaylistFormat,
 }: Props) => {
   const {
-    actionsValue,
-    episodeDurationValue,
-    selectedPlaylistFormatValue,
-    setActionsValue,
-    setEpisodeDurationValue,
-    setSelectedPlaylistFormatValue,
-  } = useSettingsDesktop({
+    actions,
+    localSettings,
+    onActionsChange,
+    onEpisodeDurationsChange,
+    onPlaylistFormatChange,
+    settings,
+  } = useSettingsDesktop()
+  const {
     episodeDuration,
     selectedActions,
-    selectedPlaylistFormat,
-  })
+    selectedFormat,
+  } = localSettings
   const marginTop = isMatchPlaylist ? 0 : 62
   return (
     <Fragment>
       <PlaylistFormats
         marginTop={marginTop}
-        selectedFormat={selectedPlaylistFormatValue}
-        onFormatSelect={setSelectedPlaylistFormatValue}
+        selectedFormat={selectedFormat}
+        onFormatSelect={onPlaylistFormatChange}
       />
       <EpisodeDurationInputs
-        value={episodeDurationValue}
-        onChange={setEpisodeDurationValue}
+        value={episodeDuration}
+        onChange={onEpisodeDurationsChange}
       />
-      {selectedPlaylistFormatValue === PlayerPlaylistFormats.SELECTED_ACTIONS && (
+      {selectedFormat === PlayerPlaylistFormats.SELECTED_ACTIONS && (
         <PlayerActions
           actions={actions}
-          onActionClick={setActionsValue}
-          selectedActions={actionsValue}
+          onActionClick={onActionsChange}
+          selectedActions={selectedActions}
         />
       )}
       <ButtonsWrapper>
-        <WatchButton onClick={() => onWatchEpisodesClick({
-          episodeDuration: episodeDurationValue,
-          selectedActions: actionsValue,
-          selectedFormat: selectedPlaylistFormatValue,
-        })}
+        <WatchButton
+          disabled={isEqual(localSettings, settings)}
+          onClick={() => onWatchEpisodesClick(localSettings)}
         >
           {isMatchPlaylist
             ? <T9n t='save' />

src/features/MatchPage/components/SettingsDesktop/useDesktopSettings.tsx

@@ -1,37 +1,40 @@
-import { useState } from 'react'
+import { useObjectState } from 'hooks'
 
 import type {
-  EpisodeDuration,
-  PlayerPlaylistFormats,
   SelectedActions,
+  EpisodeDuration,
 } from 'features/MatchPopup'
+import { PlayerPlaylistFormats, useMatchPopupStore } from 'features/MatchPopup'
 
-type Args = {
-  episodeDuration: EpisodeDuration,
-  selectedActions: SelectedActions,
-  selectedPlaylistFormat: PlayerPlaylistFormats,
-}
+export const useSettingsDesktop = () => {
+  const {
+    actions,
+    fetchSportActions,
+    settings,
+  } = useMatchPopupStore()
+  const [localSettings, setSettings] = useObjectState(settings)
+
+  const onPlaylistFormatChange = (playlistFormat: PlayerPlaylistFormats) => {
+    setSettings({ selectedFormat: playlistFormat })
+    if (playlistFormat === PlayerPlaylistFormats.SELECTED_ACTIONS) {
+      fetchSportActions()
+    }
+  }
+
+  const onActionsChange = (selectedActions: SelectedActions) => {
+    setSettings({ selectedActions })
+  }
 
-export const useSettingsDesktop = ({
-  episodeDuration,
-  selectedActions,
-  selectedPlaylistFormat,
-}: Args) => {
-  const [actionsValue, setActionsValue] = useState<SelectedActions>(selectedActions)
-  const [
-    episodeDurationValue,
-    setEpisodeDurationValue] = useState<EpisodeDuration>(episodeDuration)
-  const [
-    selectedPlaylistFormatValue,
-    setSelectedPlaylistFormatValue,
-  ] = useState<PlayerPlaylistFormats>(selectedPlaylistFormat)
+  const onEpisodeDurationsChange = (episodeDuration: EpisodeDuration) => {
+    setSettings({ episodeDuration })
+  }
 
   return {
-    actionsValue,
-    episodeDurationValue,
-    selectedPlaylistFormatValue,
-    setActionsValue,
-    setEpisodeDurationValue,
-    setSelectedPlaylistFormatValue,
+    actions,
+    localSettings,
+    onActionsChange,
+    onEpisodeDurationsChange,
+    onPlaylistFormatChange,
+    settings,
   }
 }

src/features/MatchPage/components/SettingsPopup/index.tsx

@@ -2,7 +2,7 @@ import { MDASH } from 'config'
 
 import styled from 'styled-components/macro'
 
-import type { Actions, MatchInfo } from 'requests'
+import type { MatchInfo } from 'requests'
 import type { PlaylistOption } from 'features/MatchPage/types'
 import type { Settings } from 'features/MatchPopup'
 import { PlaylistTypes } from 'features/MatchPage/types'
@@ -37,20 +37,17 @@ const Content = styled.div<ContentProps>`
 `
 
 type Props = {
-  actions: Actions,
   closePopup: () => void,
-  onWatchEpisodesClick: (values: Settings) => void,
+  onWatchEpisodesClick: (settings: Settings) => void,
   profile: MatchInfo,
   selectedPlaylist?: PlaylistOption,
-  settings: Settings,
 }
+
 export const SettingsPopup = ({
-  actions,
   closePopup,
   onWatchEpisodesClick,
   profile,
   selectedPlaylist,
-  settings,
 }: Props) => {
   if (!profile || !selectedPlaylist) return null
 
@@ -71,7 +68,7 @@ export const SettingsPopup = ({
                 <CloseButton onClick={closePopup} />
               </HeaderActions>
               <TitleWrapper>
-                {selectedPlaylist && <Name nameObj={selectedPlaylist} />}
+                <Name nameObj={selectedPlaylist} />
                 <TeamNames>
                   <Name nameObj={profile.team1} />
                   {` ${MDASH} `}
@@ -90,12 +87,8 @@ export const SettingsPopup = ({
         )}
       <MediaQuery minDevice='tablet'>
         <SettingsDesktop
-          actions={actions}
-          episodeDuration={settings.episodeDuration}
           onWatchEpisodesClick={onWatchEpisodesClick}
           isMatchPlaylist={isMatchPlaylist}
-          selectedActions={settings.selectedActions}
-          selectedPlaylistFormat={settings.selectedFormat}
         />
       </MediaQuery>
     </Content>

src/features/MatchPopup/store/hooks/index.tsx

@@ -102,6 +102,7 @@ export const useMatchPopup = () => {
     closePopup,
     episodeDuration,
     fetchMatchPlaylists,
+    fetchSportActions,
     goBack,
     goTo,
     isOpen,