[feat] Allow rename before image upload in EditPage, refactor ImageModal #117
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit achieves two things: 1. It allows ImageSettingsModal to receive a `toReload` prop since we do not always want the page to reload. In the case of EditPage with the ImageModal, we want users to be able to upload an image and then select it right away. If we do not have a `toReload` prop, the window will reload and the ImageModal will be reset. 2. It adds custom logic for `isPendingUpload`. In cases where the image/file is pending upload, there should not be a delete button in the ImageSettingsModal, and the Save button would not be subject to the usual constraints (requiring a `sha` value before the button becomes active since the create operation does not require a `sha`)
This commit accomplishes a couple of things: 1. It introduces the functionality to rename image before uploading for the ImageModal (this functionality was firrst introduced for the Images tab in PR #107). 2. It refactors the ImagesModal to be a PureComponent. Previously, the ImageModal retrieved images and saved this images in state. This functionality can be moved to its parent component, EditPage, so that only an `images` prop is passed to the ImageModal. This is beneficial because the ImageModal logic is simple and its output really depends on the images that are passed as props to it. Since the key for the images are the filenames, this means that when we upload a new image, React will perform a shallow compare based on the filenames and only render the new uploaded image instead of re-rendering all the images.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
This PR achieves a couple of things:
EditPagecomponent (previously implemented for theImagestab in [Feat] Allow image upload in EditPage #105).ImageModalcomponent to be a ReactPureComponent. This provides performance benefits when rendering newly uploaded images. We can usePureComponentbecause the shallow comparison performed byPureComponent(which only compares references for objects/nested state) is sufficient because we do not and will not allow users to replace the content of an image while retaining the file name.Renaming before upload
This functionality is facilitated by storing
imagesin the parentEditPageinstead of insideImageModal. Ifimageswere stored insideImageModal, we would need to define a modal inside a modal, which would prevent us from taking advantage of the performance benefits afforded by usingPureComponent. The flow for uploading an image inEditPagethus becomes:ImageModalappearsImageModal. This allows the user to select an image to upload.ImageSettingsModalto rename the image. Upon clicking save,EditPageretrieves the images again so that the newly uploaded image is reflected inImageModaland theImageSettingsModalis closed.