-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Bidirectional pagination #26166
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
Bidirectional pagination #26166
Changes from all commits
426707f
cfa1c1e
89fefbf
741a3b9
a82dc0f
2619fa8
42fe76a
3df7a19
66483bf
a480524
2f69a83
694c423
35076a4
fe22397
e6f23df
045b07d
a9243e3
99cead6
bd27f36
063ef90
9fb4792
84d1953
cfe420d
120eefa
484f596
bde5a21
821adb8
652967c
5ef510d
fae75dd
2d094f0
5109429
84cb84c
0849919
a4f6834
1829ade
063af42
7dfc82e
1387d21
a3e609d
35f1ad3
6839c22
297e8ec
6a863a4
c1201d5
d48bdc8
34ea6f8
bd08f5e
f0ae93f
244cff4
6dd8147
cfb4bee
9043f69
8ebb468
bf9c309
f046ce1
f45bc44
06aeba6
b9b966c
9b04dd6
d5c16b0
d185048
463f96c
fece482
6c6adc4
92becc1
45f2f46
d508082
c9f0620
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 |
|---|---|---|
|
|
@@ -7,23 +7,26 @@ import CONST from '../../CONST'; | |
| const propTypes = { | ||
| /** Whether to animate the skeleton view */ | ||
| shouldAnimate: PropTypes.bool, | ||
|
|
||
| /** Number of possible visible content items */ | ||
| possibleVisibleContentItems: PropTypes.number, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| shouldAnimate: true, | ||
| possibleVisibleContentItems: 0, | ||
| }; | ||
|
|
||
| function ReportActionsSkeletonView(props) { | ||
| // Determines the number of content items based on container height | ||
| const possibleVisibleContentItems = Math.ceil(Dimensions.get('window').height / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT); | ||
| function ReportActionsSkeletonView({shouldAnimate, possibleVisibleContentItems}) { | ||
| const contentItems = possibleVisibleContentItems || Math.ceil(Dimensions.get('window').height / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT); | ||
|
Contributor
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. Coming from #59608 checklist: On mobile web the height from window depends on visualViewport which changes when the keyboard open/hide. Given our current logic for calculating the number of loading items based on height we should switch to using screen.height |
||
| const skeletonViewLines = []; | ||
| for (let index = 0; index < possibleVisibleContentItems; index++) { | ||
| for (let index = 0; index < contentItems; index++) { | ||
| const iconIndex = (index + 1) % 4; | ||
| switch (iconIndex) { | ||
| case 2: | ||
| skeletonViewLines.push( | ||
| <SkeletonViewLines | ||
| shouldAnimate={props.shouldAnimate} | ||
| shouldAnimate={shouldAnimate} | ||
| numberOfRows={2} | ||
| key={`skeletonViewLines${index}`} | ||
| />, | ||
|
|
@@ -32,7 +35,7 @@ function ReportActionsSkeletonView(props) { | |
| case 0: | ||
| skeletonViewLines.push( | ||
| <SkeletonViewLines | ||
| shouldAnimate={props.shouldAnimate} | ||
| shouldAnimate={shouldAnimate} | ||
| numberOfRows={3} | ||
| key={`skeletonViewLines${index}`} | ||
| />, | ||
|
|
@@ -41,7 +44,7 @@ function ReportActionsSkeletonView(props) { | |
| default: | ||
| skeletonViewLines.push( | ||
| <SkeletonViewLines | ||
| shouldAnimate={props.shouldAnimate} | ||
| shouldAnimate={shouldAnimate} | ||
| numberOfRows={1} | ||
| key={`skeletonViewLines${index}`} | ||
| />, | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -477,8 +477,9 @@ function openReport(reportID, participantLoginList = [], newReportObject = {}, p | |
| onyxMethod: Onyx.METHOD.MERGE, | ||
| key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, | ||
| value: { | ||
| isLoadingReportActions: true, | ||
| isLoadingMoreReportActions: false, | ||
| isLoadingInitialReportActions: true, | ||
| isLoadingOlderReportActions: false, | ||
| isLoadingNewerReportActions: false, | ||
perunt marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| }, | ||
| }, | ||
| ]; | ||
|
|
@@ -501,7 +502,7 @@ function openReport(reportID, participantLoginList = [], newReportObject = {}, p | |
| onyxMethod: Onyx.METHOD.MERGE, | ||
| key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, | ||
| value: { | ||
| isLoadingReportActions: false, | ||
| isLoadingInitialReportActions: false, | ||
| }, | ||
| }, | ||
| ]; | ||
|
|
@@ -511,7 +512,7 @@ function openReport(reportID, participantLoginList = [], newReportObject = {}, p | |
| onyxMethod: Onyx.METHOD.MERGE, | ||
| key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, | ||
| value: { | ||
| isLoadingReportActions: false, | ||
| isLoadingInitialReportActions: false, | ||
| }, | ||
| }, | ||
| ]; | ||
|
|
@@ -737,8 +738,9 @@ function reconnect(reportID) { | |
| onyxMethod: Onyx.METHOD.MERGE, | ||
| key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, | ||
| value: { | ||
| isLoadingReportActions: true, | ||
| isLoadingMoreReportActions: false, | ||
| isLoadingInitialReportActions: true, | ||
| isLoadingNewerReportActions: false, | ||
| isLoadingOlderReportActions: false, | ||
| }, | ||
| }, | ||
| ], | ||
|
|
@@ -747,7 +749,7 @@ function reconnect(reportID) { | |
| onyxMethod: Onyx.METHOD.MERGE, | ||
| key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, | ||
| value: { | ||
| isLoadingReportActions: false, | ||
| isLoadingInitialReportActions: false, | ||
| }, | ||
| }, | ||
| ], | ||
|
|
@@ -756,7 +758,7 @@ function reconnect(reportID) { | |
| onyxMethod: Onyx.METHOD.MERGE, | ||
| key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, | ||
| value: { | ||
| isLoadingReportActions: false, | ||
| isLoadingInitialReportActions: false, | ||
| }, | ||
| }, | ||
| ], | ||
|
|
@@ -771,9 +773,9 @@ function reconnect(reportID) { | |
| * @param {String} reportID | ||
| * @param {String} reportActionID | ||
| */ | ||
| function readOldestAction(reportID, reportActionID) { | ||
| function getOlderActions(reportID, reportActionID) { | ||
| API.read( | ||
| 'ReadOldestAction', | ||
| 'GetOlderActions', | ||
| { | ||
| reportID, | ||
| reportActionID, | ||
|
|
@@ -784,7 +786,7 @@ function readOldestAction(reportID, reportActionID) { | |
| onyxMethod: Onyx.METHOD.MERGE, | ||
| key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, | ||
| value: { | ||
| isLoadingMoreReportActions: true, | ||
| isLoadingOlderReportActions: true, | ||
| }, | ||
| }, | ||
| ], | ||
|
|
@@ -793,7 +795,7 @@ function readOldestAction(reportID, reportActionID) { | |
| onyxMethod: Onyx.METHOD.MERGE, | ||
| key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, | ||
| value: { | ||
| isLoadingMoreReportActions: false, | ||
| isLoadingOlderReportActions: false, | ||
| }, | ||
| }, | ||
| ], | ||
|
|
@@ -802,7 +804,53 @@ function readOldestAction(reportID, reportActionID) { | |
| onyxMethod: Onyx.METHOD.MERGE, | ||
| key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, | ||
| value: { | ||
| isLoadingMoreReportActions: false, | ||
| isLoadingOlderReportActions: false, | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Gets the newer actions that have not been read yet. | ||
| * Normally happens when you are not located at the bottom of the list and scroll down on a chat. | ||
| * | ||
| * @param {String} reportID | ||
| * @param {String} reportActionID | ||
| */ | ||
| function getNewerActions(reportID, reportActionID) { | ||
| API.read( | ||
| 'GetNewerActions', | ||
| { | ||
| reportID, | ||
| reportActionID, | ||
| }, | ||
| { | ||
| optimisticData: [ | ||
| { | ||
| onyxMethod: Onyx.METHOD.MERGE, | ||
| key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, | ||
| value: { | ||
| isLoadingNewerReportActions: true, | ||
|
Contributor
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. This caused a regression when we try to load more while the device is offline it will cause a loop setting the value of |
||
| }, | ||
| }, | ||
| ], | ||
| successData: [ | ||
| { | ||
| onyxMethod: Onyx.METHOD.MERGE, | ||
| key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, | ||
| value: { | ||
| isLoadingNewerReportActions: false, | ||
| }, | ||
| }, | ||
perunt marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| ], | ||
| failureData: [ | ||
| { | ||
| onyxMethod: Onyx.METHOD.MERGE, | ||
| key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, | ||
| value: { | ||
| isLoadingNewerReportActions: false, | ||
| }, | ||
| }, | ||
| ], | ||
|
|
@@ -2411,7 +2459,6 @@ export { | |
| expandURLPreview, | ||
| markCommentAsUnread, | ||
| readNewestAction, | ||
| readOldestAction, | ||
| openReport, | ||
| openReportFromDeepLink, | ||
| navigateToAndOpenReport, | ||
|
|
@@ -2436,6 +2483,8 @@ export { | |
| getReportPrivateNote, | ||
| clearPrivateNotesError, | ||
| hasErrorInPrivateNotes, | ||
| getOlderActions, | ||
| getNewerActions, | ||
| openRoomMembersPage, | ||
| savePrivateNotesDraft, | ||
| getDraftPrivateNote, | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.