Move reduer state types into reducers

js/reducers/display.ts

@@ -1,4 +1,11 @@
-import { DisplayState, Action } from "../types";
+import {
+  Action,
+  SkinImages,
+  Cursors,
+  SkinRegion,
+  GenLetterWidths,
+  PlaylistStyle
+} from "../types";
 import { createSelector } from "reselect";
 
 import {
@@ -20,17 +27,26 @@ import {
 } from "../actionTypes";
 import { DEFAULT_SKIN, VISUALIZER_ORDER } from "../constants";
 
-export const getVisualizationOrder = (state: DisplayState): Array<string> => {
-  return [...state.additionalVisualizers, ...VISUALIZER_ORDER];
-};
-
-export const getVisualizerStyle = createSelector(
-  getVisualizationOrder,
-  state => state.visualizerStyle,
-  (visualizationOrder, visualizationStyle) => {
-    return visualizationOrder[visualizationStyle];
-  }
-);
+export interface DisplayState {
+  additionalVisualizers: Array<string>;
+  visualizerStyle: number;
+  doubled: boolean;
+  llama: boolean;
+  disableMarquee: boolean;
+  marqueeStep: number;
+  skinImages: SkinImages;
+  skinCursors: Cursors | null;
+  skinRegion: SkinRegion;
+  skinGenLetterWidths: GenLetterWidths | null;
+  skinColors: string[]; // Theoretically this could be a tuple of a specific length
+  skinPlaylistStyle: PlaylistStyle | null;
+  working: boolean;
+  closed: boolean;
+  loading: boolean;
+  playlistScrollPosition: number;
+  zIndex: number;
+  dummyVizData: null; // TODO: Figure out what kind of data this actually is.
+}
 
 const defaultDisplayState = {
   doubled: false,
@@ -112,3 +128,15 @@ const display = (
   }
 };
 export default display;
+
+export const getVisualizationOrder = (state: DisplayState): Array<string> => {
+  return [...state.additionalVisualizers, ...VISUALIZER_ORDER];
+};
+
+export const getVisualizerStyle = createSelector(
+  getVisualizationOrder,
+  state => state.visualizerStyle,
+  (visualizationOrder, visualizationStyle) => {
+    return visualizationOrder[visualizationStyle];
+  }
+);

js/reducers/equalizer.ts

@@ -1,4 +1,4 @@
-import { EqualizerState, Action } from "./../types";
+import { Slider, Action } from "./../types";
 
 import { BANDS } from "../constants";
 import {
@@ -8,6 +8,12 @@ import {
   SET_EQ_OFF
 } from "../actionTypes";
 
+export interface EqualizerState {
+  on: boolean;
+  auto: boolean;
+  sliders: Record<Slider, number>;
+}
+
 const defaultState = {
   on: true,
   auto: false,

js/reducers/media.ts

@@ -1,4 +1,4 @@
-import { MediaState, Action } from "../types";
+import { Action } from "../types";
 import {
   PLAY,
   STOP,
@@ -17,6 +17,20 @@ import {
 } from "../actionTypes";
 import { TIME_MODE, MEDIA_STATUS } from "../constants";
 
+export interface MediaState {
+  timeMode: string; // TODO: Convert this to an enum
+  timeElapsed: number;
+  length: number | null;
+  kbps: string | null;
+  khz: string | null;
+  volume: number;
+  balance: number;
+  channels: number | null; // TODO: Convert this to an enum
+  shuffle: boolean;
+  repeat: boolean;
+  status: string | null; // TODO: Convert this to an enum
+}
+
 const defaultState = {
   timeMode: TIME_MODE.ELAPSED,
   timeElapsed: 0,

js/reducers/network.ts

@@ -1,6 +1,10 @@
-import { Action, NetworkState } from "../types";
+import { Action } from "../types";
 import { NETWORK_CONNECTED, NETWORK_DISCONNECTED } from "../actionTypes";
 
+export interface NetworkState {
+  connected: boolean;
+}
+
 const network = (
   state: NetworkState = { connected: true },
   action: Action

js/reducers/playlist.ts

@@ -1,4 +1,4 @@
-import { PlaylistState, PlaylistTrack, Action } from "../types";
+import { PlaylistTrack, Action } from "../types";
 import {
   SET_MEDIA,
   CLICKED_TRACK,
@@ -26,7 +26,16 @@ import { MEDIA_TAG_REQUEST_STATUS } from "../constants";
 import { filenameFromUrl } from "../fileUtils";
 import { shuffle, moveSelected, objectMap, objectFilter } from "../utils";
 
-const defaultPlaylistState = {
+export interface PlaylistState {
+  trackOrder: number[];
+  // https://github.com/Microsoft/TypeScript/pull/12253#issuecomment-263132208
+  // TODO: Using numbers for keys is kinda annoying. Consider retyping as string
+  tracks: { [id: number]: PlaylistTrack };
+  lastSelectedIndex: number | null;
+  currentTrack: number | null;
+}
+
+const defaultPlaylistState: PlaylistState = {
   trackOrder: [],
   currentTrack: null,
   tracks: {},

js/reducers/settings.ts

@@ -1,6 +1,10 @@
-import { Action, SettingsState } from "../types";
+import { Action, Skin } from "../types";
 import { SET_AVAILABLE_SKINS } from "../actionTypes";
 
+export interface SettingsState {
+  availableSkins: Array<Skin>;
+}
+
 const defaultSettingsState = {
   availableSkins: []
 };

js/reducers/userInput.ts

@@ -1,4 +1,4 @@
-import { Action, UserInputState } from "../types";
+import { Action, Band } from "../types";
 import {
   SET_FOCUS,
   SET_BAND_FOCUS,
@@ -8,6 +8,13 @@ import {
   UNSET_USER_MESSAGE
 } from "../actionTypes";
 
+export interface UserInputState {
+  focus: string | null; // TODO: Convert this to an enum?
+  bandFocused: Band | null;
+  scrubPosition: number;
+  userMessage: string | null;
+}
+
 const defaultUserInput = {
   focus: null,
   bandFocused: null,

js/reducers/windows.ts

@@ -1,4 +1,4 @@
-import { WindowState, Action } from "../types";
+import { WebampWindow, WindowPositions, Action } from "../types";
 import { WINDOWS } from "../constants";
 import {
   SET_FOCUSED_WINDOW,
@@ -11,6 +11,12 @@ import {
   TOGGLE_WINDOW_SHADE_MODE
 } from "../actionTypes";
 
+export interface WindowState {
+  focused: string;
+  genWindows: { [name: string]: WebampWindow };
+  positions: WindowPositions;
+}
+
 const defaultWindowsState: WindowState = {
   focused: WINDOWS.MAIN,
   genWindows: {

js/types.ts

@@ -1,4 +1,13 @@
-type Skin = {
+import { PlaylistState } from "./reducers/playlist";
+import { SettingsState } from "./reducers/settings";
+import { UserInputState } from "./reducers/userInput";
+import { MediaState } from "./reducers/media";
+import { DisplayState } from "./reducers/display";
+import { WindowState } from "./reducers/windows";
+import { EqualizerState } from "./reducers/equalizer";
+import { NetworkState } from "./reducers/network";
+
+export type Skin = {
   url: string;
   name: string;
 };
@@ -19,18 +28,18 @@ export type Slider = Band | "preamp";
 
 // TODO: Use a type to ensure these keys mirror the CURSORS constant in
 // skinParser.js
-type Cursors = { [cursor: string]: string };
+export type Cursors = { [cursor: string]: string };
 
-type GenLetterWidths = { [letter: string]: number };
+export type GenLetterWidths = { [letter: string]: number };
 
 // TODO: Use a type to ensure the keys are one of the known values in PLEDIT.txt
-type PlaylistStyle = { [state: string]: string };
+export type PlaylistStyle = { [state: string]: string };
 
 // TODO: Type these keys.
-type SkinImages = { [sprite: string]: string };
+export type SkinImages = { [sprite: string]: string };
 
 // TODO: type these keys
-type SkinRegion = { [windowName: string]: string[] };
+export type SkinRegion = { [windowName: string]: string[] };
 
 export type WindowId = string;
 
@@ -329,62 +338,6 @@ export type Action =
       type: "MINIMIZE_WINAMP";
     };
 
-export interface SettingsState {
-  availableSkins: Array<Skin>;
-}
-
-export interface NetworkState {
-  connected: boolean;
-}
-
-export interface MediaState {
-  timeMode: string; // TODO: Convert this to an enum
-  timeElapsed: number;
-  length: number | null;
-  kbps: string | null;
-  khz: string | null;
-  volume: number;
-  balance: number;
-  channels: number | null; // TODO: Convert this to an enum
-  shuffle: boolean;
-  repeat: boolean;
-  status: string | null; // TODO: Convert this to an enum
-}
-
-export interface UserInputState {
-  focus: string | null; // TODO: Convert this to an enum?
-  bandFocused: Band | null;
-  scrubPosition: number;
-  userMessage: string | null;
-}
-
-export interface DisplayState {
-  additionalVisualizers: Array<string>;
-  visualizerStyle: number;
-  doubled: boolean;
-  llama: boolean;
-  disableMarquee: boolean;
-  marqueeStep: number;
-  skinImages: SkinImages;
-  skinCursors: Cursors | null;
-  skinRegion: SkinRegion;
-  skinGenLetterWidths: GenLetterWidths | null;
-  skinColors: string[]; // Theoretically this could be a tuple of a specific length
-  skinPlaylistStyle: PlaylistStyle | null;
-  working: boolean;
-  closed: boolean;
-  loading: boolean;
-  playlistScrollPosition: number;
-  zIndex: number;
-  dummyVizData: null; // TODO: Figure out what kind of data this actually is.
-}
-
-export interface EqualizerState {
-  on: boolean;
-  auto: boolean;
-  sliders: Record<Slider, number>;
-}
-
 export interface WebampWindow {
   title: string;
   size: [number, number];
@@ -406,12 +359,6 @@ export interface WindowInfo {
   y: number;
 }
 
-export interface WindowState {
-  focused: string;
-  genWindows: { [name: string]: WebampWindow };
-  positions: WindowPositions;
-}
-
 export type MediaTagRequestStatus =
   | "INITIALIZED"
   | "FAILED"
@@ -490,15 +437,6 @@ export interface PlaylistTrack {
   duration: number | null;
 }
 
-export interface PlaylistState {
-  trackOrder: number[];
-  // https://github.com/Microsoft/TypeScript/pull/12253#issuecomment-263132208
-  // TODO: Using numbers for keys is kinda annoying. Consider retyping as string
-  tracks: { [id: number]: PlaylistTrack };
-  lastSelectedIndex: number | null;
-  currentTrack: number | null;
-}
-
 export interface AppState {
   userInput: UserInputState;
   windows: WindowState;