[WIP] Moves upload component to mobX #1732
Conversation
Signed-off-by: Bipul Adhikari <[email protected]>
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: bipuladh The full list of commands accepted by this bot can be found here. The pull request process is described here
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
| if (fileId in this.uploads) { | ||
| const existingData = this.uploads[fileId]; | ||
| if (existingData?.abort) { | ||
| existingData?.abort?.(); |
There was a problem hiding this comment.
| existingData?.abort?.(); | |
| existingData.abort(); |
is this optional check required here?
| Object.values(uploadProgress).forEach((upload) => upload?.abort?.()); | ||
| }, [uploadProgress]); | ||
| export const ObjectListWithSidebar: React.FC<ObjectListWithSidebarProps> = | ||
| observer(({ obj: { refresh, triggerRefresh } }) => { |
There was a problem hiding this comment.
Why do we need an observer here, i am assuming obj has only two props refresh and triggerRefresh and both are used here and refresh is nothing but boolean only. so what exactly it is going to optimize?
| failedUploads, | ||
| totalUploads, | ||
| closeAlert, | ||
| }) => { |
There was a problem hiding this comment.
i am wondering observer won't help here: https://mobx.js.org/react-integration.html#tip-grab-values-from-objects-as-late-as-possible
| const { t } = useCustomTranslation(); | ||
| const [isModalOpen, setModalOpen] = React.useState(false); | ||
| export const AbortUploadsModal: React.FC<AbortUploadsModalProps> = observer( | ||
| ({ abortAll }) => { |
There was a problem hiding this comment.
same here, observer might not required here: https://mobx.js.org/react-integration.html#tip-grab-values-from-objects-as-late-as-possible
| configure({ | ||
| enforceActions: 'always', | ||
| computedRequiresReaction: true, | ||
| reactionRequiresObservable: true, | ||
| observableRequiresReaction: true, | ||
| disableErrorBoundaries: true, | ||
| }); |
There was a problem hiding this comment.
can we move it to store.ts ?
| // eslint-disable-next-line guard-for-in | ||
| for (const key in this.uploads) { | ||
| delete this.uploads[key]; | ||
| } |
There was a problem hiding this comment.
what if ??
| // eslint-disable-next-line guard-for-in | |
| for (const key in this.uploads) { | |
| delete this.uploads[key]; | |
| } | |
| this.uploads = {}; |
| const { t } = useCustomTranslation(); | ||
| const [isModalOpen, setModalOpen] = React.useState(false); | ||
| export const AbortUploadsModal: React.FC<AbortUploadsModalProps> = observer( | ||
| ({ abortAll }) => { |
There was a problem hiding this comment.
https://mobx.js.org/react-integration.html#tip-grab-values-from-objects-as-late-as-possible
In the above example, the TimerView component would not react to future changes if it was defined as follows, because the .secondsPassed is not read inside the observer component, but outside, and is hence not tracked:
There was a problem hiding this comment.
we should dereference abortAll during render of AbortUploadsModal IMO.
| uploadStore.addFile(convertFileToUploadProgress(file, key), key); | ||
| }); | ||
| setUploadStatus(UploadStatus.UPLOAD_START); | ||
| const batches = _.chunk(acceptedFiles, 8); |
There was a problem hiding this comment.
can we make it 6 instead ?? given that's the typical browser limit per domain: https://medium.com/@hnasr/chromes-6-tcp-connections-limit-c199fe550af6
| const batches = _.chunk(acceptedFiles, 8); | |
| const batches = _.chunk(acceptedFiles, 6); |
There was a problem hiding this comment.
8 is also fine, but just asking...
| ); | ||
| const [completionTime, setCompletionTime] = React.useState<number>(); | ||
| configure({ | ||
| enforceActions: 'always', |
There was a problem hiding this comment.
There is also eslint-plugin-mobx that we can add to ensure healthy code.
| @@ -1,6 +1,8 @@ | |||
| import * as React from 'react'; | |||
| import { DrawerHead, Status, useCustomTranslation } from '@odf/shared'; | |||
| import { ResourceStatus } from '@openshift-console/dynamic-plugin-sdk'; | |||
| // eslint-disable-next-line import/no-extraneous-dependencies | |||
There was a problem hiding this comment.
The dependency is already added...
| // eslint-disable-next-line import/no-extraneous-dependencies |
| @@ -0,0 +1,93 @@ | |||
| // eslint-disable-next-line import/no-extraneous-dependencies | |||
There was a problem hiding this comment.
| // eslint-disable-next-line import/no-extraneous-dependencies |
No description provided.