import React from 'react' ; import * as StationLayout from 'containers/layout' ; import { useLocalStorage } from 'hooks/use-local-storage' ; export interface StationContext { player : { muted : boolean ; setMuted : ( value : boolean ) => void ; } ; chatBox : { hidden : boolean ; } ; setChatBoxState : ( value : StationContext [ 'chatBox' ] ) => void ; drawer : StationLayout . DrawerProps ; setDrawerState : ( value : StationLayout . DrawerProps ) => void ; addSongDialog : { hidden : boolean ; } ; setAddSongDialogState : ( value : StationContext [ 'addSongDialog' ] ) => void ; tabs : StationContext [ 'selectedTab' ] [ ] ; selectedTab : 'playlist' | 'history' | 'trending' ; setSelectedTab ( tab ) : void ; } const defaultFn = ( ) => { } ; const defaultState = { player : { muted : false , setMuted : defaultFn , } , chatBox : { hidden : false , } , setChatBoxState : defaultFn , drawer : { open : true , collapsed : true } , setDrawerState : defaultFn , addSongDialog : { hidden : true , } , setAddSongDialogState : defaultFn , tabs : [ 'playlist' , 'history' , 'trending' ] , selectedTab : 'playlist' , setSelectedTab : defaultFn , } ; export const StationContext = React . createContext < StationContext > ( defaultState ) ; export function useStationContextStateProvider ( ) { const [ muted , setMuted ] = useLocalStorage < StationContext [ 'player' ] [ 'muted' ] > ( 'muted' , defaultState . player . muted ) ; const [ chatBox , setChatBoxState ] = React . useState < StationContext [ 'chatBox' ] > ( defaultState . chatBox ) ; const [ drawer , setDrawerState ] = React . useState < StationContext [ 'drawer' ] > ( defaultState . drawer ) ; const [ addSongDialog , setAddSongDialogState ] = React . useState < StationContext [ 'addSongDialog' ] > ( defaultState . addSongDialog ) ; const [ selectedTab , setSelectedTab ] = useLocalStorage < StationContext [ 'selectedTab' ] > ( 'selectedStationTab' , defaultState . selectedTab ) ; return React . useMemo ( ( ) => { return { player : { muted , setMuted } , chatBox , setChatBoxState , drawer , setDrawerState , addSongDialog , setAddSongDialogState , tabs : defaultState . tabs , selectedTab , setSelectedTab , } ; } , [ addSongDialog , chatBox , drawer , muted , selectedTab , setMuted , setSelectedTab ] ) ; } export function useStationContextState ( ) { return React . useContext ( StationContext ) ; }