Merge branch 'master' of github.com:followmedoug/totvs-chat-teste

.env

@@ -1,3 +1,3 @@
-REACT_APP_BASEURL="http://backend:3001/"
+REACT_APP_BASEURL="http://localhost:3001/"
 REACT_APP_BASEURL_STG="https://api.chat.stg.totvs-livecode.com/"
 REACT_APP_BASEURL_PRD="https://api.chat.totvs-livecode.com/"

src/components/Atoms/Message/index.js

@@ -8,16 +8,18 @@ import {
   DateWrapper,
 } from "./style";
 
-const Message = ({ data }) => {
+const Message = ({ data, contact }) => {
   const id = localStorage.getItem("user_id");
 
+  const author = id === data?.origin?.id;
+
   return (
     <>
       {!data ? (
         <></>
       ) : (
-        <Container author={id === data?.origin?.id}>
-          <MessageItem author={id === data?.origin?.id}>
+        <Container author={author}>
+          <MessageItem author={author}>
             <TextWrapper>
               <Text>{data.content}</Text>
             </TextWrapper>

src/components/Organisms/ActiveChat/index.js

@@ -26,7 +26,8 @@ import {
   EmojiWrapper,
 } from "./style.js";
 
-const { REACT_APP_BASEURL } = process.env;
+const { REACT_APP_BASEURL, REACT_APP_BASEURL_STG, REACT_APP_BASEURL_PRD } =
+  process.env;
 
 const ActionsButton = ({ handleOpenEmoji, handleCloseEmoji, open = true }) => {
   return (
@@ -53,8 +54,16 @@ const ActiveChat = ({ user, contact }) => {
   const [message, setMessage] = useState("");
 
   useEffect(() => {
+    const env = window.location.hostname.split(".")[1];
+
     dispatch(getMessagesRequest());
-    const socket = socketIOClient(REACT_APP_BASEURL);
+    const socket = socketIOClient(
+      !env
+        ? REACT_APP_BASEURL
+        : env === "stg"
+        ? REACT_APP_BASEURL_STG
+        : REACT_APP_BASEURL_PRD
+    );
     socket.on("new_message", () => {
       dispatch(getMessagesRequest());
     });
@@ -105,6 +114,13 @@ const ActiveChat = ({ user, contact }) => {
     };
   }, [message]);
 
+  const filter1 = data
+    .filter(({ origin }) => origin.id === id || origin.id === contact.id)
+    .filter(
+      ({ destination }) =>
+        destination.id === id || destination.id === contact.id
+    );
+
   return (
     <Container>
       <Header
@@ -113,9 +129,15 @@ const ActiveChat = ({ user, contact }) => {
         buttons={[<SearchRoundedIcon />, <MoreVertRoundedIcon />]}
       />
       <ChatBody ref={body}>
-        {data.map((msg) => (
-          <Message user={user} key={msg.id} data={msg} />
-        ))}
+        {data
+          .filter(({ origin }) => origin.id === id || origin.id === contact.id)
+          .filter(
+            ({ destination }) =>
+              destination.id === id || destination.id === contact.id
+          )
+          .map((msg) => (
+            <Message user={user} key={msg.id} data={msg} contact={contact} />
+          ))}
       </ChatBody>
       <EmojiWrapper open={isEmojiOpen}>
         <EmojiPicker