From 25d8cc3c731534681b9849762880f130a4f1d074 Mon Sep 17 00:00:00 2001
From: Pizzo15 <lpizzini7@gmail.com>
Date: Mon, 1 Nov 2021 11:13:40 +0100
Subject: [PATCH 1/3] refactor: changed Output into a functional component w/
 hooks

---
 src/components/Output/Output.js | 246 ++++++++++++++------------------
 1 file changed, 110 insertions(+), 136 deletions(-)

diff --git a/src/components/Output/Output.js b/src/components/Output/Output.js
index 30cacf5a..dff0f5c7 100644
--- a/src/components/Output/Output.js
+++ b/src/components/Output/Output.js
@@ -1,156 +1,130 @@
 import { faPlay, faTerminal } from '@fortawesome/free-solid-svg-icons';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button } from 'reactstrap';
 import { OUTPUT_ONLY } from '../../constants';
-import OpenPanelButtonContainer from '../common/containers/OpenPanelButtonContainer.js';
-import ViewportAwareButton from '../common/ViewportAwareButton.js';
-import EditorRadio from '../TextEditor/components/EditorRadio.js';
+import OpenPanelButtonContainer from '../common/containers/OpenPanelButtonContainer';
+import ViewportAwareButton from '../common/ViewportAwareButton';
+import EditorRadio from '../TextEditor/components/EditorRadio';
 
 /** --------Props--------
  * None
  */
 
-class Output extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      // used for the refresh button
-      counter: 0,
-      run: 0,
-      showConsole: true,
+const Output = React.memo(
+  ({
+    viewMode,
+    viewOnly,
+    screenHeight,
+    vLanguage,
+    language,
+    code,
+    runResult,
+    updateViewMode,
+    isSmall,
+  }) => {
+    const [counter, setCounter] = useState(0);
+    const [run, setRun] = useState(0);
+    const [showConsole, setShowConsole] = useState(true);
+    const [firstLoad, setFirstLoad] = useState(true);
+
+    useEffect(() => {
+      setFirstLoad(false);
+    }, []);
+
+    const renderOpenPanelButton = () => viewMode === OUTPUT_ONLY && <OpenPanelButtonContainer />;
+
+    const renderIframe = (getSrcDoc) => {
+      // check if getsrcdoc is a function
+      if (!getSrcDoc && {}.toString.call(getSrcDoc) === '[object Function]') {
+        // console.log('Null src doc function found');
+        return null;
+      }
+
+      return (
+        <iframe
+          id={`${counter} ${run}`}
+          key={`${counter} ${run}`}
+          className="editor-output-iframe"
+          style={{ height: `${screenHeight - 61}px` }}
+          srcDoc={getSrcDoc()}
+          src=""
+          title="output-iframe"
+          onLoad={() => {}}
+        />
+      );
     };
-    this.firstLoad = true;
-  }
-
-  //= =============React Lifecycle Functions===================//
-  shouldComponentUpdate = (nextProps, nextState) => {
-    if (this.state.showConsole !== nextState.showConsole) {
-      return true;
-    }
-
-    if (this.props.mostRecentProgram !== nextProps.mostRecentProgram) {
-      this.firstLoad = true;
-      return true;
-    }
-
-    if (this.props.isSmall !== nextProps.isSmall) {
-      return true;
-    }
-
-    if (
-      this.state.run !== nextState.run
-      || this.state.counter !== nextState.counter
-      || this.state.showConsole !== nextState.showConsole
-    ) {
-      this.firstLoad = false;
-      return true;
-    }
-    return false;
-  };
-
-  renderOpenPanelButton = () => this.props.viewMode === OUTPUT_ONLY && <OpenPanelButtonContainer />;
-
-  renderIframe = (getSrcDoc) => {
-    // check if getsrcdoc is a function
-    if (!getSrcDoc && {}.toString.call(getSrcDoc) === '[object Function]') {
-      console.log('Null src doc function found');
-      return null;
-    }
 
-    return (
-      <iframe
-        id={`${this.state.counter} ${this.state.run}`}
-        key={`${this.state.counter} ${this.state.run}`}
-        className="editor-output-iframe"
-        style={{ height: `${this.props.screenHeight - 61}px` }}
-        srcDoc={getSrcDoc()}
-        src=""
-        title="output-iframe"
-        onLoad={() => {}}
-      />
-    );
-  };
-
-  renderOutput = () => {
-    const language = this.props.viewOnly ? this.props.vLanguage : this.props.language;
-    const runResult = this.props.viewOnly ? this.props.code : this.props.runResult;
-    const { showConsole } = this.state;
-
-    if (this.firstLoad) {
-      return null;
-    }
-
-    // if there's nothing to run, don't render an output
-    if (!runResult || !runResult.length) {
-      return null;
-    }
-
-    const srcDocFunc = () => language.render(runResult, showConsole);
-    return this.renderIframe(srcDocFunc);
-  };
-
-  renderRadio = () => this.props.viewMode === OUTPUT_ONLY && (
-    <div style={{ marginLeft: 'auto' }}>
-      <EditorRadio
-        viewMode={this.props.viewMode}
-        updateViewMode={this.props.updateViewMode}
-        isSmall={this.props.isSmall}
-      />
-    </div>
-  );
-
-  toggleConsole = () => {
-    this.setState((prevState) => ({ showConsole: !prevState.showConsole }));
-  };
-
-  renderConsoleButton = () => (
-    <Button
-      className="mx-2"
-      color={this.state.showConsole ? 'danger' : 'primary'}
-      onClick={this.toggleConsole}
-      title={this.state.showConsole ? 'Hide Console' : 'Show Console'}
-      size="lg"
-    >
-      <FontAwesomeIcon icon={faTerminal} />
-    </Button>
-  );
-
-  renderBanner = () => (
-    <div className="editor-output-banner">
-      {this.renderOpenPanelButton()}
-      <div style={{ flex: '1 1 auto' }}> </div>
-      {' '}
-      {/* whitespace */}
-      {this.renderRadio()}
-      {this.renderConsoleButton()}
-      <ViewportAwareButton
+    const renderOutput = () => {
+      const lang = viewOnly ? vLanguage : language;
+      const runRes = viewOnly ? code : runResult;
+
+      if (firstLoad) {
+        return null;
+      }
+
+      // if there's nothing to run, don't render an output
+      if (!runRes || !runRes.length) {
+        return null;
+      }
+
+      const srcDocFunc = () => lang.render(runRes, showConsole);
+      return renderIframe(srcDocFunc);
+    };
+
+    const renderRadio = () =>
+      viewMode === OUTPUT_ONLY && (
+        <div style={{ marginLeft: 'auto' }}>
+          <EditorRadio viewMode={viewMode} updateViewMode={updateViewMode} isSmall={isSmall} />
+        </div>
+      );
+
+    const toggleConsole = () => {
+      setShowConsole((prevShowConsole) => !prevShowConsole);
+    };
+
+    const renderConsoleButton = () => (
+      <Button
         className="mx-2"
-        color="primary"
+        color={showConsole ? 'danger' : 'primary'}
+        onClick={toggleConsole}
+        title={showConsole ? 'Hide Console' : 'Show Console'}
         size="lg"
-        onClick={this.runCode}
-        isSmall={this.props.isSmall}
-        icon={<FontAwesomeIcon icon={faPlay} />}
-        text="Run"
-      />
-    </div>
-  );
-
-  runCode = () => {
-    this.setState((prevState) => ({
-      run: prevState.run + 1,
-    }));
-  };
-
-  render() {
+      >
+        <FontAwesomeIcon icon={faTerminal} />
+      </Button>
+    );
+
+    const runCode = () => {
+      setRun((prevRun) => prevRun + 1);
+    };
+
+    const renderBanner = () => (
+      <div className="editor-output-banner">
+        {renderOpenPanelButton()}
+        <div style={{ flex: '1 1 auto' }}> </div> {/* whitespace */}
+        {renderRadio()}
+        {renderConsoleButton()}
+        <ViewportAwareButton
+          className="mx-2"
+          color="primary"
+          size="lg"
+          onClick={runCode}
+          isSmall={isSmall}
+          icon={<FontAwesomeIcon icon={faPlay} />}
+          text="Run"
+        />
+      </div>
+    );
+
     return (
       <div className="editor-output">
-        {this.renderBanner()}
-        <div>{this.renderOutput()}</div>
+        {renderBanner()}
+        <div>{renderOutput()}</div>
       </div>
     );
-  }
-}
+  },
+);
 
 export default Output;

From 0b85734862c655a26b70c5e06ec942d521e35a72 Mon Sep 17 00:00:00 2001
From: Luca Pizzini <lpizzini7@gmail.com>
Date: Wed, 3 Nov 2021 14:46:23 +0100
Subject: [PATCH 2/3] refactor: changed Output into a functional component w/
 hooks

---
 src/components/Output/Output.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Output/Output.js b/src/components/Output/Output.js
index dff0f5c7..f107508a 100644
--- a/src/components/Output/Output.js
+++ b/src/components/Output/Output.js
@@ -12,6 +12,18 @@ import EditorRadio from '../TextEditor/components/EditorRadio';
  * None
  */
 
+const compareProps = (prevProps, nextProps) => {
+  if (prevProps.mostRecentProgram !== nextProps.mostRecentProgram) {
+    return true;
+  }
+
+  if (prevProps.isSmall !== nextProps.isSmall) {
+    return true;
+  }
+
+  return false;
+};
+
 const Output = React.memo(
   ({
     viewMode,
@@ -31,7 +43,7 @@ const Output = React.memo(
 
     useEffect(() => {
       setFirstLoad(false);
-    }, []);
+    }, [run, counter, showConsole]);
 
     const renderOpenPanelButton = () => viewMode === OUTPUT_ONLY && <OpenPanelButtonContainer />;
 
@@ -81,7 +93,7 @@ const Output = React.memo(
       );
 
     const toggleConsole = () => {
-      setShowConsole((prevShowConsole) => !prevShowConsole);
+      setShowConsole(!showConsole);
     };
 
     const renderConsoleButton = () => (
@@ -125,6 +137,7 @@ const Output = React.memo(
       </div>
     );
   },
+  compareProps,
 );
 
 export default Output;

From a07f756663f55d164b46d4db79a1c92dda1cde8f Mon Sep 17 00:00:00 2001
From: Luca Pizzini <lpizzini7@gmail.com>
Date: Thu, 4 Nov 2021 14:51:00 +0100
Subject: [PATCH 3/3] fix: adusted lint errors

---
 src/components/Output/Output.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Output/Output.js b/src/components/Output/Output.js
index f107508a..0da8e878 100644
--- a/src/components/Output/Output.js
+++ b/src/components/Output/Output.js
@@ -36,7 +36,7 @@ const Output = React.memo(
     updateViewMode,
     isSmall,
   }) => {
-    const [counter, setCounter] = useState(0);
+    const counter = 0;
     const [run, setRun] = useState(0);
     const [showConsole, setShowConsole] = useState(true);
     const [firstLoad, setFirstLoad] = useState(true);
@@ -85,12 +85,11 @@ const Output = React.memo(
       return renderIframe(srcDocFunc);
     };
 
-    const renderRadio = () =>
-      viewMode === OUTPUT_ONLY && (
-        <div style={{ marginLeft: 'auto' }}>
-          <EditorRadio viewMode={viewMode} updateViewMode={updateViewMode} isSmall={isSmall} />
-        </div>
-      );
+    const renderRadio = () => viewMode === OUTPUT_ONLY && (
+      <div style={{ marginLeft: 'auto' }}>
+        <EditorRadio viewMode={viewMode} updateViewMode={updateViewMode} isSmall={isSmall} />
+      </div>
+    );
 
     const toggleConsole = () => {
       setShowConsole(!showConsole);
@@ -115,7 +114,8 @@ const Output = React.memo(
     const renderBanner = () => (
       <div className="editor-output-banner">
         {renderOpenPanelButton()}
-        <div style={{ flex: '1 1 auto' }}> </div> {/* whitespace */}
+        <div style={{ flex: '1 1 auto' }}> </div>
+        {/* whitespace */}
         {renderRadio()}
         {renderConsoleButton()}
         <ViewportAwareButton