Resolved Conflicts

Changelog.md

@@ -19,6 +19,7 @@
 - Modify MarkUs API to allow the CoursesController#index route to accept requests from all types of roles (#6619)
 - Modify MarkUs API to allow the AssignmentsController#index route to accept requests from all types of roles (#6619)
 - A user can't run tests with the same names / Single test error does not spoil the whole test batch (#6620)
+- Refactored GET requests to use fetch API instead of jQuery (#6622)
 - Change icon set to Font Awesome (Free) (#6627)
 - Add feature to generate a PDF report of a result (PDF submission files only) (#6635)
 - Add zoom feature to scanned exam template crop selection (#6640)

app/assets/javascripts/Components/Modals/create_modify_annotation_panel_modal.jsx

@@ -29,17 +29,22 @@ class CreateModifyAnnotationPanel extends React.Component {
       return;
     }
 
-    $.ajax({
-      method: "get",
-      url: Routes.find_annotation_text_course_assignment_annotation_categories_url(
-        this.props.course_id,
-        this.props.assignment_id
-      ),
-      dataType: "json",
-      data: {
-        string: value,
+    const url = Routes.find_annotation_text_course_assignment_annotation_categories_path(
+      this.props.course_id,
+      this.props.assignment_id,
+      {string: value}
+    );
+
+    fetch(url, {
+      headers: {
+        Accept: "application/json",
       },
     })
+      .then(response => {
+        if (response.ok) {
+          return response.json();
+        }
+      })
       .then(res => {
         if (res.length === 0) {
           this.setState({show_autocomplete: false});

app/assets/javascripts/Components/Result/binary_viewer.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export class BinaryViewer extends React.Component {
+export class BinaryViewer extends React.PureComponent {
   render() {
     return (
       <div>

app/assets/javascripts/Components/Result/file_viewer.jsx

@@ -145,17 +145,23 @@ export class FileViewer extends React.Component {
             this.setFileUrl();
           });
         } else {
-          $.ajax({
-            url: this.props.selectedFileURL,
-            data: {preview: true, force_text: force_text},
-            method: "GET",
-          }).then(res => {
-            this.setState({
-              content: res.replace(/\r?\n/gm, "\n"),
-              type: this.props.selectedFileType,
-              loading: false,
+          const requestData = {preview: true, force_text: force_text};
+          const url = this.props.selectedFileURL;
+          const queryString = new URLSearchParams(requestData);
+          const requestUrl = `${url}&${queryString}`;
+          fetch(requestUrl)
+            .then(response => {
+              if (response.ok) {
+                return response.text();
+              }
+            })
+            .then(res => {
+              this.setState({
+                content: res.replace(/\r?\n/gm, "\n"),
+                type: this.props.selectedFileType,
+                loading: false,
+              });
             });
-          });
         }
       }
     });

app/assets/javascripts/Components/Result/image_viewer.jsx

@@ -1,9 +1,9 @@
 import React from "react";
 import {render} from "react-dom";
 
-export class ImageViewer extends React.Component {
-  constructor() {
-    super();
+export class ImageViewer extends React.PureComponent {
+  constructor(props) {
+    super(props);
     this.state = {
       rotation: window.start_image_rotation || 0,
       zoom: window.start_image_zoom || 1,

app/assets/javascripts/Components/Result/notebook_viewer.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import {markupTextInRange} from "../Helpers/range_selector";
 
-export class NotebookViewer extends React.Component {
+export class NotebookViewer extends React.PureComponent {
   constructor(props) {
     super(props);
     this.iframe = React.createRef();

app/assets/javascripts/Components/Result/pdf_viewer.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export class PDFViewer extends React.Component {
+export class PDFViewer extends React.PureComponent {
   constructor(props) {
     super(props);
     this.pdfContainer = React.createRef();

app/assets/javascripts/Components/Result/result.jsx

@@ -78,20 +78,25 @@ class Result extends React.Component {
   }
 
   fetchData = () => {
-    $.get({
-      url: Routes.course_result_path(this.props.course_id, this.state.result_id),
-      dataType: "json",
-    }).then(res => {
-      if (res.submission_files) {
-        res.submission_files = this.processSubmissionFiles(res.submission_files);
-      }
-      const markData = this.processMarks(res);
-      this.setState({...res, ...markData, loading: false}, () => {
-        initializePanes();
-        fix_panes();
-        this.updateContextMenu();
+    fetch(Routes.course_result_path(this.props.course_id, this.state.result_id), {
+      headers: {Accept: "application/json"},
+    })
+      .then(response => {
+        if (response.ok) {
+          return response.json();
+        }
+      })
+      .then(res => {
+        if (res.submission_files) {
+          res.submission_files = this.processSubmissionFiles(res.submission_files);
+        }
+        const markData = this.processMarks(res);
+        this.setState({...res, ...markData, loading: false}, () => {
+          initializePanes();
+          fix_panes();
+          this.updateContextMenu();
+        });
       });
-    });
   };
 
   /* Processing result data */
@@ -240,7 +245,6 @@ class Result extends React.Component {
         this.setState({
           annotationModal: INITIAL_ANNOTATION_MODAL_STATE,
         });
-        this.refreshAnnotations();
       }); // Resetting back to original
     };
 
@@ -324,10 +328,7 @@ class Result extends React.Component {
 
     data = this.extend_with_selection_data(data);
     if (data) {
-      $.post(
-        Routes.add_existing_annotation_course_annotations_path(this.props.course_id),
-        data
-      ).then(this.refreshAnnotations);
+      $.post(Routes.add_existing_annotation_course_annotations_path(this.props.course_id), data);
     }
   };
 
@@ -352,24 +353,35 @@ class Result extends React.Component {
   };
 
   refreshAnnotationCategories = () => {
-    $.get({
-      url: Routes.course_assignment_annotation_categories_path(
+    fetch(
+      Routes.course_assignment_annotation_categories_path(
         this.props.course_id,
         this.state.parent_assignment_id || this.state.assignment_id
       ),
-      dataType: "json",
-    }).then(res => {
-      this.setState({annotation_categories: res});
-    });
+      {headers: {Accept: "application/json"}}
+    )
+      .then(response => {
+        if (response.ok) {
+          return response.json();
+        }
+      })
+      .then(res => {
+        this.setState({annotation_categories: res});
+      });
   };
 
   refreshAnnotations = () => {
-    $.ajax({
-      url: Routes.get_annotations_course_result_path(this.props.course_id, this.state.result_id),
-      dataType: "json",
-    }).then(res => {
-      this.setState({annotations: res});
-    });
+    fetch(Routes.get_annotations_course_result_path(this.props.course_id, this.state.result_id), {
+      headers: {Accept: "application/json"},
+    })
+      .then(response => {
+        if (response.ok) {
+          return response.json();
+        }
+      })
+      .then(res => {
+        this.setState({annotations: res});
+      });
   };
 
   editAnnotation = annot_id => {
@@ -668,33 +680,40 @@ class Result extends React.Component {
     return () => {
       const url = Routes.next_grouping_course_result_path(
         this.props.course_id,
-        this.state.result_id
+        this.state.result_id,
+        {direction: direction}
       );
       let data = {direction: direction};
       if (this.props.role !== "Student") {
         data["filterData"] = this.state.filterData;
       }
 
       this.setState({loading: true}, () => {
-        $.ajax({
-          url: url,
-          data: data,
-        }).then(result => {
-          if (!result.next_result || !result.next_grouping) {
-            alert(I18n.t("results.no_results_in_direction"));
-            this.setState({loading: false});
-            return;
-          }
-
-          const result_obj = {
-            result_id: result.next_result.id,
-            submission_id: result.next_result.submission_id,
-            grouping_id: result.next_grouping.id,
-          };
-          this.setState(prevState => ({...prevState, ...result_obj}));
-          let new_url = Routes.edit_course_result_url(this.props.course_id, this.state.result_id);
-          history.pushState({}, document.title, new_url);
-        });
+        fetch(url)
+          .then(response => {
+            if (response.ok) {
+              return response.json();
+            }
+          })
+          .then(result => {
+            if (!result.next_result || !result.next_grouping) {
+              alert(I18n.t("results.no_results_in_direction"));
+              this.setState({loading: false});
+              return;
+            }
+
+            const result_obj = {
+              result_id: result.next_result.id,
+              submission_id: result.next_result.submission_id,
+              grouping_id: result.next_grouping.id,
+            };
+            this.setState(prevState => ({...prevState, ...result_obj}));
+            let new_url = Routes.edit_course_result_path(
+              this.props.course_id,
+              this.state.result_id
+            );
+            history.pushState({}, document.title, new_url);
+          });
       });
     };
   };

app/assets/javascripts/Components/Result/submission_file_panel.jsx

@@ -14,6 +14,7 @@ export class SubmissionFilePanel extends React.Component {
       focusLine: null,
       annotationFocus: undefined,
       selectedFileType: null,
+      visibleAnnotations: [],
     };
     this.submissionFileViewer = React.createRef();
   }
@@ -32,6 +33,15 @@ export class SubmissionFilePanel extends React.Component {
       (prevProps.loading && !this.props.loading)
     ) {
       this.refreshSelectedFile();
+    } else if (
+      prevProps.annotations !== this.props.annotations &&
+      this.state.selectedFile !== null
+    ) {
+      const submission_file_id = this.state.selectedFile[1];
+      const visibleAnnotations = this.props.annotations.filter(
+        a => a.submission_file_id === submission_file_id
+      );
+      this.setState({visibleAnnotations});
     }
   }
 
@@ -64,7 +74,17 @@ export class SubmissionFilePanel extends React.Component {
       }
       selectedFile = this.getFirstFile(this.props.fileData);
     }
-    this.setState({selectedFile});
+
+    let visibleAnnotations;
+    if (selectedFile === null) {
+      visibleAnnotations = [];
+    } else {
+      const submission_file_id = selectedFile[1];
+      visibleAnnotations = this.props.annotations.filter(
+        a => a.submission_file_id === submission_file_id
+      );
+    }
+    this.setState({selectedFile, visibleAnnotations});
 
     // TODO: Incorporate DownloadSubmissionModal as true child of this component.
     if (this.props.canDownload) {
@@ -120,6 +140,7 @@ export class SubmissionFilePanel extends React.Component {
       selectedFile: [file, id],
       focusLine: focusLine,
       annotationFocus: annotationFocus,
+      visibleAnnotations: this.props.annotations.filter(a => a.submission_file_id === id),
     });
     localStorage.setItem("file", file);
   };
@@ -130,17 +151,13 @@ export class SubmissionFilePanel extends React.Component {
   };
 
   render() {
-    let submission_file_id, visibleAnnotations, submission_file_mime_type;
+    let submission_file_id, submission_file_mime_type;
     if (this.state.selectedFile === null) {
       submission_file_id = null;
       submission_file_mime_type = null;
-      visibleAnnotations = [];
     } else {
       submission_file_id = this.state.selectedFile[1];
       submission_file_mime_type = getType(this.state.selectedFile[0]);
-      visibleAnnotations = this.props.annotations.filter(
-        a => a.submission_file_id === submission_file_id
-      );
     }
     return (
       <React.Fragment>
@@ -172,7 +189,7 @@ export class SubmissionFilePanel extends React.Component {
             mime_type={submission_file_mime_type}
             result_id={this.props.result_id}
             selectedFile={submission_file_id}
-            annotations={visibleAnnotations}
+            annotations={this.state.visibleAnnotations}
             focusLine={this.state.focusLine}
             annotationFocus={this.state.annotationFocus}
             released_to_students={this.props.released_to_students}

app/assets/javascripts/Components/Result/text_viewer.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import {render} from "react-dom";
 
-export class TextViewer extends React.Component {
+export class TextViewer extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {