resources/js/components/chat-bot-logs/ChatBotLog.js

   1 import axios from 'axios';
   2 import PropTypes from 'prop-types';
   3 import React, { useEffect, useState } from 'react';
   4 import { Button } from 'react-bootstrap';
   5 import { useTranslation } from 'react-i18next';
   6
   7 import Dialog from './Dialog';
   8 import Icon from '../common/Icon';
   9
  10 const ChatBotLog = ({ id }) => {
  11         const [showDialog, setShowDialog] = useState(false);
  12         const [log, setLog] = useState([]);
  13
  14         const { t } = useTranslation();
  15
  16         useEffect(() => {
  17                 if (!showDialog) return;
  18                 const ctrl = new AbortController();
  19                 axios
  20                         .get(`/api/channels/${id}/chat-bot-log`, { signal: ctrl.signal })
  21                         .then(response => {
  22                                 setLog(response.data);
  23                         });
  24                 return () => {
  25                         ctrl.abort();
  26                 };
  27         }, [id, showDialog]);
  28
  29         return (
  30                 <>
  31                         <Button
  32                                 onClick={() => setShowDialog(true)}
  33                                 title={t('button.protocol')}
  34                                 variant="outline-info"
  35                         >
  36                                 <Icon.PROTOCOL title="" />
  37                         </Button>
  38                         <Dialog
  39                                 log={log}
  40                                 onHide={() => setShowDialog(false)}
  41                                 show={showDialog}
  42                         />
  43                 </>
  44         );
  45 };
  46
  47 ChatBotLog.propTypes = {
  48         id: PropTypes.number,
  49 };
  50
  51 export default ChatBotLog;