Skip to content

Commit

Permalink
Merge pull request #31344 from DylanDylann/fix/27634-improve-private-…
Browse files Browse the repository at this point in the history
…note

Fix/27634: Improve private notes flow
  • Loading branch information
techievivek authored Nov 30, 2023
2 parents 6b1dac9 + de6787e commit 2febad0
Show file tree
Hide file tree
Showing 6 changed files with 66 additions and 23 deletions.
19 changes: 18 additions & 1 deletion src/libs/ReportUtils.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {format} from 'date-fns';
import ExpensiMark from 'expensify-common/lib/ExpensiMark';
import Str from 'expensify-common/lib/str';
import {isEmpty} from 'lodash';
import lodashEscape from 'lodash/escape';
import lodashFindLastIndex from 'lodash/findLastIndex';
import lodashIntersection from 'lodash/intersection';
Expand All @@ -14,7 +15,7 @@ import CONST from '@src/CONST';
import {TranslationPaths} from '@src/languages/types';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import {Beta, Login, PersonalDetails, Policy, PolicyTags, Report, ReportAction, Transaction} from '@src/types/onyx';
import {Beta, Login, PersonalDetails, Policy, PolicyTags, Report, ReportAction, Session, Transaction} from '@src/types/onyx';
import {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
import {ChangeLog, IOUMessage, OriginalMessageActionName} from '@src/types/onyx/OriginalMessage';
import {Message, ReportActions} from '@src/types/onyx/ReportAction';
Expand Down Expand Up @@ -4227,6 +4228,21 @@ function shouldDisableWelcomeMessage(report: OnyxEntry<Report>, policy: OnyxEntr
return isMoneyRequestReport(report) || isArchivedRoom(report) || !isChatRoom(report) || isChatThread(report) || !PolicyUtils.isPolicyAdmin(policy);
}

/**
* Navigates to the appropriate screen based on the presence of a private note for the current user.
*/
function navigateToPrivateNotes(report: Report, session: Session) {
if (isEmpty(report) || isEmpty(session)) {
return;
}
const currentUserPrivateNote = report.privateNotes?.[String(session.accountID)]?.note ?? '';
if (isEmpty(currentUserPrivateNote)) {
Navigation.navigate(ROUTES.PRIVATE_NOTES_EDIT.getRoute(report.reportID, String(session.accountID)));
return;
}
Navigation.navigate(ROUTES.PRIVATE_NOTES_LIST.getRoute(report.reportID));
}

export {
getReportParticipantsTitle,
isReportMessageAttachment,
Expand Down Expand Up @@ -4391,6 +4407,7 @@ export {
getChannelLogMemberMessage,
getRoom,
shouldDisableWelcomeMessage,
navigateToPrivateNotes,
canEditWriteCapability,
};

Expand Down
14 changes: 8 additions & 6 deletions src/pages/PrivateNotes/PrivateNotesEditPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import withLocalize from '@components/withLocalize';
import useLocalize from '@hooks/useLocalize';
import compose from '@libs/compose';
import Navigation from '@libs/Navigation/Navigation';
import * as ReportUtils from '@libs/ReportUtils';
import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
import personalDetailsPropType from '@pages/personalDetailsPropType';
Expand Down Expand Up @@ -94,19 +95,21 @@ function PrivateNotesEditPage({route, personalDetailsList, report}) {

const savePrivateNote = () => {
const originalNote = lodashGet(report, ['privateNotes', route.params.accountID, 'note'], '');

let editedNote = '';
if (privateNote.trim() !== originalNote.trim()) {
const editedNote = Report.handleUserDeletedLinksInHtml(privateNote.trim(), parser.htmlToMarkdown(originalNote).trim());
editedNote = Report.handleUserDeletedLinksInHtml(privateNote.trim(), parser.htmlToMarkdown(originalNote).trim());
Report.updatePrivateNotes(report.reportID, route.params.accountID, editedNote);
}

// We want to delete saved private note draft after saving the note
debouncedSavePrivateNote('');

Keyboard.dismiss();

// Take user back to the PrivateNotesView page
Navigation.goBack(ROUTES.PRIVATE_NOTES_VIEW.getRoute(report.reportID, route.params.accountID));
if (!_.some({...report.privateNotes, [route.params.accountID]: {note: editedNote}}, (item) => item.note)) {
ReportUtils.navigateToDetailsPage(report);
} else {
Navigation.goBack(ROUTES.PRIVATE_NOTES_LIST.getRoute(report.reportID));
}
};

return (
Expand All @@ -117,7 +120,6 @@ function PrivateNotesEditPage({route, personalDetailsList, report}) {
>
<HeaderWithBackButton
title={translate('privateNotes.title')}
subtitle={translate('privateNotes.myNote')}
onBackButtonPress={() => Navigation.goBack(ROUTES.PRIVATE_NOTES_VIEW.getRoute(report.reportID, route.params.accountID))}
shouldShowBackButton
onCloseButtonPress={() => Navigation.dismissModal()}
Expand Down
46 changes: 33 additions & 13 deletions src/pages/PrivateNotes/PrivateNotesListPage.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
import {useIsFocused} from '@react-navigation/native';
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
import React, {useMemo} from 'react';
import React, {useEffect, useMemo} from 'react';
import {ScrollView} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import MenuItem from '@components/MenuItem';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import {withNetwork} from '@components/OnyxProvider';
import ScreenWrapper from '@components/ScreenWrapper';
import Text from '@components/Text';
import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
import useLocalize from '@hooks/useLocalize';
import compose from '@libs/compose';
import Navigation from '@libs/Navigation/Navigation';
import * as UserUtils from '@libs/UserUtils';
import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
import personalDetailsPropType from '@pages/personalDetailsPropType';
import reportPropTypes from '@pages/reportPropTypes';
Expand Down Expand Up @@ -57,6 +58,20 @@ const defaultProps = {
function PrivateNotesListPage({report, personalDetailsList, session}) {
const styles = useThemeStyles();
const {translate} = useLocalize();
const isFocused = useIsFocused();

useEffect(() => {
const navigateToEditPageTimeout = setTimeout(() => {
if (_.some(report.privateNotes, (item) => item.note) || !isFocused) {
return;
}
Navigation.navigate(ROUTES.PRIVATE_NOTES_EDIT.getRoute(report.reportID, session.accountID));
}, CONST.ANIMATED_TRANSITION);

return () => {
clearTimeout(navigateToEditPageTimeout);
};
}, [report.privateNotes, report.reportID, session.accountID, isFocused]);

/**
* Gets the menu item for each workspace
Expand All @@ -67,7 +82,6 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
*/
function getMenuItem(item, index) {
const keyTitle = item.translationKey ? translate(item.translationKey) : item.title;

return (
<OfflineWithFeedback
key={`${keyTitle}_${index}`}
Expand All @@ -76,14 +90,16 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
onClose={item.dismissError}
errors={item.errors}
>
<MenuItem
title={keyTitle}
icon={item.icon}
iconType={CONST.ICON_TYPE_WORKSPACE}
<MenuItemWithTopDescription
description={item.title}
title={item.note}
onPress={item.action}
shouldShowRightIcon
fallbackIcon={item.fallbackIcon}
shouldShowRightIcon={!item.disabled}
numberOfLinesTitle={0}
shouldRenderAsHTML
brickRoadIndicator={item.brickRoadIndicator}
disabled={item.disabled}
shouldGreyOutWhenDisabled={false}
/>
</OfflineWithFeedback>
);
Expand All @@ -98,10 +114,10 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
return _.chain(lodashGet(report, 'privateNotes', {}))
.map((privateNote, accountID) => ({
title: Number(lodashGet(session, 'accountID', null)) === Number(accountID) ? translate('privateNotes.myNote') : lodashGet(personalDetailsList, [accountID, 'login'], ''),
icon: UserUtils.getAvatar(lodashGet(personalDetailsList, [accountID, 'avatar'], UserUtils.getDefaultAvatar(accountID)), accountID),
iconType: CONST.ICON_TYPE_AVATAR,
action: () => Navigation.navigate(ROUTES.PRIVATE_NOTES_VIEW.getRoute(report.reportID, accountID)),
action: () => Navigation.navigate(ROUTES.PRIVATE_NOTES_EDIT.getRoute(report.reportID, accountID)),
brickRoadIndicator: privateNoteBrickRoadIndicator(accountID),
note: lodashGet(privateNote, 'note', ''),
disabled: Number(session.accountID) !== Number(accountID),
}))
.value();
}, [report, personalDetailsList, session, translate]);
Expand All @@ -116,6 +132,7 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
shouldShowBackButton
onCloseButtonPress={() => Navigation.dismissModal()}
/>
<Text style={[styles.mb5, styles.ph5]}>{translate('privateNotes.personalNoteMessage')}</Text>
<ScrollView contentContainerStyle={styles.flexGrow1}>{_.map(privateNotes, (item, index) => getMenuItem(item, index))}</ScrollView>
</ScreenWrapper>
);
Expand All @@ -132,6 +149,9 @@ export default compose(
personalDetailsList: {
key: ONYXKEYS.PERSONAL_DETAILS_LIST,
},
session: {
key: ONYXKEYS.SESSION,
},
}),
withNetwork(),
)(PrivateNotesListPage);
2 changes: 1 addition & 1 deletion src/pages/ProfilePage.js
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ function ProfilePage(props) {
title={`${props.translate('privateNotes.title')}`}
titleStyle={styles.flex1}
icon={Expensicons.Pencil}
onPress={() => Navigation.navigate(ROUTES.PRIVATE_NOTES_LIST.getRoute(props.report.reportID))}
onPress={() => ReportUtils.navigateToPrivateNotes(props.report, props.session)}
wrapperStyle={styles.breakAll}
shouldShowRightIcon
brickRoadIndicator={Report.hasErrorInPrivateNotes(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
Expand Down
7 changes: 5 additions & 2 deletions src/pages/ReportDetailsPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -137,13 +137,13 @@ function ReportDetailsPage(props) {
translationKey: 'privateNotes.title',
icon: Expensicons.Pencil,
isAnonymousAction: false,
action: () => Navigation.navigate(ROUTES.PRIVATE_NOTES_LIST.getRoute(props.report.reportID)),
action: () => ReportUtils.navigateToPrivateNotes(props.report, props.session),
brickRoadIndicator: Report.hasErrorInPrivateNotes(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '',
});
}

return items;
}, [isArchivedRoom, participants.length, isThread, isMoneyRequestReport, props.report, isGroupDMChat, isPolicyMember, isUserCreatedPolicyRoom]);
}, [isArchivedRoom, participants.length, isThread, isMoneyRequestReport, props.report, isGroupDMChat, isPolicyMember, isUserCreatedPolicyRoom, props.session]);

const displayNamesWithTooltips = useMemo(() => {
const hasMultipleParticipants = participants.length > 1;
Expand Down Expand Up @@ -256,5 +256,8 @@ export default compose(
policies: {
key: ONYXKEYS.COLLECTION.POLICY,
},
session: {
key: ONYXKEYS.SESSION,
},
}),
)(ReportDetailsPage);
1 change: 1 addition & 0 deletions src/types/onyx/Report.ts
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ type Report = {
isChatRoom?: boolean;
participantsList?: Array<Partial<PersonalDetails>>;
text?: string;
privateNotes?: Record<string, {note: string}>;
};

export default Report;

0 comments on commit 2febad0

Please sign in to comment.