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

fix: Description with mentions shown for a while after saving #50490

Merged
merged 5 commits into from
Oct 16, 2024
Merged

fix: Description with mentions shown for a while after saving #50490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3fdadb2
fix: Description with mentions shown in preview but after saved disap…
truph01 Oct 5, 2024
af0dd9f
merge main
truph01 Oct 9, 2024
e8fe3c3
fix: type
truph01 Oct 9, 2024
4265a0c
fix: type
truph01 Oct 9, 2024
7646be8
fix: use useOnyx
truph01 Oct 16, 2024
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
1 change: 1 addition & 0 deletions ...omponents/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {createContext} from 'react';

type MentionReportContextProps = {
currentReportID: string;
exactlyMatch?: boolean;
};

const MentionReportContext = createContext<MentionReportContextProps>({
Expand Down
31 changes: 7 additions & 24 deletions src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, {useContext, useMemo} from 'react';
import type {TextStyle} from 'react-native';
import {StyleSheet} from 'react-native';
import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
import {useOnyx, withOnyx} from 'react-native-onyx';
import {useOnyx} from 'react-native-onyx';
import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
import Text from '@components/Text';
Expand All @@ -18,12 +18,7 @@ import type {Report} from '@src/types/onyx';
import {isEmptyObject} from '@src/types/utils/EmptyObject';
import MentionReportContext from './MentionReportContext';

type MentionReportOnyxProps = {
/** All reports shared with the user */
reports: OnyxCollection<Report>;
};

type MentionReportRendererProps = MentionReportOnyxProps & CustomRendererProps<TText | TPhrasing>;
type MentionReportRendererProps = CustomRendererProps<TText | TPhrasing>;

const removeLeadingLTRAndHash = (value: string) => value.replace(CONST.UNICODE.LTR, '').replace('#', '');

Expand Down Expand Up @@ -53,11 +48,12 @@ const getMentionDetails = (htmlAttributeReportID: string, currentReport: OnyxEnt
return {reportID, mentionDisplayText};
};

function MentionReportRenderer({style, tnode, TDefaultRenderer, reports, ...defaultRendererProps}: MentionReportRendererProps) {
function MentionReportRenderer({style, tnode, TDefaultRenderer, ...defaultRendererProps}: MentionReportRendererProps) {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const htmlAttributeReportID = tnode.attributes.reportid;
const {currentReportID: currentReportIDContext} = useContext(MentionReportContext);
const {currentReportID: currentReportIDContext, exactlyMatch} = useContext(MentionReportContext);
const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);

const currentReportID = useCurrentReportID();
const currentReportIDValue = currentReportIDContext || currentReportID?.currentReportID;
Expand Down Expand Up @@ -86,7 +82,7 @@ function MentionReportRenderer({style, tnode, TDefaultRenderer, reports, ...defa
// eslint-disable-next-line react/jsx-props-no-spreading
{...defaultRendererProps}
style={
isGroupPolicyReport
isGroupPolicyReport && (!exactlyMatch || navigationRoute)
? [styles.link, styleWithoutColor, StyleUtils.getMentionStyle(isCurrentRoomMention), {color: StyleUtils.getMentionTextColor(isCurrentRoomMention)}]
: []
}
Expand All @@ -111,17 +107,4 @@ function MentionReportRenderer({style, tnode, TDefaultRenderer, reports, ...defa

MentionReportRenderer.displayName = 'MentionReportRenderer';

const chatReportSelector = (report: OnyxEntry<Report>): Report =>
(report && {
reportID: report.reportID,
reportName: report.reportName,
displayName: report.displayName,
policyID: report.policyID,
}) as Report;

export default withOnyx<MentionReportRendererProps, MentionReportOnyxProps>({
reports: {
key: ONYXKEYS.COLLECTION.REPORT,
selector: chatReportSelector,
},
})(MentionReportRenderer);
export default MentionReportRenderer;
28 changes: 17 additions & 11 deletions src/pages/ReportDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView
import DelegateNoAccessModal from '@components/DelegateNoAccessModal';
import DisplayNames from '@components/DisplayNames';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext';
import * as Expensicons from '@components/Icon/Expensicons';
import MenuItem from '@components/MenuItem';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
Expand Down Expand Up @@ -736,6 +737,9 @@ function ReportDetailsPage({policies, report, route}: ReportDetailsPageProps) {

isTransactionDeleted.current = true;
}, [caseID, iouTransactionID, moneyRequestReport?.reportID, report, requestParentReportAction, isSingleTransactionView]);

const mentionReportContextValue = useMemo(() => ({currentReportID: report.reportID, exactlyMatch: true}), [report.reportID]);

return (
<ScreenWrapper testID={ReportDetailsPage.displayName}>
<FullPageNotFoundView shouldShow={isEmptyObject(report)}>
Expand All @@ -755,17 +759,19 @@ function ReportDetailsPage({policies, report, route}: ReportDetailsPageProps) {

{shouldShowReportDescription && (
<OfflineWithFeedback pendingAction={report.pendingFields?.description}>
<MenuItemWithTopDescription
shouldShowRightIcon
interactive
title={report.description}
shouldRenderAsHTML
shouldTruncateTitle
characterLimit={100}
shouldCheckActionAllowedOnPress={false}
description={translate('reportDescriptionPage.roomDescription')}
onPress={() => Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(report.reportID, Navigation.getActiveRoute()))}
/>
<MentionReportContext.Provider value={mentionReportContextValue}>
<MenuItemWithTopDescription
shouldShowRightIcon
interactive
title={report.description}
shouldRenderAsHTML
shouldTruncateTitle
characterLimit={100}
shouldCheckActionAllowedOnPress={false}
description={translate('reportDescriptionPage.roomDescription')}
onPress={() => Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(report.reportID, Navigation.getActiveRoute()))}
/>
</MentionReportContext.Provider>
</OfflineWithFeedback>
)}

Expand Down
Loading