Refactor Report.js to remove Ion.get()#403
Conversation
| */ | ||
| export default { | ||
| ACTIVE_CLIENT_IDS: 'activeClientIDs', | ||
| ACTIVE_CLIENTS: 'active_clients', |
There was a problem hiding this comment.
The renaming of these keys is OK. If you want to have a "clean" local storage (with no unused keys), just sign out and sign back in
| return ( | ||
| <> | ||
| {_.map(this.props.reports, report => ( | ||
| {_.map(this.props.reports, report => report.reportID && ( |
There was a problem hiding this comment.
When can reportID not be set? Might be worth a comment
There was a problem hiding this comment.
Yeah, that's a good call. This might have only been something that happened in the middle of my refactoring so I will see if this can be removed.
|
|
||
| componentDidUpdate(prevProps) { | ||
| // When the number of actions change, wait three seconds, then record the max action | ||
| // This will make the unread indicator go away if you receive comments in the same chat you're looking at |
There was a problem hiding this comment.
Just so I understand, if I'm in a chat and a new message comes in, the channel name will be bold, and 3 seconds later it'll the channel name will no longer be bold?
There was a problem hiding this comment.
Yes, correct. Do you think that is good? The alternatives are:
- It always stays bold
- It doesn't turn bold at all
- The delay is changed
- Some other action makes it not bold anymore
There was a problem hiding this comment.
I had to add a little bit of logic to this so that it will only run this if you're currently looking at the report (or else if a comment comes in on a report you aren't looking at, it disappears from the sidebar after 3 seconds 😂 )
There was a problem hiding this comment.
I don't think we need this, but I think this is ok for now. I say we don't need this because I'm guessing we're going to implement a marker like slack's (screenshot below) that denotes were the first unread message is (imo, not having this is a blocker for moving group convos to expensify, because it's very hard to know where you left off) and that will make this "sidebard unread indicator" unnecessary

| /** | ||
| * This function is triggered from the ref callback for the scrollview. That way it can be scrolled once all the | ||
| * items have been rendered. If the number of items in our history have changed since it was last rendered, then | ||
| * items have been rendered. If the number of actions have changed since it was last rendered, then |
| import ChatSwitcherList from './ChatSwitcherList'; | ||
| import ChatSwitcherSearchForm from './ChatSwitcherSearchForm'; | ||
| import {fetchChatReport} from '../../../lib/actions/Report'; | ||
| import {fetchOrCreateChatReport} from '../../../lib/actions/Report'; |
| }; | ||
|
|
||
| const SidebarLink = (props) => { | ||
| if (!props.reportName) { |
There was a problem hiding this comment.
When will a report not have a name? might be worth a comment
| * Get the chat report ID, and then the history, for a chat report for a specific | ||
| * Get the actions of a report | ||
| * | ||
| * @param {string} reportID |
| let reportID; | ||
|
|
||
| // Get the current users accountID and set it aside in a local variable | ||
| // which is used for checking if there are unread comments |
| * set of participants | ||
| * | ||
| * @param {string[]} participants | ||
| * @returns {Promise} |
There was a problem hiding this comment.
NAB * @returns {Promise} resolves with reportID
| * @param {object} report | ||
| */ | ||
| function handleReportChanged(report) { | ||
| // Nothing can be done without a report ID and it's OK to fail gracefully |
There was a problem hiding this comment.
Add why/when this would happen
| return; | ||
| } | ||
|
|
||
| if (report && report.reportName === undefined) { |
There was a problem hiding this comment.
- The first condition will always be true, or the if above will fail
- NAB, use _.isUndefined, or
!report.reportName
There was a problem hiding this comment.
Just FYI, the underscore source says:
/** @deprecated since v4.0.0 - use `value === undefined` instead. */
I also don't want to do a falsy check because an empty string should be OK (as far as not having any code throw errors anywhere).
| REPORT_ACTION: 'reportAction', | ||
| REPORT_HISTORY: 'report_history', | ||
| FIRST_REPORT_ID: 'first_report_id', | ||
| REPORT_ACTIONS: 'report_actions', |
There was a problem hiding this comment.
Can we all it reportActions? Basically let's just copy the database as near as possible. No need to switch from camelcase to underscore-separated.
| FIRST_REPORT_ID: 'first_report_id', | ||
| MY_PERSONAL_DETAILS: 'my_personal_details', | ||
| NETWORK: 'network', | ||
| PERSONAL_DETAILS: 'personal_details', |
There was a problem hiding this comment.
Is this what the NVP is called in the database? If not, can we rename it? Indeed, for all of these, can we use camelcase to match the database and NVP nomenclature?
There was a problem hiding this comment.
Sure, I'll rename them to be camel case
| _.each(fetchedReports, (report) => { | ||
| // Store only the absolute bare minimum of data in Ion because space is limited | ||
| const newReport = getSimplifiedReportObject(report, accountID); | ||
| const newReport = getSimplifiedReportObject(report); |
| function fetchActions(reportID) { | ||
| return queueRequest('Report_GetHistory', { | ||
| reportID, | ||
| offset: 0, |
|
Thanks for the reviews, everyone! This has been updated to address everything. |
| callback: val => currentURL = val, | ||
| }); | ||
|
|
||
| // Use a regex pattern here for an exact match so it doesn't also match "my_personal_details" |
There was a problem hiding this comment.
"my_personal_details" => "myPersonalDetails", although probably better to update this to just say // Use a regex pattern here for an exact match
| if (newMaxSequenceNumber > previousMaxSequenceNumber) { | ||
| Ion.merge(`${IONKEYS.REPORT}_${reportID}`, { | ||
| hasUnread: true, | ||
| maxSequenceNumber: newMaxSequenceNumber, |
There was a problem hiding this comment.
This is the same value that was set in the call to Ion.merge above, so maybe we can condense these two calls into one
Ion.merge(`${IONKEYS.REPORT}_${reportID}`, {
reportID,
maxSequenceNumber: reportAction.sequenceNumber,
hasUnread: reportAction.sequenceNumber > reportMaxSequenceNumbers[reportID]
});| */ | ||
| function addHistoryItem(reportID, reportComment) { | ||
| const historyKey = `${IONKEYS.REPORT_HISTORY}_${reportID}`; | ||
| function addAction(reportID, text) { |
There was a problem hiding this comment.
reportComment is a way better name than text. Not sure if you changed this to match the database, but text doesn't really match anything, and reportComment is a common term we use (plus the action for these is ADDCOMMENT to there is a similarity in the names)
I know this is a huge PR that touches a lot of things, but most of them are pretty superficial. This PR contains:
Ion.get()references inReport.jsReport.jsto reflect the beauty of Ion being fully asynchronous (no need to do so many things as a sequence of promises)Tests
Need to do general regression testing on pretty much everything. Be sure to test the following flow:
cc @quinthar