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.

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

Refactor Update Last Read #9529

Merged
merged 9 commits into from
Jul 9, 2022
Merged

Refactor Update Last Read #9529

merged 9 commits into from
Jul 9, 2022

Conversation

madmax330
Copy link
Contributor

@madmax330 madmax330 commented Jun 22, 2022

Details

Fixed Issues

$ https://github.com/Expensify/Expensify/issues/212871

Tests

  • Verify that no errors appear in the JS console

  • In one chrome log into newDot

  • In another incognito window log into another account on newDot

  • Send messages to the first user

  • If this is a new chat make sure when you click on the chat the messages are marked as read

  • If this is an existing chat:

    • If the report is already open, make sure messages are marked as read as they come in
    • If the report is not already open, make sure messages are marked as read when you click on the report

PR Review Checklist

Contributor (PR Author) Checklist

  • I linked the correct issue in the ### Fixed Issues section above
  • I wrote clear testing steps that cover the changes made in this PR
    • I added steps for local testing in the Tests section
    • I added steps for Staging and/or Production testing in the QA steps section
    • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
    • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I included screenshots or videos for tests on all platforms
  • I ran the tests on all platforms & verified they passed on:
    • iOS / native
    • Android / native
    • iOS / Safari
    • Android / Chrome
    • MacOS / Chrome
    • MacOS / Desktop
  • I verified there are no console errors (if there’s a console error not related to the PR, report it or open an issue for it to be fixed)
  • I followed proper code patterns (see Reviewing the code)
    • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
    • I verified that comments were added to code that is not self explanatory
    • I verified that any new or modified comments were clear, correct English, and explained “why” the code was doing something instead of only explaining “what” the code was doing.
    • I verified any copy / text shown in the product was added in all src/languages/* files
    • I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team on the original GH to get the correct copy.
    • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named “index.js”. All platform-specific files are named for the platform the code supports as outlined in the README.
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I followed the guidelines as stated in the Review Guidelines
  • I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
  • I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
  • If a new component is created I verified that:
    • A similar component doesn't exist in the codebase
    • All props are defined accurately and each prop has a /** comment above it */
    • Any functional components have the displayName property
    • The file is named correctly
    • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
    • The only data being stored in the state is data necessary for rendering and nothing else
    • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
    • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
    • All JSX used for rendering exists in the render method
    • The component has the minimum amount of code necessary for its purpose and it is
  • If a new CSS style is added I verified that:
    • A similar style doesn’t already exist
    • The style can’t be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
  • If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
  • If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.

PR Reviewer Checklist

  • I verified the correct issue is linked in the ### Fixed Issues section above
  • I verified testing steps are clear and they cover the changes made in this PR
    • I verified the steps for local testing are in the Tests section
    • I verified the steps for Staging and/or Production testing are in the QA steps section
    • I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
    • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I checked that screenshots or videos are included for tests on all platforms
  • I verified tests pass on all platforms & I tested again on:
    • iOS / native
    • Android / native
    • iOS / Safari
    • Android / Chrome
    • MacOS / Chrome
    • MacOS / Desktop
  • I verified there are no console errors (if there’s a console error not related to the PR, report it or open an issue for it to be fixed)
  • I verified proper code patterns were followed (see Reviewing the code)
    • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
    • I verified that comments were added to code that is not self explanatory
    • I verified that any new or modified comments were clear, correct English, and explained “why” the code was doing something instead of only explaining “what” the code was doing.
    • I verified any copy / text shown in the product was added in all src/languages/* files
    • I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team on the original GH to get the correct copy.
    • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named “index.js”. All platform-specific files are named for the platform the code supports as outlined in the README.
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I verified that this PR follows the guidelines as stated in the Review Guidelines
  • I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
  • I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
  • If a new component is created I verified that:
    • A similar component doesn't exist in the codebase
    • All props are defined accurately and each prop has a /** comment above it */
    • Any functional components have the displayName property
    • The file is named correctly
    • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
    • The only data being stored in the state is data necessary for rendering and nothing else
    • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
    • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
    • All JSX used for rendering exists in the render method
    • The component has the minimum amount of code necessary for its purpose and it is broken down into smaller components in order to separate concerns and functions
  • If a new CSS style is added I verified that:
    • A similar style doesn’t already exist
    • The style can’t be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
  • If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
  • If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.

QA Steps

  • Verify that no errors appear in the JS console

See "Tests"

Screenshots

This is not a UI change, so I tested on web to show the right network requests being made to the new API commands

Web

update.read.mov

Mobile Web

Screen.Recording.2022-07-01.at.7.10.54.PM.mov

Desktop

Screen.Recording.2022-07-01.at.7.07.51.PM.mov

iOS

Android

@madmax330 madmax330 requested review from marcaaron and a team as code owners June 22, 2022 10:47
@madmax330 madmax330 self-assigned this Jun 22, 2022
@melvin-bot melvin-bot bot requested review from johnmlee101 and removed request for a team June 22, 2022 10:47
@madmax330 madmax330 changed the title [WIP] Refactor Update Last Read Refactor Update Last Read Jun 29, 2022
@madmax330
Copy link
Contributor Author

Updated and tested, this is ready for review

@madmax330 madmax330 changed the title Refactor Update Last Read [HOLD Web 34097] Refactor Update Last Read Jun 29, 2022
@marcaaron
Copy link
Contributor

Adding @arosiclair as well since he is tagged on the Web-E PR

@arosiclair
Copy link
Contributor

arosiclair commented Jun 30, 2022

I'm seeing an issue where occasionally the report is marked as read briefly and then goes back to unread after switching to it. Seems to be caused by Report_GetHistory getting chained.

Will the functionality for Report_GetHistory get refactored into OpenReport with another issue or should it be this one?

Screen.Recording.2022-06-30.at.10.22.43.AM.mov

@arosiclair
Copy link
Contributor

@madmax330 also you have to flesh out your QA steps (even if its just "same as tests") and screenshots sections

@madmax330
Copy link
Contributor Author

madmax330 commented Jun 30, 2022

Will the functionality for Report_GetHistory get refactored into OpenReport with another issue or should it be this one?

Good observation, Report_GetHistory is a separate refactor that will update this behavior. See: https://github.com/Expensify/Expensify/issues/212871#issuecomment-1168063361

also you have to flesh out your QA steps (even if its just "same as tests")

Good call.

and screenshots sections

Not sure what to include for this still since it's not a UI change really, but I'll include a video or the indicator updating and the network tab to show that we're making the requests to the new API

@madmax330
Copy link
Contributor Author

Updated and added a description to the screenshots section

@arosiclair
Copy link
Contributor

Not sure what to include for this still since it's not a UI change really, but I'll include a video or the indicator updating and the network tab to show that we're making the requests to the new API

Thanks but you'll have to include recordings for each platform unfortunately since this is UI behavior we're implementing. I'll be testing this on each platform too (minus Android since the build is broken on M1 right now).

@madmax330 madmax330 changed the title [HOLD Web 34097] Refactor Update Last Read Refactor Update Last Read Jul 1, 2022
@madmax330
Copy link
Contributor Author

Cool, I've added videos for mweb, and desktop. I'll add ios, and android sometime next week b/c it's not working rn.

since this is UI behavior we're implementing

I don't agree with this. These changes don't modify or add any UI components so none of the components will look different than they did before this PR.
All it's modifying is the api calls.

@arosiclair
Copy link
Contributor

arosiclair commented Jul 1, 2022

I don't agree with this. These changes don't modify or add any UI components so none of the components will look different than they did before this PR. All it's modifying is the api calls.

I don't like the cross-platform testing requirement for functional changes either, but the guidelines don't really give us an exception. I'll ask for clarification in eng-chat.

EDIT: sounds like we should

src/libs/actions/Report.js Show resolved Hide resolved
src/libs/actions/Report.js Outdated Show resolved Hide resolved
src/libs/actions/Report.js Outdated Show resolved Hide resolved
src/libs/actions/Report.js Outdated Show resolved Hide resolved
src/libs/actions/Report.js Show resolved Hide resolved
@@ -201,6 +202,7 @@ class ReportActionsView extends React.Component {

componentDidUpdate(prevProps) {
if (prevProps.network.isOffline && !this.props.network.isOffline) {
Report.openReport(this.props.reportID);
this.fetchData();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noting: Once the report actions fetching stuff is refactored this call should not be here anymore. cc @sketchydroide

src/pages/home/report/ReportActionsView.js Outdated Show resolved Hide resolved
src/pages/home/report/ReportActionsView.js Outdated Show resolved Hide resolved
src/pages/home/report/ReportActionsView.js Outdated Show resolved Hide resolved
@madmax330
Copy link
Contributor Author

I was retesting this and it seems nothing is ever unread anymore.
When I open two chats, one normal one incognito, the latest chats always show as read already:

Screen.Recording.2022-07-06.at.10.58.44.PM.mov

I'm on latest web and app, I think it's the AddComment PR that broke this (b/c even without my latest changes it's not working). Do I need to be on the latest Auth as well @marcaaron ?

@marcaaron
Copy link
Contributor

I'm on latest web and app, I think it's the AddComment PR that broke this (b/c even without my latest changes it's not working). Do I need to be on the latest Auth as well @marcaaron ?

Shouldn't need any Auth changes. Is it broken if you switch to main?

@madmax330
Copy link
Contributor Author

Is it broken if you switch to main?

Yeah it's broken on main for me.

@marcaaron
Copy link
Contributor

Ok, it does seem like something is broken 😬

On a fresh chat with a new user it will show as unread, but leaving additional comments and they are not showing as unread. Will take a look (unless you have an idea about what is broken).

@madmax330
Copy link
Contributor Author

unless you have an idea about what is broken

I don't, but I can look as well 🙃

@marcaaron
Copy link
Contributor

Just documenting here what I am seeing as well... first comment from a user seems OK later comments not so much.

2022-07-07_07-44-23.mp4

@marcaaron
Copy link
Contributor

Ok so doing some debugging and I think it has to do with the timestamp check. For some reason, the timestamp of the actions getting created on dev is off by a solid 30 seconds.

2022-07-07_08-08-12

That means the logic here won't run...

App/src/libs/actions/Report.js

Lines 1495 to 1498 in eb54f23

// If we are past the deadline to notify for this comment don't do it
if (moment.utc(action.timestamp * 1000).isBefore(moment.utc().subtract(10, 'seconds'))) {
return;
}

Seems to work ok on staging though.

@marcaaron
Copy link
Contributor

marcaaron commented Jul 7, 2022

Ok, so pretty weird stuff, but I think we are both affected by the VM clock drifting based on this thread -> https://expensify.slack.com/archives/C03TQ48KC/p1657218624480699

After a vagrant reload the unreads started to work normally again for me.

Which also explains why nobody noticed this and why it worked fine for me before but suddenly stopped working 😓

@madmax330
Copy link
Contributor Author

Oh wow, you're right, restarting the vm fixed it. I wonder what happened between yesterday and the day before for my clock to skew by 30s 😕

@madmax330
Copy link
Contributor Author

Aright, I addressed the comments and re-tested.
The rest will either be removed in the PR that will implement OpenReport or in your PR to clean up the unread count stuff.
lmk what you think

Copy link
Contributor

@marcaaron marcaaron left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry @madmax330 meant to approve this but changes LGTM. Gonna wrap up a few other things in my open PR so you don't get clobbered with conflicts 😅

src/libs/actions/Report.js Show resolved Hide resolved
src/libs/actions/Report.js Show resolved Hide resolved
onyxMethod: 'merge',
key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
value: {
lastVisitedTimestamp: Math.round(Date.now() / 1000),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NAB and sorry, as mentioned in that other comment I was wrong about this and Date.now() is totally fine to use as it returns milliseconds and the lastVisitedTimestamp should be in ms.

@marcaaron marcaaron merged commit a0c4e83 into main Jul 9, 2022
@marcaaron marcaaron deleted the maxence-rrulr branch July 9, 2022 01:29
@melvin-bot
Copy link

melvin-bot bot commented Jul 9, 2022

@marcaaron looks like this was merged without passing tests. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

@melvin-bot melvin-bot bot added the Emergency label Jul 9, 2022
@OSBotify
Copy link
Contributor

OSBotify commented Jul 9, 2022

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

@marcaaron
Copy link
Contributor

GH actions did pass.

@OSBotify
Copy link
Contributor

🚀 Deployed to staging by @marcaaron in version: 1.1.83-1 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

@OSBotify
Copy link
Contributor

🚀 Deployed to production by @chiragsalian in version: 1.1.84-13 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants