diff --git a/frontend/src/About/AboutComponent.js b/frontend/src/About/AboutComponent.js index afb6345..45db264 100644 --- a/frontend/src/About/AboutComponent.js +++ b/frontend/src/About/AboutComponent.js @@ -1,4 +1,4 @@ -import React, { Component } from "react"; +import React from "react"; import { Link } from 'react-router-dom' import { Container, Header, Divider, Icon, Menu, Button } from "semantic-ui-react"; diff --git a/frontend/src/Call/CalendarModal.js b/frontend/src/Call/CalendarModal.js index f733422..76322c2 100644 --- a/frontend/src/Call/CalendarModal.js +++ b/frontend/src/Call/CalendarModal.js @@ -1,4 +1,4 @@ -import React, { Component, useState } from "react"; +import React, { useState } from "react"; import { Modal, Button, @@ -8,12 +8,10 @@ import "./CalendarModal.css"; import { setDateFilter } from "../features/callPlayer/callPlayerSlice"; import DatePicker from 'react-datepicker'; import { useDispatch } from 'react-redux' -import { setDate, subDays } from 'date-fns' +import { subDays } from 'date-fns' import 'react-datepicker/dist/react-datepicker.css'; function CalendarModal(props) { - - const [open, setOpen] = useState(false); const [startDate, setStartDate] = useState(new Date()); const dispatch = useDispatch() const onClose = props.onClose; diff --git a/frontend/src/Call/CallInfo.js b/frontend/src/Call/CallInfo.js index 1818242..71ae3c6 100644 --- a/frontend/src/Call/CallInfo.js +++ b/frontend/src/Call/CallInfo.js @@ -1,7 +1,6 @@ import React from "react"; import { Header, - Button, Divider, List, Segment, diff --git a/frontend/src/Call/CallItem.js b/frontend/src/Call/CallItem.js index 572ac3a..dcfd011 100644 --- a/frontend/src/Call/CallItem.js +++ b/frontend/src/Call/CallItem.js @@ -1,13 +1,12 @@ - import React, { useState } from "react"; import { Table, Icon, Label } from "semantic-ui-react"; -import { connect } from "react-redux" -import { addStar, removeStar} from "../features/calls/callsSlice"; + +import { addStar, removeStar } from "../features/calls/callsSlice"; import { useDispatch } from 'react-redux' const CallItem = (props) => { @@ -22,7 +21,7 @@ const CallItem = (props) => { const handleStarClicked = (e) => { e.preventDefault(); e.stopPropagation(); - e.nativeEvent.stopImmediatePropagation(); + e.nativeEvent.stopImmediatePropagation(); if (!starClicked) { setStarClicked(true); dispatch(addStar(props.call._id)); @@ -32,11 +31,11 @@ const CallItem = (props) => { } } - var rowSelected={}; + var rowSelected = {}; let starButton; var starClickable = {}; if (!starClicked) { - starClickable = {link: true }; + starClickable = { link: true }; } if (!call.star && starVisible) { starButton = @@ -47,32 +46,33 @@ const CallItem = (props) => { } if (call.star && call.star > 1) { starButton = ( - - - ) + + + ) } if (activeCall) { - rowSelected={positive: true, + rowSelected = { + positive: true, color: "blue", - key: "blue", - inverted: "true" - } + key: "blue", + inverted: "true" + } } var talkgroup; - if ((typeof props.talkgroups == 'undefined') || (typeof props.talkgroups[call.talkgroupNum] == 'undefined')) { - talkgroup = call.talkgroupNum; + if ((typeof props.talkgroups == 'undefined') || (typeof props.talkgroups[call.talkgroupNum] == 'undefined')) { + talkgroup = call.talkgroupNum; } else { - talkgroup = props.talkgroups[call.talkgroupNum].description; + talkgroup = props.talkgroups[call.talkgroupNum].description; } return ( - props.onClick({call: call}, e)} {...rowSelected}> - {call.len} - {talkgroup} - {time.toLocaleTimeString()} - setStarVisible(true)} onMouseLeave={() => setStarVisible(false)} onClick={handleStarClicked}>{starButton} + props.onClick({ call: call }, e)} {...rowSelected}> + {call.len} + {talkgroup} + {time.toLocaleTimeString()} + setStarVisible(true)} onMouseLeave={() => setStarVisible(false)} onClick={handleStarClicked}>{starButton} diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js index 22706c9..ee39862 100644 --- a/frontend/src/Call/CallPlayer.js +++ b/frontend/src/Call/CallPlayer.js @@ -9,7 +9,7 @@ import CalendarModal from "./CalendarModal"; import CallInfo from "./CallInfo"; import ListCalls from "./ListCalls"; import { useSelector, useDispatch } from 'react-redux' -import { setLive, setShortName, setFilter,setDateFilter } from "../features/callPlayer/callPlayerSlice"; +import { setLive, setFilter,setDateFilter } from "../features/callPlayer/callPlayerSlice"; import { getCalls, getOlderCalls, getNewerCalls, addCall } from "../features/calls/callsSlice"; import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice' import { useInView } from 'react-intersection-observer'; @@ -20,8 +20,7 @@ import { Sticky, Menu, Icon, - Sidebar, - Button + Sidebar } from "semantic-ui-react"; import "./CallPlayer.css"; import queryString from '../query-string'; @@ -36,11 +35,11 @@ const socket = io(process.env.REACT_APP_BACKEND_SERVER); function CallPlayer(props) { const { shortName } = useParams(); - const { ref: loadOlderRef, inView: loadOlderInView, entry: loadOlderEntry } = useInView({ + const { ref: loadOlderRef, inView: loadOlderInView } = useInView({ /* Optional options */ threshold: 0.5 }); - const { ref: loadNewerRef, inView: loadNewerInView, entry: loadNewerEntry } = useInView({ + const { ref: loadNewerRef, inView: loadNewerInView } = useInView({ /* Optional options */ threshold: 0.5 }); @@ -83,9 +82,6 @@ function CallPlayer(props) { currentCallId = currentCall._id; } - - - const handlePlayPause = (playing) => { setIsPlaying(playing); } @@ -151,7 +147,7 @@ function CallPlayer(props) { const message = JSON.parse(data) switch (message.type) { case 'calls': - const ref = positionRef.current; + pageYOffset.current = positionRef.current.clientHeight; if (shouldPlayAddCallRef.current) { @@ -282,18 +278,11 @@ function CallPlayer(props) { // is this just for one call? if (uri.hasOwnProperty('call-id')) { const _id = uri['call-id']; - const date = new Date(parseInt(uri['time'])); setLoadCallId(_id); setAutoPlay(false); if (!urlOptions) setUrlOptions(true); - //callActions.fetchCallInfo(_id); - //callActions.setCallTime(date); } - - var filterType = "all"; - var filterCode = ""; - // is there a Filter set? if ((uri.hasOwnProperty('filter-code')) && (uri.hasOwnProperty('filter-type'))) { if (!urlOptions) setUrlOptions(true); @@ -302,8 +291,6 @@ function CallPlayer(props) { if (uri['filter-type'] === "group") { filter.filterType = 1; filter.filterGroupId = uri["filter-code"]; - filterType = "group"; - filterCode = uri["filter-code"]; } // The Filter is talkgroups @@ -311,8 +298,6 @@ function CallPlayer(props) { const tg = uri["filter-code"].split(',').map(Number); filter.filterType = 2; filter.filterTalkgroups = tg; - filterType = "talkgroup"; - filterCode = tg; } } diff --git a/frontend/src/Call/FilterModal.js b/frontend/src/Call/FilterModal.js index 1b7c91c..bf55082 100644 --- a/frontend/src/Call/FilterModal.js +++ b/frontend/src/Call/FilterModal.js @@ -1,4 +1,4 @@ -import React, { Component, useState } from "react"; +import React, { useState } from "react"; import { setGroupFilter, setTalkgroupFilter, setAllFilter, setStarredFilter } from "../features/callPlayer/callPlayerSlice"; import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice' import { useSelector, useDispatch } from 'react-redux' @@ -16,11 +16,9 @@ import "./FilterModal.css"; function FilterModal(props) { - const shortName = useSelector((state) => state.callPlayer.shortName); const globalFilterStarred = useSelector((state) => state.callPlayer.filterStarred); const { data:groupsData, isSuccess:isGroupsSuccess } = useGetGroupsQuery(props.shortName); const { data:talkgroupsData, isSuccess:isTalkgroupsSuccess } = useGetTalkgroupsQuery(props.shortName); - const [open, setOpen] = useState(false); const [selectedTalkgroup, setSelectedTalkgroup] = useState([]); const [selectedGroup, setSelectedGroup] = useState(false); const [filterStarred, setFilterStarred] = useState(false); diff --git a/frontend/src/Call/ListCalls.js b/frontend/src/Call/ListCalls.js index 3aa621f..ed11a25 100644 --- a/frontend/src/Call/ListCalls.js +++ b/frontend/src/Call/ListCalls.js @@ -1,4 +1,4 @@ -import React, { useEffect, useLayoutEffect, useRef } from "react"; +import React, { useEffect, useRef } from "react"; import CallItem from "./CallItem"; import { Icon, diff --git a/frontend/src/Main/Main.js b/frontend/src/Main/Main.js index 372d169..52801ab 100644 --- a/frontend/src/Main/Main.js +++ b/frontend/src/Main/Main.js @@ -1,4 +1,4 @@ -import React, { Component, useState, useEffect, useRef } from "react"; +import React, { useState, useEffect, useRef } from "react"; import { Link, useNavigate } from 'react-router-dom' import SystemCard from "../System/SystemCard"; import "./Main.css"; @@ -17,8 +17,8 @@ import { } from 'semantic-ui-react' -import { useSelector, useDispatch } from 'react-redux' -import { selectAllSystems, selectActiveSystems, useGetSystemsQuery } from "../features/api/apiSlice"; +import { useDispatch } from 'react-redux' +import { useGetSystemsQuery } from "../features/api/apiSlice"; /* Responsive component was removed from Semantic UI. This is discussed here: https://github.com/Semantic-Org/Semantic-UI-React/pull/4008 */ @@ -83,15 +83,13 @@ General flow: - componentDidMount(): it will call fetchSystem() this will perform an HTTP request if Systems does not exist, and then add System to Props */ -const DesktopContainer = (props) => { +const DesktopContainer = (props) => { const [fixed, setFixed] = useState(false); const hideFixedMenu = () => setFixed(false) const showFixedMenu = () => setFixed(true) - const { children } = props - return (
@@ -212,14 +210,9 @@ const ResponsiveContainer = ({ children }) => ( const Main = (props) => { const [visible, setVisible] = useState(true); - const [duration, setDuration] = useState(500); const [currentSystem, setCurrentSystem] = useState(0); const navigate = useNavigate(); - const dispatch = useDispatch(); const {data:systems, isSuccess} = useGetSystemsQuery(); //= selectAllSystems(); - - - function useInterval(callback, delay) { const savedCallback = useRef(); @@ -241,8 +234,6 @@ const Main = (props) => { }, [delay]); } - const handleVisibility = () => setVisible(!visible); - const advanceSystem = () => { if (isSuccess) { let nextSystem = currentSystem + 1;