Prevent file viewer unnecessary re-renders (#6662)

MarkUsProject · Jul 8, 2023 · d0e4b99 · d0e4b99
1 parent b889f32
commit d0e4b99
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 19 deletions.
diff --git a/app/assets/javascripts/Components/Result/binary_viewer.jsx b/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>

diff --git a/app/assets/javascripts/Components/Result/image_viewer.jsx b/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,

diff --git a/app/assets/javascripts/Components/Result/notebook_viewer.jsx b/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();

diff --git a/app/assets/javascripts/Components/Result/pdf_viewer.jsx b/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();

diff --git a/app/assets/javascripts/Components/Result/result.jsx b/app/assets/javascripts/Components/Result/result.jsx
@@ -221,7 +221,6 @@ class Result extends React.Component {
         this.setState({
           annotationModal: INITIAL_ANNOTATION_MODAL_STATE,
         });
-        this.refreshAnnotations();
       }); // Resetting back to original
     };
 
@@ -305,10 +304,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);
     }
   };
 

diff --git a/app/assets/javascripts/Components/Result/submission_file_panel.jsx b/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}

diff --git a/app/assets/javascripts/Components/Result/text_viewer.jsx b/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 = {