switched Support Model to functional component

frontend/src/Call/CallPlayer.js

@@ -40,10 +40,8 @@ class CallPlayer extends React.Component {
     this.addCall = this.addCall.bind(this);
     this.handlePusherClick = this.handlePusherClick.bind(this);
     this.handleSidebarToggle = this.handleSidebarToggle.bind(this);
-    this.handleSupportToggle = this.handleSupportToggle.bind(this);
     this.handleFilterClose = this.handleFilterClose.bind(this);
     this.handleGroupClose = this.handleGroupClose.bind(this);
-    this.handleSupportClose = this.handleSupportClose.bind(this);
     this.handleCalendarToggle = this.handleCalendarToggle.bind(this);
     this.handleCalendarClose = this.handleCalendarClose.bind(this);
     this.handleLiveToggle = this.handleLiveToggle.bind(this);
@@ -68,8 +66,7 @@ class CallPlayer extends React.Component {
       sidebarOpened: false,
       filterVisible: false,
       groupVisible: false,
-      calendarVisible: false,
-      supportVisible: false
+      calendarVisible: false
     }
   }
 
@@ -91,10 +88,6 @@ class CallPlayer extends React.Component {
     filterVisible: !this.state.filterVisible
   })
 
-  handleSupportToggle = () => this.setState({
-    supportVisible: !this.state.supportVisible
-  })
-
   handleContextRef = contextRef => this.setState({ contextRef })
   changeUrl = url => this.props.callActions.changeUrl(url)
 
@@ -234,12 +227,6 @@ class CallPlayer extends React.Component {
     this.props.callActions.fetchCalls();
   }
 
-  handleSupportClose() {
-    this.setState({
-      supportVisible: !this.state.supportVisible
-    });
-  }
-
   handleFilterClose(didUpdate) {
     this.setState({
       filterVisible: !this.state.filterVisible
@@ -547,7 +534,7 @@ class CallPlayer extends React.Component {
         <FilterModal shortName={this.props.shortName} open={this.state.filterVisible} onClose={this.handleFilterClose} />
         <CalendarModal open={this.state.calendarVisible} onClose={this.handleCalendarClose} archive={archive} key={this.props.shortName} />
         <GroupModal shortName={this.props.shortName} open={this.state.groupVisible} onClose={this.handleGroupClose} />
-        <SupportModal open={this.state.supportVisible} onClose={this.handleSupportClose} />
+        
         <Sidebar as={Menu} animation='overlay' inverted vertical visible={sidebarOpened}
           onClick={this.handlePusherClick} duration={50} width='thin'>
           <Menu.Item onClick={this.handlePusherClick} >
@@ -611,7 +598,7 @@ class CallPlayer extends React.Component {
           <Menu.Item active={this.state.autoPlay} onClick={() => this.switchAutoPlay()}><Icon name="level up" /><span className="desktop-only">Autoplay</span></Menu.Item>
           <MediaPlayer ref={this.audioRef} call={currentCall} onEnded={this.callEnded} onPlayPause={this.handlePlayPause} />
           <Menu.Menu position="right" className="desktop-only">
-            <Menu.Item onClick={this.handleSupportToggle}><Icon name="coffee" />Support OpenMHz</Menu.Item>
+            <Menu.Item><SupportModal/></Menu.Item>
             <Menu.Item><a href={callDownload}><Icon name="download" />Download</a></Menu.Item>
             <Menu.Item><a href={callLink}><Icon name="at" />Link</a></Menu.Item>
           </Menu.Menu>

frontend/src/Call/SupportModal.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import {useState} from 'react';
 import {
   Modal,
   Button,
@@ -7,49 +7,35 @@ import {
 import "./FilterModal.css";
 
 
-class SupportModal extends Component {
-  constructor(props) {
-    super(props)
-    this.handleDone = this.handleDone.bind(this);
-    this.handleClose = this.handleClose.bind(this);
+function SupportModal(props) {
 
-    this.state = {
-      open: false
-    }
-}
+  const [open, setOpen] = useState(false);
 
+  const handleClose = () => props.onClose();
 
-handleClose = () => this.props.onClose(false);
-
-handleDone(event) {
-    this.props.onClose();
-}
-
-  render() {
-    return (
-
-      <Modal open={this.props.open} onClose={this.handleClose} size='tiny' >
-        <Modal.Header>Support OpenMHz</Modal.Header>
-        <Modal.Content image>
-        <Icon size='massive' name="coffee"/>
-          <Modal.Description>
-            <p>If OpenMHz brings you joy, think about becoming a supporter! It will cover hosting costs and help keep me focused on development.</p>
-            <p>No worries if not, I am not having problems keeping it going.</p>
-            <a href="https://github.com/sponsors/robotastic"><Button>
+  return (
+    <Modal open={open} onClose={() => setOpen(false)} onOpen={() => setOpen(true)} trigger={<div><Icon name="coffee" />Support OpenMHz</div>} size='tiny' >
+      <Modal.Header>Support OpenMHz</Modal.Header>
+      <Modal.Content image>
+        <Icon size='massive' name="coffee" />
+        <Modal.Description>
+          <p>If OpenMHz brings you joy, think about becoming a supporter! It will cover hosting costs and help keep me focused on development.</p>
+          <p>No worries if not, I am not having problems keeping it going.</p>
+          <a href="https://github.com/sponsors/robotastic"><Button>
             Support
           </Button></a>
-          </Modal.Description>
+        </Modal.Description>
 
-        </Modal.Content>
-        <Modal.Actions>
-        <Button onClick={this.handleDone} >
-             Done
-          </Button>
-        </Modal.Actions>
-      </Modal>
+      </Modal.Content>
+      <Modal.Actions>
+        <Button onClick={() => setOpen(false)} >
+          Done
+        </Button>
+      </Modal.Actions>
+    </Modal>
+
+  )
 
-    )
-  }
 }
 
 export default SupportModal;