From 1e2240faff60042d6edbc1f3f81a09536786eca6 Mon Sep 17 00:00:00 2001
From: Josiah Neuberger <josiah@wikimylife.org>
Date: Sun, 27 Aug 2017 04:05:51 -0400
Subject: [PATCH] fixed lint errors from stage zoom update

---
 src/components/stage-header/stage-header.jsx | 48 ++++++++++----------
 src/components/stage/stage.jsx               | 12 ++---
 src/containers/stage-header.jsx              | 18 ++++----
 src/containers/stage.jsx                     | 29 ++++++------
 4 files changed, 55 insertions(+), 52 deletions(-)

diff --git a/src/components/stage-header/stage-header.jsx b/src/components/stage-header/stage-header.jsx
index ffd7d0db6..635d161ba 100644
--- a/src/components/stage-header/stage-header.jsx
+++ b/src/components/stage-header/stage-header.jsx
@@ -11,26 +11,25 @@ import styles from './stage-header.css';
 
 const StageHeaderComponent = function (props) {
     const {
-	isZoomed,
-        onZoom,
-	onUnzoom,
-	width,
-	height,
-	vm,
         className,
-        title,
-	titleZoomIcon,
+        height,
+        isZoomed,
+        onUnzoom,
+        onZoom,
+        titleZoomIcon,
+        vm,
+        width,
         ...componentProps
     } = props;
     return isZoomed === false ? (
         <Box className={styles.stageHeaderWrapper}>
             <Box
-	        className={styles.stageMenuWrapper}
-	        height={height}
+                className={styles.stageMenuWrapper}
+                height={height}
                 width={width}
-	    >
+            >
                 <Controls vm={vm} />
-	        <img
+                <img
                     className={classNames(
                         className,
                         styles.stageZoomIcon
@@ -44,11 +43,11 @@ const StageHeaderComponent = function (props) {
         </Box>
     ) : (
         <Box className={styles.stageHeaderWrapperOverlay}>
-            <Box 
-	        className={styles.stageMenuWrapper}
-	        height={"100%"}
-                width={"100%"}
-	    >
+            <Box
+                className={styles.stageMenuWrapper}
+                height={'100%'}
+                width={'100%'}
+            >
                 <Controls vm={vm} />
                 <img
                     className={classNames(
@@ -65,19 +64,18 @@ const StageHeaderComponent = function (props) {
     );
 };
 StageHeaderComponent.propTypes = {
-    isZoomed: PropTypes.bool.isRequired,
-    onZoom: PropTypes.func.isRequired,
-    onUnzoom: PropTypes.func.isRequired,
-    height: PropTypes.number,
-    width: PropTypes.number,
     className: PropTypes.string,
-    title: PropTypes.string,
-    titleZoomIcon: PropTypes.string
+    height: PropTypes.number,
+    isZoomed: PropTypes.bool.isRequired,
+    onUnzoom: PropTypes.func.isRequired,
+    onZoom: PropTypes.func.isRequired,
+    titleZoomIcon: PropTypes.string,
+    vm: PropTypes.instanceOf(VM).isRequired,
+    width: PropTypes.number
 };
 StageHeaderComponent.defaultProps = {
     width: 480,
     height: 360,
-    title: 'Stage Header',
     titleZoomIcon: 'Zoom Control'
 };
 export default StageHeaderComponent;
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index 79133ebb0..afb68e2d0 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -7,10 +7,10 @@ import styles from './stage.css';
 
 const StageComponent = props => {
     const {
-        isZoomed,
         canvasRef,
-        width,
         height,
+        isZoomed,
+        width,
         ...boxProps
     } = props;
     return isZoomed === false ? (
@@ -33,20 +33,20 @@ const StageComponent = props => {
                 className={styles.stage}
                 componentRef={canvasRef}
                 element="canvas"
-                height={"100%"}
-                width={"100%"}
+                height={'100%'}
+                width={'100%'}
                 {...boxProps}
             />
             <Box className={styles.monitorWrapper}>
                 <MonitorList />
             </Box>
-       </Box>
+        </Box>
     );
 };
 StageComponent.propTypes = {
-    isZoomed: PropTypes.bool.isRequired,
     canvasRef: PropTypes.func,
     height: PropTypes.number,
+    isZoomed: PropTypes.bool.isRequired,
     width: PropTypes.number
 };
 StageComponent.defaultProps = {
diff --git a/src/containers/stage-header.jsx b/src/containers/stage-header.jsx
index 8d5680bbd..8a853473b 100644
--- a/src/containers/stage-header.jsx
+++ b/src/containers/stage-header.jsx
@@ -19,16 +19,18 @@ class StageHeader extends React.Component {
         };
     }
     shouldComponentUpdate (nextProps, nextState) {
-        return this.props.width !== nextProps.width || this.props.height !== nextProps.height || this.state.isZoomed !== nextState.isZoomed;
+        return this.props.width !== nextProps.width ||
+               this.props.height !== nextProps.height ||
+               this.state.isZoomed !== nextState.isZoomed;
     }
     handleZoom () {
         this.setState({isZoomed: true});
-        this.props.dispatch({type: 'scratch-gui/Zoomed/SET_ZOOMED', isZoomed: true });
+        this.props.dispatch({type: 'scratch-gui/Zoomed/SET_ZOOMED', isZoomed: true});
 
     }
     handleUnzoom () {
         this.setState({isZoomed: false});
-        this.props.dispatch({type: 'scratch-gui/Zoomed/SET_ZOOMED', isZoomed: false });
+        this.props.dispatch({type: 'scratch-gui/Zoomed/SET_ZOOMED', isZoomed: false});
     }
     render () {
         const {
@@ -38,9 +40,9 @@ class StageHeader extends React.Component {
         return (
             <StageHeaderComponent
                 isZoomed={this.state.isZoomed}
-                onZoom={this.handleZoom}
+                vm={this.props.vm}
                 onUnzoom={this.handleUnzoom}
-		vm={this.props.vm}
+                onZoom={this.handleZoom}
                 {...props}
             />
         );
@@ -48,9 +50,10 @@ class StageHeader extends React.Component {
 }
 
 StageHeader.propTypes = {
+    dispatch: PropTypes.func.isRequired,
     height: PropTypes.number,
-    width: PropTypes.number,
-    vm: PropTypes.instanceOf(VM).isRequired
+    vm: PropTypes.instanceOf(VM).isRequired,
+    width: PropTypes.number
 };
 
 const mapStateToProps = state => ({
@@ -60,4 +63,3 @@ const mapStateToProps = state => ({
 export default connect(
     mapStateToProps
 )(StageHeader);
-
diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index 68854d3f6..e80ece5aa 100644
--- a/src/containers/stage.jsx
+++ b/src/containers/stage.jsx
@@ -34,13 +34,6 @@ class Stage extends React.Component {
             isZoomed: false
         };
     }
-    componentWillReceiveProps(nextProps) {
-        const {
-	    isZoomed
-	} = nextProps;
-
-	this.setState({isZoomed: isZoomed});
-    }
     componentDidMount () {
         this.attachRectEvents();
         this.attachMouseEvents(this.canvas);
@@ -48,12 +41,21 @@ class Stage extends React.Component {
         this.renderer = new Renderer(this.canvas);
         this.props.vm.attachRenderer(this.renderer);
     }
-    shouldComponentUpdate (nextProps, nextState) {
-        return this.props.width !== nextProps.width || this.props.height !== nextProps.height || this.state.isZoomed !== nextState.isZoomed;
+    componentWillReceiveProps (nextProps) {
+        const {
+            isZoomed
+        } = nextProps;
+
+        this.setState({isZoomed: isZoomed});
     }
-    componentDidUpdate() {
-	this.updateRect();
-	this.renderer.resize(this.rect.width, this.rect.height);
+    shouldComponentUpdate (nextProps, nextState) {
+        return this.props.width !== nextProps.width ||
+               this.props.height !== nextProps.height ||
+               this.state.isZoomed !== nextState.isZoomed;
+    }
+    componentDidUpdate () {
+        this.updateRect();
+        this.renderer.resize(this.rect.width, this.rect.height);
     }
     componentWillUnmount () {
         this.detachMouseEvents(this.canvas);
@@ -209,8 +211,8 @@ class Stage extends React.Component {
         } = this.props;
         return (
             <StageComponent
-                isZoomed={this.state.isZoomed}
                 canvasRef={this.setCanvas}
+                isZoomed={this.state.isZoomed}
                 onDoubleClick={this.handleDoubleClick}
                 {...props}
             />
@@ -220,6 +222,7 @@ class Stage extends React.Component {
 
 Stage.propTypes = {
     height: PropTypes.number,
+    isZoomed: PropTypes.bool,
     vm: PropTypes.instanceOf(VM).isRequired,
     width: PropTypes.number
 };