From b8894a7e7cbc84879008447b75563c206c5eee69 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Thu, 11 Oct 2018 22:15:43 -0700
Subject: [PATCH] Type PlaylistWindow

---
 js/actionCreators/files.ts                    |  2 +-
 js/components/ContextMenu.tsx                 |  4 +-
 js/components/DropTarget.tsx                  |  5 +-
 .../PlaylistWindow/{index.js => index.tsx}    | 75 ++++++++++++++-----
 4 files changed, 60 insertions(+), 26 deletions(-)
 rename js/components/PlaylistWindow/{index.js => index.tsx} (75%)

diff --git a/js/actionCreators/files.ts b/js/actionCreators/files.ts
index b930f745..e396b656 100644
--- a/js/actionCreators/files.ts
+++ b/js/actionCreators/files.ts
@@ -70,7 +70,7 @@ const SKIN_FILENAME_MATCHER = new RegExp("(wsz|zip)$", "i");
 const EQF_FILENAME_MATCHER = new RegExp("eqf$", "i");
 export function loadFilesFromReferences(
   fileReferences: FileList,
-  loadStyle = LOAD_STYLE.PLAY,
+  loadStyle: LoadStyle | null = LOAD_STYLE.PLAY,
   atIndex: number | undefined = undefined
 ): Dispatchable {
   return dispatch => {
diff --git a/js/components/ContextMenu.tsx b/js/components/ContextMenu.tsx
index 6aedc6f5..622b2bd8 100644
--- a/js/components/ContextMenu.tsx
+++ b/js/components/ContextMenu.tsx
@@ -96,8 +96,8 @@ interface ContextMenuProps {
   children: React.ReactNode;
   offsetTop: number;
   offsetLeft: number;
-  top: boolean;
-  bottom: boolean;
+  top?: boolean;
+  bottom?: boolean;
   selected: boolean;
   zIndex: number;
 }
diff --git a/js/components/DropTarget.tsx b/js/components/DropTarget.tsx
index 080c7ee0..5c9c27e8 100644
--- a/js/components/DropTarget.tsx
+++ b/js/components/DropTarget.tsx
@@ -5,8 +5,7 @@ interface Coord {
   y: number;
 }
 
-interface Props {
-  loadFilesFromReferences: () => void;
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
   handleDrop(e: React.DragEvent<HTMLDivElement>, coord: Coord): void;
 }
 
@@ -31,8 +30,6 @@ export default class DropTarget extends React.Component<Props> {
 
   render() {
     const {
-      // eslint-disable-next-line no-shadow, no-unused-vars
-      loadFilesFromReferences,
       // eslint-disable-next-line no-shadow, no-unused-vars
       handleDrop,
       ...passThroughProps
diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.tsx
similarity index 75%
rename from js/components/PlaylistWindow/index.js
rename to js/components/PlaylistWindow/index.tsx
index 9a5fef4c..88d6a0ee 100644
--- a/js/components/PlaylistWindow/index.js
+++ b/js/components/PlaylistWindow/index.tsx
@@ -36,9 +36,44 @@ import TrackList from "./TrackList";
 import ScrollBar from "./ScrollBar";
 
 import "../../../css/playlist-window.css";
+import { AppState, PlaylistStyle, Dispatch } from "../../types";
 
-class PlaylistWindow extends React.Component {
-  _handleDrop = (e, targetCoords) => {
+interface StateProps {
+  offset: number;
+  maxTrackIndex: number;
+  playlistWindowPixelSize: { width: number; height: number };
+  focused: string;
+  skinPlaylistStyle: PlaylistStyle;
+  playlistSize: [number, number];
+  playlistShade: boolean;
+  duration: number | null;
+}
+
+interface DispatchProps {
+  focusPlaylist(): void;
+  close(): void;
+  toggleShade(): void;
+  toggleVisualizerStyle(): void;
+  scrollUpFourTracks(): void;
+  scrollDownFourTracks(): void;
+  loadFilesFromReferences(
+    e: React.DragEvent<HTMLDivElement>,
+    startIndex: number
+  ): void;
+  scrollVolume(e: React.WheelEvent<HTMLDivElement>): void;
+}
+
+interface OwnProps {
+  analyser: AnalyserNode;
+}
+
+type Props = StateProps & DispatchProps & OwnProps;
+
+class PlaylistWindow extends React.Component<Props> {
+  _handleDrop = (
+    e: React.DragEvent<HTMLDivElement>,
+    targetCoords: { x: number; y: number }
+  ) => {
     const top = e.clientY - targetCoords.y;
     const atIndex = clamp(
       this.props.offset + Math.round((top - 23) / TRACK_HEIGHT),
@@ -147,25 +182,27 @@ class PlaylistWindow extends React.Component {
   }
 }
 
-const mapDispatchToProps = {
-  focusPlaylist: () => ({
-    type: SET_FOCUSED_WINDOW,
-    window: WINDOWS.PLAYLIST
-  }),
-  close: () => closeWindow("playlist"),
-  toggleShade: togglePlaylistShadeMode,
-  toggleVisualizerStyle,
-  scrollUpFourTracks,
-  scrollDownFourTracks,
-  loadFilesFromReferences: (e, startIndex) =>
-    loadFilesFromReferences(e.dataTransfer.files, null, startIndex),
-  scrollVolume
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
+  return {
+    focusPlaylist: () => ({
+      type: SET_FOCUSED_WINDOW,
+      window: WINDOWS.PLAYLIST
+    }),
+    close: () => closeWindow("playlist"),
+    toggleShade: togglePlaylistShadeMode,
+    toggleVisualizerStyle,
+    scrollUpFourTracks,
+    scrollDownFourTracks,
+    loadFilesFromReferences: (e, startIndex) =>
+      loadFilesFromReferences(e.dataTransfer.files, null, startIndex),
+    scrollVolume
+  };
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: AppState): StateProps => {
   const {
     windows: { focused },
-    media: { duration },
+    media: { length },
     playlist: { trackOrder }
   } = state;
 
@@ -176,8 +213,8 @@ const mapStateToProps = state => {
     focused,
     skinPlaylistStyle: getSkinPlaylistStyle(state),
     playlistSize: getWindowSize(state)("playlist"),
-    playlistShade: getWindowShade(state)("playlist"),
-    duration
+    playlistShade: Boolean(getWindowShade(state)("playlist")),
+    duration: length
   };
 };