import React , { useEffect , useContext , useCallback , useState , useRef , } from "react" ; import { RouteComponentProps , withRouter } from "react-router-dom" ; import { useSelector } from "react-redux" ; import { AppStateTypes , SHORT_BREAK , LONG_BREAK , SPECIAL_BREAK , SettingTypes , } from "store" ; import { StyledLayout } from "styles" ; import Titlebar from "./Titlebar" ; import Navigation from "./Navigation" ; import { ThemeContext } from "contexts" ; type Props = { } & RouteComponentProps ; const Layout = ( { history , location , children } ) => { const timer = useSelector ( ( state ) => state . timer ) ; const settings = useSelector ( ( state ) => state . settings ) ; const { toggleThemeAction } = useContext ( ThemeContext ) ; const [ noTransition , setNoTransition ] = useState ( false ) ; const useNativeTitlebar = useRef ( settings . useNativeTitlebar ) ; const registerKey = useCallback ( ( e ) => { const keyCode = e . keyCode ; const keyChar = String . fromCharCode ( keyCode ) ; if ( e . altKey && e . shiftKey && keyChar === "T" ) { if ( toggleThemeAction ) toggleThemeAction ( ) ; } } , [ toggleThemeAction ] ) ; useEffect ( ( ) => { document . addEventListener ( "keydown" , registerKey ) ; return ( ) => document . removeEventListener ( "keydown" , registerKey ) ; } , [ registerKey ] ) ; useEffect ( ( ) => { if ( settings . enableFullscreenBreak ) { if ( timer . timerType === SHORT_BREAK || timer . timerType === LONG_BREAK || timer . timerType === SPECIAL_BREAK ) { if ( location . pathname !== "/" ) { setNoTransition ( true ) ; history . push ( "/" ) ; } } else { setNoTransition ( false ) ; } } } , [ timer . timerType , location , history , settings . enableFullscreenBreak ] ) ; return ( < StyledLayout noTransition = { noTransition } > { ! useNativeTitlebar . current && ( < Titlebar darkMode = { settings . enableDarkTheme } timerType = { timer . timerType } / > ) } < Navigation timerType = { timer . timerType } /> { children } < /StyledLayout>); } ; export default withRouter ( Layout ) ;