resources/js/components/protocol/Protocol.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 { withTranslation } from 'react-i18next';
   6
   7 import Dialog from './Dialog';
   8 import Icon from '../common/Icon';
   9 import i18n from '../../i18n';
  10
  11 const Protocol = ({ id }) => {
  12         const [showDialog, setShowDialog] = useState(false);
  13         const [protocol, setProtocol] = useState([]);
  14
  15         useEffect(() => {
  16                 const ctrl = new AbortController();
  17                 axios
  18                         .get(`/api/protocol/${id}`, { signal: ctrl.signal })
  19                         .then(response => {
  20                                 setProtocol(response.data);
  21                         });
  22                 return () => {
  23                         ctrl.abort();
  24                 };
  25         }, [id]);
  26
  27         useEffect(() => {
  28                 window.Echo.private(`Protocol.${id}`)
  29                         .listen('ProtocolAdded', e => {
  30                                 if (e.protocol) {
  31                                         setProtocol(protocol => [e.protocol, ...protocol]);
  32                                 }
  33                         });
  34                 return () => {
  35                         window.Echo.leave(`Protocol.${id}`);
  36                 };
  37         }, [id]);
  38
  39         return (
  40                 <>
  41                         <Button
  42                                 onClick={() => setShowDialog(true)}
  43                                 title={i18n.t('button.protocol')}
  44                                 variant="outline-info"
  45                         >
  46                                 <Icon.PROTOCOL title="" />
  47                         </Button>
  48                         <Dialog
  49                                 onHide={() => setShowDialog(false)}
  50                                 protocol={protocol}
  51                                 show={showDialog}
  52                         />
  53                 </>
  54         );
  55 };
  56
  57 Protocol.propTypes = {
  58         id: PropTypes.number,
  59 };
  60
  61 export default withTranslation()(Protocol);