Make Soapbox component an FC, move console.log

app/soapbox/containers/soapbox.js

@@ -16,7 +16,6 @@ import { loadSoapboxConfig } from 'soapbox/actions/soapbox';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { fetchVerificationConfig } from 'soapbox/actions/verification';
 import { FE_SUBDIRECTORY } from 'soapbox/build_config';
-import { NODE_ENV } from 'soapbox/build_config';
 import Helmet from 'soapbox/components/helmet';
 import AuthLayout from 'soapbox/features/auth_layout';
 import OnboardingWizard from 'soapbox/features/onboarding/onboarding-wizard';
@@ -237,40 +236,12 @@ class SoapboxMount extends React.PureComponent {
 
 }
 
-export default class Soapbox extends React.PureComponent {
+const Soapbox = () => {
+  return (
+    <Provider store={store}>
+      <SoapboxMount />
+    </Provider>
+  );
+};
 
-  printConsoleWarning = () => {
+export default Soapbox;
-    /* eslint-disable no-console */
-    console.log('%cStop!', [
-      'color: #ff0000',
-      'display: block',
-      'font-family: system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", sans-serif',
-      'font-size: 50px',
-      'font-weight: 800',
-      'padding: 4px 0',
-    ].join(';'));
-    console.log('%cThis is a browser feature intended for developers. If someone told you to copy-paste something here it is a scam and will give them access to your account.', [
-      'color: #111111',
-      'display: block',
-      'font-family: system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", sans-serif',
-      'font-size: 18px',
-      'padding: 4px 0 16px',
-    ].join(';'));
-    /* eslint-enable no-console */
-  }
-
-  componentDidMount() {
-    if (NODE_ENV === 'production') {
-      this.printConsoleWarning();
-    }
-  }
-
-  render() {
-    return (
-      <Provider store={store}>
-        <SoapboxMount />
-      </Provider>
-    );
-  }
-
-}

app/soapbox/main.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import * as BuildConfig from 'soapbox/build_config';
+import { printConsoleWarning } from 'soapbox/utils/console';
 
 import { default as Soapbox } from './containers/soapbox';
 import * as monitoring from './monitoring';
@@ -18,6 +19,11 @@ function main() {
   // Sentry
   monitoring.start();
 
+  // Print console warning
+  if (BuildConfig.NODE_ENV === 'production') {
+    printConsoleWarning();
+  }
+
   ready(() => {
     const mountNode = document.getElementById('soapbox') as HTMLElement;
 

app/soapbox/utils/console.ts

@@ -0,0 +1,24 @@
+/** Print a warning to users not to copy-paste into the console */
+const printConsoleWarning = () => {
+  /* eslint-disable no-console */
+  console.log('%cStop!', [
+    'color: #ff0000',
+    'display: block',
+    'font-family: system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", sans-serif',
+    'font-size: 50px',
+    'font-weight: 800',
+    'padding: 4px 0',
+  ].join(';'));
+  console.log('%cThis is a browser feature intended for developers. If someone told you to copy-paste something here it is a scam and will give them access to your account.', [
+    'color: #111111',
+    'display: block',
+    'font-family: system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", sans-serif',
+    'font-size: 18px',
+    'padding: 4px 0 16px',
+  ].join(';'));
+  /* eslint-enable no-console */
+};
+
+export {
+  printConsoleWarning,
+};