♻️ refactor call to PreviewFrame#renderSketch

client/modules/IDE/components/PreviewFrame.jsx

@@ -22,6 +22,24 @@ import {
 import { hijackConsoleErrorsScript, startTag, getAllScriptOffsets }
   from '../../../utils/consoleUtils';
 
+
+// Kept inside class just for linter's
+const shouldRenderSketch = (props, prevProps = undefined) => {
+  const { isPlaying, previewIsRefreshing, fullView } = props;
+
+  // if the user explicitly clicks on the play button
+  if (isPlaying && previewIsRefreshing) return true;
+
+  if (!prevProps) return false;
+
+  return (props.isPlaying !== prevProps.isPlaying // if sketch starts or stops playing, want to rerender
+    || props.isAccessibleOutputPlaying !== prevProps.isAccessibleOutputPlaying // if user switches textoutput preferences
+    || props.textOutput !== prevProps.textOutput
+    || props.gridOutput !== prevProps.gridOutput
+    || props.soundOutput !== prevProps.soundOutput
+    || (fullView && props.files[0].id !== prevProps.files[0].id));
+};
+
 class PreviewFrame extends React.Component {
   constructor(props) {
     super(props);
@@ -29,54 +47,18 @@ class PreviewFrame extends React.Component {
   }
 
   componentDidMount() {
-    console.log(`componentDidMount: ${this.props.isPlaying}`);
     window.addEventListener('message', this.handleConsoleEvent);
 
-    // TODO: maybe encapsulate this into a function (together with code from componentDidUpdate)
+    const props = {
-    if (this.props.isPlaying && this.props.previewIsRefreshing) {
+      ...this.props,
-      this.renderSketch();
+      previewIsRefreshing: this.props.previewIsRefreshing,
-    }
+      isAccessibleOutputPlaying: this.props.isAccessibleOutputPlaying
+    };
+    if (shouldRenderSketch(props)) this.renderSketch();
   }
 
   componentDidUpdate(prevProps) {
-    console.log(`componentDidUpdate: ${this.props.isPlaying}`);
+    if (shouldRenderSketch(this.props, prevProps)) this.renderSketch();
-    // if sketch starts or stops playing, want to rerender
-    if (this.props.isPlaying !== prevProps.isPlaying) {
-      this.renderSketch();
-      return;
-    }
-
-    // if the user explicitly clicks on the play button
-    if (this.props.isPlaying && this.props.previewIsRefreshing) {
-      this.renderSketch();
-      return;
-    }
-
-    // if user switches textoutput preferences
-    if (this.props.isAccessibleOutputPlaying !== prevProps.isAccessibleOutputPlaying) {
-      this.renderSketch();
-      return;
-    }
-
-    if (this.props.textOutput !== prevProps.textOutput) {
-      this.renderSketch();
-      return;
-    }
-
-    if (this.props.gridOutput !== prevProps.gridOutput) {
-      this.renderSketch();
-      return;
-    }
-
-    if (this.props.soundOutput !== prevProps.soundOutput) {
-      this.renderSketch();
-      return;
-    }
-
-    if (this.props.fullView && this.props.files[0].id !== prevProps.files[0].id) {
-      this.renderSketch();
-    }
-
     // small bug - if autorefresh is on, and the usr changes files
     // in the sketch, preview will reload
   }

client/modules/Mobile/MobileSketchView.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
@@ -13,8 +14,6 @@ import * as PreferencesActions from '../IDE/actions/preferences';
 import * as ConsoleActions from '../IDE/actions/console';
 import * as FilesActions from '../IDE/actions/files';
 
-import FullView from '../IDE/pages/FullView';
-
 import { getHTMLFile } from '../IDE/reducers/files';
 
 
@@ -24,7 +23,7 @@ import { remSize } from '../../theme';
 
 const Content = styled.div`
   z-index: 0;
-  margin-top: ${remSize(48)};
+  margin-top: ${remSize(68)};
 `;
 
 const IconLinkWrapper = styled(Link)`
@@ -41,7 +40,7 @@ const MobileSketchView = (props) => {
   // const files = useSelector(state => state.files);
 
   const {
-    htmlFile, files, selectedFile
+    htmlFile, files, selectedFile, projectName
   } = props;
 
   // Actions
@@ -66,23 +65,18 @@ const MobileSketchView = (props) => {
           <ExitIcon viewBox="0 0 16 16" />
         </IconLinkWrapper>
         <div>
-          <h2>Hello</h2>
+          <h2>{projectName}</h2>
           <h3><br /></h3>
         </div>
       </Header>
       <Content>
-        <h1>Hello</h1>
-        <section className="preview-frame-holder">
         <PreviewFrame
           htmlFile={htmlFile}
           files={files}
-            head={
+          head={<link type="text/css" rel="stylesheet" href="/preview-styles.css" />}
-              <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
-            }
 
           content={selectedFile.content}
 
-            fullView
           isPlaying
           isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying}
           previewIsRefreshing={ide.previewIsRefreshing}
@@ -102,7 +96,6 @@ const MobileSketchView = (props) => {
           expandConsole={expandConsole}
           clearConsole={clearConsole}
         />
-        </section>
       </Content>
     </Screen>);
 };
@@ -171,6 +164,8 @@ MobileSketchView.propTypes = {
     uploadFileModalVisible: PropTypes.bool.isRequired
   }).isRequired,
 
+  projectName: PropTypes.func.isRequired,
+
   setTextOutput: PropTypes.func.isRequired,
   setGridOutput: PropTypes.func.isRequired,
   setSoundOutput: PropTypes.func.isRequired,
@@ -185,7 +180,7 @@ MobileSketchView.propTypes = {
 function mapStateToProps(state) {
   return {
     htmlFile: getHTMLFile(state.files),
-    project: state.project,
+    projectName: state.project.name,
     files: state.files,
     ide: state.ide,
     preferences: state.preferences,