]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/protocol/Protocol.js
tracker medallion controler
[alttp.git] / 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);