From 8a9f413274c9d97a4855632a303b3b5bb9ba6410 Mon Sep 17 00:00:00 2001
From: Wojciech Mista <wojciech.mista@saleor.io>
Date: Wed, 19 Jan 2022 09:30:33 +0100
Subject: [PATCH] Remove insert of html, replace it with a component (#1769)

---
 src/components/Timeline/TimelineNote.tsx | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/Timeline/TimelineNote.tsx b/src/components/Timeline/TimelineNote.tsx
index a1c468867a2..cc45706d4ca 100644
--- a/src/components/Timeline/TimelineNote.tsx
+++ b/src/components/Timeline/TimelineNote.tsx
@@ -68,6 +68,22 @@ interface TimelineNoteProps {
   };
 }
 
+interface NoteMessageProps {
+  message: string;
+}
+
+const NoteMessage: React.FC<NoteMessageProps> = ({ message }) => (
+  <>
+    {message.split("\n").map(string => {
+      if (string === "") {
+        return <br />;
+      }
+
+      return <Typography>{string}</Typography>;
+    })}
+  </>
+);
+
 export const TimelineNote: React.FC<TimelineNoteProps> = props => {
   const { date, user, message } = props;
 
@@ -91,11 +107,7 @@ export const TimelineNote: React.FC<TimelineNoteProps> = props => {
       </div>
       <Card className={classes.card} elevation={16}>
         <CardContent className={classes.cardContent}>
-          <Typography
-            dangerouslySetInnerHTML={{
-              __html: message.replace(/\n/g, "<br />")
-            }}
-          />
+          <NoteMessage message={message} />
         </CardContent>
       </Card>
     </div>