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                 axios
  17                         .get(`/api/protocol/${id}`)
  18                         .then(response => {
  19                                 setProtocol(response.data);
  20                         });
  21         }, [id]);
  22
  23         useEffect(() => {
  24                 window.Echo.private(`Protocol.${id}`)
  25                         .listen('ProtocolAdded', e => {
  26                                 if (e.protocol) {
  27                                         setProtocol(protocol => [e.protocol, ...protocol]);
  28                                 }
  29                         });
  30                 return () => {
  31                         window.Echo.leave(`Protocol.${id}`);
  32                 };
  33         }, [id]);
  34
  35         return (
  36                 <>
  37                         <Button
  38                                 onClick={() => setShowDialog(true)}
  39                                 title={i18n.t('button.protocol')}
  40                                 variant="outline-info"
  41                         >
  42                                 <Icon.PROTOCOL title="" />
  43                         </Button>
  44                         <Dialog
  45                                 onHide={() => setShowDialog(false)}
  46                                 protocol={protocol}
  47                                 show={showDialog}
  48                         />
  49                 </>
  50         );
  51 };
  52
  53 Protocol.propTypes = {
  54         id: PropTypes.number,
  55 };
  56
  57 export default withTranslation()(Protocol);