Add issueScan to front end

Will call the issue scan on the backend to see if a given issue has been resolved. references https://cidilabs.atlassian.net/browse/UDOIT3-187
ucfopen · Mar 26, 2021 · baf5f0e · baf5f0e
1 parent 5322e99
commit baf5f0e
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 10 deletions.
diff --git a/assets/js/Components/App.js b/assets/js/Components/App.js
@@ -173,9 +173,9 @@ class App extends React.Component {
     })
   }
 
-  handleManualScan() {
+  handleManualScan(issueId) {
     let api = new Api(this.settings)
-        api.getReport()
+        api.scanIssue(issueId)
           .then((response) => response.json())
           .then((data) => {
             if (data.messages) {
@@ -186,7 +186,11 @@ class App extends React.Component {
               });
             }
             if (data.data && data.data.id) {
-              this.setState({ report: data.data, hasNewReport: true });
+              const report = {...this.state.report }
+              // doing this to prevent mutating the report in the state
+              report.issues = {...report.issues}
+              report.issues[data.data.id] = data.data              
+              this.setState({ report, hasNewReport: true });
             }
           });
   }

diff --git a/assets/js/Components/ContentPage.js b/assets/js/Components/ContentPage.js
@@ -64,6 +64,17 @@ class ContentPage extends React.Component {
     }
   }
 
+  static getDerivedStateFromProps(props, state) {
+    const stateActiveIssue = state.activeIssue
+    const propsActiveIssue = stateActiveIssue && props.report.issues[stateActiveIssue.id]
+    if(propsActiveIssue && propsActiveIssue.status !== stateActiveIssue.status) {
+      return {
+        activeIssue: propsActiveIssue
+      }
+    }
+    return null
+  }
+
   handleSearchTerm = (e, val) => {
     this.setState({searchTerm: val, filteredIssues: []});
   }

diff --git a/assets/js/Components/Forms/Video.js b/assets/js/Components/Forms/Video.js
@@ -2,24 +2,39 @@ import React from 'react'
 import { View } from '@instructure/ui-view'
 import { Button } from '@instructure/ui-buttons'
 import { Spinner } from '@instructure/ui-spinner'
+import { Text } from '@instructure/ui-text'
 
 export default class Video extends React.Component {
-
   constructor(props) {
     super(props)
   }
 
   render() {
-    const pending = (this.props.activeIssue && (this.props.activeIssue.pending == '1'))
-    const buttonLabel = (pending) ? 'form.processing' : 'form.scan'
+    const pending =
+      this.props.activeIssue && this.props.activeIssue.pending == '1'
+    const buttonLabel = pending ? 'form.processing' : 'form.scan'
+
+    if (this.props.activeIssue.status == 1) {
+      return (
+        <View as="div" textAlign="center" margin="x-large" padding="x-large">
+          <Text>Issue has been resolved.</Text>
+        </View>
+      )
+    }
 
     return (
       <View as="div" textAlign="center" margin="x-large" padding="x-large">
-        <Button color="primary" onClick={this.props.handleManualScan} interaction={(!pending) ? 'enabled' : 'disabled'}>
-          {('1' == pending) && <Spinner size="x-small" renderTitle={buttonLabel} />}
+        <Button
+          color="primary"
+          onClick={() => this.props.handleManualScan(this.props.activeIssue.id)}
+          interaction={!pending ? 'enabled' : 'disabled'}
+        >
+          {'1' == pending && (
+            <Spinner size="x-small" renderTitle={buttonLabel} />
+          )}
           {this.props.t(buttonLabel)}
         </Button>
       </View>
-    );
+    )
   }
-}
+}
diff --git a/assets/js/Services/Api.js b/assets/js/Services/Api.js
@@ -12,6 +12,7 @@ export default class Api {
             reportPdf: '/download/courses/{course}/reports/pdf',
             adminCourses: '/api/admin/courses/account/{account}/term/{term}',
             scanCourse: '/api/sync/{course}',
+            scanIssue: '/api/issues/{issue}/scan',
             adminReport: '/api/admin/courses/{course}/reports/latest',
             adminReportHistory: '/api/admin/reports/account/{account}/term/{term}', 
             adminUser: '/api/admin/users',           
@@ -221,4 +222,19 @@ export default class Api {
             },
         })
     }
+
+    scanIssue(issueId)
+    {
+        const authToken = this.getAuthToken()
+        let url = `${this.apiUrl}${this.endpoints.scanIssue}`
+        url = url.replace('{issue}', issueId)
+
+        return fetch(url, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-AUTH-TOKEN': authToken,
+            },
+        })
+    }
 }
diff --git a/src/Controller/IssuesController.php b/src/Controller/IssuesController.php
@@ -177,6 +177,7 @@ public function scanIssue(Issue $issue, PhpAllyService $phpAlly, UtilityService
             $issue->setFixedBy($this->getUser());
             $issue->setFixedOn($util->getCurrentTime());
             $this->getDoctrine()->getManager()->flush();
+            $apiResponse->addMessage('form.msg.success_resolved', 'success');
         }
 
         // Add messages to response