Move MesssageHandler to a custom hook, create hooks directory

Author: catarak

client/components/useAsModal.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useModalBehavior } from '../utils/custom-hooks';
+import { useModalBehavior } from '../modules/IDE/hooks/custom-hooks';
 
 const BackgroundOverlay = styled.div`
   position: fixed;

client/modules/IDE/components/Console.jsx

@@ -37,7 +37,9 @@ import DownArrowIcon from '../../../images/down-arrow.svg';
 
 import * as IDEActions from '../../IDE/actions/ide';
 import * as ConsoleActions from '../../IDE/actions/console';
-import { useDidUpdate } from '../../../utils/custom-hooks';
+import { useDidUpdate } from '../hooks/custom-hooks';
+import useHandleMessageEvent from '../hooks/useHandleMessageEvent';
+import { listen } from '../../../utils/dispatcher';
 
 const getConsoleFeedStyle = (theme, times, fontSize) => {
   const style = {
@@ -100,15 +102,18 @@ const Console = ({ t }) => {
     collapseConsole, expandConsole, clearConsole, dispatchConsoleEvent
   } = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch());
 
-  // useEffect(() => {
-  //   clearConsole();
-  //   dispatchConsoleEvent(consoleEvents);
-  // }, [theme, fontSize]);
-
   const cm = useRef({});
 
   useDidUpdate(() => { cm.current.scrollTop = cm.current.scrollHeight; });
 
+  const handleMessageEvent = useHandleMessageEvent();
+  useEffect(() => {
+    const unsubscribe = listen(handleMessageEvent);
+    return function cleanup() {
+      unsubscribe();
+    };
+  });
+
   const consoleClass = classNames({
     'preview-console': true,
     'preview-console--collapsed': !isExpanded

client/utils/custom-hooks.js renamed to client/modules/IDE/hooks/custom-hooks.js

@@ -1,12 +1,10 @@
-import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { Decode } from 'console-feed';
 import { isEqual } from 'lodash';
 import { dispatchConsoleEvent } from '../actions/console';
 import { stopSketch, expandConsole } from '../actions/console';
-import { listen } from '../../../utils/dispatcher';
 
-function useHandleMessageEvent() {
+export default function useHandleMessageEvent() {
   const dispatch = useDispatch();
 
   const handleMessageEvent = (data) => {
@@ -47,16 +45,3 @@ function useHandleMessageEvent() {
   };
   return handleMessageEvent;
 }
-
-function MessageHandler() {
-  const handleMessageEvent = useHandleMessageEvent();
-  useEffect(() => {
-    const unsubscribe = listen(handleMessageEvent);
-    return function cleanup() {
-      unsubscribe();
-    };
-  });
-  return null;
-}
-
-export default MessageHandler;

client/modules/IDE/components/MessageHandler.jsx renamed to client/modules/IDE/hooks/useHandleMessageEvent.js

@@ -34,7 +34,6 @@ import About from '../components/About';
 import AddToCollectionList from '../components/AddToCollectionList';
 import Feedback from '../components/Feedback';
 import { CollectionSearchbar } from '../components/Searchbar';
-import MessageHandler from '../components/MessageHandler';
 import { getIsUserOwner } from '../selectors/users';
 
 
@@ -258,7 +257,6 @@ class IDEView extends React.Component {
         <Helmet>
           <title>{getTitle(this.props)}</title>
         </Helmet>
-        <MessageHandler />
         {this.props.toast.isVisible && <Toast />}
         <Nav
           warnIfUnsavedChanges={this.handleUnsavedChanges}

client/modules/IDE/pages/IDEView.jsx

@@ -37,7 +37,7 @@ import Dropdown from '../../../components/Dropdown';
 import { getIsUserOwner } from '../selectors/users';
 
 
-import { useEffectWithComparison, useEventListener } from '../../../utils/custom-hooks';
+import { useEffectWithComparison, useEventListener } from '../hooks/custom-hooks';
 
 import * as device from '../../../utils/device';
 

client/modules/IDE/pages/MobileIDEView.jsx

@@ -17,7 +17,6 @@ setInterval(() => {
       messages: consoleBuffer,
       source: 'sketch'
     };
-    // this could import dispatch instead! wowowowow
     window.parent.postMessage(message, window.origin);
     consoleBuffer.length = 0;
   }