formatting

frontend/src/Call/CallPlayer.js

@@ -1,20 +1,15 @@
-import React, { useEffect, useLayoutEffect, useState, useRef } from "react";
-import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
-
+import React, { useEffect, useState, useRef } from "react";
+import { useParams } from 'react-router-dom';
 import MediaPlayer from "./components/MediaPlayer";
-
 import SupportModal from "./components/SupportModal";
-
 import CallInfo from "./components/CallInfo";
 import ListCalls from "./components/ListCalls";
-import { useSelector, useDispatch } from 'react-redux'
-import { setLive, setFilter,setDateFilter } from "../features/callPlayer/callPlayerSlice";
-import { getCalls, getOlderCalls, getNewerCalls, addCall } from "../features/calls/callsSlice";
+import { useDispatch } from 'react-redux'
+import { getOlderCalls, getNewerCalls } from "../features/calls/callsSlice";
 import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice'
 import { useInView } from 'react-intersection-observer';
 import {
   Container,
-  Label,
   Rail,
   Sticky,
   Menu,
@@ -46,31 +41,21 @@ function CallPlayer(props) {
     /* Optional options */
     threshold: 0.5
   });
-
-  const { data: groupsData, isSuccess: isGroupsSuccess } = useGetGroupsQuery(shortName);
+  
   const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
-
-
   const [autoPlay, setAutoPlay] = useState(true);
   const [currentCall, setCurrentCall] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
 
-
   const {callLink,callDownload,callTweet} = useCallLink(currentCall)
 
-
-
-
-  const navigate = useNavigate();
   const dispatch = useDispatch();
   const positionRef = useRef(); // lets us get the Y Scroll offset for the Call List
   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;
 
-
   let currentCallId = false;
 
-
   if (currentCall) {
     currentCallId = currentCall._id;
   }
@@ -79,7 +64,6 @@ function CallPlayer(props) {
     setIsPlaying(playing);
   }
 
-
   const handleAutoPlay = (currentAutoPlay) => {
     setAutoPlay(!currentAutoPlay);
   }
@@ -89,7 +73,6 @@ function CallPlayer(props) {
     setIsPlaying(true);
   }
 
-
   const callEnded = () => {
     if (callsData) {
       const currentIndex = callsData.ids.findIndex(callId => callId === currentCallId);
@@ -136,8 +119,6 @@ function CallPlayer(props) {
   }, [selectCallId, callsData])
 
 
-
-
   return (
     <div ref={positionRef}>
       <Container className="main" >

frontend/src/Call/Calls.js

@@ -1,17 +1,14 @@
 import React, { useEffect, useLayoutEffect, useState, useRef } from "react";
 import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
-
 import FilterModal from "./components/FilterModal";
 import GroupModal from "./components/GroupModal";
-
 import CalendarModal from "./components/CalendarModal";
 import CallPlayer from "./CallPlayer";
-
 import { useSelector, useDispatch } from 'react-redux'
 import { setLive, setFilter,setDateFilter } from "../features/callPlayer/callPlayerSlice";
-import { getCalls, getOlderCalls, getNewerCalls, addCall } from "../features/calls/callsSlice";
+import { getCalls, addCall } from "../features/calls/callsSlice";
 import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice'
-import { useInView } from 'react-intersection-observer';
+
 import {
   Container,
   Label,
@@ -38,8 +35,6 @@ function Calls(props) {
 
   const { data: groupsData, isSuccess: isGroupsSuccess } = useGetGroupsQuery(shortName);
   const { loading: callsLoading, data: callsData } = useSelector((state) => state.calls);
-  const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
-
 
   const [autoPlay, setAutoPlay] = useState(true);
   const [currentCall, setCurrentCall] = useState(false);
@@ -84,11 +79,7 @@ function Calls(props) {
   const handleFilterToggle = () => setFilterVisible(!filterVisible);
   const handleCalendarToggle = () => setCalendarVisible(!calendarVisible);
 
-
-
-
   const getFilterDescription = () => {
-
     let filter = { type: 'all', code: "", filterStarred: false };
 
     switch (filterType) {
@@ -179,9 +170,7 @@ function Calls(props) {
     if (!live) {
       dispatch(setDateFilter(false));
       dispatch(setLive(true));
-      setCurrentCall(false);
       dispatch(getCalls({}));
-
       startSocket();
     }
   }
@@ -191,7 +180,6 @@ function Calls(props) {
 
     if (didUpdate) {
       dispatch(setLive(false));
-      setCurrentCall(false);
       stopSocket();
     }
   }
@@ -202,10 +190,6 @@ function Calls(props) {
 
   const handleFilterClose = (didUpdate) => {
     setFilterVisible(!filterVisible);
-
-    if (didUpdate) {
-      setCurrentCall(false);
-    }
   }
 
 
@@ -265,9 +249,6 @@ function Calls(props) {
   }
 
 
-
-
-
   useEffect(() => {
     setStateFromUri();
     return () => {
@@ -335,8 +316,6 @@ function Calls(props) {
     archiveLabel = filterDateObj.toLocaleDateString() + " " + filterDateObj.toLocaleTimeString()
   }
 
-
-
   const archive = process.env.REACT_APP_ARCHIVE_DAYS
 
   let filterLabel = "All"
@@ -396,9 +375,7 @@ function Calls(props) {
           </Menu.Item>
         </Menu.Menu>
       </Menu>
-
        <CallPlayer callsData={callsData}  selectCallId={selectCallId} />     
-
     </div>
   );
 }