-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
proposal: preserve fetching order #2
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -505,27 +505,52 @@ export default class HvScreen extends React.Component { | |
doc: newRoot, | ||
}); | ||
|
||
// If a target is specified and exists, use it. Otherwise, the action target defaults | ||
// to the element triggering the action. | ||
const getTargetElement = () => { | ||
let targetElement = targetId ? this.doc?.getElementById(targetId) : currentElement; | ||
if (!targetElement) { | ||
targetElement = currentElement; | ||
} | ||
return targetElement | ||
} | ||
|
||
// Before fetching, check if the behavior needs order to be preserved. | ||
// If so, we need to set a flag on the element that we check upon receiving the response. | ||
// If that flag has changed, that means another more recent request has been made, and we | ||
// need to discard the response. | ||
const targetElement = getTargetElement(); | ||
const preserveOrderId = ( | ||
behaviorElement || currentElement | ||
)?.getAttribute('preserve-order') === 'true' | ||
? String(Math.random()) | ||
: null; | ||
if (preserveOrderId !== null) { | ||
targetElement.setAttribute('_preserve-order-id', preserveOrderId); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. style: Use a constant for '_preserve-order-id' to avoid magic strings |
||
} | ||
Comment on lines
+522
to
+530
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. style: Consider using a more descriptive name for preserveOrderId, such as requestSequenceId |
||
|
||
// Fetch the resource, then perform the action on the target and undo indicators. | ||
const fetchAndUpdate = () => this.fetchElement(href, verb, newRoot, formData) | ||
.then((newElement) => { | ||
// If a target is specified and exists, use it. Otherwise, the action target defaults | ||
// to the element triggering the action. | ||
let targetElement = targetId ? this.doc?.getElementById(targetId) : currentElement; | ||
if (!targetElement) { | ||
targetElement = currentElement; | ||
} | ||
|
||
if (newElement) { | ||
newRoot = Behaviors.performUpdate(action, targetElement, newElement); | ||
} else { | ||
// When fetch fails, make sure to get the latest version of the doc to avoid any race conditions | ||
newRoot = this.doc; | ||
const targetElement = getTargetElement(); | ||
const shouldSkipUpdate = preserveOrderId !== null && targetElement.getAttribute('_preserve-order-id') !== preserveOrderId; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. style: Add a comment explaining the purpose of shouldSkipUpdate for better code readability |
||
if (!shouldSkipUpdate) { | ||
if (newElement) { | ||
newRoot = Behaviors.performUpdate(action, targetElement, newElement); | ||
if (preserveOrderId) { | ||
// Un-set the preserve order id on the target element as the update is now done | ||
targetElement.setAttribute('_preserve-order-id', ""); | ||
} | ||
Comment on lines
+540
to
+543
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. style: Consider moving this logic to a separate method for better organization |
||
} else { | ||
// When fetch fails, make sure to get the latest version of the doc to avoid any race conditions | ||
newRoot = this.doc; | ||
} | ||
newRoot = Behaviors.setIndicatorsAfterLoad(showIndicatorIdList, hideIndicatorIdList, newRoot); | ||
// Re-render the modifications | ||
this.setState({ | ||
doc: newRoot, | ||
}); | ||
} | ||
newRoot = Behaviors.setIndicatorsAfterLoad(showIndicatorIdList, hideIndicatorIdList, newRoot); | ||
// Re-render the modifications | ||
this.setState({ | ||
doc: newRoot, | ||
}); | ||
|
||
if (typeof onEnd === 'function') { | ||
onEnd(); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: Use optional chaining (?.) consistently here