From db7566827feb297c6782d4cabb027f82a93d183a Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 21 Feb 2024 16:54:25 +0300 Subject: [PATCH 1/5] updated to mark as read on switching between tabs --- src/pages/home/report/ReportActionsList.js | 67 +++++++++++++++++++++- 1 file changed, 64 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 1da806b9c269..79109a81dafd 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -1,4 +1,4 @@ -import {useRoute} from '@react-navigation/native'; +import {useIsFocused, useRoute} from '@react-navigation/native'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'; @@ -144,6 +144,18 @@ function ReportActionsList({ const route = useRoute(); const opacity = useSharedValue(0); const userActiveSince = useRef(null); + const lastMessageTime = useRef(null); + + const [isVisible, setIsVisible] = useState(false); + const isFocused = useIsFocused(); + + useEffect(() => { + const unsubscriber = Visibility.onVisibilityChange(() => { + setIsVisible(Visibility.isVisible()); + }); + + return unsubscriber; + }, []); const markerInit = () => { if (!cacheUnreadMarkers.has(report.reportID)) { @@ -388,7 +400,7 @@ function ReportActionsList({ [currentUnreadMarker, sortedVisibleReportActions, report.reportID, messageManuallyMarkedUnread], ); - useEffect(() => { + const calculateUnreadMarker = useCallback(() => { // Iterate through the report actions and set appropriate unread marker. // This is to avoid a warning of: // Cannot update a component (ReportActionsList) while rendering a different component (CellRenderer). @@ -406,7 +418,56 @@ function ReportActionsList({ if (!markerFound) { setCurrentUnreadMarker(null); } - }, [sortedVisibleReportActions, report.lastReadTime, report.reportID, messageManuallyMarkedUnread, shouldDisplayNewMarker, currentUnreadMarker]); + }, [sortedVisibleReportActions, report.reportID, shouldDisplayNewMarker, currentUnreadMarker]); + + useEffect(() => { + calculateUnreadMarker(); + }, [calculateUnreadMarker, report.lastReadTime, messageManuallyMarkedUnread]); + + useEffect(() => { + if (!userActiveSince.current || report.reportID !== prevReportID) { + return; + } + + if (!isVisible || !isFocused) { + if (!lastMessageTime.current) { + lastMessageTime.current = lodashGet(sortedVisibleReportActions, '[0].created', ''); + } + return; + } + + // In case the user read new messages (after being inactive) with other device we should + // show marker based on report.lastReadTime + const newMessageTimeReference = lastMessageTime.current > report.lastReadTime ? userActiveSince.current : report.lastReadTime; + lastMessageTime.current = null; + if ( + scrollingVerticalOffset.current >= MSG_VISIBLE_THRESHOLD || + !( + sortedVisibleReportActions && + _.some( + sortedVisibleReportActions, + (reportAction) => + newMessageTimeReference < reportAction.created && + (ReportActionsUtils.isReportPreviewAction(reportAction) ? reportAction.childLastActorAccountID : reportAction.actorAccountID) !== Report.getCurrentUserAccountID(), + ) + ) + ) { + return; + } + + Report.readNewestAction(report.reportID); + userActiveSince.current = DateUtils.getDBTime(); + lastReadTimeRef.current = newMessageTimeReference; + setCurrentUnreadMarker(null); + cacheUnreadMarkers.delete(report.reportID); + calculateUnreadMarker(); + + // This effect logic to `mark as read` will only run when the report focused has new messages and the App visibility + // is changed to visible(meaning user switched to app/web, while user was previously using different tab or application). + // We will mark the report as read in the above case which marks the LHN report item as read while showing the new message + // marker for the chat messages received while the user wasn't focused on the report or on another browser tab for web. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isFocused, isVisible]); const renderItem = useCallback( ({item: reportAction, index}) => ( From d8014834f23561af031502559dec9960e89fd673 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Wed, 21 Feb 2024 17:15:59 +0300 Subject: [PATCH 2/5] removed focus event --- src/pages/home/report/ReportActionsList.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 79109a81dafd..67b9229337ba 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -1,4 +1,4 @@ -import {useIsFocused, useRoute} from '@react-navigation/native'; +import {useRoute} from '@react-navigation/native'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'; @@ -147,7 +147,7 @@ function ReportActionsList({ const lastMessageTime = useRef(null); const [isVisible, setIsVisible] = useState(false); - const isFocused = useIsFocused(); + // const isFocused = useIsFocused(); useEffect(() => { const unsubscriber = Visibility.onVisibilityChange(() => { @@ -429,7 +429,7 @@ function ReportActionsList({ return; } - if (!isVisible || !isFocused) { + if (!isVisible) { if (!lastMessageTime.current) { lastMessageTime.current = lodashGet(sortedVisibleReportActions, '[0].created', ''); } @@ -467,7 +467,7 @@ function ReportActionsList({ // We will mark the report as read in the above case which marks the LHN report item as read while showing the new message // marker for the chat messages received while the user wasn't focused on the report or on another browser tab for web. // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isFocused, isVisible]); + }, [isVisible]); const renderItem = useCallback( ({item: reportAction, index}) => ( From 3118f032f0042b5aa830f5354d402ed133638e91 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Thu, 22 Feb 2024 17:38:58 +0300 Subject: [PATCH 3/5] add focus check --- src/pages/home/report/ReportActionsList.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 67b9229337ba..79109a81dafd 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -1,4 +1,4 @@ -import {useRoute} from '@react-navigation/native'; +import {useIsFocused, useRoute} from '@react-navigation/native'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'; @@ -147,7 +147,7 @@ function ReportActionsList({ const lastMessageTime = useRef(null); const [isVisible, setIsVisible] = useState(false); - // const isFocused = useIsFocused(); + const isFocused = useIsFocused(); useEffect(() => { const unsubscriber = Visibility.onVisibilityChange(() => { @@ -429,7 +429,7 @@ function ReportActionsList({ return; } - if (!isVisible) { + if (!isVisible || !isFocused) { if (!lastMessageTime.current) { lastMessageTime.current = lodashGet(sortedVisibleReportActions, '[0].created', ''); } @@ -467,7 +467,7 @@ function ReportActionsList({ // We will mark the report as read in the above case which marks the LHN report item as read while showing the new message // marker for the chat messages received while the user wasn't focused on the report or on another browser tab for web. // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isVisible]); + }, [isFocused, isVisible]); const renderItem = useCallback( ({item: reportAction, index}) => ( From 34cbadf553137442615b0675b57bcd6493bfd607 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Thu, 22 Feb 2024 17:48:55 +0300 Subject: [PATCH 4/5] fix performance test --- tests/perf-test/ReportActionsList.perf-test.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tests/perf-test/ReportActionsList.perf-test.js b/tests/perf-test/ReportActionsList.perf-test.js index 34b127c217e4..d904fea16c79 100644 --- a/tests/perf-test/ReportActionsList.perf-test.js +++ b/tests/perf-test/ReportActionsList.perf-test.js @@ -40,6 +40,9 @@ jest.mock('@react-navigation/native', () => { return { ...actualNav, useRoute: () => mockedNavigate, + useIsFocused: () => ({ + navigate: jest.fn(), + }), }; }); From f12d925149a3aaab15bb5c48c86b785125dcef16 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Sat, 2 Mar 2024 20:50:50 +0300 Subject: [PATCH 5/5] fix mock --- tests/perf-test/ReportActionsList.perf-test.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/tests/perf-test/ReportActionsList.perf-test.js b/tests/perf-test/ReportActionsList.perf-test.js index f0f5a2726124..1555f2032275 100644 --- a/tests/perf-test/ReportActionsList.perf-test.js +++ b/tests/perf-test/ReportActionsList.perf-test.js @@ -40,9 +40,7 @@ jest.mock('@react-navigation/native', () => { return { ...actualNav, useRoute: () => mockedNavigate, - useIsFocused: () => ({ - navigate: jest.fn(), - }), + useIsFocused: () => true, }; });