Convert Job.jsx to functional component in preparation for socket hook usage

awx/ui_next/src/screens/Job/Job.jsx

@@ -1,5 +1,13 @@
-import React, { Component } from 'react';
+import React, { useEffect, useCallback } from 'react';
-import { Route, withRouter, Switch, Redirect, Link } from 'react-router-dom';
+import {
+  Route,
+  withRouter,
+  Switch,
+  Redirect,
+  Link,
+  useParams,
+  useRouteMatch,
+} from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { CaretLeftIcon } from '@patternfly/react-icons';
@@ -7,157 +15,114 @@ import { Card, PageSection } from '@patternfly/react-core';
 import { JobsAPI } from '../../api';
 import ContentError from '../../components/ContentError';
 import RoutedTabs from '../../components/RoutedTabs';
+import useRequest from '../../util/useRequest';
 import JobDetail from './JobDetail';
 import JobOutput from './JobOutput';
+import WorkflowDetail from './WorkflowDetail';
 import { WorkflowOutput } from './WorkflowOutput';
 import { JOB_TYPE_URL_SEGMENTS } from '../../constants';
 
-class Job extends Component {
+function Job({ i18n, lookup, setBreadcrumb }) {
-  constructor(props) {
+  const { id, type } = useParams();
-    super(props);
+  const match = useRouteMatch();
 
-    this.state = {
+  const { isLoading, error, request: fetchJob, result: job } = useRequest(
-      job: null,
+    useCallback(async () => {
-      contentError: null,
+      const { data } = await JobsAPI.readDetail(id, type);
-      hasContentLoading: true,
-      isInitialized: false,
-    };
-
-    this.loadJob = this.loadJob.bind(this);
-  }
-
-  async componentDidMount() {
-    await this.loadJob();
-    this.setState({ isInitialized: true });
-  }
-
-  async componentDidUpdate(prevProps) {
-    const { location } = this.props;
-    if (location !== prevProps.location) {
-      await this.loadJob();
-    }
-  }
-
-  async loadJob() {
-    const { match, setBreadcrumb } = this.props;
-    const id = parseInt(match.params.id, 10);
-
-    this.setState({ contentError: null, hasContentLoading: true });
-    try {
-      const { data } = await JobsAPI.readDetail(id, match.params.type);
       setBreadcrumb(data);
-      this.setState({ job: data });
+      return data;
-    } catch (err) {
+    }, [id, type, setBreadcrumb]),
-      this.setState({ contentError: err });
+    null
-    } finally {
+  );
-      this.setState({ hasContentLoading: false });
+
-    }
+  useEffect(() => {
+    fetchJob();
+  }, [fetchJob]);
+
+  let jobType;
+  if (job) {
+    jobType = JOB_TYPE_URL_SEGMENTS[job.type];
   }
 
-  render() {
+const tabsArray = [
-    const { match, i18n, lookup } = this.props;
+    {
-
+      name: (
-    const { job, contentError, hasContentLoading, isInitialized } = this.state;
+        <>
-    let jobType;
+          <CaretLeftIcon />
-    if (job) {
+          {i18n._(t`Back to Jobs`)}
-      jobType = JOB_TYPE_URL_SEGMENTS[job.type];
+        </>
-    }
+      ),
-
+      link: `/jobs`,
-    const tabsArray = [
+      id: 99,
-      {
+    },
-        name: (
+    { name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 },
-          <>
+    { name: i18n._(t`Output`), link: `${match.url}/output`, id: 1 },
-            <CaretLeftIcon />
+  ];
-            {i18n._(t`Back to Jobs`)}
-          </>
-        ),
-        link: `/jobs`,
-        id: 99,
-      },
-      { name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 },
-      { name: i18n._(t`Output`), link: `${match.url}/output`, id: 1 },
-    ];
-
-    let showCardHeader = true;
-
-    if (!isInitialized) {
-      showCardHeader = false;
-    }
-
-    if (!hasContentLoading && contentError) {
-      return (
-        <PageSection>
-          <Card>
-            <ContentError error={contentError}>
-              {contentError.response.status === 404 && (
-                <span>
-                  {i18n._(t`The page you requested could not be found.`)}{' '}
-                  <Link to="/jobs">{i18n._(t`View all Jobs.`)}</Link>
-                </span>
-              )}
-            </ContentError>
-          </Card>
-        </PageSection>
-      );
-    }
-
-    if (lookup && job) {
-      return (
-        <Switch>
-          <Redirect from="jobs/:id" to={`/jobs/${jobType}/:id/output`} />
-          <Redirect
-            from="jobs/:id/details"
-            to={`/jobs/${jobType}/:id/details`}
-          />
-          <Redirect from="jobs/:id/output" to={`/jobs/${jobType}/:id/output`} />
-        </Switch>
-      );
-    }
 
+  if (!isLoading && error) {
     return (
       <PageSection>
         <Card>
-          {showCardHeader && <RoutedTabs tabsArray={tabsArray} />}
+          <ContentError error={error}>
-          <Switch>
+            {error.response.status === 404 && (
-            <Redirect
+              <span>
-              from="/jobs/:type/:id"
+                {i18n._(t`The page you requested could not be found.`)}{' '}
-              to="/jobs/:type/:id/output"
+                <Link to="/jobs">{i18n._(t`View all Jobs.`)}</Link>
-              exact
+              </span>
-            />
+            )}
-            {job &&
+          </ContentError>
-              job.type === 'workflow_job' && [
-                <Route key="workflow-details" path="/jobs/workflow/:id/details">
-                  <JobDetail type={match.params.type} job={job} />
-                </Route>,
-                <Route key="workflow-output" path="/jobs/workflow/:id/output">
-                  <WorkflowOutput job={job} />
-                </Route>,
-              ]}
-            {job &&
-              job.type !== 'workflow_job' && [
-                <Route key="details" path="/jobs/:type/:id/details">
-                  <JobDetail type={match.params.type} job={job} />
-                </Route>,
-                <Route key="output" path="/jobs/:type/:id/output">
-                  <JobOutput type={match.params.type} job={job} />
-                </Route>,
-                <Route key="not-found" path="*">
-                  {!hasContentLoading && (
-                    <ContentError isNotFound>
-                      <Link
-                        to={`/jobs/${match.params.type}/${match.params.id}/details`}
-                      >
-                        {i18n._(t`View Job Details`)}
-                      </Link>
-                    </ContentError>
-                  )}
-                </Route>,
-              ]}
-          </Switch>
         </Card>
       </PageSection>
     );
   }
+
+  if (lookup && job) {
+    return (
+      <Switch>
+        <Redirect from="jobs/:id" to={`/jobs/${jobType}/:id/output`} />
+        <Redirect from="jobs/:id/details" to={`/jobs/${jobType}/:id/details`} />
+        <Redirect from="jobs/:id/output" to={`/jobs/${jobType}/:id/output`} />
+      </Switch>
+    );
+  }
+
+  return (
+    <PageSection>
+      <Card>
+        {!isLoading && <RoutedTabs tabsArray={tabsArray} />}
+        <Switch>
+          <Redirect from="/jobs/:type/:id" to="/jobs/:type/:id/output" exact />
+          {job &&
+            job.type === 'workflow_job' && [
+              <Route key="workflow-details" path="/jobs/workflow/:id/details">
+                <WorkflowDetail job={job} />
+              </Route>,
+              <Route key="workflow-output" path="/jobs/workflow/:id/output">
+                <WorkflowOutput job={job} />
+              </Route>,
+            ]}
+          {job &&
+            job.type !== 'workflow_job' && [
+              <Route key="details" path="/jobs/:type/:id/details">
+                <JobDetail type={type} job={job} />
+              </Route>,
+              <Route key="output" path="/jobs/:type/:id/output">
+                <JobOutput type={type} job={job} />
+              </Route>,
+              <Route key="not-found" path="*">
+                {!isLoading && (
+                  <ContentError isNotFound>
+                    <Link to={`/jobs/${type}/${id}/details`}>
+                      {i18n._(t`View Job Details`)}
+                    </Link>
+                  </ContentError>
+                )}
+              </Route>,
+            ]}
+        </Switch>
+      </Card>
+    </PageSection>
+  );
 }
 
 export default withI18n()(withRouter(Job));