fix all react dev warnings

ShMcK · ShMcK · commit 498f31cbd574 · 2016-06-06T20:42:42.000-07:00
diff --git a/lib/components/AppMenu/menuRight.js b/lib/components/AppMenu/menuRight.js
@@ -10,7 +10,7 @@ var origin = {
     vertical: 'top',
 };
 function menuRight(route) {
-    return (React.createElement(IconMenu_1.default, {iconButtonElement: menuIconRight_1.default(), targetOrigin: origin, anchorOrigin: origin}, menuRightRouteOptions_1.default(route), React.createElement(Divider_1.default, null), React.createElement(Quit_1.default, null)));
+    return (React.createElement(IconMenu_1.default, {iconButtonElement: menuIconRight_1.default(), targetOrigin: origin, anchorOrigin: origin}, menuRightRouteOptions_1.default(route), React.createElement(Divider_1.default, null), React.createElement(Quit_1.default, {key: 'quit'})));
 }
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = menuRight;
diff --git a/lib/components/AppMenu/menuRightRouteOptions.js b/lib/components/AppMenu/menuRightRouteOptions.js
@@ -12,7 +12,7 @@ var routes = [{
         name: 'edit'
     }];
 function menuRightRouteOptions(route) {
-    return routes.filter(function (r) { return route !== r.route; }).map(function (r) { return (React.createElement(MenuLink_1.default, {route: r.route, title: r.name})); });
+    return routes.filter(function (r) { return route !== r.route; }).map(function (r) { return (React.createElement(MenuLink_1.default, {key: r.name, route: r.route, title: r.name})); });
 }
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = menuRightRouteOptions;
diff --git a/lib/components/Page/Hints/index.js b/lib/components/Page/Hints/index.js
@@ -44,7 +44,7 @@ var Hints = (function (_super) {
         var text = this.state.text;
         return (React.createElement(List_1.List, null, !hints || !hints.length
             ? []
-            : hints.map(function (hint, index) { return (React.createElement(List_1.ListItem, {secondaryText: React.createElement("p", null, index + 1, ". ", hint), onClick: markdownOpen.bind(_this, hint)})); }), React.createElement(TextField_1.default, {style: styles.text, hintText: 'Hint text', multiLine: true, value: text, onChange: this.handleChange.bind(this)})));
+            : hints.map(function (hint, index) { return (React.createElement(List_1.ListItem, {key: index.toString(), secondaryText: React.createElement("p", null, index + 1, ". ", hint), onClick: markdownOpen.bind(_this, hint)})); }), React.createElement(TextField_1.default, {style: styles.text, hintText: 'Hint text', multiLine: true, value: text, onChange: this.handleChange.bind(this)})));
     };
     Hints = __decorate([
         react_redux_1.connect(null, function (dispatch) {
diff --git a/lib/components/Page/PageDescription/index.js b/lib/components/Page/PageDescription/index.js
@@ -10,7 +10,7 @@ var PageDescription = function (_a) {
     var title = _a.title, content = _a.content, open = _a.open, click = _a.click;
     var contentArray = content.split('\n\n');
     return (React.createElement(Card_1.Card, {style: styles, initiallyExpanded: open || false}, title
-        ? React.createElement(Card_1.CardHeader, {title: title, actAsExpander: true, showExpandableButton: true}) : null, React.createElement(Card_1.CardText, {expandable: true}, contentArray.map(function (c) { return (React.createElement(index_1.Markdown, {onClick: click.bind(_this, c)}, c)); }))));
+        ? React.createElement(Card_1.CardHeader, {title: title, actAsExpander: true, showExpandableButton: true}) : null, React.createElement(Card_1.CardText, {expandable: true}, contentArray.map(function (c, index) { return (React.createElement(index_1.Markdown, {key: index.toString(), onClick: click.bind(_this, c)}, c)); }))));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = PageDescription;
diff --git a/lib/components/Page/TaskActions/index.js b/lib/components/Page/TaskActions/index.js
@@ -68,9 +68,9 @@ var TaskActions = (function (_super) {
         var _a = this.props, actions = _a.actions, addAction = _a.addAction, markdownOpen = _a.markdownOpen;
         var stepIndex = this.state.stepIndex;
         var actionList = actions.map(function (a) { return task_object_1.default(a); });
-        return (React.createElement(Stepper_1.Stepper, {activeStep: stepIndex, linear: false, orientation: 'vertical'}, actionList.map(function (a, index) { return (React.createElement(Stepper_1.Step, null, React.createElement(Stepper_1.StepButton, {onClick: function () { return _this.setState({
+        return (React.createElement("section", null, React.createElement(Stepper_1.Stepper, {activeStep: stepIndex, linear: false, orientation: 'vertical'}, actionList.map(function (a, index) { return (React.createElement(Stepper_1.Step, {key: index.toString()}, React.createElement(Stepper_1.StepButton, {onClick: function () { return _this.setState({
             stepIndex: index, as: _this.state.as }); }}, a.action + (a.singleLine ? ' ' + a.content : '')), React.createElement(Stepper_1.StepContent, null, a.singleLine ? ''
-            : React.createElement("div", {onClick: markdownOpen.bind(_this, a.content)}, React.createElement(index_1.Markdown, null, '```js\n' + a.content + '\n```'))))); }), React.createElement("span", {style: styles.form}, React.createElement(SelectField_1.default, {value: this.state.as.action, onChange: this.handleSelect.bind(this), style: styles.select}, React.createElement(MenuItem_1.default, {value: 'open', primaryText: 'open'}), React.createElement(MenuItem_1.default, {value: 'set', primaryText: 'set'}), React.createElement(MenuItem_1.default, {value: 'set', primaryText: 'insert'})), React.createElement(TextField_1.default, {hintText: 'Content', value: this.state.as.content, onChange: this.handleText.bind(this)}))));
+            : React.createElement("div", {onClick: markdownOpen.bind(_this, a.content)}, React.createElement(index_1.Markdown, null, '```js\n' + a.content + '\n```'))))); })), React.createElement("span", {style: styles.form}, React.createElement(SelectField_1.default, {value: this.state.as.action, onChange: this.handleSelect.bind(this), style: styles.select}, React.createElement(MenuItem_1.default, {key: 'open', value: 'open', primaryText: 'open'}), React.createElement(MenuItem_1.default, {key: 'set', value: 'set', primaryText: 'set'}), React.createElement(MenuItem_1.default, {key: 'insert', value: 'insert', primaryText: 'insert'})), React.createElement(TextField_1.default, {hintText: 'Content', value: this.state.as.content, onChange: this.handleText.bind(this)}))));
     };
     TaskActions = __decorate([
         react_redux_1.connect(null, function (dispatch) {
diff --git a/lib/components/Page/Tasks/index.js b/lib/components/Page/Tasks/index.js
@@ -55,7 +55,7 @@ var Tasks = (function (_super) {
     Tasks.prototype.render = function () {
         var _this = this;
         var _a = this.props, tasks = _a.tasks, page = _a.page, config = _a.config, taskAdd = _a.taskAdd, markdownOpen = _a.markdownOpen, pagePosition = _a.pagePosition;
-        return (React.createElement("div", null, tasks.map(function (task, index) { return (React.createElement(Card_1.Card, {style: styles.card, initiallyExpanded: index === 0}, React.createElement(Card_1.CardHeader, {actAsExpander: true, showExpandableButton: true}, React.createElement("span", {style: styles.title}, "Task ", index + 1), React.createElement(Tests_1.default, {style: styles.test, tests: task.tests, config: config})), React.createElement(Card_1.CardText, {expandable: true, style: styles.cardContent}, React.createElement(Tabs_1.Tabs, {tabItemContainerStyle: styles.tabBar}, React.createElement(Tabs_1.Tab, {label: 'Description'}, React.createElement("div", {onClick: markdownOpen.bind(_this, task.description)}, React.createElement(Task_1.default, {key: index.toString(), index: index, task: task}))), React.createElement(Tabs_1.Tab, {label: 'Actions'}, React.createElement(TaskActions_1.default, {actions: task.actions, taskPosition: index})), React.createElement(Tabs_1.Tab, {label: 'Hints'}, React.createElement(Hints_1.default, {hints: task.hints, taskPosition: index})))))); }), React.createElement(AddButton_1.default, {callback: taskAdd}), React.createElement(TasksComplete_1.default, {page: page})));
+        return (React.createElement("div", null, tasks.map(function (task, index) { return (React.createElement(Card_1.Card, {key: index.toString(), style: styles.card, initiallyExpanded: index === 0}, React.createElement(Card_1.CardHeader, {actAsExpander: true, showExpandableButton: true}, React.createElement("span", {style: styles.title}, "Task ", index + 1), React.createElement(Tests_1.default, {style: styles.test, tests: task.tests, config: config})), React.createElement(Card_1.CardText, {expandable: true, style: styles.cardContent}, React.createElement(Tabs_1.Tabs, {tabItemContainerStyle: styles.tabBar}, React.createElement(Tabs_1.Tab, {label: 'Description'}, React.createElement("div", {onClick: markdownOpen.bind(_this, task.description)}, React.createElement(Task_1.default, {key: index.toString(), index: index, task: task}))), React.createElement(Tabs_1.Tab, {label: 'Actions'}, React.createElement(TaskActions_1.default, {actions: task.actions, taskPosition: index})), React.createElement(Tabs_1.Tab, {label: 'Hints'}, React.createElement(Hints_1.default, {hints: task.hints, taskPosition: index})))))); }), React.createElement(AddButton_1.default, {callback: taskAdd}), React.createElement(TasksComplete_1.default, {page: page})));
     };
     Tasks = __decorate([
         react_redux_1.connect(null, function (dispatch) {
diff --git a/lib/components/Page/Tests/index.js b/lib/components/Page/Tests/index.js
@@ -33,7 +33,7 @@ var Tests = (function (_super) {
         var _this = this;
         var _a = this.props, tests = _a.tests, config = _a.config, style = _a.style, open = _a.open;
         var suffix = config_options_1.default[config.language].suffix;
-        return (React.createElement("div", {style: style}, tests.map(function (test) { return (React.createElement(FlatButton_1.default, {style: styles.button, onClick: open.bind(_this, test.concat('.' + suffix)), label: 'Test', secondary: true})); })));
+        return (React.createElement("div", {style: style}, tests.map(function (test, index) { return (React.createElement(FlatButton_1.default, {key: index.toString(), style: styles.button, onClick: open.bind(_this, test.concat('.' + suffix)), label: 'Test', secondary: true})); })));
     };
     Tests = __decorate([
         react_redux_1.connect(null, function (dispatch) {
diff --git a/lib/components/Page/index.js b/lib/components/Page/index.js
@@ -31,7 +31,7 @@ var Page = (function (_super) {
     Page.prototype.componentDidMount = function () {
         Top_1.default.toggle(true);
     };
-    Page.prototype.componentDidUnmount = function () {
+    Page.prototype.componentWillUnmount = function () {
         Top_1.default.toggle(false);
     };
     Page.prototype.render = function () {
diff --git a/lib/store.js b/lib/store.js
@@ -5,7 +5,7 @@ var createLogger = require('redux-logger');
 var redux_thunk_1 = require('redux-thunk');
 var redux_throttle_actions_1 = require('redux-throttle-actions');
 var middlewares = [redux_thunk_1.default];
-var devMode = true;
+var devMode = false;
 if (devMode) {
     var logger = createLogger();
     middlewares.push(logger);
diff --git a/src/components/AppMenu/menuRight.tsx b/src/components/AppMenu/menuRight.tsx
@@ -19,7 +19,7 @@ export default function menuRight(route: string) {
     >
       {menuRightRouteOptions(route)}
       <Divider />
-      <Quit />
+      <Quit key='quit'/>
     </IconMenu>
   );
 }
diff --git a/src/components/AppMenu/menuRightRouteOptions.tsx b/src/components/AppMenu/menuRightRouteOptions.tsx
@@ -16,6 +16,7 @@ export default function menuRightRouteOptions(route: string) {
   // return all routes in list except route provided
   return routes.filter(r => route !== r.route).map(r => (
     <MenuLink
+      key={r.name}
       route={r.route}
       title={r.name}
     />
diff --git a/src/components/Page/Hints/index.tsx b/src/components/Page/Hints/index.tsx
@@ -43,10 +43,12 @@ export default class Hints extends React.Component<{
         {!hints || !hints.length
           ? []
           : hints.map((hint, index) => (
-            <ListItem secondaryText={
-              <p>{index + 1}. {hint}</p>
-            }
-            onClick={markdownOpen.bind(this, hint)}/>
+            <ListItem
+              key={index.toString()}
+              secondaryText={
+                <p>{index + 1}. {hint}</p>
+              }
+              onClick={markdownOpen.bind(this, hint)}/>
           ))
         }
         <TextField
diff --git a/src/components/Page/PageDescription/index.tsx b/src/components/Page/PageDescription/index.tsx
@@ -22,8 +22,8 @@ const PageDescription: React.StatelessComponent<{
           showExpandableButton={true}
         /> : null}
       <CardText expandable={true}>
-        {contentArray.map((c: string) => (
-          <Markdown onClick={click.bind(this, c)}>{c}</Markdown>
+        {contentArray.map((c: string, index) => (
+          <Markdown key={index.toString()} onClick={click.bind(this, c)}>{c}</Markdown>
         ))}
       </CardText>
     </Card>
diff --git a/src/components/Page/TaskActions/index.tsx b/src/components/Page/TaskActions/index.tsx
@@ -69,13 +69,14 @@ export default class TaskActions extends React.Component<{
     // TODO: sort actions with higher accuracy
     const actionList: Builder.ActionObject[] = actions.map(a => getTaskObject(a));
     return (
+      <section>
       <Stepper
         activeStep={stepIndex}
         linear={false}
         orientation='vertical'
-      >
+        >
         {actionList.map((a, index) => (
-          <Step>
+          <Step key={index.toString()}>
             <StepButton onClick={() => this.setState({
               stepIndex: index, as: this.state.as}
             )}>
@@ -90,23 +91,24 @@ export default class TaskActions extends React.Component<{
             </StepContent>
           </Step>
         ))}
-        <span style={styles.form}>
-          <SelectField
-            value={this.state.as.action}
-            onChange={this.handleSelect.bind(this)}
-            style={styles.select}
-          >
-            <MenuItem value={'open'} primaryText='open' />
-            <MenuItem value={'set'} primaryText='set' />
-            <MenuItem value={'set'} primaryText='insert' />
-          </SelectField>
-          <TextField
-            hintText='Content'
-            value={this.state.as.content}
-            onChange={this.handleText.bind(this)}
-          />
-        </span>
       </Stepper>
+      <span style={styles.form}>
+        <SelectField
+          value={this.state.as.action}
+          onChange={this.handleSelect.bind(this)}
+          style={styles.select}
+        >
+          <MenuItem key='open' value='open' primaryText='open' />
+          <MenuItem key='set' value='set' primaryText='set' />
+          <MenuItem key='insert' value='insert' primaryText='insert' />
+        </SelectField>
+        <TextField
+          hintText='Content'
+          value={this.state.as.content}
+          onChange={this.handleText.bind(this)}
+        />
+      </span>
+      </section>
     );
   }
 }
diff --git a/src/components/Page/Tasks/index.tsx b/src/components/Page/Tasks/index.tsx
@@ -56,6 +56,7 @@ export default class Tasks extends React.Component<{
       <div>
         {tasks.map((task: CR.Task, index: number) => (
           <Card
+            key={index.toString()}
             style={styles.card}
             initiallyExpanded={index === 0}
             >
diff --git a/src/components/Page/Tests/index.tsx b/src/components/Page/Tests/index.tsx
@@ -26,8 +26,9 @@ export default class Tests extends React.Component<{
     const suffix = tutorialConfigOptions[config.language].suffix;
     return (
       <div style={style}>
-        {tests.map(test => (
+        {tests.map((test, index) => (
           <FlatButton
+            key={index.toString()}
             style={styles.button}
             onClick={open.bind(this, test.concat('.' + suffix))}
             label={'Test'}
diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
@@ -12,7 +12,6 @@ const styles = {
   overflowY: 'scroll',
 };
 
-
 @connect(null, dispatch => {
   return {
     markdownOpen: (content: string) => dispatch(editorMarkdownOpen(null, content))
@@ -25,13 +24,12 @@ export default class Page extends React.Component<{
   componentDidMount() {
     Top.toggle(true);
   }
-  componentDidUnmount() {
+  componentWillUnmount() {
     Top.toggle(false);
   }
   render() {
     const {tutorial, pagePosition, packageJson, markdownOpen} = this.props;
     const page = tutorial.pages[pagePosition];
-
     if (!page) { return null; }
 
     return (
diff --git a/src/store.ts b/src/store.ts
@@ -6,7 +6,7 @@ import throttleActions from 'redux-throttle-actions';
 
 const middlewares = [thunk];
 
-const devMode = true;
+const devMode = false;
 if (devMode) {
   const logger = createLogger();
   middlewares.push(logger);

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ var origin = {`
`10`	`10`	`vertical: 'top',`
`11`	`11`	`};`
`12`	`12`	`function menuRight(route) {`
`13`		`- return (React.createElement(IconMenu_1.default, {iconButtonElement: menuIconRight_1.default(), targetOrigin: origin, anchorOrigin: origin}, menuRightRouteOptions_1.default(route), React.createElement(Divider_1.default, null), React.createElement(Quit_1.default, null)));`
	`13`	`+ return (React.createElement(IconMenu_1.default, {iconButtonElement: menuIconRight_1.default(), targetOrigin: origin, anchorOrigin: origin}, menuRightRouteOptions_1.default(route), React.createElement(Divider_1.default, null), React.createElement(Quit_1.default, {key: 'quit'})));`
`14`	`14`	`}`
`15`	`15`	`Object.defineProperty(exports, "__esModule", { value: true });`
`16`	`16`	`exports.default = menuRight;`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ var routes = [{`
`12`	`12`	`name: 'edit'`
`13`	`13`	`}];`
`14`	`14`	`function menuRightRouteOptions(route) {`
`15`		`- return routes.filter(function (r) { return route !== r.route; }).map(function (r) { return (React.createElement(MenuLink_1.default, {route: r.route, title: r.name})); });`
	`15`	`+ return routes.filter(function (r) { return route !== r.route; }).map(function (r) { return (React.createElement(MenuLink_1.default, {key: r.name, route: r.route, title: r.name})); });`
`16`	`16`	`}`
`17`	`17`	`Object.defineProperty(exports, "__esModule", { value: true });`
`18`	`18`	`exports.default = menuRightRouteOptions;`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ export default function menuRight(route: string) {`
`19`	`19`	`>`
`20`	`20`	`{menuRightRouteOptions(route)}`
`21`	`21`	`<Divider />`
`22`		`- <Quit />`
	`22`	`+ <Quit key='quit'/>`
`23`	`23`	`</IconMenu>`
`24`	`24`	`);`
`25`	`25`	`}`