diff --git a/js/components/MainWindow/MainContextMenu.tsx b/js/components/MainWindow/MainContextMenu.tsx index 461b05b7..98474b20 100644 --- a/js/components/MainWindow/MainContextMenu.tsx +++ b/js/components/MainWindow/MainContextMenu.tsx @@ -1,115 +1,80 @@ import React from "react"; -import { connect } from "react-redux"; -import { - close, - openMediaFileDialog, - loadMediaFiles, - toggleWindow, -} from "../../actionCreators"; -import { getGenWindows } from "../../selectors"; +import * as Actions from "../../actionCreators"; +import * as Selectors from "../../selectors"; import { LOAD_STYLE } from "../../constants"; import { Hr, Node, Parent, LinkNode } from "../ContextMenu"; import PlaybackContextMenu from "../PlaybackContextMenu"; import OptionsContextMenu from "../OptionsContextMenu"; import SkinsContextMenu from "../SkinsContextMenu"; -import { - AppState, - Dispatch, - Track, - WindowId, - FilePicker, - LoadStyle, -} from "../../types"; -import { WebampWindow } from "../../reducers/windows"; +import { FilePicker } from "../../types"; +import { useTypedSelector, useActionCreator } from "../../hooks"; -interface StateProps { - networkConnected: boolean; - genWindows: { [windowId: string]: WebampWindow }; -} - -interface DispatchProps { - close(): void; - openMediaFileDialog(): void; - loadMediaFiles(tracks: Track[], loadStyle: LoadStyle): void; - toggleGenWindow(windowId: WindowId): void; -} - -interface OwnProps { +interface Props { filePickers: FilePicker[]; } -type Props = StateProps & DispatchProps & OwnProps; +const MainContextMenu = React.memo((props: Props) => { + const networkConnected = useTypedSelector(Selectors.getNetworkConnected); + const genWindows = useTypedSelector(Selectors.getGenWindows); -const MainContextMenu = (props: Props) => ( - - -
- - - {props.filePickers && - props.filePickers.map( - (picker, i) => - (props.networkConnected || !picker.requiresNetwork) && ( - { - let files; - try { - files = await picker.filePicker(); - } catch (e) { - console.error("Error loading from file picker", e); - } - props.loadMediaFiles(files || [], LOAD_STYLE.PLAY); - }} - label={picker.contextMenuName} - /> - ) - )} - -
- {Object.keys(props.genWindows).map(i => ( - props.toggleGenWindow(i)} - hotkey={props.genWindows[i].hotkey} + const close = useActionCreator(Actions.close); + const openMediaFileDialog = useActionCreator(Actions.openMediaFileDialog); + const loadMediaFiles = useActionCreator(Actions.loadMediaFiles); + const toggleWindow = useActionCreator(Actions.toggleWindow); + + return ( + + - ))} -
- -
- - - - - - -
- -
-); - -const mapStateToProps = (state: AppState): StateProps => ({ - networkConnected: state.network.connected, - genWindows: getGenWindows(state), +
+ + + {props.filePickers && + props.filePickers.map( + (picker, i) => + (networkConnected || !picker.requiresNetwork) && ( + { + let files; + try { + files = await picker.filePicker(); + } catch (e) { + console.error("Error loading from file picker", e); + } + loadMediaFiles(files || [], LOAD_STYLE.PLAY); + }} + label={picker.contextMenuName} + /> + ) + )} + +
+ {Object.keys(genWindows).map(i => ( + toggleWindow(i)} + hotkey={genWindows[i].hotkey} + /> + ))} +
+ +
+ + + + + + +
+ +
+ ); }); -const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => { - return { - close: () => dispatch(close()), - openMediaFileDialog: () => dispatch(openMediaFileDialog()), - loadMediaFiles: (tracks: Track[], loadStyle: LoadStyle) => - dispatch(loadMediaFiles(tracks, loadStyle)), - toggleGenWindow: (windowId: WindowId) => dispatch(toggleWindow(windowId)), - }; -}; - -export default connect( - mapStateToProps, - mapDispatchToProps -)(MainContextMenu); +export default MainContextMenu; diff --git a/js/selectors.ts b/js/selectors.ts index 8f172ab2..f755c3e3 100644 --- a/js/selectors.ts +++ b/js/selectors.ts @@ -745,3 +745,7 @@ export const getLineColorsImage = createSelector( export function getMarqueeStep(state: AppState): number { return state.display.marqueeStep; } + +export function getNetworkConnected(state: AppState): boolean { + return state.network.connected; +}