diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx
index bb436143..9aaa00b5 100644
--- a/client/modules/Mobile/MobileSketchView.jsx
+++ b/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 (
@@ -44,33 +60,63 @@ const MobileSketchView = (props) => {
Hello
+
+ }
+ fullView
+ isPlaying
+ isAccessibleOutputPlaying={false}
+ textOutput={false}
+ gridOutput={false}
+ soundOutput={false}
+ dispatchConsoleEvent={noop}
+ endSketchRefresh={noop}
+ previewIsRefreshing={false}
+ setBlobUrl={noop}
+ stopSketch={noop}
+ expandConsole={noop}
+ clearConsole={noop}
+ />
);
};
+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
+ };
+}
-//
-// }
-// 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);