Fix full view by waiting until frame registers

Author: catarak

client/modules/IDE/hooks/useInterval.js

@@ -0,0 +1,26 @@
+// https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+import { useState, useEffect, useRef } from 'react';
+
+export default function useInterval(callback, delay) {
+  const savedCallback = useRef();
+  const [intervalId, setIntervalId] = useState();
+
+  // Remember the latest callback.
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      setIntervalId(id);
+      return () => clearInterval(id);
+    }
+    return null;
+  }, [delay]);
+  return () => clearInterval(intervalId);
+}

client/modules/IDE/pages/FullView.jsx

@@ -1,68 +1,75 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Helmet from 'react-helmet';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import PreviewFrame from '../components/PreviewFrame';
 import PreviewNav from '../../../components/PreviewNav';
 import { getProject } from '../actions/project';
 import { startSketch } from '../actions/ide';
+import {
+  listen,
+  dispatchMessage,
+  MessageTypes
+} from '../../../utils/dispatcher';
+import useInterval from '../hooks/useInterval';
 
-class FullView extends React.Component {
-  componentDidMount() {
-    this.props
-      .getProject(this.props.params.project_id, this.props.params.username)
-      .then(this.props.startSketch);
+function FullView(props) {
+  const dispatch = useDispatch();
+  const project = useSelector((state) => state.project);
+
+  useEffect(() => {
+    dispatch(getProject(props.params.project_id, props.params.username));
+  }, []);
+
+  // send register event until iframe is loaded and sends a message back.
+  const [isRendered, setIsRendered] = useState(false);
+  const clearInterval = useInterval(() => {
+    dispatchMessage({ type: MessageTypes.REGISTER });
+  }, 100);
+  if (isRendered) {
+    clearInterval();
   }
 
-  render() {
-    return (
-      <div className="fullscreen-preview">
-        <Helmet>
-          <title>{this.props.project.name}</title>
-        </Helmet>
-        <PreviewNav
-          owner={{
-            username: this.props.project.owner
-              ? `${this.props.project.owner.username}`
-              : ''
-          }}
-          project={{
-            name: this.props.project.name,
-            id: this.props.params.project_id
-          }}
-        />
-        <main className="preview-frame-holder">
-          <PreviewFrame fullView />
-        </main>
-      </div>
-    );
+  function handleMessageEvent(message) {
+    if (message.type === MessageTypes.REGISTER) {
+      if (!isRendered) {
+        setIsRendered(true);
+        dispatch(startSketch());
+      }
+    }
   }
+  useEffect(() => {
+    const unsubscribe = listen(handleMessageEvent);
+    return function cleanup() {
+      unsubscribe();
+    };
+  }, []);
+  return (
+    <div className="fullscreen-preview">
+      <Helmet>
+        <title>{project.name}</title>
+      </Helmet>
+      <PreviewNav
+        owner={{
+          username: project.owner ? `${project.owner.username}` : ''
+        }}
+        project={{
+          name: project.name,
+          id: props.params.project_id
+        }}
+      />
+      <main className="preview-frame-holder">
+        <PreviewFrame fullView />
+      </main>
+    </div>
+  );
 }
 
 FullView.propTypes = {
   params: PropTypes.shape({
     project_id: PropTypes.string,
     username: PropTypes.string
-  }).isRequired,
-  project: PropTypes.shape({
-    name: PropTypes.string,
-    owner: PropTypes.shape({
-      username: PropTypes.string
-    })
-  }).isRequired,
-  getProject: PropTypes.func.isRequired,
-  startSketch: PropTypes.func.isRequired
+  }).isRequired
 };
 
-function mapStateToProps(state) {
-  return {
-    project: state.project
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators({ getProject, startSketch }, dispatch);
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(FullView);
+export default FullView;

client/modules/Preview/previewIndex.jsx

@@ -2,9 +2,15 @@ import React, { useReducer, useState, useEffect } from 'react';
 import { render } from 'react-dom';
 import { hot } from 'react-hot-loader/root';
 import { createGlobalStyle } from 'styled-components';
-import { listen, MessageTypes } from '../../utils/dispatcher';
+import {
+  registerFrame,
+  listen,
+  MessageTypes,
+  dispatchMessage
+} from '../../utils/dispatcher';
 import { filesReducer, initialState, setFiles } from './filesReducer';
 import EmbedFrame from './EmbedFrame';
+import getConfig from '../../utils/getConfig';
 
 const GlobalStyle = createGlobalStyle`
   body {
@@ -15,6 +21,8 @@ const GlobalStyle = createGlobalStyle`
 const App = () => {
   const [state, dispatch] = useReducer(filesReducer, [], initialState);
   const [isPlaying, setIsPlaying] = useState(false);
+  registerFrame(window.parent, getConfig('EDITOR_URL'));
+
   function handleMessageEvent(message) {
     const { type, payload } = message;
     switch (type) {
@@ -27,10 +35,14 @@ const App = () => {
       case MessageTypes.STOP:
         setIsPlaying(false);
         break;
+      case MessageTypes.REGISTER:
+        dispatchMessage({ type: MessageTypes.REGISTER });
+        break;
       default:
         break;
     }
   }
+
   useEffect(() => {
     const unsubscribe = listen(handleMessageEvent);
     return function cleanup() {

client/utils/dispatcher.js

@@ -9,7 +9,8 @@ let origin = null;
 export const MessageTypes = {
   START: 'START',
   STOP: 'STOP',
-  FILES: 'FILES'
+  FILES: 'FILES',
+  REGISTER: 'REGISTER'
 };
 
 // could instead register multiple frames here
@@ -36,7 +37,7 @@ function notifyFrame(message) {
 export function dispatchMessage(message) {
   if (!message) return;
 
-  notifyListener(message);
+  // notifyListener(message);
   notifyFrame(message);
 }