OTP Login Screens

package.json

@@ -21,6 +21,7 @@
     "react-alert": "^7.0.3",
     "react-alert-template-basic": "^1.0.2",
     "react-bootstrap": "^2.4.0",
+    "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-scripts": "5.0.0",

src/App.tsx

@@ -10,7 +10,10 @@ import MessageWindow from "components/MessageWindow";
 import TextBar from "components/TextBar";
 import Notification from "components/Notifications";
 import "styles/global.css";
-const App = (): any => {
+import {useLocation, useNavigate} from 'react-router-dom';
+import { withCookies } from 'react-cookie';
+
+const App = (props:any): any => {
   const initialState: {
     messages: any[];
     username: string;
@@ -22,12 +25,19 @@ const App = (): any => {
   };
 
   const [state, setState] = useState(initialState);
-
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [accessToken, setAccessToken] = useState();
+
   const scrollToBottom = () => {
     window.scrollTo(0, document.body.scrollHeight);
   };
 
   useEffect((): void => {
+    if(!location.state){
+      navigate('/login')
+    }
+    setAccessToken(props.cookies.get('access_token'));
     registerOnMessageCallback(onMessageReceived);
     registerOnSessionCallback(onSessionCreated);
     scrollToBottom();
@@ -54,14 +64,61 @@ const App = (): any => {
     //   }
     //   console.log(msg.content.choices);
     // }
-    setState({
-      ...state,
-      messages: state.messages.concat({
-        username: "UCI",
-        text: msg.content.title,
-        choices: msg.content.choices,
-      }),
-    });
+    if (msg.content.msg_type === "IMAGE"){
+      setState({
+        ...state,
+        messages: state.messages.concat({
+          username: "UCI",
+          text: msg.content.title,
+          image: msg.content.media_url,
+          choices: msg.content.choices,
+          caption: msg.content.caption,
+        }),
+      });
+    }
+    else if (msg.content.msg_type === "AUDIO"){
+      setState({
+        ...state,
+        messages: state.messages.concat({
+          username: "UCI",
+          text: msg.content.title,
+          audio: msg.content.media_url,
+          choices: msg.content.choices,
+        }),
+      });
+    }
+    else if (msg.content.msg_type === "VIDEO"){
+      setState({
+        ...state,
+        messages: state.messages.concat({
+          username: "UCI",
+          text: msg.content.title,
+          video: msg.content.media_url,
+          choices: msg.content.choices,
+        }),
+      });
+    }
+    else if (msg.content.msg_type === "DOCUMENT"){
+      setState({
+        ...state,
+        messages: state.messages.concat({
+          username: "UCI",
+          text: msg.content.title,
+          doc: msg.content.media_url,
+          choices: msg.content.choices,
+        }),
+      });
+    }
+    else{
+      setState({
+        ...state,
+        messages: state.messages.concat({
+          username: "UCI",
+          text: msg.content.title,
+          choices: msg.content.choices,
+        }),
+      });
+    }
   };
 
   const setUserName = (name: string) => {
@@ -71,15 +128,69 @@ const App = (): any => {
     });
   };
 
-  const sendMessage = (text: any) => {
-    send(text, state.session);
-    setState({
-      ...state,
-      messages: state.messages.concat({
-        username: state.username,
-        text: text,
-      }),
-    });
+  const sendMessage = (text: any, media: any) => {
+    if(!accessToken){
+      navigate('/login')
+    }
+    else{
+      send(text, state.session, media || null, accessToken);
+      if(media){
+        if (media.mimeType.slice(0,5) === "image"){
+          setState({
+            ...state,
+            messages: state.messages.concat({
+              username: state.username,
+              image: media.url
+            }),
+          });
+        }
+        else if (media.mimeType.slice(0,5) === "audio"){
+          setState({
+            ...state,
+            messages: state.messages.concat({
+              username: state.username,
+              audio: media.url
+            }),
+          });
+        }
+        else if (media.mimeType.slice(0,5) === "video"){
+          setState({
+            ...state,
+            messages: state.messages.concat({
+              username: state.username,
+              video: media.url,
+            }),
+          });
+        }
+        else if (media.mimeType.slice(0,11) === "application"){
+          setState({
+            ...state,
+            messages: state.messages.concat({
+              username: state.username,
+              doc: media.url,
+            }),
+          });
+        }else{
+          setState({
+            ...state,
+            messages: state.messages.concat({
+              username: state.username,
+              text: text,
+              doc: media.url
+            }),
+          });
+        }
+      }
+      else{
+        setState({
+          ...state,
+          messages: state.messages.concat({
+            username: state.username,
+            text: text,
+          }),
+        });
+      }
+    }
   };
   if (state.username === null) {
     console.log("Please set a username first");
@@ -93,7 +204,7 @@ const App = (): any => {
 
   const selected = (option: any) => {
     const toSend = option.key+" "+option.text;
-    sendMessage(toSend);
+    sendMessage(toSend, null);
   }
 
   return (
@@ -116,4 +227,4 @@ const App = (): any => {
   );
 };
 
-export default App;
+export default withCookies(App);

src/components/MessageWindow/index.tsx

@@ -1,20 +1,32 @@
 import { useRef, useEffect } from "react";
 import "./index.css";
 import { Box, Flex, Spacer, Button } from "@chakra-ui/react";
+import { Link } from '@chakra-ui/react'
+import { ExternalLinkIcon } from '@chakra-ui/icons'
 
 
 const Message = ({
   text,
   username,
   self,
   choices,
-  data
+  data,
+  image,
+  caption,
+  audio,
+  video,
+  doc
 }: {
   text: any;
   username: string;
   self: boolean;
   choices: any;
   data: any;
+  image: any;
+  caption: string;
+  audio: any;
+  video: any;
+  doc: any;
 }) => {
   return (
     <Flex>
@@ -23,7 +35,31 @@ const Message = ({
           <Spacer />
           <div className="chat-message chat-reciever">
             <div className="message-username">{username}</div>
-            <div style={{ whiteSpace: "pre-wrap" }}>{text}</div>
+              {(!image && !audio && !video && !doc) && 
+                <div style={{ whiteSpace: "pre-wrap" }}>{text}</div>
+              }
+              {image &&
+                <div style={{ whiteSpace: "pre-wrap" }}><img src={image} style={{maxWidth: "300px"}}/></div>
+              } 
+              {audio &&
+                <audio controls>
+                  <source src={audio}/>
+                  Your browser does not support the audio element.
+                </audio>
+              }
+              {video &&
+                <video width="320" height="240" controls>
+                  <source src={video}/>
+                  Your browser does not support the video tag.
+              </video>
+              } 
+              {doc &&
+                <Button colorScheme='blackAlpha' padding="10px" marginTop='10px'>
+                  <Link href={doc} isExternal>
+                    Click to open this file <ExternalLinkIcon mx='2px' />
+                  </Link>
+                </Button>
+              } 
           </div>
         </>
       )}
@@ -38,7 +74,32 @@ const Message = ({
               }
               >
               <div className="message-username">{username}</div>
-              <div style={{ whiteSpace: "pre-wrap" }}>{text}</div>
+              {(!image && !audio && !video && !doc) && 
+                <div style={{ whiteSpace: "pre-wrap" }}>{text}</div>
+              }
+              {image &&
+                <div style={{ whiteSpace: "pre-wrap" }}><img src={image} style={{maxWidth: "300px"}}/></div>
+              } 
+              {audio &&
+                <audio controls>
+                  <source src={audio}/>
+                  Your browser does not support the audio element.
+                </audio>
+              }
+              {video &&
+                <video width="320" height="240" controls>
+                  <source src={video} />
+                  Your browser does not support the video tag.
+              </video>
+              } 
+              {doc &&
+                <Button colorScheme='blackAlpha' padding="10px" marginTop='10px'>
+                  <Link href={doc} isExternal>
+                    Click to open this file <ExternalLinkIcon mx='2px' />
+                  </Link>
+                </Button>
+              } 
+              <div style={{ whiteSpace: "pre-wrap" }}>{caption}</div>
             </div>
             {choices && choices.length > 0 && (
               <div className="chat-choices-container">
@@ -79,6 +140,11 @@ const MessageWindow = (props: any) => {
             self={username === msg.username}
             choices={msg.choices}
             data={props.selected}
+            image={msg.image}
+            caption={msg.caption}
+            audio={msg.audio}
+            video={msg.video}
+            doc={msg.doc}
             />
             );
           })}

src/components/TextBar/index.tsx

@@ -1,14 +1,14 @@
-import { useRef } from "react";
 import { Box, Button, Input } from "@chakra-ui/react";
 import { MdSend } from "react-icons/md";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import "styles/global.css";
-
+import { useRef } from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 const TextBar = (props: any) => {
   const input: any = useRef(null);
-    const sendMessage = (e: any) => {
+  const sendMessage = (e: any) => {
       e.preventDefault();
       const message = input.current.value;
       if(input.current.value.trim().length === 0) {
@@ -26,6 +26,29 @@ const TextBar = (props: any) => {
 
   };
 
+  const uploadMedia = async (fileObj: any) => {
+    const data = new FormData();
+    data.append('file',fileObj);
+    try{
+        let res = await fetch(
+        `${process.env.REACT_APP_INBOUND_BASE_URL}/cdn/minioSignedUrl`,
+        {
+            method: 'post',
+            body: data,
+        }
+        );
+        let responseJson = await res.json();
+        if (res.status === 200) {
+            props.onSend(null, responseJson)
+        }else{      
+            console.log('image not uploaded')
+        }
+    }
+    catch{
+        console.error('no response received');
+    }    
+  };
+
   return (
     <>
       {/* <div className="chat__footer" onBlur={handleBlur} >
@@ -76,7 +99,14 @@ const TextBar = (props: any) => {
             placeholder="Type your message"
             ref={input}
             onKeyDown={sendMessageIfEnter}
-          />        
+          />  
+          <div className="file btn btn-primary" style={{position: "relative", overflow: "hidden", marginRight: '7px', paddingTop: '10px'}}>
+							Upload
+							<input type="file" name="file" style={{position: "absolute", fontSize: "50px", opacity: "0", right: "0", top: "0"}}
+                onChange={(event) => {
+                  uploadMedia(event.target.files[0])
+                }}/>
+						</div>       
         <button className="send__btn" onClick={sendMessage} type="submit">
           Send
         </button>