Call Info and Cal Modals converted

frontend/src/Call/CalendarModal.js

@@ -1,70 +1,64 @@
-import React, { Component } from "react";
+import React, { Component, useState } from "react";
 import {
   Modal,
   Button,
   Icon
 } from "semantic-ui-react";
 import "./CalendarModal.css";
+import { setDateFilter } from "../features/callPlayer/callPlayerSlice";
 import DatePicker from 'react-datepicker';
-import {  subDays } from 'date-fns'
+import { useDispatch } from 'react-redux'
+import { setDate, subDays } from 'date-fns'
 import 'react-datepicker/dist/react-datepicker.css';
 
-class CalendarModal extends Component {
-  constructor(props) {
-    super(props)
-    this.handleDateChange = this.handleDateChange.bind(this);
-    this.handleDone = this.handleDone.bind(this);
-    this.handleClose = this.handleClose.bind(this);
+function CalendarModal(props) {
 
-    this.state = {
-      open: false,
-      startDate: new Date()
-    }
-}
+  const [open, setOpen] = useState(false);
+  const [startDate, setStartDate] = useState(new Date());
+  const dispatch = useDispatch()
+  const onClose = props.onClose;
 
-handleDateChange = (date) => {
-    this.setState({
-      startDate: date
-    });
+  const handleDateChange = (date) => {
+    setStartDate(date);
   }
 
-handleClose = () => this.props.onClose(false);
-handleDone(event) {
-  this.props.callActions.setDateFilter(this.state.startDate.getTime());
-  this.props.onClose(true);
-}
-
-
-  render() {
-    
-    return (
-
-      <Modal open={this.props.open} onClose={this.handleClose} centered={false} size="tiny">
-        <Modal.Header>Select a Date & Time</Modal.Header>
-        <Modal.Content >
-          <Modal.Description>
-            <DatePicker
-                selected={this.state.startDate}
-                onChange={this.handleDateChange}
-                maxDate={new Date()}
-                minDate={subDays(new Date(), process.env.REACT_APP_ARCHIVE_DAYS)}
-                showTimeSelect
-                timeFormat="HH:mm"
-                timeIntervals={15}
-                dateFormat="LLL"
-                inline
-            />
-          </Modal.Description>
-        </Modal.Content>
-        <Modal.Actions>
-          <Button onClick={this.handleDone} >
-            <Icon name='checkmark' /> Done
-          </Button>
-        </Modal.Actions>
-      </Modal>
-
-    )
+  const handleClose = () => this.props.onClose(false);
+  const handleDone = (onClose) => {
+    dispatch(setDateFilter(startDate.getTime()));
+    onClose(true);
   }
+
+
+
+
+  return (
+
+    <Modal open={props.open} onClose={handleClose} centered={false} size="tiny">
+      <Modal.Header>Select a Date & Time</Modal.Header>
+      <Modal.Content >
+        <Modal.Description>
+          <DatePicker
+            selected={startDate}
+            onChange={handleDateChange}
+            maxDate={new Date()}
+            minDate={subDays(new Date(), process.env.REACT_APP_ARCHIVE_DAYS)}
+            showTimeSelect
+            timeFormat="HH:mm"
+            timeIntervals={15}
+            dateFormat="LLL"
+            inline
+          />
+        </Modal.Description>
+      </Modal.Content>
+      <Modal.Actions>
+        <Button onClick={()=>handleDone(onClose)} >
+          <Icon name='checkmark' /> Done
+        </Button>
+      </Modal.Actions>
+    </Modal>
+
+  )
 }
 
+
 export default CalendarModal;

frontend/src/Call/CallInfo.js

@@ -11,20 +11,19 @@ import {
 } from "semantic-ui-react";
 
 // ----------------------------------------------------
-class CallInfo extends React.Component {
+function CallInfo(props) {
 
 
-  render() {
-    var srcList = "";
-    var callLength = "-";
-    var callFreq = "-";
-    var callDate = "-";
-    var callTime = "-";
-    var talkgroupNum = "-";
-    var callDownload = "";
-    var callTweet = "";
-    if (this.props.call) {
-      const currentCall = this.props.call;
+    let srcList = "";
+    let callLength = "-";
+    let callFreq = "-";
+    let callDate = "-";
+    let callTime = "-";
+    let talkgroupNum = "-";
+    let callDownload = "";
+    let callTweet = "";
+    if (props.call) {
+      const currentCall = props.call;
       var time = new Date(currentCall.time);
       callTime = time.toLocaleTimeString();
       callDate = time.toLocaleDateString();
@@ -33,12 +32,11 @@ class CallInfo extends React.Component {
         callFreq = Math.round(freq * 1000) / 1000;
       }
 
-      srcList = currentCall.srcList.map((source, index) => <List.Item key={index}>{source.src}
-        [{source.pos}]</List.Item>);
+      srcList = currentCall.srcList.map((source, index) => <List.Item key={index}>{source.src}[{source.pos}]</List.Item>);
       callLength = currentCall.len;
       talkgroupNum = currentCall.talkgroupNum;
       callDownload = currentCall.url;
-      callTweet = "https://twitter.com/intent/tweet?url="+encodeURIComponent(document.location.origin+this.props.link)+"&via="+encodeURIComponent("OpenMHz");
+      callTweet = "https://twitter.com/intent/tweet?url="+encodeURIComponent(document.location.origin+props.link)+"&via="+encodeURIComponent("OpenMHz");
     }
 
 
@@ -46,7 +44,7 @@ class CallInfo extends React.Component {
     return (
       <div>
       <Segment padded attached>
-        <Header as='h1'>{this.props.header}</Header>
+        <Header as='h1'>{props.header}</Header>
         <List bulleted horizontal link>
           {srcList}
         </List>
@@ -84,11 +82,11 @@ class CallInfo extends React.Component {
           <Menu attached='bottom'>
           <a href={callTweet}><Menu.Item name="tweet" ><Icon name='twitter' />Tweet</Menu.Item></a>
           <a href={callDownload}><Menu.Item name="download"><Icon name="download" />Download</Menu.Item></a>
-          <a href={this.props.link}><Menu.Item name="link"><Icon name="at" />Link</Menu.Item></a>
+          <a href={props.link}><Menu.Item name="link"><Icon name="at" />Link</Menu.Item></a>
         </Menu>
         </div>
     );
-    }
+    
   }
 
   export default CallInfo;