v0.2.0

.eslintrc

@@ -27,6 +27,8 @@
     "promise/always-return": "error",
     "promise/catch-or-return": "error",
     "promise/no-native": "off",
+    "react/no-will-update-set-state": "warn",
+    "react/no-did-update-set-state": "off",
     "react/sort-comp": [
       "error",
       {
@@ -45,7 +47,8 @@
       { "extensions": [".js", ".jsx"] }
     ],
     "react/prefer-stateless-function": "off",
-    "linebreak-style": "off"
+    "linebreak-style": "off",
+    "jsx-a11y/click-events-have-key-events": "off"
   },
   "plugins": ["flowtype", "import", "promise", "compat", "react"],
   "settings": {

.npmrc

@@ -1,2 +1,2 @@
 registry=http://registry.npmjs.org/
-package-lock=false
+package-lock=true

app/components/AnalyzeComponent.js

@@ -26,7 +26,7 @@ interface Props {
   jupyterActions: Object;
 }
 
-export default class Analyze extends Component<Props, State> {
+export default class Analyze extends Component<Props> {
   props: Props;
   handleAnalyze: () => void;
   handleChannelDropdownChange: (Object, Object) => void;

app/components/CollectComponent/ConnectModal.js

@@ -37,6 +37,11 @@ export default class ConnectModal extends Component<Props, State> {
   handleConnect: () => void;
   handleSearch: () => void;
   handleStartTutorial: () => void;
+
+  static getDeviceName(device: any) {
+    return isNil(device.name) ? device.id : device.name;
+  }
+
   constructor(props: Props) {
     super(props);
     this.state = {
@@ -69,10 +74,6 @@ export default class ConnectModal extends Component<Props, State> {
     }
   }
 
-  getDeviceName(device: any) {
-    return isNil(device.name) ? device.id : device.name;
-  }
-
   handleSearch() {
     this.setState({ tutorialProgress: 0 });
     this.props.deviceActions.setDeviceAvailability(
@@ -92,8 +93,8 @@ export default class ConnectModal extends Component<Props, State> {
     return (
       <Segment basic>
         <List divided relaxed inverted>
-          {this.props.availableDevices.map((device, index) => (
-            <List.Item className={styles.deviceItem} key={index}>
+          {this.props.availableDevices.map(device => (
+            <List.Item className={styles.deviceItem} key={device.id}>
               <List.Icon
                 link
                 name={
@@ -255,7 +256,7 @@ export default class ConnectModal extends Component<Props, State> {
               tabIndex={0}
               onClick={() => this.handleTutorialProgress(1)}
             >
-              Don't see your device?
+              Don&#39;t see your device?
             </a>
           </Modal.Content>
         </React.Fragment>

app/components/CollectComponent/PreTestComponent.js

@@ -8,7 +8,6 @@ import styles from "../styles/collect.css";
 import {
   PLOTTING_INTERVAL,
   CONNECTION_STATUS,
-  SIGNAL_QUALITY
 } from "../../constants/constants";
 
 interface Props {

app/components/CollectComponent/index.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from "react";
-import { Modal, Button, Ref, Segment } from "semantic-ui-react";
+import { Modal, Button, Segment } from "semantic-ui-react";
 import styles from "../styles/common.css";
 
 import {
@@ -10,7 +10,6 @@ import {
   DEVICE_AVAILABILITY
 } from "../../constants/constants";
 import { MainTimeline, Trial, Timeline } from "../../constants/interfaces";
-import { isNil } from "lodash";
 import PreTestComponent from "./PreTestComponent";
 import ConnectModal from "./ConnectModal";
 import RunComponent from "./RunComponent";
@@ -44,8 +43,8 @@ export default class Collect extends Component<Props, State> {
   state: State;
   handleStartConnect: () => void;
   handleConnectModalClose: () => void;
-  handleConnectModalOpen: () => void;
-  handleConnectModalClose: () => void;
+  handleRunComponentOpen: () => void;
+  handleRunComponentClose: () => void;
 
   constructor(props: Props) {
     super(props);

app/components/DesignComponent/index.js

@@ -11,7 +11,7 @@ import {
 } from "semantic-ui-react";
 import { isNil } from "lodash";
 import styles from "../styles/common.css";
-import { EXPERIMENTS, SCREENS } from "../../constants/constants";
+import { EXPERIMENTS } from "../../constants/constants";
 import { MainTimeline, Trial, Timeline } from "../../constants/interfaces";
 import PreviewExperimentComponent from "../PreviewExperimentComponent";
 import faceHouseIcon from "../../assets/face_house/face_house_icon.jpg";
@@ -32,7 +32,7 @@ interface Props {
 }
 
 interface State {
-  activeStep: number;
+  activeStep: string;
   isPreviewing: boolean;
 }
 
@@ -41,6 +41,7 @@ export default class Design extends Component<Props, State> {
   state: State;
   handleStepClick: (Object, Object) => void;
   handleStartExperiment: Object => void;
+  handlePreview: () => void;
 
   constructor(props: Props) {
     super(props);

app/components/PreviewExperimentComponent.js

@@ -4,13 +4,11 @@ import { Experiment } from "jspsych-react";
 import { Segment } from "semantic-ui-react";
 import callbackHTMLDisplay from "../utils/jspsych/plugins/callback-html-display";
 import callbackImageDisplay from "../utils/jspsych/plugins/callback-image-display";
-import { FILE_TYPES } from "../constants/constants";
 import {
   parseTimeline,
   instantiateTimeline,
   getImages
 } from "../utils/jspsych/functions";
-import { loadFileFromSystemDialog } from "../utils/filesystem/select";
 import { MainTimeline, Trial, Timeline } from "../constants/interfaces";
 
 interface Props {
@@ -24,7 +22,7 @@ export default class PreviewExperimentComponent extends Component<Props> {
   props: Props;
   handleTimeline: () => void;
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     this.handleTimeline = this.handleTimeline.bind(this);
   }
@@ -36,9 +34,9 @@ export default class PreviewExperimentComponent extends Component<Props> {
         this.props.trials,
         this.props.timelines
       ),
-      (value, time) => console.log("event ", value), // event callback
-      () => this.setState({ isRunning: true }), // start callback
-      () => this.setState({ isRunning: false }) // stop callback
+      (value, time) => console.log("event ", value, time), // event callback
+      () => {}, // start callback
+      () => {} // stop callback
     );
     return timeline;
   }
@@ -51,9 +49,9 @@ export default class PreviewExperimentComponent extends Component<Props> {
     );
   }
 
-  async handleCustomExperimentLoad() {
-    const timelinePath = await loadFileFromSystemDialog(FILE_TYPES.TIMELINE);
-  }
+  // async handleCustomExperimentLoad() {
+  //   const timelinePath = await loadFileFromSystemDialog(FILE_TYPES.TIMELINE);
+  // }
 
   render() {
     if (!this.props.isPreviewing) {