From a11bc446342232c82063b965944b8c237b5ae338 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Fri, 19 Jun 2020 15:24:09 -0300
Subject: [PATCH] :sparkles: render sketch

---
 client/modules/IDE/components/PreviewFrame.jsx |  7 +++++++
 client/modules/IDE/pages/IDEViewMobile.jsx     |  3 ++-
 client/modules/Mobile/MobileSketchView.jsx     | 10 +++++++---
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx
index 76be806f..edbd68bc 100644
--- a/client/modules/IDE/components/PreviewFrame.jsx
+++ b/client/modules/IDE/components/PreviewFrame.jsx
@@ -29,10 +29,17 @@ 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)
+    if (this.props.isPlaying && this.props.previewIsRefreshing) {
+      this.renderSketch();
+    }
   }
 
   componentDidUpdate(prevProps) {
+    console.log(`componentDidUpdate: ${this.props.isPlaying}`);
     // if sketch starts or stops playing, want to rerender
     if (this.props.isPlaying !== prevProps.isPlaying) {
       this.renderSketch();
diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx
index c7ca9359..8c12f1f8 100644
--- a/client/modules/IDE/pages/IDEViewMobile.jsx
+++ b/client/modules/IDE/pages/IDEViewMobile.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
@@ -66,7 +67,7 @@ const IDEViewMobile = (props) => {
           <Link
             to="/mobile/preview"
             onClick={() => {
-              alert('starting sketch');
+              // alert('starting sketch');
               startSketch();
             }}
           >
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx
index af68f968..fcc2b400 100644
--- a/client/modules/Mobile/MobileSketchView.jsx
+++ b/client/modules/Mobile/MobileSketchView.jsx
@@ -13,6 +13,8 @@ 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';
 
 
@@ -71,15 +73,17 @@ const MobileSketchView = (props) => {
       <Content>
         <h1>Hello</h1>
         <section className="preview-frame-holder">
-
           <PreviewFrame
             htmlFile={htmlFile}
             files={files}
-            fullView
+            head={
+              <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
+            }
 
             content={selectedFile.content}
 
-            isPlaying={ide.isPlaying}
+            fullView
+            isPlaying
             isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying}
             previewIsRefreshing={ide.previewIsRefreshing}