+import axios from 'axios';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { Button } from 'react-bootstrap';
+import { withTranslation } from 'react-i18next';
+
+import Dialog from './Dialog';
+import Icon from '../common/Icon';
+import i18n from '../../i18n';
+
+const Protocol = ({ id }) => {
+ const [showDialog, setShowDialog] = useState(false);
+ const [protocol, setProtocol] = useState([]);
+
+ useEffect(() => {
+ axios
+ .get(`/api/protocol/${id}`)
+ .then(response => {
+ setProtocol(response.data);
+ });
+ }, [id]);
+
+ useEffect(() => {
+ window.Echo.private(`Protocol.${id}`)
+ .listen('ProtocolAdded', e => {
+ console.log(e);
+ if (e.protocol) {
+ setProtocol(protocol => [e.protocol, ...protocol]);
+ }
+ });
+ return () => {
+ window.Echo.leave(`Protocol.${id}`);
+ };
+ }, [id]);
+
+ return (
+ <>
+ <Button
+ onClick={() => setShowDialog(true)}
+ title={i18n.t('button.protocol')}
+ variant="outline-info"
+ >
+ <Icon.PROTOCOL title="" />
+ </Button>
+ <Dialog
+ onHide={() => setShowDialog(false)}
+ protocol={protocol}
+ show={showDialog}
+ />
+ </>
+ );
+};
+
+Protocol.propTypes = {
+ id: PropTypes.number,
+};
+
+export default withTranslation()(Protocol);