Deltour-Chatbot

Chat.js

import React, { useState, useEffect } from "react";
import axios from 'axios';
import queryString from 'query-string';
import dotenv from 'dotenv';

import Messages from '../Messages/Messages';
import InfoBar from '../InfoBar/InfoBar';
import Input from '../Input/Input';

import './Chat.scss';
dotenv.config();

const BASE_URI = 'http://dccd20bc.ngrok.io'
const AUTH_TOKEN = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJvb2V1bnoiLCJVU0VSTkFNRSI6Im9vZXVueiIsIkVNQUlMIjoieXVuczk5NEBnbWFpbC5jb20iLCJVU0VSX1JPTEUiOiJST0xFX1VTRVIifQ.Ibvyggk8HMcgY-hiChQNb5TzOGcKH8KKAJAgx-Fto7s'

const Chat = ({ location }) => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState({});
  const [messages, setMessages] = useState([]);

  const changeMessages = (response) => {
    return [...messages, response.data.data.msg]
  }

  useEffect(() => {
    const { username, email } = queryString.parse(location.search);

    setUsername(username);
    setEmail(email);
    
  }, location.search);

  const axiosRedirect = (body, config) => {
    axios.post(`${BASE_URI}/api/redirect`, body, config)
          .then(response => {
            
            if (response.data.code === 200) {
              setMessage('');
              setMessages(changeMessages(response));
            }
          })
          .catch(err => {
            console.log(`ErrorCode: ${err}`);
            alert(`ErrorCode: ${err}`);
          });
  }

  const axiosChatbot = (body, config) => {
    axios.post(`${BASE_URI}/api/detectIntent`, body, config)
        .then(response => {
          setMessages(changeMessages(response));
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
  }

  const sendMessage = (event) => {
    event.preventDefault();
    
    const body = { queryTxt: message };
    const config = { headers: { 'Authorization': 'Bearer ' + AUTH_TOKEN } };

    if (message) {
      axiosRedirect(body, config);
      axiosChatbot(body, config);
      setMessage('');
    }
    console.log(messages);
    
  }

  return (
    <div className="outerContainer">
      <div className="container">
          <InfoBar username={username} />
          <Messages messages={messages} username={username} email={email} />
          <Input message={message} setMessage={setMessage} sendMessage={sendMessage} />
      </div>
    </div>
  );
}

export default Chat;

Input.js

import React from 'react';

import './Input.css';

const Input = ({ setMessage, sendMessage, message }) => (
  <form className="form">
    <input
      className="input"
      type="text"
      placeholder="Type a message..."
      value={message.fulfillmentText}
      onChange={(event) => setMessage(event.target.value)}
      onKeyPress={event => event.key === 'Enter' ? sendMessage(event) : null}
    />
    <button className="sendButton" onClick={e => sendMessage(e)}>Send</button>
  </form>
)

export default Input;

Message.js

import React from 'react';

import './Message.css';

import ReactEmoji from 'react-emoji';

const Message = ({ message: { fulfillmentText, img, subFulfillmentText, author }, username, email }) => {
  let isSentByCurrentUser = false;

  if(author === email) {
    isSentByCurrentUser = true;
  }

  return (
    isSentByCurrentUser
      ? (
        <div className="messageContainer justifyEnd">
          <p className="sentText pr-10">{username}</p>
          <div className="messageBox backgroundBlue">
            <p className="messageText colorWhite">{ReactEmoji.emojify(fulfillmentText)}</p>
          </div>
        </div>
        )
        : (
          <div className="messageContainer justifyStart">
            <div className="messageBox backgroundLight">
              <p className="messageText colorWhite">{ReactEmoji.emojify(fulfillmentText)}</p>
              {
                img &&(<img className="messageText colorWhite" src={img} width="40%" />)
              }
              {
                subFulfillmentText && (<p className="messageText colorWhite">{ReactEmoji.emojify(subFulfillmentText)}</p>)
              }
            </div>
            <p className="sentText pl-10 ">{author}</p>
          </div>
        )
  );
}

export default Message;

Messages.js

import React from 'react';

import ScrollToBottom from 'react-scroll-to-bottom';

import Message from './Message/Message';

import './Messages.css';

const Messages = ({ messages, username, email }) => (
  <ScrollToBottom className="messages">
    {messages.map((message, i) => <div key={i}><Message message={message} username={username} email={email} /></div>)}
  </ScrollToBottom>
);

export default Messages;