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: Move MemberMessage rendering to UI component #15980

Merged
merged 4 commits into from
Oct 11, 2023

Conversation

atomrc
Copy link
Contributor

@atomrc atomrc commented Oct 11, 2023

Description

Removes the need to use dangerouslySetInnerHTML for member system message rendered in the message list.
Instead we do inline replacement of dynamic values in translations using the new ReactLocalizerUtil

Screenshots/Screencast (for UI changes)

Screen.Recording.2023-10-11.at.16.33.23.mov

Checklist

  • PR has been self reviewed by the author;
  • Hard-to-understand areas of the code have been commented;
  • If it is a core feature, unit tests have been added;

Comment on lines -76 to -81
const handleShowMoreClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
const clickedOnShowMore = (event.target as HTMLElement).closest('.message-header-show-more');
if (clickedOnShowMore) {
onClickParticipants(highlightedUsers);
}
};
Copy link
Contributor Author

@atomrc atomrc Oct 11, 2023

Choose a reason for hiding this comment

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

This is now a native React click handler (no more listening to clicks on the parent component)

return <p className="message-header-caption" dangerouslySetInnerHTML={{__html: htmlCaption}}></p>;
export function MessageContent({message, onClickAction}: {message: MemberMessageEntity; onClickAction: () => void}) {
const htmlCaption = getContent(message);
const content = replaceReactComponents(htmlCaption, [
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is where the magic happens. We input a string like "hello <strong>felix</strong>" and, with the right config, the <strong> part will be replace with a react component.

@atomrc atomrc changed the title refactor: restore native react click handler refactor: Move MemberMessage rendering to UI component Oct 11, 2023
@codecov
Copy link

codecov bot commented Oct 11, 2023

Codecov Report

Merging #15980 (35d3642) into dev (7203e19) will increase coverage by 0.01%.
Report is 8 commits behind head on dev.
The diff coverage is 65.47%.

@@            Coverage Diff             @@
##              dev   #15980      +/-   ##
==========================================
+ Coverage   44.58%   44.60%   +0.01%     
==========================================
  Files         685      686       +1     
  Lines       22902    22908       +6     
  Branches     5201     5201              
==========================================
+ Hits        10212    10218       +6     
- Misses      11373    11375       +2     
+ Partials     1317     1315       -2     

@atomrc atomrc merged commit e5c51f3 into dev Oct 11, 2023
11 checks passed
@atomrc atomrc deleted the refactor/member-message-render branch October 11, 2023 14:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants