Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Revert "Bidirectional pagination" #30409

Closed
wants to merge 1 commit into from
Closed

Revert "Bidirectional pagination" #30409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions src/CONST.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2779,20 +2779,13 @@ const CONST = {
SCROLLING: 'scrolling',
},

CHAT_HEADER_LOADER_HEIGHT: 36,

HORIZONTAL_SPACER: {
DEFAULT_BORDER_BOTTOM_WIDTH: 1,
DEFAULT_MARGIN_VERTICAL: 8,
HIDDEN_MARGIN_VERTICAL: 0,
HIDDEN_BORDER_BOTTOM_WIDTH: 0,
},

LIST_COMPONENTS: {
HEADER: 'header',
FOOTER: 'footer',
},

GLOBAL_NAVIGATION_OPTION: {
HOME: 'home',
CHATS: 'chats',
Expand Down
2 changes: 1 addition & 1 deletion src/ONYXKEYS.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ const ONYXKEYS = {
POLICY_RECENTLY_USED_TAGS: 'policyRecentlyUsedTags_',
WORKSPACE_INVITE_MEMBERS_DRAFT: 'workspaceInviteMembersDraft_',
REPORT: 'report_',
// REPORT_METADATA is a perf optimization used to hold loading states (isLoadingInitialReportActions, isLoadingOlderReportActions, isLoadingNewerReportActions).
// REPORT_METADATA is a perf optimization used to hold loading states (isLoadingReportActions, isLoadingMoreReportActions).
// A lot of components are connected to the Report entity and do not care about the actions. Setting the loading state
// directly on the report caused a lot of unnecessary re-renders
REPORT_METADATA: 'reportMetadata_',
Expand Down
3 changes: 0 additions & 3 deletions src/components/InvertedFlatList/BaseInvertedFlatList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,9 +133,6 @@ function BaseInvertedFlatList(props) {
// Web requires that items be measured or else crazy things happen when scrolling.
getItemLayout={shouldMeasureItems ? getItemLayout : undefined}
windowSize={15}
maintainVisibleContentPosition={{
minIndexForVisible: 0,
}}
inverted
/>
);
Expand Down
17 changes: 7 additions & 10 deletions src/components/ReportActionsSkeletonView/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,23 @@ 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({shouldAnimate, possibleVisibleContentItems}) {
const contentItems = possibleVisibleContentItems || Math.ceil(Dimensions.get('window').height / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT);
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);
const skeletonViewLines = [];
for (let index = 0; index < contentItems; index++) {
for (let index = 0; index < possibleVisibleContentItems; index++) {
const iconIndex = (index + 1) % 4;
switch (iconIndex) {
case 2:
skeletonViewLines.push(
<SkeletonViewLines
shouldAnimate={shouldAnimate}
shouldAnimate={props.shouldAnimate}
numberOfRows={2}
key={`skeletonViewLines${index}`}
/>,
Expand All @@ -35,7 +32,7 @@ function ReportActionsSkeletonView({shouldAnimate, possibleVisibleContentItems})
case 0:
skeletonViewLines.push(
<SkeletonViewLines
shouldAnimate={shouldAnimate}
shouldAnimate={props.shouldAnimate}
numberOfRows={3}
key={`skeletonViewLines${index}`}
/>,
Expand All @@ -44,7 +41,7 @@ function ReportActionsSkeletonView({shouldAnimate, possibleVisibleContentItems})
default:
skeletonViewLines.push(
<SkeletonViewLines
shouldAnimate={shouldAnimate}
shouldAnimate={props.shouldAnimate}
numberOfRows={1}
key={`skeletonViewLines${index}`}
/>,
Expand Down
2 changes: 1 addition & 1 deletion src/libs/actions/Policy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -372,7 +372,7 @@ function createPolicyExpenseChats(policyID, invitedEmailsToAccountIDs) {
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${optimisticReport.reportID}`,
value: {
isLoadingInitialReportActions: false,
isLoadingReportActions: false,
},
});
});
Expand Down
77 changes: 14 additions & 63 deletions src/libs/actions/Report.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -477,9 +477,8 @@ function openReport(reportID, participantLoginList = [], newReportObject = {}, p
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,
value: {
isLoadingInitialReportActions: true,
isLoadingOlderReportActions: false,
isLoadingNewerReportActions: false,
isLoadingReportActions: true,
isLoadingMoreReportActions: false,
},
},
];
Expand All @@ -502,7 +501,7 @@ function openReport(reportID, participantLoginList = [], newReportObject = {}, p
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,
value: {
isLoadingInitialReportActions: false,
isLoadingReportActions: false,
},
},
];
Expand All @@ -512,7 +511,7 @@ function openReport(reportID, participantLoginList = [], newReportObject = {}, p
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,
value: {
isLoadingInitialReportActions: false,
isLoadingReportActions: false,
},
},
];
Expand Down Expand Up @@ -738,9 +737,8 @@ function reconnect(reportID) {
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,
value: {
isLoadingInitialReportActions: true,
isLoadingNewerReportActions: false,
isLoadingOlderReportActions: false,
isLoadingReportActions: true,
isLoadingMoreReportActions: false,
},
},
],
Expand All @@ -749,7 +747,7 @@ function reconnect(reportID) {
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,
value: {
isLoadingInitialReportActions: false,
isLoadingReportActions: false,
},
},
],
Expand All @@ -758,7 +756,7 @@ function reconnect(reportID) {
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,
value: {
isLoadingInitialReportActions: false,
isLoadingReportActions: false,
},
},
],
Expand All @@ -773,9 +771,9 @@ function reconnect(reportID) {
* @param {String} reportID
* @param {String} reportActionID
*/
function getOlderActions(reportID, reportActionID) {
function readOldestAction(reportID, reportActionID) {
API.read(
'GetOlderActions',
'ReadOldestAction',
{
reportID,
reportActionID,
Expand All @@ -786,7 +784,7 @@ function getOlderActions(reportID, reportActionID) {
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,
value: {
isLoadingOlderReportActions: true,
isLoadingMoreReportActions: true,
},
},
],
Expand All @@ -795,7 +793,7 @@ function getOlderActions(reportID, reportActionID) {
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,
value: {
isLoadingOlderReportActions: false,
isLoadingMoreReportActions: false,
},
},
],
Expand All @@ -804,53 +802,7 @@ function getOlderActions(reportID, reportActionID) {
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,
value: {
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,
},
},
],
successData: [
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,
value: {
isLoadingNewerReportActions: false,
},
},
],
failureData: [
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,
value: {
isLoadingNewerReportActions: false,
isLoadingMoreReportActions: false,
},
},
],
Expand Down Expand Up @@ -2459,6 +2411,7 @@ export {
expandURLPreview,
markCommentAsUnread,
readNewestAction,
readOldestAction,
openReport,
openReportFromDeepLink,
navigateToAndOpenReport,
Expand All @@ -2483,8 +2436,6 @@ export {
getReportPrivateNote,
clearPrivateNotesError,
hasErrorInPrivateNotes,
getOlderActions,
getNewerActions,
openRoomMembersPage,
savePrivateNotesDraft,
getDraftPrivateNote,
Expand Down
26 changes: 8 additions & 18 deletions src/pages/home/ReportScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,8 @@ const defaultProps = {
hasOutstandingIOU: false,
},
reportMetadata: {
isLoadingInitialReportActions: true,
isLoadingOlderReportActions: false,
isLoadingNewerReportActions: false,
isLoadingReportActions: true,
isLoadingMoreReportActions: false,
},
isComposerFullSize: false,
betas: [],
Expand Down Expand Up @@ -166,7 +165,7 @@ function ReportScreen({
const screenWrapperStyle = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}];

// There are no reportActions at all to display and we are still in the process of loading the next set of actions.
const isLoadingInitialReportActions = _.isEmpty(reportActions) && reportMetadata.isLoadingInitialReportActions;
const isLoadingInitialReportActions = _.isEmpty(reportActions) && reportMetadata.isLoadingReportActions;

const isOptimisticDelete = lodashGet(report, 'statusNum') === CONST.REPORT.STATUS.CLOSED;

Expand Down Expand Up @@ -261,13 +260,6 @@ function ReportScreen({
const onSubmitComment = useCallback(
(text) => {
Report.addComment(getReportID(route), text);

// We need to scroll to the bottom of the list after the comment is added
const refID = setTimeout(() => {
flatListRef.current.scrollToOffset({animated: false, offset: 0});
}, 10);

return () => clearTimeout(refID);
},
[route],
);
Expand Down Expand Up @@ -380,7 +372,7 @@ function ReportScreen({

// eslint-disable-next-line rulesdir/no-negated-variables
const shouldShowNotFoundPage = useMemo(
() => (!firstRenderRef.current && !report.reportID && !isOptimisticDelete && !reportMetadata.isLoadingInitialReportActions && !isLoading && !userLeavingStatus) || shouldHideReport,
() => (!firstRenderRef.current && !report.reportID && !isOptimisticDelete && !reportMetadata.isLoadingReportActions && !isLoading && !userLeavingStatus) || shouldHideReport,
[report, reportMetadata, isLoading, shouldHideReport, isOptimisticDelete, userLeavingStatus],
);

Expand Down Expand Up @@ -436,9 +428,8 @@ function ReportScreen({
<ReportActionsView
reportActions={reportActions}
report={report}
isLoadingInitialReportActions={reportMetadata.isLoadingInitialReportActions}
isLoadingNewerReportActions={reportMetadata.isLoadingNewerReportActions}
isLoadingOlderReportActions={reportMetadata.isLoadingOlderReportActions}
isLoadingReportActions={reportMetadata.isLoadingReportActions}
isLoadingMoreReportActions={reportMetadata.isLoadingMoreReportActions}
isComposerFullSize={isComposerFullSize}
policy={policy}
/>
Expand Down Expand Up @@ -497,9 +488,8 @@ export default compose(
reportMetadata: {
key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${getReportID(route)}`,
initialValue: {
isLoadingInitialReportActions: true,
isLoadingOlderReportActions: false,
isLoadingNewerReportActions: false,
isLoadingReportActions: true,
isLoadingMoreReportActions: false,
},
},
isComposerFullSize: {
Expand Down
Loading
Loading