Remove insert of html, replace it with a component (#1769)

saleor · Jan 19, 2022 · 8a9f413 · 8a9f413
1 parent 54a00ea
commit 8a9f413
Showing 1 changed file with 17 additions and 5 deletions.
diff --git 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>