Add types.string and types.json

config/rzl.js

@@ -1,5 +1,6 @@
 // @flow
-import type { Config } from "config/types";
+import type { Config } from "config/flowtypes";
+import * as types from "config/types";
 import { hex, rgb, rgba, rainbow } from "config/colors";
 import { esper_topics, esper_statistics } from "./utils";
 
@@ -72,28 +73,28 @@ const config : Config = {
         command: "/service/onkyo/command",
         defaultValue: "PWR00",
         values: { off: "PWR00", on: "PWR01" },
-        type: msg => JSON.parse(msg.toString()).onkyo_raw
+        type: types.json("onkyo_raw")
       },
       onkyo_mute: {
         state: "/service/onkyo/status/audio-muting",
         command: "/service/onkyo/command",
         defaultValue: "AMT00",
         values: { off: "AMT00", on: "AMT01" },
-        type: msg => JSON.parse(msg.toString()).onkyo_raw
+        type: types.json("onkyo_raw")
       },
       onkyo_volume: {
         state: "/service/onkyo/status/volume",
         command: "/service/onkyo/set/volume",
         defaultValue: 0,
         values: {},
-        type: msg => JSON.parse(msg.toString()).val
+        type: types.json("val")
       },
       onkyo_inputs: {
         state: "/service/onkyo/status/input-selector",
         command: "/service/onkyo/command",
         defaultValue: "SLI00",
         values: { tisch: "SLI11", chromecast: "SLI01", pult: "SLI10", netzwerk: "SLI2B", front: "SLI03" },
-        type: msg => JSON.parse(msg.toString()).onkyo_raw
+        type: types.json("onkyo_raw")
       },
       onkyo_radios: {
         state: "/service/onkyo/status/latest-NPR",

src/components/App.js

@@ -6,7 +6,7 @@ import filter from "lodash/filter";
 import keys from "lodash/keys";
 import merge from "lodash/merge";
 
-import type { Config, Control, Topics } from "config/types";
+import type { Config, Control, Topics } from "config/flowtypes";
 
 import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
 import createMuiTheme from "material-ui/styles/createMuiTheme";

src/components/ControlMap.js

@@ -6,7 +6,7 @@ import map from "lodash/map";
 import mapValues from "lodash/mapValues";
 import parseIconName, { controlGetIcon } from "utils/parseIconName";
 
-import type { Controls, Control } from "config/types";
+import type { Controls, Control } from "config/flowtypes";
 
 export type Point = [number, number];
 

src/components/SideBar.js

@@ -10,7 +10,7 @@ import Toolbar from "material-ui/Toolbar";
 import List from "material-ui/List";
 import { renderIcon } from "utils/parseIconName";
 
-import type { Control } from "config/types";
+import type { Control } from "config/flowtypes";
 
 export type SideBarProps = {
   control: ?Control,

src/components/UiItemList/UiItem.js

@@ -18,7 +18,7 @@ import { LinearProgress } from "material-ui/Progress";
 import type {
   UIControl, UIToggle, UIDropDown, UILink,
   UISection, UIText, UIProgress
-} from "config/types";
+} from "config/flowtypes";
 
 import keyOf from "utils/keyOf";
 import { getInternals, getActuals } from "utils/state";

src/components/UiItemList/index.js

@@ -8,7 +8,7 @@ import {
 } from "material-ui/List";
 import { renderIcon } from "utils/parseIconName";
 
-import type { ControlUI, UIControl, UISlider } from "config/types";
+import type { ControlUI, UIControl, UISlider } from "config/flowtypes";
 
 // TODO: Use something else
 import Slider from "material-ui-old/Slider";

src/config/flowtypes.js

@@ -0,0 +1,137 @@
+// @flow
+import type { Color } from "config/colors";
+
+export type TopicType = (msg: Buffer) => any;
+
+export type Topic = {
+  state: string,
+  command: string,
+  defaultValue: Actual,
+  values: Map<Internal, Actual>,
+  type?: TopicType
+};
+export type Topics = Map<string, Topic>;
+
+export type TopicDependentOption<T> = (
+    internal: Internal, actual: Actual, state: State
+  ) => T;
+export type StateDependentOption<T> = (
+    internals: Map<string, Internal>, actuals: Map<string, Actual>, state: State
+  ) => T;
+
+export interface UIControl {
+  +type: string,
+  +text: string,
+  +topic: string
+}
+
+export interface Enableable {
+  enableCondition?: TopicDependentOption<boolean>
+}
+
+export type UIToggle = $ReadOnly<{|
+  type: "toggle",
+  text: string,
+  topic: string,
+  icon?: string,
+  enableCondition?: TopicDependentOption<boolean>,
+  on?: string,
+  off?: string,
+  toggled?: TopicDependentOption<boolean>
+|}>;
+
+export type UIDropDown = $ReadOnly<{|
+  type: "dropDown",
+  text: string,
+  topic: string,
+  icon?: string,
+  enableCondition?: TopicDependentOption<boolean>,
+  options: Map<string, any>,
+  renderValue?: (value: string) => string
+|}>;
+
+export type UISlider = $ReadOnly<{|
+  type: "slider",
+  text: string,
+  topic: string,
+  icon?: string,
+  enableCondition?: TopicDependentOption<boolean>,
+  min?: number,
+  max?: number,
+  step?: number
+|}>;
+
+export type UISection = $ReadOnly<{|
+  type: "section",
+  text: string
+|}>;
+
+export type UILink = $ReadOnly<{|
+  type: "link",
+  text: string,
+  link: string,
+  enableCondition?: StateDependentOption<boolean>,
+
+  // TODO: check if both the following options are implemented
+  icon?: string
+|}>;
+
+export type UIText = $ReadOnly<{|
+  type: "text",
+  text: string,
+  topic: string,
+  icon?: string
+|}>;
+
+export type UIProgress = $ReadOnly<{|
+  type: "progress",
+  text: string,
+  topic: string,
+  icon?: string,
+  min?: number,
+  max?: number
+|}>;
+
+export type ControlUI =
+    UIToggle
+  | UIDropDown
+  | UISlider
+  | UISection
+  | UILink
+  | UIText
+  | UIProgress
+
+export type Control = {
+  name: string,
+  position: [number, number],
+  icon: string | (
+      internals: Map<string, Internal>,
+      actuals: Map<string, Actual>,
+      state: State
+    ) => string,
+  iconColor?: (
+      internals: Map<string, Internal>,
+      actuals: Map<string, Actual>,
+      state: State
+    ) => Color,
+  ui: Array<ControlUI>
+};
+export type Controls = Map<string, Control>;
+
+export type Space = {
+  name: string,
+  color: "red" | "pink" | "purple"
+        | "deepPurple" | "indigo" | "blue"
+        | "lightBlue" | "cyan" | "teal"
+        | "green" | "lightGreen" | "lime"
+        | "yellow" | "amber" | "orange"
+        | "deepOrange" | "brown" | "grey" | "blueGrey",
+  mqtt: string
+};
+
+export type Config = {
+  space: Space,
+  topics: Topics | Array<Topics>,
+  controls: Controls,
+  layers: Array<Layer>
+};

src/config/types.js

@@ -1,135 +1,8 @@
 // @flow
-import type { Color } from "config/colors";
+import type { TopicType } from "config/flowtypes";
 
-export type Topic = {
+export const string: TopicType = msg => msg.toString();
-  state: string,
+export const json = (path: string, innerType?: TopicType): TopicType => {
-  command: string,
+  const parseAgain = innerType == null ? x => x : innerType;
-  defaultValue: Actual,
+  return msg => parseAgain(JSON.parse(msg.toString())[path]);
-  values: Map<Internal, Actual>,
-  type?: (msg: Buffer) => any
-};
-export type Topics = Map<string, Topic>;
-
-export type TopicDependentOption<T> = (
-    internal: Internal, actual: Actual, state: State
-  ) => T;
-export type StateDependentOption<T> = (
-    internals: Map<string, Internal>, actuals: Map<string, Actual>, state: State
-  ) => T;
-
-export interface UIControl {
-  +type: string,
-  +text: string,
-  +topic: string
-}
-
-export interface Enableable {
-  enableCondition?: TopicDependentOption<boolean>
-}
-
-export type UIToggle = $ReadOnly<{|
-  type: "toggle",
-  text: string,
-  topic: string,
-  icon?: string,
-  enableCondition?: TopicDependentOption<boolean>,
-  on?: string,
-  off?: string,
-  toggled?: TopicDependentOption<boolean>
-|}>;
-
-export type UIDropDown = $ReadOnly<{|
-  type: "dropDown",
-  text: string,
-  topic: string,
-  icon?: string,
-  enableCondition?: TopicDependentOption<boolean>,
-  options: Map<string, any>,
-  renderValue?: (value: string) => string
-|}>;
-
-export type UISlider = $ReadOnly<{|
-  type: "slider",
-  text: string,
-  topic: string,
-  icon?: string,
-  enableCondition?: TopicDependentOption<boolean>,
-  min?: number,
-  max?: number,
-  step?: number
-|}>;
-
-export type UISection = $ReadOnly<{|
-  type: "section",
-  text: string
-|}>;
-
-export type UILink = $ReadOnly<{|
-  type: "link",
-  text: string,
-  link: string,
-  enableCondition?: StateDependentOption<boolean>,
-
-  // TODO: check if both the following options are implemented
-  icon?: string
-|}>;
-
-export type UIText = $ReadOnly<{|
-  type: "text",
-  text: string,
-  topic: string,
-  icon?: string
-|}>;
-
-export type UIProgress = $ReadOnly<{|
-  type: "progress",
-  text: string,
-  topic: string,
-  icon?: string,
-  min?: number,
-  max?: number
-|}>;
-
-export type ControlUI =
-    UIToggle
-  | UIDropDown
-  | UISlider
-  | UISection
-  | UILink
-  | UIText
-  | UIProgress
-
-export type Control = {
-  name: string,
-  position: [number, number],
-  icon: string | (
-      internals: Map<string, Internal>,
-      actuals: Map<string, Actual>,
-      state: State
-    ) => string,
-  iconColor?: (
-      internals: Map<string, Internal>,
-      actuals: Map<string, Actual>,
-      state: State
-    ) => Color,
-  ui: Array<ControlUI>
-};
-export type Controls = Map<string, Control>;
-
-export type Space = {
-  name: string,
-  color: "red" | "pink" | "purple"
-        | "deepPurple" | "indigo" | "blue"
-        | "lightBlue" | "cyan" | "teal"
-        | "green" | "lightGreen" | "lime"
-        | "yellow" | "amber" | "orange"
-        | "deepOrange" | "brown" | "grey" | "blueGrey",
-  mqtt: string
-};
-
-export type Config = {
-  space: Space,
-  topics: Topics | Array<Topics>,
-  controls: Controls,
-  layers: Array<Layer>
 };

src/utils/parseIconName.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { getInternals, getActuals } from "utils/state";
 
-import type { Control } from "config/types";
+import type { Control } from "config/flowtypes";
 
 export default function parseIconName(name: string): string {
   return `mdi ${name.split(" ").map((icon) => "mdi-".concat(icon)).join(" ")}`;