Split serialized state types into their own file

Author: captbaritone

js/actionCreators/index.ts

@@ -8,8 +8,9 @@ import {
   UNSET_FOCUS,
   LOAD_SERIALIZED_STATE
 } from "../actionTypes";
-import { Dispatchable, SerializedStateV1 } from "../types";
+import { Dispatchable } from "../types";
 import { ensureWindowsAreOnScreen } from "./windows";
+import { SerializedStateV1 } from "../serializedStates/v1Types";
 
 export {
   toggleDoubleSizeMode,
@@ -118,6 +119,7 @@ export function unsetFocus(): Dispatchable {
 }
 
 export function loadSerializedState(
+  // In the future this type should be the union of all versioned types.
   serializedState: SerializedStateV1
 ): Dispatchable {
   return dispatch => {

js/reducers/display.ts

@@ -27,6 +27,7 @@ import {
   LOAD_SERIALIZED_STATE
 } from "../actionTypes";
 import { DEFAULT_SKIN, VISUALIZER_ORDER } from "../constants";
+import { DisplaySerializedStateV1 } from "../serializedStates/v1Types";
 
 export interface DisplayState {
   additionalVisualizers: Array<string>;
@@ -49,19 +50,6 @@ export interface DisplayState {
   dummyVizData: null; // TODO: Figure out what kind of data this actually is.
 }
 
-export interface DisplaySerializedStateV1 {
-  visualizerStyle: number;
-  doubled: boolean;
-  llama: 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;
-}
-
 const defaultDisplayState = {
   doubled: false,
   marqueeStep: 0,

js/reducers/equalizer.ts

@@ -7,19 +7,14 @@ import {
   SET_EQ_OFF,
   LOAD_SERIALIZED_STATE
 } from "../actionTypes";
+import { EqualizerSerializedStateV1 } from "../serializedStates/v1Types";
 
 export interface EqualizerState {
   on: boolean;
   auto: boolean;
   sliders: Record<Slider, number>;
 }
 
-export interface EqualizerSerializedStateV1 {
-  on: boolean;
-  auto: boolean;
-  sliders: Record<Slider, number>;
-}
-
 const defaultState = {
   on: true,
   auto: false,

js/reducers/media.ts

@@ -17,6 +17,7 @@ import {
   LOAD_SERIALIZED_STATE
 } from "../actionTypes";
 import { TIME_MODE, MEDIA_STATUS } from "../constants";
+import { MediaSerializedStateV1 } from "../serializedStates/v1Types";
 
 export interface MediaState {
   timeMode: string; // TODO: Convert this to an enum
@@ -32,13 +33,6 @@ export interface MediaState {
   status: string | null; // TODO: Convert this to an enum
 }
 
-export interface MediaSerializedStateV1 {
-  volume: number;
-  balance: number;
-  shuffle: boolean;
-  repeat: boolean;
-}
-
 const defaultState = {
   timeMode: TIME_MODE.ELAPSED,
   timeElapsed: 0,

js/reducers/playlist.ts

@@ -28,9 +28,7 @@ import { shuffle, moveSelected, objectMap, objectFilter } from "../utils";
 
 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 };
+  tracks: { [id: string]: PlaylistTrack };
   lastSelectedIndex: number | null;
   currentTrack: number | null;
 }

js/reducers/windows.ts

@@ -14,6 +14,7 @@ import {
   RESET_WINDOW_SIZES
 } from "../actionTypes";
 import * as Utils from "../utils";
+import { WindowsSerializedStateV1 } from "../serializedStates/v1Types";
 
 export interface WindowPosition {
   x: number;
@@ -51,19 +52,6 @@ export interface WindowsState {
   browserWindowSize: { height: number; width: number };
 }
 
-interface SerializedWindow {
-  size: [number, number];
-  open: boolean;
-  hidden: boolean;
-  shade: boolean;
-  position: WindowPosition;
-}
-
-export interface WindowsSerializedStateV1 {
-  genWindows: { [windowId: string]: SerializedWindow };
-  focused: string;
-}
-
 const defaultWindowsState: WindowsState = {
   focused: WINDOWS.MAIN,
   genWindows: {

js/selectors.ts

@@ -5,7 +5,6 @@ import {
   WindowId,
   WindowInfo,
   LoadedURLTrack,
-  SerializedStateV1,
   WindowPositions
 } from "./types";
 import { createSelector } from "reselect";
@@ -26,6 +25,7 @@ import * as fromEqualizer from "./reducers/equalizer";
 import * as fromMedia from "./reducers/media";
 import * as fromWindows from "./reducers/windows";
 import { generateGraph } from "./resizeUtils";
+import { SerializedStateV1 } from "./serializedStates/v1Types";
 
 export const getSliders = (state: AppState) => state.equalizer.sliders;
 

js/serializedStates/v1Types.ts

@@ -0,0 +1,63 @@
+/**
+ * NOTE: This file must not import any other types
+ */
+
+export interface WindowsSerializedStateV1 {
+  genWindows: {
+    [windowId: string]: {
+      size: [number, number];
+      open: boolean;
+      hidden: boolean;
+      shade: boolean;
+      position: { x: number; y: number };
+    };
+  };
+  focused: string;
+}
+
+export interface DisplaySerializedStateV1 {
+  visualizerStyle: number;
+  doubled: boolean;
+  llama: boolean;
+  marqueeStep: number;
+  skinImages: { [sprite: string]: string };
+  skinCursors: { [cursor: string]: string } | null;
+  skinRegion: { [windowName: string]: string[] };
+  skinGenLetterWidths: { [letter: string]: number } | null;
+  skinColors: string[]; // Theoretically this could be a tuple of a specific length
+  skinPlaylistStyle: { [state: string]: string } | null;
+}
+
+export interface EqualizerSerializedStateV1 {
+  on: boolean;
+  auto: boolean;
+  sliders: Record<
+    | 60
+    | 170
+    | 310
+    | 600
+    | 1000
+    | 3000
+    | 6000
+    | 12000
+    | 14000
+    | 16000
+    | "preamp",
+    number
+  >;
+}
+
+export interface MediaSerializedStateV1 {
+  volume: number;
+  balance: number;
+  shuffle: boolean;
+  repeat: boolean;
+}
+
+export interface SerializedStateV1 {
+  version: 1;
+  windows: WindowsSerializedStateV1;
+  media: MediaSerializedStateV1;
+  display: DisplaySerializedStateV1;
+  equalizer: EqualizerSerializedStateV1;
+}

js/types.ts

@@ -1,18 +1,12 @@
 import { PlaylistState } from "./reducers/playlist";
 import { SettingsState } from "./reducers/settings";
 import { UserInputState } from "./reducers/userInput";
-import { MediaState, MediaSerializedStateV1 } from "./reducers/media";
-import { DisplayState, DisplaySerializedStateV1 } from "./reducers/display";
-import {
-  WindowsState,
-  WindowsSerializedStateV1,
-  WindowPositions
-} from "./reducers/windows";
-import {
-  EqualizerState,
-  EqualizerSerializedStateV1
-} from "./reducers/equalizer";
+import { MediaState } from "./reducers/media";
+import { DisplayState } from "./reducers/display";
+import { WindowsState, WindowPositions } from "./reducers/windows";
+import { EqualizerState } from "./reducers/equalizer";
 import { NetworkState } from "./reducers/network";
+import { SerializedStateV1 } from "./serializedStates/v1Types";
 
 export {
   WebampWindow,
@@ -483,11 +477,3 @@ export interface MiddlewareStore {
   dispatch: Dispatch;
   getState: GetState;
 }
-
-export interface SerializedStateV1 {
-  version: 1;
-  windows: WindowsSerializedStateV1;
-  media: MediaSerializedStateV1;
-  display: DisplaySerializedStateV1;
-  equalizer: EqualizerSerializedStateV1;
-}