From 815296df1d87194b9d736a71b5d8e21b6a907cbc Mon Sep 17 00:00:00 2001
From: abdou6666 <sfayhi.abderrahmen@esprit.tn>
Date: Thu, 5 Dec 2024 17:01:31 +0100
Subject: [PATCH] refactor: hard coded direction values with enum

---
 widget/src/components/messages/FileMessage.tsx        | 4 ++--
 widget/src/components/messages/GeolocationMessage.tsx | 4 ++--
 widget/src/components/messages/ListMessage.tsx        | 4 ++--
 widget/src/components/messages/TextMessage.tsx        | 6 +++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/widget/src/components/messages/FileMessage.tsx b/widget/src/components/messages/FileMessage.tsx
index 6c31c172..c44dfef7 100644
--- a/widget/src/components/messages/FileMessage.tsx
+++ b/widget/src/components/messages/FileMessage.tsx
@@ -10,7 +10,7 @@ import React from "react";
 
 import { useTranslation } from "../../hooks/useTranslation";
 import { useColors } from "../../providers/ColorProvider";
-import { TMessage } from "../../types/message.types";
+import { Direction, TMessage } from "../../types/message.types";
 import FileIcon from "../icons/FileIcon";
 
 import "./FileMessage.scss";
@@ -22,7 +22,7 @@ interface FileMessageProps {
 const FileMessage: React.FC<FileMessageProps> = ({ message }) => {
   const { t } = useTranslation();
   const { colors: allColors } = useColors();
-  const colors = allColors[message.direction || "received"];
+  const colors = allColors[message.direction || Direction.received];
 
   if (!("type" in message.data)) {
     throw new Error("Unable to detect type for file message");
diff --git a/widget/src/components/messages/GeolocationMessage.tsx b/widget/src/components/messages/GeolocationMessage.tsx
index 7c3c51dd..b7f526a3 100644
--- a/widget/src/components/messages/GeolocationMessage.tsx
+++ b/widget/src/components/messages/GeolocationMessage.tsx
@@ -10,7 +10,7 @@ import React, { useEffect, useRef, useState } from "react";
 
 import { useColors } from "../../providers/ColorProvider";
 import { useWidget } from "../../providers/WidgetProvider";
-import { TMessage } from "../../types/message.types";
+import { Direction, TMessage } from "../../types/message.types";
 
 import "./GeolocationMessage.scss";
 
@@ -58,7 +58,7 @@ const GeolocationMessage: React.FC<GeolocationMessageProps> = ({ message }) => {
   },${coordinates.lat - 0.1},${coordinates.lng + 0.1},${
     coordinates.lat + 0.1
   }&layer=mapnik&marker=${coordinates.lat},${coordinates.lng}`;
-  const colors = allColors[message.direction || "received"];
+  const colors = allColors[message.direction || Direction.received];
 
   return (
     <div
diff --git a/widget/src/components/messages/ListMessage.tsx b/widget/src/components/messages/ListMessage.tsx
index 2281c322..ed6b3036 100644
--- a/widget/src/components/messages/ListMessage.tsx
+++ b/widget/src/components/messages/ListMessage.tsx
@@ -9,7 +9,7 @@
 import React from "react";
 
 import { useColors } from "../../providers/ColorProvider";
-import { TMessage } from "../../types/message.types";
+import { Direction, TMessage } from "../../types/message.types";
 
 import ButtonsMessage from "./ButtonMessage";
 
@@ -39,7 +39,7 @@ const ListMessage: React.FC<ListMessageProps> = ({ messageList }) => {
     throw new Error("Unable to find elements");
   }
 
-  const colors = allColors[messageList.direction || "received"];
+  const colors = allColors[messageList.direction || Direction.received];
 
   return (
     <div
diff --git a/widget/src/components/messages/TextMessage.tsx b/widget/src/components/messages/TextMessage.tsx
index fb8e00cc..cacc6c9d 100644
--- a/widget/src/components/messages/TextMessage.tsx
+++ b/widget/src/components/messages/TextMessage.tsx
@@ -10,7 +10,7 @@ import Autolinker from "autolinker";
 import React, { useEffect, useRef } from "react";
 
 import { useColors } from "../../providers/ColorProvider";
-import { TMessage } from "../../types/message.types";
+import { Direction, TMessage } from "../../types/message.types";
 
 import "./TextMessage.scss";
 
@@ -28,7 +28,7 @@ const TextMessage: React.FC<TextMessageProps> = ({ message }) => {
   }, [message]);
 
   const autoLink = () => {
-    if (message.direction === "received" && messageTextRef.current) {
+    if (message.direction === Direction.received && messageTextRef.current) {
       const text = messageTextRef.current.innerText;
 
       messageTextRef.current.innerHTML = Autolinker.link(text, {
@@ -42,7 +42,7 @@ const TextMessage: React.FC<TextMessageProps> = ({ message }) => {
     throw new Error("Unable to find text.");
   }
 
-  const colors = allColors[message.direction || "received"];
+  const colors = allColors[message.direction || Direction.received];
 
   return (
     <div