add in,outcomingMsg component

@@ -7,6 +7,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAddressBook } from "@fortawesome/free-solid-svg-icons";
 import { Link } from "react-router-dom";
 import Category from "../Category/CategoryContainer";
+import IncomingMsg from "../../Components/IncomingMsg";
+import OutcomingMsg from "../../Components/OutcomingMsg";
 
 const Wrapper = styled.div`
   display: grid;
@@ -140,7 +142,14 @@ const StyledLink = styled(Link)`
   }
 `;
 
-export default ({ data, location, message, onSubmit }) => {
+export default ({
+  data,
+  location,
+  message,
+  onSubmit,
+  outcomingMsg,
+  incomingMsg,
+}) => {
   const { pathname } = location;
   const roomName = pathname.slice(1, pathname.length);
   return (
@@ -164,6 +173,8 @@ export default ({ data, location, message, onSubmit }) => {
             <Title>Selected Menu Title</Title>
           </ChatScreenHeader>
           <ChatScreenBox>
+            {incomingMsg && <IncomingMsg text={incomingMsg} />}
+            {outcomingMsg && <OutcomingMsg text={outcomingMsg} />}
             <InputWrapper>
               <InputContainer>
                 <form onSubmit={onSubmit}>