Merge pull request #44 from csci4950tgt/fix/infinite-page-loop

feat(ticket, screenshot): refactor, auto refresh, stop infinite loop

src/routes/NestedTicketRoutes.js

@@ -14,9 +14,7 @@ const NestedTicketRoutes = ({ path }) => (
       <Header as="h5">Please select a ticket.</Header>
       <RecentTickets />
     </Route>
-    <Route path={`${path}/:ticketID`}>
-      <Ticket />
-    </Route>
+    <Route path={`${path}/:ticketID`} component={Ticket} />
   </Switch>
 );
 

src/views/tickets/Screenshot.js

@@ -2,67 +2,23 @@ import React, { Component } from 'react';
 import { Header, Image, Segment } from 'semantic-ui-react';
 
 export default class Screenshot extends Component {
-  state = {
-    id: '',
-    processed: '',
-  };
-
-  onResponseReceived = async e => {
-    this.state.id = this.props.ticketID;
-    //there is not reason why this should be called twice but
-    //I can't figure out how to pass the processed flag through the routes
-    try {
-      const res = await fetch(
-        'http://localhost:8080/api/tickets/' + this.state.id,
-        {
-          method: 'GET',
-        }
-      );
-
-      const response = await res.json();
-      var processed = response.ticket.processed;
-    } catch (error) {
-      console.log(error);
-    }
-
-    if (processed) {
-      this.setState({ processed: true });
-      const endpoint =
-        'http://localhost:8080/api/tickets/' + this.state.id + '/artifacts';
-      try {
-        const res = await fetch(endpoint, {
-          method: 'GET',
-        });
-      } catch (error) {
-        console.log(error);
-      }
-    } else {
-      this.setState({ processed: false });
-    }
-  };
-
   render() {
-    this.onResponseReceived();
-
+    const { ticketID, processed } = this.props.ticketInfo;
     return (
       <div>
         <Segment inverted>
           <Header as="h3" inverted color="blue">
             {' '}
-            Screenshot for ticket #{this.state.id}{' '}
+            Screenshot for ticket #{ticketID}{' '}
           </Header>
-          {this.state.processed && (
+          {processed && (
             <Image
               alt="fullpage screenshot"
-              src={
-                'http://localhost:8080/api/tickets/' +
-                this.state.id +
-                '/artifacts/screenshotFull.png'
-              }
+              src={`http://localhost:8080/api/tickets/${ticketID}/artifacts/screenshotFull.png`}
               fluid
             />
           )}
-          {!this.state.processed && (
+          {!processed && (
             <Header as="h3" inverted color="blue">
               {' '}
               This ticket has not been processed. Please wait.{' '}

src/views/tickets/Ticket.js

@@ -1,16 +1,62 @@
-import React from 'react';
-import { Header } from 'semantic-ui-react';
-import { useParams } from 'react-router-dom';
-
+import React, { Component } from 'react';
 import Screenshot from './Screenshot';
 
-const Ticket = () => {
-  const { ticketID, url } = useParams();
-  return (
-    <>
-      <Screenshot ticketID={ticketID} url={url} />
-    </>
-  );
-};
+const REFRESH_EVERY_MS = 1000;
+
+export default class Ticket extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      ticketInfo: {
+        ticketID: props.match.params.ticketID,
+        processed: false,
+      },
+      refreshInterval: setInterval(this.refreshTicketState, REFRESH_EVERY_MS),
+    };
+
+    this.refreshTicketState();
+  }
+
+  stopAutomaticRefreshing() {
+    clearInterval(this.state.refreshInterval);
+  }
+
+  componentWillUnmount() {
+    // clean up in case we're navigating away:
+    this.stopAutomaticRefreshing();
+  }
+
+  refreshTicketState = async e => {
+    const ticketURL = `http://localhost:8080/api/tickets/${this.state.ticketInfo.ticketID}`;
+
+    try {
+      fetch(ticketURL, { method: 'GET' })
+        .then(res => res.json())
+        .then(res => {
+          const { processed } = res.ticket;
+
+          this.setState(prevState => {
+            const { ticketInfo } = prevState;
+            ticketInfo.processed = processed;
+            return ticketInfo;
+          });
+
+          if (processed) {
+            this.stopAutomaticRefreshing();
+          }
+        });
+    } catch (error) {
+      console.log(error);
+    }
+  };
 
-export default Ticket;
+  render() {
+    const { ticketInfo } = this.state;
+    return (
+      <>
+        <Screenshot ticketInfo={ticketInfo} />
+      </>
+    );
+  }
+}