add fullscreen route and page

client/modules/IDE/actions/project.js

@@ -24,7 +24,7 @@ export function getProject(id) {
   return (dispatch, getState) => {
     axios.get(`${ROOT_URL}/projects/${id}`, { withCredentials: true })
       .then(response => {
-        browserHistory.push(`/projects/${id}`);
+        // browserHistory.push(`/projects/${id}`);
         dispatch({
           type: ActionTypes.SET_PROJECT,
           project: response.data,

client/modules/IDE/components/PreviewFrame.js

@@ -60,11 +60,13 @@ class PreviewFrame extends React.Component {
       this.renderFrameContents();
     }
 
-    window.addEventListener('message', (msg) => {
-      if (msg.data.source === 'sketch') {
-        this.props.dispatchConsoleEvent(msg);
-      }
-    });
+    if (this.props.dispatchConsoleEvent) {
+      window.addEventListener('message', (msg) => {
+        if (msg.data.source === 'sketch') {
+          this.props.dispatchConsoleEvent(msg);
+        }
+      });
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -75,6 +77,11 @@ class PreviewFrame extends React.Component {
     if (this.props.isPlaying && this.props.content !== prevProps.content) {
       this.renderSketch();
     }
+
+    // I apologize for this, it is a hack.
+    if (this.props.isPlaying && this.props.files[0].id !== prevProps.files[0].id) {
+      this.renderSketch();
+    }
   }
 
   componentWillUnmount() {
@@ -175,14 +182,14 @@ class PreviewFrame extends React.Component {
 PreviewFrame.propTypes = {
   isPlaying: PropTypes.bool.isRequired,
   head: PropTypes.object.isRequired,
-  content: PropTypes.string.isRequired,
+  content: PropTypes.string,
   htmlFile: PropTypes.shape({
     content: PropTypes.string.isRequired
   }),
   jsFiles: PropTypes.array.isRequired,
   cssFiles: PropTypes.array.isRequired,
   files: PropTypes.array.isRequired,
-  dispatchConsoleEvent: PropTypes.func.isRequired,
+  dispatchConsoleEvent: PropTypes.func,
   children: PropTypes.element
 };
 

client/modules/IDE/pages/FullView.js

@@ -0,0 +1,69 @@
+import React, { PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import PreviewFrame from '../components/PreviewFrame';
+import { getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files';
+import * as ProjectActions from '../actions/project';
+
+
+class FullView extends React.Component {
+  componentDidMount() {
+    this.props.getProject(this.props.params.project_id);
+  }
+
+  render() {
+    return (
+      <div className="fullscreen-preview">
+        <h1 className="fullscreen-preview__title">
+          {this.props.project.name} {this.props.project.owner ? `by ${this.props.project.owner.username}` : ''}
+        </h1>
+        <div className="fullscreen-preview__frame-wrapper">
+          <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" />
+            }
+            isPlaying
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+FullView.propTypes = {
+  params: PropTypes.shape({
+    project_id: PropTypes.string
+  }),
+  project: PropTypes.shape({
+    name: PropTypes.string,
+    owner: PropTypes.shape({
+      username: PropTypes.string
+    })
+  }).isRequired,
+  htmlFile: PropTypes.object,
+  jsFiles: PropTypes.array,
+  cssFiles: PropTypes.array,
+  getProject: PropTypes.func.isRequired,
+  files: PropTypes.array
+};
+
+function mapStateToProps(state) {
+  return {
+    user: state.user,
+    htmlFile: getHTMLFile(state.files),
+    jsFiles: getJSFiles(state.files),
+    cssFiles: getCSSFiles(state.files),
+    project: state.project,
+    files: state.files
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(ProjectActions, dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(FullView);

client/routes.js

@@ -2,6 +2,7 @@ import { Route, IndexRoute } from 'react-router';
 import React from 'react';
 import App from './modules/App/App';
 import IDEView from './modules/IDE/pages/IDEView';
+import FullView from './modules/IDE/pages/FullView';
 import LoginView from './modules/User/pages/LoginView';
 import SignupView from './modules/User/pages/SignupView';
 // import SketchListView from './modules/Sketch/pages/SketchListView';
@@ -18,6 +19,7 @@ const routes = (store) =>
     <Route path="/login" component={LoginView} />
     <Route path="/signup" component={SignupView} />
     <Route path="/projects/:project_id" component={IDEView} />
+    <Route path="/full/:project_id" component={FullView} />
     <Route path="/sketches" component={IDEView} />
     <Route path="/:username/sketches" component={IDEView} />
   </Route>

client/styles/layout/_fullscreen.scss

@@ -0,0 +1,16 @@
+.fullscreen-preview {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-flow: column;
+}
+
+.fullscreen-preview__title {
+  width: 100%;
+}
+
+.fullscreen-preview__frame-wrapper {
+  width: 100%;
+  flex: 1 0 0%;
+  position: relative;
+}

client/styles/main.scss

@@ -24,3 +24,4 @@
 
 @import 'layout/ide';
 @import 'layout/sketch-list';
+@import 'layout/fullscreen';

server/routes/server.routes.js

@@ -17,6 +17,10 @@ router.route('/projects/:project_id').get((req, res) => {
   res.sendFile(path.resolve(`${__dirname}/../../index.html`));
 });
 
+router.route('/full/:project_id').get((req, res) => {
+  res.sendFile(path.resolve(`${__dirname}/../../index.html`));
+});
+
 router.route('/login').get((req, res) => {
   res.sendFile(path.resolve(`${__dirname}/../../index.html`));
 });