Refactored 'campaign_ores_plot.jsx' from Class component to Functional component

app/assets/javascripts/components/campaign/campaign_ores_plot.jsx

@@ -1,29 +1,18 @@
-import React from 'react';
-import createReactClass from 'create-react-class';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Loading from '../common/loading.jsx';
 import CourseQualityProgressGraph from '../articles/course_quality_progress_graph';
 import request from '../../utils/request';
 import withRouter from '../util/withRouter';
 
-const CampaignOresPlot = createReactClass({
-  displayName: 'CampaignOresPlot',
+const CampaignOresPlot = (props) => {
+  const [show, setShow] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [filePath, setFilePath] = useState(null);
 
-  propTypes: {
-    match: PropTypes.object
-  },
-
-  getInitialState() {
-    return {
-      show: false,
-      articleData: null,
-      loading: true
-    };
-  },
-
-  componentDidMount() {
+  useEffect(() => {
      // This clears Rails parts of the previous pages, when changing Campagn tabs
-    if (document.getElementById('users')) {
+     if (document.getElementById('users')) {
       document.getElementById('users').innerHTML = '';
     }
     if (document.getElementById('campaign-articles')) {
@@ -35,56 +24,57 @@ const CampaignOresPlot = createReactClass({
     if (document.getElementById('overview-campaign-details')) {
       document.getElementById('overview-campaign-details').innerHTML = '';
     }
-  },
-  show() {
-    if (!this.state.filePath) {
-      this.fetchFilePath();
-    }
-    return this.setState({ show: true });
-  },
+  }, []);
 
-  hide() {
-    return this.setState({ show: false });
-  },
-
-  shouldShowButton() {
-    // Do not show it if there are zero articles edited, or it's not an en-wiki course.
-    return this.isSupportedWiki() && this.props.course.edited_count !== '0';
-  },
-
-  fetchFilePath() {
-    request(`/campaigns/${this.props.router.params.campaign_slug}/ores_data.json`)
+  const fetchFilePath = () => {
+    request(`/campaigns/${props.router.params.campaign_slug}/ores_data.json`)
       .then(resp => resp.json())
       .then((data) => {
-        this.setState({ articleData: data.ores_plot, loading: false });
+        setFilePath(data.ores_plot);
+        setLoading(false);
       });
-  },
+  };
 
-  render() {
-    if (this.state.show) {
-      if (this.state.articleData) {
-        return (
-          <div id="ores" className="ores-plot">
-            <CourseQualityProgressGraph graphid={'vega-graph-ores-plot'} graphWidth={1000} graphHeight={400} articleData={this.state.articleData} />
-            <p>
-              This graph visualizes, in aggregate, how much articles developed from
-              before campaign participants first edited them until the most recent campagin edits. The <em>Structural Completeness </em>
-              rating is based on a machine learning project (<a href="https://www.mediawiki.org/wiki/ORES/FAQ" target="_blank">ORES</a>)
-              that estimates an article&apos;s quality rating based on the amount of
-              prose, the number of wikilinks, images and section headers, and other features.
-            </p>
-          </div>
-        );
-      }
-      if (this.state.loading) {
-        return <div onClick={this.hide}><Loading /></div>;
-      }
-      return <div>No Structural Completeness data available</div>;
+  const showHandler = () => {
+    if (!filePath) {
+      fetchFilePath();
     }
-    return (
-      <button className="button small" onClick={this.show}>Change in Structural Completeness</button>
-    );
+    return setShow(true);
+  };
+
+  const hideHandler = () => {
+    return setShow(false);
+  };
+
+  if (show) {
+    if (filePath) {
+      return (
+        <div id="ores" className="ores-plot">
+          <CourseQualityProgressGraph graphid={'vega-graph-ores-plot'} graphWidth={1000} graphHeight={400} articleData={filePath} />
+          <p>
+            This graph visualizes, in aggregate, how much articles developed from
+            before campaign participants first edited them until the most recent campagin edits. The <em>Structural Completeness </em>
+            rating is based on a machine learning project (<a href="https://www.mediawiki.org/wiki/ORES/FAQ" target="_blank">ORES</a>)
+            that estimates an article&apos;s quality rating based on the amount of
+            prose, the number of wikilinks, images and section headers, and other features.
+          </p>
+        </div>
+      );
+    }
+    if (loading) {
+      return <div onClick={hideHandler}><Loading /></div>;
+    }
+    return <div>No Structural Completeness data available</div>;
   }
-});
+  return (
+    <button className="button small" onClick={showHandler}>Change in Structural Completeness</button>
+  );
+};
+
+CampaignOresPlot.propTypes = {
+  match: PropTypes.object
+};
+
+CampaignOresPlot.displayName = 'CampaignOresPlot';
 
 export default withRouter(CampaignOresPlot);