DRAFT AccessibilityAnalysis

frontend/src/components/view.js

@@ -10,7 +10,8 @@ import {
 
 import { HttpClient } from '../services/http';
 import { Settings } from '../settings';
-import { AccessibilityDashboardView, AccessibilityAnalysisView, CompareRunsView, JenkinsJobView, JenkinsJobAnalysisView } from '../views';
+import { AccessibilityDashboardView, CompareRunsView, JenkinsJobView, JenkinsJobAnalysisView } from '../views';
+import AccessibilityAnalysisView from '../views/accessibilityanalysis';
 
 const VIEW_MAP = {
   'accessibility-dashboard-view': AccessibilityDashboardView,

frontend/src/views/accessibilityanalysis.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   Button,
@@ -26,7 +26,7 @@ import {
   ChartLegend,
   ChartDonut
 } from '@patternfly/react-charts';
-import { Link } from 'react-router-dom';
+import { Link, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { HttpClient } from '../services/http';
 import { Settings } from '../settings';
 import { JSONTree } from 'react-json-tree';
@@ -53,18 +53,19 @@ const MockRun = {
 };
 
 
-export class AccessibilityAnalysisView extends React.Component {
-  static contextType = IbutsuContext;
-  static propTypes = {
-    location: PropTypes.object,
-    navigate: PropTypes.func,
-    view: PropTypes.object
-  };
+const AccessibilityAnalysisView = (props) => {
+  const {
+    view
+  } = props;
+  const context = useContext(IbutsuContext);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const params = useSearchParams();
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+  const [filters, setFilters] = useState({});
 
-  constructor (props) {
-    super(props);
-    const params = new URLSearchParams(props.location.search);
-    let page = 1, pageSize = 20, filters = {};
     if (params.toString() !== '') {
       for(let pair of params) {
         if (pair[0] === 'page') {
@@ -82,6 +83,7 @@ export class AccessibilityAnalysisView extends React.Component {
         }
       }
     }
+    // SO MANY DAMN STATE VARS WTF
     this.state = {
       run: MockRun,
       isAreaChart: false,
@@ -92,8 +94,6 @@ export class AccessibilityAnalysisView extends React.Component {
       activeTab: this.getTabIndex('overview'),
       barWidth: 8,
       builds: 20,
-      pageSize: pageSize,
-      page: page,
       artifacts: [],
       artifactTabs: [],
       columns: ['Test', 'Run', 'Result', 'Duration', 'Started'],
@@ -509,3 +509,9 @@ export class AccessibilityAnalysisView extends React.Component {
     );
   }
 }
+
+AccessibilityAnalysisView.propTypes = {
+  view: PropTypes.object
+};
+
+export default AccessibilityAnalysisView;

frontend/src/views/index.js

@@ -2,4 +2,3 @@ export { JenkinsJobView } from './jenkinsjob';
 export { JenkinsJobAnalysisView } from './jenkinsjobanalysis';
 export { CompareRunsView } from './compareruns';
 export { AccessibilityDashboardView } from './accessibilitydashboard.js';
-export { AccessibilityAnalysisView } from './accessibilityanalysis.js';