Refactor file viewer #7270
Refactor file viewer #7270
Conversation
There was a problem hiding this comment.
@ch-iv great work! The code in this component is quite thorny, and you've done a good job teasing it apart. I've left a few comments on how you can streamline further (with a bit more aggressive refactoring).
One thing to watch out for as you are doing manual tests of your code is to make sure in the grading view that annotations are correctly rendered as files are switched, when switching between viewers of different types (e.g., pdf -> text) and between different files that use the same viewer.
| }); | ||
| } | ||
| }); | ||
| this.setFileUrl(submission_file_id); |
There was a problem hiding this comment.
Similar to my comment on your other PR, this function calls setState, which isn't synchronous. As you probably noticed, in the current implementation of setFileUrl, all of the URL-creation code is synchronous except the heic/heif image formats, which currently require a separate request to be made.
You can try doing the following:
- Move the heic/heif handling into the
ImageViewercomponent, where it more logically belongs - Change
this.setFileUrltothis.getFileUrland just (synchronously) return a URL, and then use that to set the initial url in thesetStatecall on line 114 - Ideally set the
typestate in that initial call (L114) as well, so that you don't need the if branch code on Lines 122-124 - See also my comment on the plaintext/binary branch a bit further below
| if (response.ok) { | ||
| return response.text(); | ||
| } | ||
| const delimiter = this.props.selectedFileURL.includes("?") ? "&" : "?"; |
There was a problem hiding this comment.
This delimiter-handling part is quite awkward; I believe you're running into this because you're trying to unify the handling of multiple different URLs.
Rather than insert this here, please modify how the URLs are originally generated to include these query parameters directly. (I assume this will involve a few different locations, because of the different places this component is used.)
| return response.text(); | ||
| } | ||
| const delimiter = this.props.selectedFileURL.includes("?") ? "&" : "?"; | ||
| fetch( |
There was a problem hiding this comment.
Okay, so a larger change you can make (which I'd support) is to move the content fetching here into the TextViewer and BinaryViewer components. This will make the different viewer components more uniform in how they fetch data, and help simplify the FileViewer code.
# Conflicts: # app/assets/javascripts/Components/Result/file_viewer.jsx
Proposed Changes
(Describe your changes here. Also describe the motivation for your changes: what problem do they solve, or how do they improve the application or codebase? If this pull request fixes an open issue, use a keyword to link this pull request to the issue.)
...
Screenshots of your changes (if applicable)
Associated documentation repository pull request (if applicable)
Type of Change
(Write an
Xor a brief description next to the type or types that best describe your changes.)Checklist
(Complete each of the following items for your pull request. Indicate that you have completed an item by changing the
[ ]into a[x]in the raw text, or by clicking on the checkbox in the rendered description on GitHub.)Before opening your pull request:
After opening your pull request:
Questions and Comments
(Include any questions or comments you have regarding your changes.)