Use hooks for main context window

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) => (
-  <React.Fragment>
-    <LinkNode
-      href="https://webamp.org/about"
-      target="_blank"
-      label="Webamp..."
-    />
-    <Hr />
-    <Parent label="Play">
-      <Node onClick={props.openMediaFileDialog} label="File..." hotkey="L" />
-      {props.filePickers &&
-        props.filePickers.map(
-          (picker, i) =>
-            (props.networkConnected || !picker.requiresNetwork) && (
-              <Node
-                key={i}
-                onClick={async () => {
-                  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}
-              />
-            )
-        )}
-    </Parent>
-    <Hr />
-    {Object.keys(props.genWindows).map(i => (
-      <Node
-        key={i}
-        label={props.genWindows[i].title}
-        checked={props.genWindows[i].open}
-        onClick={() => 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 (
+    <React.Fragment>
+      <LinkNode
+        href="https://webamp.org/about"
+        target="_blank"
+        label="Webamp..."
       />
-    ))}
-    <Hr />
-    <SkinsContextMenu />
-    <Hr />
-    <Parent label="Options">
-      <OptionsContextMenu />
-    </Parent>
-    <Parent label="Playback">
-      <PlaybackContextMenu />
-    </Parent>
-    <Hr />
-    <Node onClick={props.close} label="Exit" />
-  </React.Fragment>
-);
-
-const mapStateToProps = (state: AppState): StateProps => ({
-  networkConnected: state.network.connected,
-  genWindows: getGenWindows(state),
+      <Hr />
+      <Parent label="Play">
+        <Node onClick={openMediaFileDialog} label="File..." hotkey="L" />
+        {props.filePickers &&
+          props.filePickers.map(
+            (picker, i) =>
+              (networkConnected || !picker.requiresNetwork) && (
+                <Node
+                  key={i}
+                  onClick={async () => {
+                    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}
+                />
+              )
+          )}
+      </Parent>
+      <Hr />
+      {Object.keys(genWindows).map(i => (
+        <Node
+          key={i}
+          label={genWindows[i].title}
+          checked={genWindows[i].open}
+          onClick={() => toggleWindow(i)}
+          hotkey={genWindows[i].hotkey}
+        />
+      ))}
+      <Hr />
+      <SkinsContextMenu />
+      <Hr />
+      <Parent label="Options">
+        <OptionsContextMenu />
+      </Parent>
+      <Parent label="Playback">
+        <PlaybackContextMenu />
+      </Parent>
+      <Hr />
+      <Node onClick={close} label="Exit" />
+    </React.Fragment>
+  );
 });
 
-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;

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;
+}