feat(ui): keep state in frame

packages/embark-ui/src/actions/index.js

@@ -530,3 +530,11 @@ export function updateDeploymentPipeline(value) {
     payload: value
   };
 }
+
+export const UPDATE_PREVIEW_URL = 'UPDATE_PREVIEW_URL';
+export function updatePreviewUrl(value) {
+  return {
+    type: UPDATE_PREVIEW_URL,
+    payload: value
+  };
+}

packages/embark-ui/src/components/Preview.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {Button, InputGroup, Input, InputGroupAddon} from 'reactstrap';
 import FontAwesome from 'react-fontawesome';
 
@@ -7,23 +8,18 @@ class Preview extends React.Component {
     super(props);
 
     this.state = {
-      previewUrl: `${window.location.protocol}//${window.location.host}/`
+      previewUrl: props.previewUrl
     };
   }
 
   handlePreviewUrlChange(ev) {
     this.setState({previewUrl: ev.target.value});
-  }
-
-  handlePreviewChange(ev) {
-    try {
-      let url = ev.target.contentWindow.location.toString();
-      this.setState({previewUrl: url});
-    } catch(e) {}
+    this.props.updatePreviewUrl(ev.target.value);
   }
 
   handlePreviewGo() {
     this.previewIframe.src = this.state.previewUrl;
+    this.props.updatePreviewUrl(this.state.previewUrl);
   }
 
   render() {
@@ -43,12 +39,17 @@ class Preview extends React.Component {
                 height="100%"
                 title="Preview"
                 ref={(iframe) => this.previewIframe = iframe}
-                onLoad={(e) => this.handlePreviewChange(e)} src={this.state.previewUrl}>
+                src={this.state.previewUrl}>
         </iframe>
       </div>
     );
   }
 }
 
+Preview.propTypes = {
+  previewUrl: PropTypes.string,
+  updatePreviewUrl: PropTypes.func,
+};
+
 export default Preview;
 

packages/embark-ui/src/containers/EditorContainer.js

@@ -222,7 +222,7 @@ class EditorContainer extends React.Component {
 
           {this.renderTextEditor()}
 
-          {this.state.currentAsideTab.label && this.renderAside()}
+          {this.renderAside()}
         </Row>
       </React.Fragment>
     );

packages/embark-ui/src/containers/TextEditorAsideContainer.js

@@ -2,14 +2,18 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import {Card, CardBody} from 'reactstrap';
+import classNames from 'classnames';
 
 import Preview from '../components/Preview';
-import {getContractsByPath} from "../reducers/selectors";
+import {getContractsByPath, getPreviewUrl} from "../reducers/selectors";
 import ContractDetail from '../components/ContractDetail';
 import ContractTransactionsContainer from './ContractTransactionsContainer';
 import ContractOverviewContainer from '../containers/ContractOverviewContainer';
 import ContractDebuggerContainer from '../containers/ContractDebuggerContainer';
 import { TextEditorToolbarTabs } from '../components/TextEditorToolbar';
+import {
+  updatePreviewUrl as updatePreviewUrlAction
+} from '../actions';
 
 class TextEditorAsideContainer extends Component {
   renderContent(contract, index) {
@@ -41,41 +45,48 @@ class TextEditorAsideContainer extends Component {
   }
 
   render() {
-    if (this.props.currentAsideTab.label === TextEditorToolbarTabs.Browser.label) {
-      return <Preview/>;
-    }
-    if (this.props.currentAsideTab.label === TextEditorToolbarTabs.Debugger.label) {
-      return (
-        <React.Fragment>
-          <h2>Debugger</h2>
-          <ContractDebuggerContainer debuggerTransactionHash={this.props.debuggerTransactionHash}/>
-        </React.Fragment>
-      );
-    }
-    return this.props.contracts.map((contract, index) => (
-      <Card key={'contract-' + index} className="editor-aside-card rounded-0 border-top-0">
-        <CardBody>
-          {this.renderContent(contract, index)}
-        </CardBody>
-      </Card>
-    ));
+    return (
+      <React.Fragment>
+        <div className={classNames('h-100', {'d-none': this.props.currentAsideTab.label !== TextEditorToolbarTabs.Browser.label})}>
+          <Preview previewUrl={this.props.previewUrl} updatePreviewUrl={this.props.updatePreviewUrl}/>
+        </div>
+        {this.props.currentAsideTab.label === TextEditorToolbarTabs.Debugger.label &&
+          <React.Fragment>
+            <h2>Debugger</h2>
+            <ContractDebuggerContainer debuggerTransactionHash={this.props.debuggerTransactionHash}/>
+          </React.Fragment>
+        }
+        {this.props.contracts.map((contract, index) => (
+          <Card key={'contract-' + index} className="editor-aside-card rounded-0 border-top-0">
+            <CardBody>
+              {this.renderContent(contract, index)}
+            </CardBody>
+          </Card>
+        ))}
+      </React.Fragment>
+    );
   }
 }
 
 function mapStateToProps(state, props) {
   return {
-    contracts: getContractsByPath(state, props.currentFile.path)
+    contracts: getContractsByPath(state, props.currentFile.path),
+    previewUrl: getPreviewUrl(state)
   };
 }
 
 TextEditorAsideContainer.propTypes = {
   currentFile: PropTypes.object,
   debuggerTransactionHash: PropTypes.string,
   currentAsideTab: PropTypes.object,
-  contracts: PropTypes.array
+  contracts: PropTypes.array,
+  updatePreviewUrl: PropTypes.func,
+  previewUrl: PropTypes.string
 };
 
 export default connect(
   mapStateToProps,
-  {}
+  {
+    updatePreviewUrl: updatePreviewUrlAction
+  }
 )(TextEditorAsideContainer);

packages/embark-ui/src/reducers/index.js

@@ -1,7 +1,7 @@
 import {combineReducers} from 'redux';
 import {REQUEST, SUCCESS, FAILURE, CONTRACT_COMPILE, FILES, LOGOUT, AUTHENTICATE,
         FETCH_CREDENTIALS, UPDATE_BASE_ETHER, CHANGE_THEME, FETCH_THEME, EXPLORER_SEARCH, DEBUGGER_INFO,
-        SIGN_MESSAGE, VERIFY_MESSAGE, TOGGLE_BREAKPOINT,
+        SIGN_MESSAGE, VERIFY_MESSAGE, TOGGLE_BREAKPOINT, UPDATE_PREVIEW_URL,
         UPDATE_DEPLOYMENT_PIPELINE, WEB3_CONNECT, WEB3_DEPLOY, WEB3_ESTIMAGE_GAS, FETCH_EDITOR_TABS} from "../actions";
 import {EMBARK_PROCESS_NAME, DARK_THEME, DEPLOYMENT_PIPELINES, DEFAULT_HOST, ELEMENTS_LIMIT} from '../constants';
 
@@ -369,6 +369,13 @@ function editorTabs(state = [], action) {
   return state;
 }
 
+function previewUrl(state= `${window.location.protocol}//${window.location.host}/`, action) {
+  if (action.type === UPDATE_PREVIEW_URL) {
+    return action.payload;
+  }
+  return state;
+}
+
 const rootReducer = combineReducers({
   entities,
   loading,
@@ -385,7 +392,8 @@ const rootReducer = combineReducers({
   web3,
   debuggerInfo,
   theme,
-  editorTabs
+  editorTabs,
+  previewUrl
 });
 
 export default rootReducer;

packages/embark-ui/src/reducers/selectors.js

@@ -239,5 +239,10 @@ export function getDebuggerLine(state) {
 }
 
 export function getEditorTabs(state) {
-  return state.editorTabs
+  return state.editorTabs;
 }
+
+export function getPreviewUrl(state) {
+  return state.previewUrl;
+}
+