From 1147c629be1e1e1a83519e3ff33d39f54c92e5b4 Mon Sep 17 00:00:00 2001
From: Gregoire <gregoire@level-one.fr>
Date: Thu, 13 May 2021 18:13:36 +0200
Subject: [PATCH] fix(youtubeVideoMessage): use notice state to memoize
 formated message

---
 .../organisms/NoticeDetails/NoticeDetails.tsx | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/organisms/NoticeDetails/NoticeDetails.tsx b/src/components/organisms/NoticeDetails/NoticeDetails.tsx
index 7d1a68210..74279f226 100644
--- a/src/components/organisms/NoticeDetails/NoticeDetails.tsx
+++ b/src/components/organisms/NoticeDetails/NoticeDetails.tsx
@@ -97,15 +97,23 @@ export interface NoticeDetailsMethodsProps {
 export type NoticeDetailsProps = NoticeDetailsDataProps &
   NoticeDetailsMethodsProps & { t: TFunction };
 
-class NoticeDetails extends PureComponent<NoticeDetailsProps, CountDownState> {
+interface NoticeDetailsState extends CountDownState {
+  message: string;
+}
+const noticeDetailsInitState = { ...countdownInitialState, message: '' };
+
+class NoticeDetails extends PureComponent<
+  NoticeDetailsProps,
+  NoticeDetailsState
+> {
   constructor(props: NoticeDetailsProps) {
     super(props);
-    this.state = countdownInitialState;
+    this.state = noticeDetailsInitState;
   }
 
   startCountdown = () => {
     const intervalID = window.setInterval(this.updateCountdown, 1000);
-    this.setState({ ...countdownInitialState, intervalID });
+    this.setState({ ...noticeDetailsInitState, intervalID });
   };
 
   updateCountdown = () => {
@@ -199,6 +207,11 @@ class NoticeDetails extends PureComponent<NoticeDetailsProps, CountDownState> {
   };
 
   componentDidMount(): void {
+    this.setState({
+      ...noticeDetailsInitState,
+      message: formatMessage(this.props.notice.message)
+    });
+
     const {
       view,
       notice: { id }
@@ -211,7 +224,6 @@ class NoticeDetails extends PureComponent<NoticeDetailsProps, CountDownState> {
   render() {
     const {
       notice: {
-        message,
         modified,
         contributor,
         ratings: { likes, dislikes },
@@ -252,7 +264,7 @@ class NoticeDetails extends PureComponent<NoticeDetailsProps, CountDownState> {
           </DetailsMeta>
 
           <Message onClick={this.handleMessageClick}>
-            {formatMessage(message)}
+            {this.state.message}
           </Message>
 
           <Feedbacks>