🚧 mount <PreviewFrame /> on /mobile/preview

Author: ghalestrilo

client/modules/Mobile/MobileSketchView.jsx

@@ -1,8 +1,12 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router';
+import { connect } from 'react-redux';
 import styled from 'styled-components';
 import Header from '../../components/mobile/Header';
+import PreviewFrame from '../IDE/components/PreviewFrame';
 import Screen from '../../components/mobile/MobileScreen';
+import { getHTMLFile, getJSFiles, getCSSFiles } from '../IDE/reducers/files';
 
 import { ExitIcon } from '../../common/Icons';
 import { remSize } from '../../theme';
@@ -19,9 +23,21 @@ const IconLinkWrapper = styled(Link)`
   margin-left: none;
 `;
 
+const noop = () => {};
 
 const MobileSketchView = (props) => {
   const [overlay, setOverlay] = useState(null);
+
+  // TODO: useSelector requires react-redux ^7.1.0
+  // const htmlFile = useSelector(state => getHTMLFile(state.files));
+  // const jsFiles = useSelector(state => getJSFiles(state.files));
+  // const cssFiles = useSelector(state => getCSSFiles(state.files));
+  // const files = useSelector(state => state.files);
+
+  const {
+    htmlFile, jsFiles, cssFiles, files
+  } = props;
+
   return (
     <Screen>
       <Header>
@@ -44,33 +60,63 @@ const MobileSketchView = (props) => {
       </Header>
       <Content>
         <h1>Hello</h1>
+        <PreviewFrame
+          htmlFile={htmlFile}
+          jsFiles={jsFiles}
+          cssFiles={cssFiles}
+          files={files}
+          head={
+            <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
+          }
+          fullView
+          isPlaying
+          isAccessibleOutputPlaying={false}
+          textOutput={false}
+          gridOutput={false}
+          soundOutput={false}
+          dispatchConsoleEvent={noop}
+          endSketchRefresh={noop}
+          previewIsRefreshing={false}
+          setBlobUrl={noop}
+          stopSketch={noop}
+          expandConsole={noop}
+          clearConsole={noop}
+        />
       </Content>
     </Screen>);
 };
 
+MobileSketchView.propTypes = {
+  htmlFile: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired
+  }).isRequired,
+  jsFiles: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired
+  })).isRequired,
+  cssFiles: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired
+  })).isRequired,
+  files: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired
+  })).isRequired,
+};
 
-export default MobileSketchView;
+function mapStateToProps(state) {
+  return {
+    htmlFile: getHTMLFile(state.files),
+    jsFiles: getJSFiles(state.files),
+    cssFiles: getCSSFiles(state.files),
+    files: state.files
+  };
+}
 
 
-// <PreviewFrame
-//             htmlFile={this.props.htmlFile}
-//             jsFiles={this.props.jsFiles}
-//             cssFiles={this.props.cssFiles}
-//             files={this.props.files}
-//             head={
-//               <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
-//             }
-//             fullView
-//             isPlaying
-//             isAccessibleOutputPlaying={false}
-//             textOutput={false}
-//             gridOutput={false}
-//             soundOutput={false}
-//             dispatchConsoleEvent={this.ident}
-//             endSketchRefresh={this.ident}
-//             previewIsRefreshing={false}
-//             setBlobUrl={this.ident}
-//             stopSketch={this.ident}
-//             expandConsole={this.ident}
-//             clearConsole={this.ident}
-//           />
+export default connect(mapStateToProps)(MobileSketchView);