From bc9e35977e5defe16397f3fb4e43090f708ceaf4 Mon Sep 17 00:00:00 2001
From: abdou6666 <sfayhi.abderrahmen@esprit.tn>
Date: Thu, 6 Feb 2025 17:47:15 +0100
Subject: [PATCH] fix: refactor and fix typing

---
 .../src/components/inbox/components/Chat.tsx  | 25 +----
 .../inbox/components/GeolocationMessage.tsx   | 91 +++++--------------
 .../components/inbox/helpers/mapMessages.tsx  | 11 ++-
 frontend/src/types/message.types.ts           |  1 -
 4 files changed, 35 insertions(+), 93 deletions(-)

diff --git a/frontend/src/components/inbox/components/Chat.tsx b/frontend/src/components/inbox/components/Chat.tsx
index 3d678824..edcf7611 100644
--- a/frontend/src/components/inbox/components/Chat.tsx
+++ b/frontend/src/components/inbox/components/Chat.tsx
@@ -33,9 +33,6 @@ import { useInfinitedLiveMessages } from "../hooks/useInfiniteLiveMessages";
 
 import { ChatActions } from "./ChatActions";
 import { ChatHeader } from "./ChatHeader";
-import GeolocationMessage, {
-  GeolocationMessageProps,
-} from "./GeolocationMessage";
 
 export function Chat() {
   const { apiUrl } = useConfig();
@@ -94,33 +91,13 @@ export function Chat() {
           autoScrollToBottom={true}
           autoScrollToBottomOnMount={true}
         >
-          {messages.map((message: any, i) => {
+          {messages.map((message, i) => {
             const position = getMessagePosition(
               message,
               messages[i - 1],
               messages[i + 1],
             );
 
-            if (message?.message?.type === "location") {
-              const msg = {
-                type: message.message.type,
-                data: {
-                  coordinates: {
-                    lat: message.message.coordinates.lat,
-                    lng: message.message.coordinates.lon,
-                  },
-                },
-                author: message.sender,
-                read: message.read,
-                mid: message.mid,
-                createdAt: message.createdAt,
-                direction: "sent",
-                delivery: false,
-              } as GeolocationMessageProps["message"];
-
-              return <GeolocationMessage message={msg} key={message.id} />;
-            }
-
             return (
               <Message
                 key={message.id}
diff --git a/frontend/src/components/inbox/components/GeolocationMessage.tsx b/frontend/src/components/inbox/components/GeolocationMessage.tsx
index 10edbdbc..ada7c108 100644
--- a/frontend/src/components/inbox/components/GeolocationMessage.tsx
+++ b/frontend/src/components/inbox/components/GeolocationMessage.tsx
@@ -6,99 +6,56 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import { Direction } from "hexabot-chat-widget/src/types/message.types";
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 
 export interface GeolocationMessageProps {
   message: {
-    type: string;
-    data: {
-      coordinates: {
-        lat: number;
-        lng: number;
-      };
+    type: "location";
+    coordinates: {
+      lat: number;
+      lon: number;
     };
-    author: string;
-    read: boolean;
-    mid: string;
-    createdAt: string | Date;
-    direction: Direction;
-    delivery: boolean;
   };
 }
 
 const GeolocationMessage: React.FC<GeolocationMessageProps> = ({ message }) => {
-  // const { colors: allColors } = useColors();
-  // const widget = useWidget();
-  const allColors = {
-    header: { bg: "#1BA089", text: "#fff" },
-    launcher: { bg: "#1BA089" },
-    messageList: { bg: "#fff" },
-    sent: { bg: "#1BA089", text: "#fff" },
-    received: { bg: "#f6f8f9", text: "#000" },
-    userInput: { bg: "#fff", text: "#000" },
-    button: { bg: "#ffffff", text: "#1BA089", border: "#1BA089" },
-    messageStatus: { bg: "#1BA089" },
-    messageTime: { text: "#9C9C9C" },
-  };
-  const [isSeen, setIsSeen] = useState(false);
   const iframeRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    const observer = new IntersectionObserver((entries) => {
-      if (!isSeen && entries[0].intersectionRatio > 0) {
-        setIsSeen(true);
-      }
-    });
-
-    if (iframeRef.current) {
-      observer.observe(iframeRef.current);
-    }
-
-    return () => {
-      if (iframeRef.current) {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        observer.unobserve(iframeRef.current);
-      }
-    };
-  }, [isSeen]);
-
-  if (!("coordinates" in message.data)) {
+  if (!("coordinates" in message)) {
     throw new Error("Unable to find coordinates");
   }
-  const coordinates = message.data?.coordinates || { lat: 0.0, lng: 0.0 };
+
+  const coordinates = {
+    lat: message?.coordinates?.lat || 0.0,
+    lng: message?.coordinates?.lon || 0.0,
+  };
   const openStreetMapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${
     coordinates.lng - 0.1
   },${coordinates.lat - 0.1},${coordinates.lng + 0.1},${
     coordinates.lat + 0.1
   }&layer=mapnik&marker=${coordinates.lat},${coordinates.lng}`;
-  const colors = allColors[message.direction || Direction.received];
 
   return (
     <div
       style={{
         borderRadius: "0.5rem",
-        backgroundColor: colors.bg,
-        color: colors.text,
         width: "200px",
       }}
       ref={iframeRef}
     >
-      {isSeen && (
-        <iframe
-          style={{
-            width: "200px",
-            height: "150px",
-            borderRadius: "0.5rem",
-          }}
-          loading="lazy"
-          frameBorder="0"
-          scrolling="no"
-          marginHeight={0}
-          marginWidth={0}
-          src={openStreetMapUrl}
-        />
-      )}
+      <iframe
+        style={{
+          width: "200px",
+          height: "150px",
+          borderRadius: "0.5rem",
+        }}
+        loading="lazy"
+        frameBorder="0"
+        scrolling="no"
+        marginHeight={0}
+        marginWidth={0}
+        src={openStreetMapUrl}
+      />
     </div>
   );
 };
diff --git a/frontend/src/components/inbox/helpers/mapMessages.tsx b/frontend/src/components/inbox/helpers/mapMessages.tsx
index fd027e68..165d52ab 100644
--- a/frontend/src/components/inbox/helpers/mapMessages.tsx
+++ b/frontend/src/components/inbox/helpers/mapMessages.tsx
@@ -6,7 +6,6 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-
 import { Message, MessageModel } from "@chatscope/chat-ui-kit-react";
 import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
 import ReplyIcon from "@mui/icons-material/Reply";
@@ -20,6 +19,7 @@ import { buildURL } from "@/utils/URL";
 
 import { MessageAttachmentsViewer } from "../components/AttachmentViewer";
 import { Carousel } from "../components/Carousel";
+import GeolocationMessage from "../components/GeolocationMessage";
 
 function hasSameSender(
   m1: IMessage | IMessageFull,
@@ -69,6 +69,14 @@ export function getMessageContent(
   const message = messageEntity.message;
   let content: ReactNode[] = [];
 
+  if ("coordinates" in message) {
+    content.push(
+      <Message.CustomContent>
+        <GeolocationMessage message={message} key={message.type} />
+      </Message.CustomContent>,
+    );
+  }
+
   if ("text" in message) {
     content.push(
       <Message.TextContent key={messageEntity.id} text={message.text} />,
@@ -85,6 +93,7 @@ export function getMessageContent(
     chips = message.quickReplies as { title: string }[];
     chipsIcon = <ReplyIcon color="disabled" />;
   }
+
   if (chips.length > 0)
     content.push(
       <Message.Footer style={{ marginTop: "5px" }}>
diff --git a/frontend/src/types/message.types.ts b/frontend/src/types/message.types.ts
index f485db36..be3cac88 100644
--- a/frontend/src/types/message.types.ts
+++ b/frontend/src/types/message.types.ts
@@ -6,7 +6,6 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-
 import { EntityType } from "@/services/types";
 
 import { IAttachment } from "./attachment.types";