From 371bd60a7db615962e973813e9b6195a79fee9a5 Mon Sep 17 00:00:00 2001
From: Christopher Willis-Ford <7019101+cwillisf@users.noreply.github.com>
Date: Tue, 6 Oct 2020 14:34:04 -0700
Subject: [PATCH] move ReactDOM.render() into index.js

This also means we no longer need to disable eslint's
"no-unused-expressions" rule for each route in index.js
---
 src/renderer/about.jsx   |  4 +---
 src/renderer/app.jsx     |  3 +--
 src/renderer/index.js    | 15 ++++++++++++---
 src/renderer/privacy.jsx |  4 +---
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/renderer/about.jsx b/src/renderer/about.jsx
index 31a6884..b4e652a 100644
--- a/src/renderer/about.jsx
+++ b/src/renderer/about.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import {productName, version} from '../../package.json';
 
 import logo from '../icon/ScratchDesktop.svg';
@@ -37,5 +36,4 @@ const AboutElement = () => (
     </div>
 );
 
-const appTarget = document.getElementById('app');
-ReactDOM.render(<AboutElement />, appTarget);
+export default <AboutElement />;
diff --git a/src/renderer/app.jsx b/src/renderer/app.jsx
index a8923bd..8fff8cf 100644
--- a/src/renderer/app.jsx
+++ b/src/renderer/app.jsx
@@ -3,7 +3,6 @@ import bindAll from 'lodash.bindall';
 import omit from 'lodash.omit';
 import PropTypes from 'prop-types';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import {connect} from 'react-redux';
 import {compose} from 'redux';
 import GUI from 'scratch-gui/src/index';
@@ -181,4 +180,4 @@ const WrappedGui = compose(
     ScratchDesktopHOC
 )(GUI);
 
-ReactDOM.render(<WrappedGui />, appTarget);
+export default <WrappedGui />;
diff --git a/src/renderer/index.js b/src/renderer/index.js
index cc0d471..c0609b7 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -3,6 +3,8 @@
 
 import {ipcRenderer} from 'electron';
 
+import ReactDOM from 'react-dom';
+
 ipcRenderer.on('ready-to-show', () => {
     // Start without any element in focus, otherwise the first link starts with focus and shows an orange box.
     // We shouldn't disable that box or the focus behavior in case someone wants or needs to navigate that way.
@@ -11,14 +13,21 @@ ipcRenderer.on('ready-to-show', () => {
 });
 
 const route = new URLSearchParams(window.location.search).get('route') || 'app';
+let routeModulePromise;
 switch (route) {
 case 'app':
-    import('./app.jsx'); // eslint-disable-line no-unused-expressions
+    routeModulePromise = import('./app.jsx');
     break;
 case 'about':
-    import('./about.jsx'); // eslint-disable-line no-unused-expressions
+    routeModulePromise = import('./about.jsx');
     break;
 case 'privacy':
-    import('./privacy.jsx');
+    routeModulePromise = import('./privacy.jsx');
     break;
 }
+
+routeModulePromise.then(routeModule => {
+    const appTarget = document.getElementById('app');
+    const routeElement = routeModule.default;
+    ReactDOM.render(routeElement, appTarget);
+});
diff --git a/src/renderer/privacy.jsx b/src/renderer/privacy.jsx
index a433acc..4bfa309 100644
--- a/src/renderer/privacy.jsx
+++ b/src/renderer/privacy.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import styles from './privacy.css';
 
@@ -58,5 +57,4 @@ const PrivacyElement = () => (
     </div>
 );
 
-const appTarget = document.getElementById('app');
-ReactDOM.render(<PrivacyElement />, appTarget);
+export default <PrivacyElement />;