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                                 console.log(e);
  27                                 if (e.protocol) {
  28                                         setProtocol(protocol => [e.protocol, ...protocol]);
  29                                 }
  30                         });
  31                 return () => {
  32                         window.Echo.leave(`Protocol.${id}`);
  33                 };
  34         }, [id]);
  35
  36         return (
  37                 <>
  38                         <Button
  39                                 onClick={() => setShowDialog(true)}
  40                                 title={i18n.t('button.protocol')}
  41                                 variant="outline-info"
  42                         >
  43                                 <Icon.PROTOCOL title="" />
  44                         </Button>
  45                         <Dialog
  46                                 onHide={() => setShowDialog(false)}
  47                                 protocol={protocol}
  48                                 show={showDialog}
  49                         />
  50                 </>
  51         );
  52 };
  53
  54 Protocol.propTypes = {
  55         id: PropTypes.number,
  56 };
  57
  58 export default withTranslation()(Protocol);