goodbye vars!

frontend/src/Call/CallInfo.js

@@ -30,11 +30,11 @@ function CallInfo(props) {
     if ((talkgroupsData) && talkgroupsData.talkgroups[currentCall.talkgroupNum]) {
       header = talkgroupsData.talkgroups[currentCall.talkgroupNum].description;
     }
-    var time = new Date(currentCall.time);
+    const time = new Date(currentCall.time);
     callTime = time.toLocaleTimeString();
     callDate = time.toLocaleDateString();
     if (currentCall.freq) {
-      var freq = currentCall.freq / 1000000;
+      const freq = currentCall.freq / 1000000;
       callFreq = Math.round(freq * 1000) / 1000;
     }
 
@@ -49,7 +49,7 @@ function CallInfo(props) {
   return (
     <div>
       <Segment padded attached>
-        <Header as='h1'>{props.header}</Header>
+        <Header as='h1'>{header}</Header>
         <List bulleted horizontal link>
           {srcList}
         </List>

frontend/src/Call/CallItem.js

@@ -31,9 +31,9 @@ const CallItem = (props) => {
     }
   }
 
-  var rowSelected = {};
+  let rowSelected = {};
   let starButton;
-  var starClickable = {};
+  let starClickable = {};
   if (!starClicked) {
     starClickable = { link: true };
   }
@@ -61,7 +61,7 @@ const CallItem = (props) => {
       inverted: "true"
     }
   }
-  var talkgroup;
+  let talkgroup;
   if ((typeof props.talkgroups == 'undefined') || (typeof props.talkgroups[call.talkgroupNum] == 'undefined')) {
     talkgroup = call.talkgroupNum;
   } else {

frontend/src/Call/CallPlayer.js

@@ -34,7 +34,7 @@ const socket = io(process.env.REACT_APP_BACKEND_SERVER);
 function CallPlayer(props) {
 
   const { shortName } = useParams();
-  const loadCallId = props.loadCallId;
+  const selectCallId = props.selectCallId;
   const callsData = props.callsData;
 
   const { ref: loadOlderRef, inView: loadOlderInView } = useInView({
@@ -55,7 +55,7 @@ function CallPlayer(props) {
   const [isPlaying, setIsPlaying] = useState(false);
 
 
-  const {callLink,callDownload,callTweet} = useCallLink(props.call)
+  const {callLink,callDownload,callTweet} = useCallLink(currentCall)
 
 
 
@@ -63,7 +63,6 @@ function CallPlayer(props) {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const positionRef = useRef(); // lets us get the Y Scroll offset for the Call List
-  const pageYOffset = useRef(); // Store the current Scroll Offset in a way that guarantees the latest value is available when Call Data is updated
   const shouldPlayAddCallRef = useRef(); // we need to do this to make the current value of isPlaying available in the socket message callback
   shouldPlayAddCallRef.current = (!isPlaying && autoPlay)?true:false;
 
@@ -121,26 +120,20 @@ function CallPlayer(props) {
   }, [loadOlderInView]);
 
   useEffect(() => {
-    if ( loadCallId && callsData && !currentCall) {
-      const call = callsData.entities[loadCallId];
+    if ( selectCallId && callsData && !currentCall) {
+      const call = callsData.entities[selectCallId];
       if (call) {
         setCurrentCall(call);
       }
     }
-  }, [loadCallId, callsData])
+  }, [selectCallId, callsData])
+
 
-  useLayoutEffect( () => {
-    const scrollAmount = parseInt(positionRef.current.clientHeight) - parseInt(pageYOffset.current);
-    if (scrollAmount > 0) {
-      console.log("useLayoutEffect for callsData -  ref: " + pageYOffset.current + " current: " + positionRef.current.clientHeight + " Scroll Amount: " + scrollAmount)
-      window.scrollBy(0, scrollAmount);
-    }
-  }, [callsData])
 
 
   return (
     <div ref={positionRef}>
-      <Container className="main">
+      <Container className="main" >
         <Sidebar.Pushable>
           <Sidebar.Pusher
             style={{ minHeight: '100vh' }}

frontend/src/Call/Calls.js

@@ -50,7 +50,7 @@ function Calls(props) {
   const [groupVisible, setGroupVisible] = useState(false);
   const [calendarVisible, setCalendarVisible] = useState(false);
   const [isConnected, setIsConnected] = useState(socket.connected);
-  const [loadCallId, setLoadCallId] = useState(false);
+  const [selectCallId, setSelectCallId] = useState(false);
 
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -89,7 +89,7 @@ function Calls(props) {
 
   const getFilterDescription = () => {
 
-    var filter = { type: 'all', code: "", filterStarred: false };
+    let filter = { type: 'all', code: "", filterStarred: false };
 
     switch (filterType) {
       case 1:
@@ -117,9 +117,7 @@ function Calls(props) {
 
         pageYOffset.current = positionRef.current.clientHeight;
 
-        if (shouldPlayAddCallRef.current) {
-          setCurrentCall(message);
-        }
+        setSelectCallId(message._id);
         dispatch(addCall(message));
 
         console.log("Got: " + message._id);
@@ -145,7 +143,7 @@ function Calls(props) {
   }
 
   const updateUri = () => {
-    var search = "?"
+    let search = "?"
     switch (filterType) {
 
       case 1:
@@ -159,12 +157,7 @@ function Calls(props) {
         break;
 
     }
-    if (loadCallId) {
-      if (search.length !== 1) {
-        search = search + '&';
-      }
-      search = search + `call-id=${loadCallId}`
-    }
+
     if (filterDate) {
       if (search.length !== 1) {
         search = search + '&';
@@ -217,7 +210,7 @@ function Calls(props) {
 
 
   const setStateFromUri = async () => {
-    var filter = {
+    let filter = {
       filterDate: false,
       filterType: 0,  // this is "all"
       filterTalkgroups: [],
@@ -245,7 +238,7 @@ function Calls(props) {
     // is this just for one call?
     if (uri.hasOwnProperty('call-id')) {
       const _id = uri['call-id'];
-      setLoadCallId(_id);
+      setSelectCallId(_id);
       setAutoPlay(false);
       if (!urlOptions) setUrlOptions(true);
     }
@@ -319,18 +312,25 @@ function Calls(props) {
   // Update the Browser URI when any relevant values change
   useEffect(() => {
     updateUri();
-  }, [filterGroupId, filterTalkgroups, filterType, filterDate, filterStarred, loadCallId])
-
+  }, [filterGroupId, filterTalkgroups, filterType, filterDate, filterStarred, selectCallId])
 
+/*
   useEffect(() => {
     if (!urlOptions && groupsData && (groupsData.length > 0)) {
       setGroupVisible(true);
     }
-  }, [groupsData])
+  }, [groupsData])*/
+
+  useLayoutEffect( () => {
+    const scrollAmount = parseInt(positionRef.current.clientHeight) - parseInt(pageYOffset.current);
+    if (scrollAmount > 0) {
+      console.log("useLayoutEffect for callsData -  ref: " + pageYOffset.current + " current: " + positionRef.current.clientHeight + " Scroll Amount: " + scrollAmount)
+      window.scrollBy(0, scrollAmount);
+    }
+  }, [callsData])
 
 
-
-  var archiveLabel = "";
+  let archiveLabel = "";
   if (filterDate) {
     const filterDateObj = new Date(filterDate);
     archiveLabel = filterDateObj.toLocaleDateString() + " " + filterDateObj.toLocaleTimeString()
@@ -340,7 +340,7 @@ function Calls(props) {
 
   const archive = process.env.REACT_APP_ARCHIVE_DAYS
 
-  var filterLabel = "All"
+  let filterLabel = "All"
   switch (filterType) {
     case 1:
       filterLabel = "Group"
@@ -398,7 +398,7 @@ function Calls(props) {
         </Menu.Menu>
       </Menu>
 
-       <CallPlayer callsData={callsData}  loadCallId={loadCallId}/>     
+       <CallPlayer callsData={callsData}  selectCallId={selectCallId} />     
 
     </div>
   );

frontend/src/Call/FilterModal.js

@@ -64,12 +64,12 @@ function FilterModal(props) {
   }
 
 
-  var obj;
+  
   let talkgroupList = [];
   if (isTalkgroupsSuccess) {
     for (const num in talkgroupsData["talkgroups"]) {
       const talkgroup = talkgroupsData["talkgroups"][num];
-      obj = {
+      const obj = {
         key: talkgroup.num,
         value: talkgroup.num,
         text: talkgroup.description
@@ -82,7 +82,7 @@ function FilterModal(props) {
   if (isGroupsSuccess) {
     for (const num in groupsData) {
       const group = groupsData[num]
-      obj = {
+      const obj = {
         key: group._id,
         value: group._id,
         text: group.groupName

frontend/src/Call/GroupModal.js

@@ -37,7 +37,7 @@ function GroupModal (props) {
 
     for (const num in data) {
       const group = data[num];
-      var obj = {
+      const obj = {
         key: group._id,
         value: group._id,
         text: group.groupName
@@ -69,79 +69,5 @@ function GroupModal (props) {
 
   )
 }
-/*
-class GroupModal extends Component {
-  constructor(props) {
-    super(props)
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleDone = this.handleDone.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-
-    this.state = {
-      open: false,
-      selectedGroup: false
-    }
-}
-
-
-handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
-handleClose = () => this.props.onClose(false);
-
-handleDone(event) {
-
-      if (this.state.selectedGroup) {
-        this.props.callActions.setGroupFilter(this.state.selectedGroup);
-        this.props.onClose(true);
-      } else {
-        this.props.onClose(false);
-      }
-
-}  
-componentDidUpdate(prevProps) {
-
-  const filterChanged = (prevProps.selectedGroup !== this.props.selectedGroup);
-  if (filterChanged) {
-    this.setState({ selectedGroup: this.props.selectedGroup});
-  }
-}
-
-  render() {
-
-
-    var groupList = [];
-    if (this.props.groups) {
-      for (const num in this.props.groups) {
-        const group = this.props.groups[num];
-        var obj = {
-          key: group._id,
-          value: group._id,
-          text: group.groupName
-        }
-        groupList.push(obj);
-      }
-    }
-
-    return (
-
-      <Modal open={this.props.open} onClose={this.handleClose} size='tiny' >
-        <Modal.Header>Select a Group</Modal.Header>
-        <Modal.Content >
-          <Modal.Description>
-            <p>Choose the type of calls you want to listen to</p>
-            <Dropdown placeholder='Group...' fluid selection options={groupList}  name='selectedGroup' onChange={this.handleInputChange} />
-
-          </Modal.Description>
-
-        </Modal.Content>
-        <Modal.Actions>
-          <Button onClick={this.handleDone} >
-            <Icon name='headphones' /> Listen
-          </Button>
-        </Modal.Actions>
-      </Modal>
-
-    )
-  }
-}*/
 
 export default GroupModal;

frontend/src/Call/MediaPlayer.js

@@ -22,16 +22,16 @@ const MediaPlayer = (props) => {
   const handlePlay = () => { setIsPlaying(true); parentHandlePlayPause(true); }
   const playPause = () => { const audio = audioRef.current.audioEl.current; if (isPlaying) { audio.pause(); } else { audio.play(); } }
 
-  var call = props.call;
+  const call = props.call;
 
   useEffect(() => {
 
     const audio = audioRef.current.audioEl.current;
-    var onEnded = props.onEnded;
+    const onEnded = props.onEnded;
     setSourceIndex(0);
     if (call) {
     audio.src = call.url;
-    var playPromise = audio.play();
+    const playPromise = audio.play();
 
     // In browsers that don’t yet support this functionality,
     // playPromise won’t be defined.