Type MiscMenu

js/components/ContextMenu.tsx

@@ -76,7 +76,7 @@ export const LinkNode = (props: LinkNodeProps) => (
 
 interface NodeProps {
   label: string;
-  checked: boolean;
+  checked?: boolean;
   hotkey?: string;
   className?: string;
   // TODO: Figure out how to do passthrough props
@@ -96,8 +96,8 @@ interface ContextMenuProps {
   children: React.ReactNode;
   offsetTop: number;
   offsetLeft: number;
-  top: number;
-  bottom: number;
+  top: boolean;
+  bottom: boolean;
   selected: boolean;
   zIndex: number;
 }

js/components/ContextMenuTarget.tsx

@@ -4,8 +4,9 @@ import ContextMenu from "./ContextMenu";
 interface Props {
   handle: React.ReactNode;
   children: React.ReactNode;
-  top: number;
-  bottom: number;
+  top?: boolean;
+  bottom?: boolean;
+  style?: React.CSSProperties;
 }
 interface State {
   selected: boolean;

js/components/PlaylistWindow/MiscMenu.js

@@ -1,69 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import {
-  reverseList,
-  randomizeList,
-  sortListByTitle,
-  downloadHtmlPlaylist
-} from "../../actionCreators";
-
-import { Hr, Node } from "../ContextMenu";
-import ContextMenuTarget from "../ContextMenuTarget";
-import PlaylistMenu from "./PlaylistMenu";
-
-/* eslint-disable no-alert */
-/* TODO: This should really be kitty-corner to the upper right hand corner of the MiscMenu */
-const SortContextMenu = props => (
-  <ContextMenuTarget
-    style={{ width: "100%", height: "100%" }}
-    top
-    handle={<div />}
-  >
-    <Node label="Sort list by title" onClick={props.sortListByTitle} />
-    <Hr />
-    <Node label="Reverse list" onClick={props.reverseList} />
-    <Node label="Randomize list" onClick={props.randomizeList} />
-  </ContextMenuTarget>
-);
-
-const ConnectedSortContextMenu = connect(
-  null,
-  {
-    reverseList,
-    randomizeList,
-    sortListByTitle
-  }
-)(SortContextMenu);
-
-const MiscOptionsContextMenu = props => (
-  <ContextMenuTarget
-    style={{ width: "100%", height: "100%" }}
-    top
-    handle={<div />}
-  >
-    <Node onClick={props.downloadHtmlPlaylist} label="Generate HTML playlist" />
-  </ContextMenuTarget>
-);
-
-const ConnectedMiscOptionsContextMenu = connect(
-  null,
-  { downloadHtmlPlaylist }
-)(MiscOptionsContextMenu);
-
-const MiscMenu = () => (
-  <PlaylistMenu id="playlist-misc-menu">
-    <div className="sort-list" onClick={e => e.stopPropagation()}>
-      <ConnectedSortContextMenu />
-    </div>
-    <div
-      className="file-info"
-      onClick={() => alert("Not supported in Webamp")}
-    />
-
-    <div className="misc-options" onClick={e => e.stopPropagation()}>
-      <ConnectedMiscOptionsContextMenu />
-    </div>
-  </PlaylistMenu>
-);
-
-export default MiscMenu;

js/components/PlaylistWindow/MiscMenu.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import PlaylistMenu from "./PlaylistMenu";
+import SortContextMenu from "./SortContextMenu";
+import { ConnectedMiscOptionsContextMenu } from "./MiscOptionsContextMenu";
+
+const MiscMenu = () => (
+  <PlaylistMenu id="playlist-misc-menu">
+    <div className="sort-list" onClick={e => e.stopPropagation()}>
+      <SortContextMenu />
+    </div>
+    <div
+      className="file-info"
+      onClick={() => alert("Not supported in Webamp")}
+    />
+
+    <div className="misc-options" onClick={e => e.stopPropagation()}>
+      <ConnectedMiscOptionsContextMenu />
+    </div>
+  </PlaylistMenu>
+);
+
+export default MiscMenu;

js/components/PlaylistWindow/MiscOptionsContextMenu.tsx

@@ -0,0 +1,29 @@
+import { connect } from "react-redux";
+import { Node } from "../ContextMenu";
+import ContextMenuTarget from "../ContextMenuTarget";
+import { Dispatch } from "../../types";
+import { downloadHtmlPlaylist } from "../../actionCreators";
+
+interface DispatchProps {
+  downloadHtmlPlaylist: () => void;
+}
+
+const MiscOptionsContextMenu = (props: DispatchProps) => (
+  <ContextMenuTarget
+    style={{ width: "100%", height: "100%" }}
+    top
+    handle={<div />}
+  >
+    <Node onClick={props.downloadHtmlPlaylist} label="Generate HTML playlist" />
+  </ContextMenuTarget>
+);
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
+  return {
+    downloadHtmlPlaylist: () => dispatch(downloadHtmlPlaylist())
+  };
+};
+export const ConnectedMiscOptionsContextMenu = connect(
+  null,
+  mapDispatchToProps
+)(MiscOptionsContextMenu);

js/components/PlaylistWindow/SortContextMenu.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { connect } from "react-redux";
+import {
+  reverseList,
+  randomizeList,
+  sortListByTitle
+} from "../../actionCreators";
+
+import { Hr, Node } from "../ContextMenu";
+import ContextMenuTarget from "../ContextMenuTarget";
+import { Dispatch } from "../../types";
+
+interface DispatchProps {
+  sortListByTitle: () => void;
+  reverseList: () => void;
+  randomizeList: () => void;
+}
+
+/* eslint-disable no-alert */
+/* TODO: This should really be kitty-corner to the upper right hand corner of the MiscMenu */
+const SortContextMenu = (props: DispatchProps) => (
+  <ContextMenuTarget
+    style={{ width: "100%", height: "100%" }}
+    top
+    handle={<div />}
+  >
+    <Node label="Sort list by title" onClick={props.sortListByTitle} />
+    <Hr />
+    <Node label="Reverse list" onClick={props.reverseList} />
+    <Node label="Randomize list" onClick={props.randomizeList} />
+  </ContextMenuTarget>
+);
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
+  return {
+    reverseList: () => dispatch(reverseList()),
+    randomizeList: () => dispatch(randomizeList()),
+    sortListByTitle: () => dispatch(sortListByTitle())
+  };
+};
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(SortContextMenu);