From 9403b5f5961c82575c618161aa793219a1bfa398 Mon Sep 17 00:00:00 2001 From: Luke Berndt Date: Wed, 18 Jan 2023 09:25:59 -0500 Subject: [PATCH 1/5] split up CallPlayer --- frontend/src/Call/CallPlayer.js | 339 ++------------------------ frontend/src/Call/Calls.js | 408 ++++++++++++++++++++++++++++++++ frontend/src/Call/ListCalls.js | 2 +- frontend/src/index.js | 4 +- 4 files changed, 425 insertions(+), 328 deletions(-) create mode 100644 frontend/src/Call/Calls.js diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js index ee39862..ee2865f 100644 --- a/frontend/src/Call/CallPlayer.js +++ b/frontend/src/Call/CallPlayer.js @@ -2,10 +2,9 @@ import React, { useEffect, useLayoutEffect, useState, useRef } from "react"; import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'; import MediaPlayer from "./MediaPlayer"; -import FilterModal from "./FilterModal"; -import GroupModal from "./GroupModal"; + import SupportModal from "./SupportModal"; -import CalendarModal from "./CalendarModal"; + import CallInfo from "./CallInfo"; import ListCalls from "./ListCalls"; import { useSelector, useDispatch } from 'react-redux' @@ -44,21 +43,22 @@ function CallPlayer(props) { threshold: 0.5 }); const { data: groupsData, isSuccess: isGroupsSuccess } = useGetGroupsQuery(shortName); - const { loading: callsLoading, data: callsData } = useSelector((state) => state.calls); const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName); - + const callsData = props.callsData; const [autoPlay, setAutoPlay] = useState(true); const [currentCall, setCurrentCall] = useState(false); - const [urlOptions, setUrlOptions] = useState(false); const [isPlaying, setIsPlaying] = useState(false); - const [sidebarOpened, setSidebarOpened] = useState(false); - const [filterVisible, setFilterVisible] = useState(false); - const [groupVisible, setGroupVisible] = useState(false); - const [calendarVisible, setCalendarVisible] = useState(false); - const [isConnected, setIsConnected] = useState(socket.connected); const [loadCallId, setLoadCallId] = useState(false); + const filterType = useSelector((state) => state.callPlayer.filterType); + const filterGroupId = useSelector((state) => state.callPlayer.filterGroupId); + const filterTalkgroups = useSelector((state) => state.callPlayer.filterTalkgroups); + const filterStarred = useSelector((state) => state.callPlayer.filterStarred); + const filterDate = useSelector((state) => state.callPlayer.filterDate); + const live = useSelector((state) => state.callPlayer.live); + + const navigate = useNavigate(); const dispatch = useDispatch(); const positionRef = useRef(); // lets us get the Y Scroll offset for the Call List @@ -66,14 +66,6 @@ function CallPlayer(props) { 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; - const filterType = useSelector((state) => state.callPlayer.filterType); - const filterGroupId = useSelector((state) => state.callPlayer.filterGroupId); - const filterTalkgroups = useSelector((state) => state.callPlayer.filterTalkgroups); - const filterStarred = useSelector((state) => state.callPlayer.filterStarred); - const filterDate = useSelector((state) => state.callPlayer.filterDate); - const live = useSelector((state) => state.callPlayer.live); - const uri = queryString.parse(useLocation().search); - const pathname = useLocation().pathname; let currentCallId = false; @@ -86,16 +78,10 @@ function CallPlayer(props) { setIsPlaying(playing); } - const handlePusherClick = () => { - if (sidebarOpened) setSidebarOpened(false); - } const handleAutoPlay = (currentAutoPlay) => { setAutoPlay(!currentAutoPlay); } - const handleSidebarToggle = () => setSidebarOpened(!sidebarOpened); - const handleFilterToggle = () => setFilterVisible(!filterVisible); - const handleCalendarToggle = () => setCalendarVisible(!calendarVisible); const playCall = (data) => { setCurrentCall(data.call); @@ -120,189 +106,8 @@ function CallPlayer(props) { } } - const getFilterDescription = () => { - - var filter = { type: 'all', code: "", filterStarred: false }; - - switch (filterType) { - case 1: - filter.type = "group"; - filter.code = filterGroupId - break; - case 2: - filter.type = "talkgroup"; - filter.code = filterTalkgroups - break; - default: - case 0: - filter.type = "all"; - filter.code = "" - } - filter.filterStarred = filterStarred - return filter; - } - const handleSocketMessage = (data) => { - const message = JSON.parse(data) - switch (message.type) { - case 'calls': - - pageYOffset.current = positionRef.current.clientHeight; - - if (shouldPlayAddCallRef.current) { - setCurrentCall(message); - } - dispatch(addCall(message)); - - console.log("Got: " + message._id); - break - default: - break - } - } - - const startSocket = () => { - const filter = getFilterDescription(); - - socket.emit("start", { - filterCode: filter.code, - filterType: filter.type, - filterName: "OpenMHz", - filterStarred: filter.starred, - shortName: shortName - }); - } - const stopSocket = () => { - socket.emit("stop"); - } - - const updateUri = () => { - var search = "?" - switch (filterType) { - - case 1: - search = search + `filter-type=group&filter-code=${filterGroupId}`; - break; - case 2: - search = search + `filter-type=talkgroup&filter-code=${filterTalkgroups}`; - break; - default: - case 0: - break; - - } - if (loadCallId) { - if (search.length !== 1) { - search = search + '&'; - } - search = search + `call-id=${loadCallId}` - } - if (filterDate) { - if (search.length !== 1) { - search = search + '&'; - } - search = search + `time=${filterDate}`; - } - - if (filterStarred) { - if (search.length !== 1) { - search = search + '&'; - } - search = search + `starred=true`; - } - navigate(pathname + search, { replace: true }); - - } - - const handleLiveToggle = (currentlyLive) => { - if (!live) { - dispatch(setDateFilter(false)); - dispatch(setLive(true)); - setCurrentCall(false); - dispatch(getCalls({})); - - startSocket(); - } - } - - const handleCalendarClose = (didUpdate) => { - setCalendarVisible(!calendarVisible); - - if (didUpdate) { - dispatch(setLive(false)); - setCurrentCall(false); - stopSocket(); - } - } - - const handleGroupClose = (didUpdate) => { - setGroupVisible(!groupVisible); - } - - const handleFilterClose = (didUpdate) => { - setFilterVisible(!filterVisible); - - if (didUpdate) { - setCurrentCall(false); - } - } - - - const setStateFromUri = async () => { - var filter = { - filterDate: false, - filterType: 0, // this is "all" - filterTalkgroups: [], - filterGroupId: false, - filterStarred: false, - live: true, - shortName: shortName - }; - - // is there a star filter? - if (uri.hasOwnProperty('starred')) { - const starred = uri['starred']; - filter.filterStarred = starred === 'true' ? true : false; - if (!urlOptions) setUrlOptions(true); - } - - // is there a time based filter? - if (uri.hasOwnProperty('time')) { - const date = new Date(parseInt(uri['time'])); - filter.filterDate = date.getTime(); - filter.live = false; - if (!urlOptions) setUrlOptions(true); - } - - // is this just for one call? - if (uri.hasOwnProperty('call-id')) { - const _id = uri['call-id']; - setLoadCallId(_id); - setAutoPlay(false); - if (!urlOptions) setUrlOptions(true); - } - - // is there a Filter set? - if ((uri.hasOwnProperty('filter-code')) && (uri.hasOwnProperty('filter-type'))) { - if (!urlOptions) setUrlOptions(true); - - // The Filter is a group - if (uri['filter-type'] === "group") { - filter.filterType = 1; - filter.filterGroupId = uri["filter-code"]; - } - - // The Filter is talkgroups - if (uri['filter-type'] === 'talkgroup') { - const tg = uri["filter-code"].split(',').map(Number); - filter.filterType = 2; - filter.filterTalkgroups = tg; - } - } - - dispatch(setFilter(filter)); - } useEffect(() => { if (loadNewerInView && callsData && (callsData.ids.length > 0)) { @@ -316,7 +121,7 @@ function CallPlayer(props) { dispatch(getOlderCalls({})); } }, [loadOlderInView]); - +/* useEffect(() => { if ( loadCallId && callsData) { const call = callsData.entities[loadCallId]; @@ -324,7 +129,7 @@ function CallPlayer(props) { setCurrentCall(call); } } - }, [callsData]) + }, [callsData])*/ useLayoutEffect( () => { const scrollAmount = parseInt(positionRef.current.clientHeight) - parseInt(pageYOffset.current); @@ -339,66 +144,7 @@ function CallPlayer(props) { }, [callsData]); */ - useEffect(() => { - setStateFromUri(); - return () => { - stopSocket(); - }; - }, []); - useEffect(() => { - socket.on('connect', () => { - setIsConnected(true); - }); - - socket.on('disconnect', () => { - setIsConnected(false); - }); - - socket.on('reconnect', (attempts) => { - console.log("Socket Reconnected after attempts: " + attempts); // true - - if (live) { - this.startSocket(); - } - }) - - socket.on("new message", handleSocketMessage ); - - return () => { - socket.off('connect'); - socket.off('disconnect'); - socket.off('pong'); - }; - }, []); - - useEffect(() => { - dispatch(getCalls({})); - if (live) { - startSocket(); - } - }, [shortName, filterGroupId, filterTalkgroups, filterType, filterDate, filterStarred]) - - - // Update the Browser URI when any relevant values change - useEffect(() => { - updateUri(); - }, [filterGroupId, filterTalkgroups, filterType, filterDate, filterStarred, loadCallId]) - - - useEffect(() => { - if (!urlOptions && groupsData && (groupsData.length > 0)) { - setGroupVisible(true); - } - }, [groupsData]) - - - - var archiveLabel = ""; - if (filterDate) { - const filterDateObj = new Date(filterDate); - archiveLabel = filterDateObj.toLocaleDateString() + " " + filterDateObj.toLocaleTimeString() - } var callInfoHeader = "Call Info"; var callLink = "" @@ -426,70 +172,13 @@ function CallPlayer(props) { callDownload = currentCall.url; } - const archive = process.env.REACT_APP_ARCHIVE_DAYS - var filterLabel = "All" - switch (filterType) { - case 1: - filterLabel = "Group" - break; - - case 2: - filterLabel = "Talkgroups" - break; - default: - case 0: - filterLabel = "All" - } return (
- - - - - - - - Home - Systems - About - - - - - - - - Filter - - - - {/*system && system.name*/} - - - - - - { - archiveLabel - ? archiveLabel - : "Archive" - } - - - - - Live - - - -
@@ -499,7 +188,7 @@ function CallPlayer(props) { - + diff --git a/frontend/src/Call/Calls.js b/frontend/src/Call/Calls.js new file mode 100644 index 0000000..8996748 --- /dev/null +++ b/frontend/src/Call/Calls.js @@ -0,0 +1,408 @@ +import React, { useEffect, useLayoutEffect, useState, useRef } from "react"; +import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'; + +import FilterModal from "./FilterModal"; +import GroupModal from "./GroupModal"; + +import CalendarModal from "./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 { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice' +import { useInView } from 'react-intersection-observer'; +import { + Container, + Label, + Rail, + Sticky, + Menu, + Icon, + Sidebar +} from "semantic-ui-react"; +import "./CallPlayer.css"; +import queryString from '../query-string'; +import io from 'socket.io-client'; + + + + +const socket = io(process.env.REACT_APP_BACKEND_SERVER); + + +// ---------------------------------------------------- +function Calls(props) { + + const { shortName } = useParams(); + + 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); + const [urlOptions, setUrlOptions] = useState(false); + const [isPlaying, setIsPlaying] = useState(false); + const [sidebarOpened, setSidebarOpened] = useState(false); + const [filterVisible, setFilterVisible] = useState(false); + const [groupVisible, setGroupVisible] = useState(false); + const [calendarVisible, setCalendarVisible] = useState(false); + const [isConnected, setIsConnected] = useState(socket.connected); + const [loadCallId, setLoadCallId] = useState(false); + + 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; + + const filterType = useSelector((state) => state.callPlayer.filterType); + const filterGroupId = useSelector((state) => state.callPlayer.filterGroupId); + const filterTalkgroups = useSelector((state) => state.callPlayer.filterTalkgroups); + const filterStarred = useSelector((state) => state.callPlayer.filterStarred); + const filterDate = useSelector((state) => state.callPlayer.filterDate); + const live = useSelector((state) => state.callPlayer.live); + const uri = queryString.parse(useLocation().search); + const pathname = useLocation().pathname; + + let currentCallId = false; + + + if (currentCall) { + currentCallId = currentCall._id; + } + + + const handlePusherClick = () => { + if (sidebarOpened) setSidebarOpened(false); + } + + const handleSidebarToggle = () => setSidebarOpened(!sidebarOpened); + const handleFilterToggle = () => setFilterVisible(!filterVisible); + const handleCalendarToggle = () => setCalendarVisible(!calendarVisible); + + + + + const getFilterDescription = () => { + + var filter = { type: 'all', code: "", filterStarred: false }; + + switch (filterType) { + case 1: + filter.type = "group"; + filter.code = filterGroupId + break; + case 2: + filter.type = "talkgroup"; + filter.code = filterTalkgroups + break; + default: + case 0: + filter.type = "all"; + filter.code = "" + } + filter.filterStarred = filterStarred + return filter; + } + + + const handleSocketMessage = (data) => { + const message = JSON.parse(data) + switch (message.type) { + case 'calls': + + pageYOffset.current = positionRef.current.clientHeight; + + if (shouldPlayAddCallRef.current) { + setCurrentCall(message); + } + dispatch(addCall(message)); + + console.log("Got: " + message._id); + break + default: + break + } + } + + const startSocket = () => { + const filter = getFilterDescription(); + + socket.emit("start", { + filterCode: filter.code, + filterType: filter.type, + filterName: "OpenMHz", + filterStarred: filter.starred, + shortName: shortName + }); + } + const stopSocket = () => { + socket.emit("stop"); + } + + const updateUri = () => { + var search = "?" + switch (filterType) { + + case 1: + search = search + `filter-type=group&filter-code=${filterGroupId}`; + break; + case 2: + search = search + `filter-type=talkgroup&filter-code=${filterTalkgroups}`; + break; + default: + case 0: + break; + + } + if (loadCallId) { + if (search.length !== 1) { + search = search + '&'; + } + search = search + `call-id=${loadCallId}` + } + if (filterDate) { + if (search.length !== 1) { + search = search + '&'; + } + search = search + `time=${filterDate}`; + } + + if (filterStarred) { + if (search.length !== 1) { + search = search + '&'; + } + search = search + `starred=true`; + } + navigate(pathname + search, { replace: true }); + + } + + const handleLiveToggle = (currentlyLive) => { + if (!live) { + dispatch(setDateFilter(false)); + dispatch(setLive(true)); + setCurrentCall(false); + dispatch(getCalls({})); + + startSocket(); + } + } + + const handleCalendarClose = (didUpdate) => { + setCalendarVisible(!calendarVisible); + + if (didUpdate) { + dispatch(setLive(false)); + setCurrentCall(false); + stopSocket(); + } + } + + const handleGroupClose = (didUpdate) => { + setGroupVisible(!groupVisible); + } + + const handleFilterClose = (didUpdate) => { + setFilterVisible(!filterVisible); + + if (didUpdate) { + setCurrentCall(false); + } + } + + + const setStateFromUri = async () => { + var filter = { + filterDate: false, + filterType: 0, // this is "all" + filterTalkgroups: [], + filterGroupId: false, + filterStarred: false, + live: true, + shortName: shortName + }; + + // is there a star filter? + if (uri.hasOwnProperty('starred')) { + const starred = uri['starred']; + filter.filterStarred = starred === 'true' ? true : false; + if (!urlOptions) setUrlOptions(true); + } + + // is there a time based filter? + if (uri.hasOwnProperty('time')) { + const date = new Date(parseInt(uri['time'])); + filter.filterDate = date.getTime(); + filter.live = false; + if (!urlOptions) setUrlOptions(true); + } + + // is this just for one call? + if (uri.hasOwnProperty('call-id')) { + const _id = uri['call-id']; + setLoadCallId(_id); + setAutoPlay(false); + if (!urlOptions) setUrlOptions(true); + } + + // is there a Filter set? + if ((uri.hasOwnProperty('filter-code')) && (uri.hasOwnProperty('filter-type'))) { + if (!urlOptions) setUrlOptions(true); + + // The Filter is a group + if (uri['filter-type'] === "group") { + filter.filterType = 1; + filter.filterGroupId = uri["filter-code"]; + } + + // The Filter is talkgroups + if (uri['filter-type'] === 'talkgroup') { + const tg = uri["filter-code"].split(',').map(Number); + filter.filterType = 2; + filter.filterTalkgroups = tg; + } + } + + dispatch(setFilter(filter)); + } + + + + + + useEffect(() => { + setStateFromUri(); + return () => { + stopSocket(); + }; + }, []); + + useEffect(() => { + socket.on('connect', () => { + setIsConnected(true); + }); + + socket.on('disconnect', () => { + setIsConnected(false); + }); + + socket.on('reconnect', (attempts) => { + console.log("Socket Reconnected after attempts: " + attempts); // true + + if (live) { + this.startSocket(); + } + }) + + socket.on("new message", handleSocketMessage ); + + return () => { + socket.off('connect'); + socket.off('disconnect'); + socket.off('pong'); + }; + }, []); + + useEffect(() => { + dispatch(getCalls({})); + if (live) { + startSocket(); + } + }, [shortName, filterGroupId, filterTalkgroups, filterType, filterDate, filterStarred]) + + + // Update the Browser URI when any relevant values change + useEffect(() => { + updateUri(); + }, [filterGroupId, filterTalkgroups, filterType, filterDate, filterStarred, loadCallId]) + + + useEffect(() => { + if (!urlOptions && groupsData && (groupsData.length > 0)) { + setGroupVisible(true); + } + }, [groupsData]) + + + + var archiveLabel = ""; + if (filterDate) { + const filterDateObj = new Date(filterDate); + archiveLabel = filterDateObj.toLocaleDateString() + " " + filterDateObj.toLocaleTimeString() + } + + + + const archive = process.env.REACT_APP_ARCHIVE_DAYS + + var filterLabel = "All" + switch (filterType) { + case 1: + filterLabel = "Group" + break; + + case 2: + filterLabel = "Talkgroups" + break; + default: + case 0: + filterLabel = "All" + } + + return ( +
+ + + + + + + + Home + Systems + About + + + + + + + + Filter + + + + {/*system && system.name*/} + + + + + + { + archiveLabel + ? archiveLabel + : "Archive" + } + + + + + Live + + + + + + +
+ ); +} + + +export default Calls; diff --git a/frontend/src/Call/ListCalls.js b/frontend/src/Call/ListCalls.js index ed11a25..f2e0379 100644 --- a/frontend/src/Call/ListCalls.js +++ b/frontend/src/Call/ListCalls.js @@ -34,7 +34,7 @@ const ListCalls = (props) => { - {callsData != false && + {callsData && { diff --git a/frontend/src/index.js b/frontend/src/index.js index 34b44a9..a2cd078 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -17,7 +17,7 @@ import Main from "./Main/Main" import ListSystems from "./System/ListSystems" // Call -import CallPlayer from "./Call/CallPlayer" +import Calls from "./Call/Calls" import AboutComponent from "./About/AboutComponent" @@ -32,7 +32,7 @@ root.render( } /> } /> - } /> + } /> } /> From 9aac47409997ba2f7efbebeec394b590020fc589 Mon Sep 17 00:00:00 2001 From: Luke Berndt Date: Wed, 18 Jan 2023 09:31:25 -0500 Subject: [PATCH 2/5] make sure it can handle Call ID on the URL --- frontend/src/Call/CallPlayer.js | 19 +++++++++++-------- frontend/src/Call/Calls.js | 2 +- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js index ee2865f..1c87395 100644 --- a/frontend/src/Call/CallPlayer.js +++ b/frontend/src/Call/CallPlayer.js @@ -34,6 +34,9 @@ const socket = io(process.env.REACT_APP_BACKEND_SERVER); function CallPlayer(props) { const { shortName } = useParams(); + const loadCallId = props.loadCallId; + const callsData = props.callsData; + const { ref: loadOlderRef, inView: loadOlderInView } = useInView({ /* Optional options */ threshold: 0.5 @@ -42,21 +45,21 @@ function CallPlayer(props) { /* Optional options */ threshold: 0.5 }); + const { data: groupsData, isSuccess: isGroupsSuccess } = useGetGroupsQuery(shortName); const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName); - const callsData = props.callsData; + const [autoPlay, setAutoPlay] = useState(true); const [currentCall, setCurrentCall] = useState(false); const [isPlaying, setIsPlaying] = useState(false); - const [loadCallId, setLoadCallId] = useState(false); + const filterType = useSelector((state) => state.callPlayer.filterType); const filterGroupId = useSelector((state) => state.callPlayer.filterGroupId); const filterTalkgroups = useSelector((state) => state.callPlayer.filterTalkgroups); - const filterStarred = useSelector((state) => state.callPlayer.filterStarred); - const filterDate = useSelector((state) => state.callPlayer.filterDate); - const live = useSelector((state) => state.callPlayer.live); + + const navigate = useNavigate(); @@ -121,15 +124,15 @@ function CallPlayer(props) { dispatch(getOlderCalls({})); } }, [loadOlderInView]); -/* + useEffect(() => { - if ( loadCallId && callsData) { + if ( loadCallId && callsData && !currentCall) { const call = callsData.entities[loadCallId]; if (call) { setCurrentCall(call); } } - }, [callsData])*/ + }, [loadCallId, callsData]) useLayoutEffect( () => { const scrollAmount = parseInt(positionRef.current.clientHeight) - parseInt(pageYOffset.current); diff --git a/frontend/src/Call/Calls.js b/frontend/src/Call/Calls.js index 8996748..790550e 100644 --- a/frontend/src/Call/Calls.js +++ b/frontend/src/Call/Calls.js @@ -398,7 +398,7 @@ function Calls(props) { - +
); From 7135fcf19d0847648935c358a1e85db86dea80a8 Mon Sep 17 00:00:00 2001 From: Luke Berndt Date: Wed, 18 Jan 2023 10:10:20 -0500 Subject: [PATCH 3/5] moved the links stuff to a component --- frontend/src/Call/CallInfo.js | 84 ++++++++++++++++++--------------- frontend/src/Call/CallLinks.js | 36 ++++++++++++++ frontend/src/Call/CallPlayer.js | 47 ++---------------- 3 files changed, 86 insertions(+), 81 deletions(-) create mode 100644 frontend/src/Call/CallLinks.js diff --git a/frontend/src/Call/CallInfo.js b/frontend/src/Call/CallInfo.js index 71ae3c6..7f75a35 100644 --- a/frontend/src/Call/CallInfo.js +++ b/frontend/src/Call/CallInfo.js @@ -1,4 +1,7 @@ import React from "react"; +import { useCallLink } from "./CallLinks"; +import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice' +import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'; import { Header, Divider, @@ -11,39 +14,46 @@ import { // ---------------------------------------------------- function CallInfo(props) { - 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(); - if (currentCall.freq) { - var freq = currentCall.freq / 1000000; - callFreq = Math.round(freq * 1000) / 1000; - } + const { shortName } = useParams(); + const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName); - srcList = currentCall.srcList.map((source, index) => {source.src}[{source.pos}]); - callLength = currentCall.len; - talkgroupNum = currentCall.talkgroupNum; - callDownload = currentCall.url; - callTweet = "https://twitter.com/intent/tweet?url="+encodeURIComponent(document.location.origin+props.link)+"&via="+encodeURIComponent("OpenMHz"); + let srcList = ""; + let callLength = "-"; + let callFreq = "-"; + let callDate = "-"; + let callTime = "-"; + let talkgroupNum = "-"; + let header = "Call Info" + + if (props.call) { + const currentCall = props.call; + if ((talkgroupsData) && talkgroupsData.talkgroups[currentCall.talkgroupNum]) { + header = talkgroupsData.talkgroups[currentCall.talkgroupNum].description; + } + var time = new Date(currentCall.time); + callTime = time.toLocaleTimeString(); + callDate = time.toLocaleDateString(); + if (currentCall.freq) { + var freq = currentCall.freq / 1000000; + callFreq = Math.round(freq * 1000) / 1000; } - return ( -
+ + srcList = currentCall.srcList.map((source, index) => {source.src}[{source.pos}]); + callLength = currentCall.len; + talkgroupNum = currentCall.talkgroupNum; + + } + const {callLink,callDownload,callTweet} = useCallLink(props.call) + + return ( +
{props.header}
{srcList} - + Seconds {callLength} @@ -55,32 +65,32 @@ function CallInfo(props) { - + {callTime} - + {callDate} - + {callFreq} MHz - - Tweet - Download - Link - -
- ); - } + + Tweet + Download + Link + +
+ ); +} - export default CallInfo; +export default CallInfo; diff --git a/frontend/src/Call/CallLinks.js b/frontend/src/Call/CallLinks.js new file mode 100644 index 0000000..23a5276 --- /dev/null +++ b/frontend/src/Call/CallLinks.js @@ -0,0 +1,36 @@ +import { useState, useEffect } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; + +export function useCallLink(currentCall) { + const filterType = useSelector((state) => state.callPlayer.filterType); + const filterGroupId = useSelector((state) => state.callPlayer.filterGroupId); + const filterTalkgroups = useSelector((state) => state.callPlayer.filterTalkgroups); + const shortName = useSelector((state) => state.callPlayer.shortName); + if (currentCall) { + let search = "" + const time = new Date(currentCall.time); + const callTime = time.toLocaleTimeString(); + const callDate = time.toLocaleDateString(); + + switch (filterType) { + + case 1: + search = `filter-type=group&filter-code=${filterGroupId}&`; + break; + case 2: + search = `filter-type=talkgroup&filter-code=${filterTalkgroups}&`; + break; + default: + case 0: + break; + + } + const callLink = "/system/" + shortName + "?" + search + "call-id=" + currentCall._id + "&time=" + (time.getTime() + 1); + const callDownload = currentCall.url; + const callTweet = "https://twitter.com/intent/tweet?url=" + encodeURIComponent(document.location.origin + callLink) + "&via=" + encodeURIComponent("OpenMHz"); + + return { callLink, callDownload, callTweet } + } else { + return { callLink: "", callDownload: "", callTweet: "" } + } +} \ No newline at end of file diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js index 1c87395..a670a9c 100644 --- a/frontend/src/Call/CallPlayer.js +++ b/frontend/src/Call/CallPlayer.js @@ -24,7 +24,7 @@ import { import "./CallPlayer.css"; import queryString from '../query-string'; import io from 'socket.io-client'; - +import { useCallLink } from "./CallLinks"; const socket = io(process.env.REACT_APP_BACKEND_SERVER); @@ -55,9 +55,7 @@ function CallPlayer(props) { const [isPlaying, setIsPlaying] = useState(false); - const filterType = useSelector((state) => state.callPlayer.filterType); - const filterGroupId = useSelector((state) => state.callPlayer.filterGroupId); - const filterTalkgroups = useSelector((state) => state.callPlayer.filterTalkgroups); + const {callLink,callDownload,callTweet} = useCallLink(props.call) @@ -109,9 +107,6 @@ function CallPlayer(props) { } } - - - useEffect(() => { if (loadNewerInView && callsData && (callsData.ids.length > 0)) { dispatch(getNewerCalls({})); @@ -142,40 +137,6 @@ function CallPlayer(props) { } }, [callsData]) -/* - useEffect(() => { - - }, [callsData]); -*/ - - - var callInfoHeader = "Call Info"; - var callLink = "" - var callDownload = "" - if (currentCall) { - if ((talkgroupsData) && talkgroupsData[currentCall.talkgroupNum]) { - callInfoHeader = talkgroupsData[currentCall.talkgroupNum].description; - } - const callDate = new Date(currentCall.time); - var search = "" - switch (filterType) { - - case 1: - search = `filter-type=group&filter-code=${filterGroupId}&`; - break; - case 2: - search = `filter-type=talkgroup&filter-code=${filterTalkgroups}&`; - break; - default: - case 0: - break; - - } - callLink = "/system/" + shortName + "?" + search + "call-id=" + currentCall._id + "&time=" + (callDate.getTime() + 1); - callDownload = currentCall.url; - } - - return (
@@ -187,13 +148,11 @@ function CallPlayer(props) {
- - - + From 9edc48ef3755bdd443ede1f5adb4312a61c6bdac Mon Sep 17 00:00:00 2001 From: Luke Berndt Date: Wed, 18 Jan 2023 21:18:39 -0500 Subject: [PATCH 4/5] goodbye vars! --- frontend/src/Call/CallInfo.js | 6 +-- frontend/src/Call/CallItem.js | 6 +-- frontend/src/Call/CallPlayer.js | 21 +++------ frontend/src/Call/Calls.js | 42 +++++++++--------- frontend/src/Call/FilterModal.js | 6 +-- frontend/src/Call/GroupModal.js | 76 +------------------------------- frontend/src/Call/MediaPlayer.js | 6 +-- 7 files changed, 41 insertions(+), 122 deletions(-) diff --git a/frontend/src/Call/CallInfo.js b/frontend/src/Call/CallInfo.js index 7f75a35..0aa882c 100644 --- a/frontend/src/Call/CallInfo.js +++ b/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 (
-
{props.header}
+
{header}
{srcList} diff --git a/frontend/src/Call/CallItem.js b/frontend/src/Call/CallItem.js index dcfd011..9e7dcce 100644 --- a/frontend/src/Call/CallItem.js +++ b/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 { diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js index a670a9c..621c570 100644 --- a/frontend/src/Call/CallPlayer.js +++ b/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 (
- + { - 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) { - +
); diff --git a/frontend/src/Call/FilterModal.js b/frontend/src/Call/FilterModal.js index bf55082..01b1b2a 100644 --- a/frontend/src/Call/FilterModal.js +++ b/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 diff --git a/frontend/src/Call/GroupModal.js b/frontend/src/Call/GroupModal.js index 59ebcbe..b079a6b 100644 --- a/frontend/src/Call/GroupModal.js +++ b/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 ( - - - Select a Group - - -

Choose the type of calls you want to listen to

- - - - - - - - - - - ) - } -}*/ export default GroupModal; diff --git a/frontend/src/Call/MediaPlayer.js b/frontend/src/Call/MediaPlayer.js index 0afcfe5..49e5a56 100644 --- a/frontend/src/Call/MediaPlayer.js +++ b/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. From fef88f3517da082429f2109635c050c4b5a22e8d Mon Sep 17 00:00:00 2001 From: Luke Berndt Date: Wed, 18 Jan 2023 21:27:02 -0500 Subject: [PATCH 5/5] cleaned up the folders --- frontend/src/Call/CallPlayer.js | 12 ++++++------ frontend/src/Call/Calls.js | 6 +++--- frontend/src/Call/{ => components}/CalendarModal.css | 0 frontend/src/Call/{ => components}/CalendarModal.js | 2 +- frontend/src/Call/{ => components}/CallInfo.js | 2 +- frontend/src/Call/{ => components}/CallItem.js | 2 +- frontend/src/Call/{ => components}/CallLinks.js | 0 frontend/src/Call/{ => components}/FilterModal.css | 0 frontend/src/Call/{ => components}/FilterModal.js | 4 ++-- frontend/src/Call/{ => components}/GroupModal.js | 4 ++-- frontend/src/Call/{ => components}/ListCalls.js | 2 +- frontend/src/Call/{ => components}/MediaPlayer.js | 0 frontend/src/Call/{ => components}/SupportModal.js | 0 13 files changed, 17 insertions(+), 17 deletions(-) rename frontend/src/Call/{ => components}/CalendarModal.css (100%) rename frontend/src/Call/{ => components}/CalendarModal.js (95%) rename frontend/src/Call/{ => components}/CallInfo.js (97%) rename frontend/src/Call/{ => components}/CallItem.js (96%) rename frontend/src/Call/{ => components}/CallLinks.js (100%) rename frontend/src/Call/{ => components}/FilterModal.css (100%) rename frontend/src/Call/{ => components}/FilterModal.js (96%) rename frontend/src/Call/{ => components}/GroupModal.js (92%) rename frontend/src/Call/{ => components}/ListCalls.js (98%) rename frontend/src/Call/{ => components}/MediaPlayer.js (100%) rename frontend/src/Call/{ => components}/SupportModal.js (100%) diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js index 621c570..09f962e 100644 --- a/frontend/src/Call/CallPlayer.js +++ b/frontend/src/Call/CallPlayer.js @@ -1,12 +1,12 @@ import React, { useEffect, useLayoutEffect, useState, useRef } from "react"; import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'; -import MediaPlayer from "./MediaPlayer"; +import MediaPlayer from "./components/MediaPlayer"; -import SupportModal from "./SupportModal"; +import SupportModal from "./components/SupportModal"; -import CallInfo from "./CallInfo"; -import ListCalls from "./ListCalls"; +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"; @@ -24,8 +24,8 @@ import { import "./CallPlayer.css"; import queryString from '../query-string'; import io from 'socket.io-client'; -import { useCallLink } from "./CallLinks"; - +import { useCallLink } from "./components/CallLinks"; +import "./CallPlayer.css"; const socket = io(process.env.REACT_APP_BACKEND_SERVER); diff --git a/frontend/src/Call/Calls.js b/frontend/src/Call/Calls.js index b912aae..9ad7793 100644 --- a/frontend/src/Call/Calls.js +++ b/frontend/src/Call/Calls.js @@ -1,10 +1,10 @@ import React, { useEffect, useLayoutEffect, useState, useRef } from "react"; import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'; -import FilterModal from "./FilterModal"; -import GroupModal from "./GroupModal"; +import FilterModal from "./components/FilterModal"; +import GroupModal from "./components/GroupModal"; -import CalendarModal from "./CalendarModal"; +import CalendarModal from "./components/CalendarModal"; import CallPlayer from "./CallPlayer"; import { useSelector, useDispatch } from 'react-redux' diff --git a/frontend/src/Call/CalendarModal.css b/frontend/src/Call/components/CalendarModal.css similarity index 100% rename from frontend/src/Call/CalendarModal.css rename to frontend/src/Call/components/CalendarModal.css diff --git a/frontend/src/Call/CalendarModal.js b/frontend/src/Call/components/CalendarModal.js similarity index 95% rename from frontend/src/Call/CalendarModal.js rename to frontend/src/Call/components/CalendarModal.js index 76322c2..7f51c23 100644 --- a/frontend/src/Call/CalendarModal.js +++ b/frontend/src/Call/components/CalendarModal.js @@ -5,7 +5,7 @@ import { Icon } from "semantic-ui-react"; import "./CalendarModal.css"; -import { setDateFilter } from "../features/callPlayer/callPlayerSlice"; +import { setDateFilter } from "../../features/callPlayer/callPlayerSlice"; import DatePicker from 'react-datepicker'; import { useDispatch } from 'react-redux' import { subDays } from 'date-fns' diff --git a/frontend/src/Call/CallInfo.js b/frontend/src/Call/components/CallInfo.js similarity index 97% rename from frontend/src/Call/CallInfo.js rename to frontend/src/Call/components/CallInfo.js index 0aa882c..b6440f7 100644 --- a/frontend/src/Call/CallInfo.js +++ b/frontend/src/Call/components/CallInfo.js @@ -1,6 +1,6 @@ import React from "react"; import { useCallLink } from "./CallLinks"; -import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice' +import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../../features/api/apiSlice' import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'; import { Header, diff --git a/frontend/src/Call/CallItem.js b/frontend/src/Call/components/CallItem.js similarity index 96% rename from frontend/src/Call/CallItem.js rename to frontend/src/Call/components/CallItem.js index 9e7dcce..a9d55ef 100644 --- a/frontend/src/Call/CallItem.js +++ b/frontend/src/Call/components/CallItem.js @@ -6,7 +6,7 @@ import { } from "semantic-ui-react"; -import { addStar, removeStar } from "../features/calls/callsSlice"; +import { addStar, removeStar } from "../../features/calls/callsSlice"; import { useDispatch } from 'react-redux' const CallItem = (props) => { diff --git a/frontend/src/Call/CallLinks.js b/frontend/src/Call/components/CallLinks.js similarity index 100% rename from frontend/src/Call/CallLinks.js rename to frontend/src/Call/components/CallLinks.js diff --git a/frontend/src/Call/FilterModal.css b/frontend/src/Call/components/FilterModal.css similarity index 100% rename from frontend/src/Call/FilterModal.css rename to frontend/src/Call/components/FilterModal.css diff --git a/frontend/src/Call/FilterModal.js b/frontend/src/Call/components/FilterModal.js similarity index 96% rename from frontend/src/Call/FilterModal.js rename to frontend/src/Call/components/FilterModal.js index 01b1b2a..8bbb7fa 100644 --- a/frontend/src/Call/FilterModal.js +++ b/frontend/src/Call/components/FilterModal.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; -import { setGroupFilter, setTalkgroupFilter, setAllFilter, setStarredFilter } from "../features/callPlayer/callPlayerSlice"; -import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice' +import { setGroupFilter, setTalkgroupFilter, setAllFilter, setStarredFilter } from "../../features/callPlayer/callPlayerSlice"; +import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../../features/api/apiSlice' import { useSelector, useDispatch } from 'react-redux' import { Modal, diff --git a/frontend/src/Call/GroupModal.js b/frontend/src/Call/components/GroupModal.js similarity index 92% rename from frontend/src/Call/GroupModal.js rename to frontend/src/Call/components/GroupModal.js index b079a6b..9b9b450 100644 --- a/frontend/src/Call/GroupModal.js +++ b/frontend/src/Call/components/GroupModal.js @@ -1,6 +1,6 @@ import React, { Component, useState } from "react"; -import { useGetGroupsQuery } from '../features/api/apiSlice' -import { setGroupFilter } from "../features/callPlayer/callPlayerSlice"; +import { useGetGroupsQuery } from '../../features/api/apiSlice' +import { setGroupFilter } from "../../features/callPlayer/callPlayerSlice"; import { useSelector, useDispatch } from 'react-redux' import { diff --git a/frontend/src/Call/ListCalls.js b/frontend/src/Call/components/ListCalls.js similarity index 98% rename from frontend/src/Call/ListCalls.js rename to frontend/src/Call/components/ListCalls.js index f2e0379..3a6059d 100644 --- a/frontend/src/Call/ListCalls.js +++ b/frontend/src/Call/components/ListCalls.js @@ -5,7 +5,7 @@ import { Table, Ref } from "semantic-ui-react"; -import "./CallPlayer.css"; +import "../CallPlayer.css"; // ---------------------------------------------------- const ListCalls = (props) => { diff --git a/frontend/src/Call/MediaPlayer.js b/frontend/src/Call/components/MediaPlayer.js similarity index 100% rename from frontend/src/Call/MediaPlayer.js rename to frontend/src/Call/components/MediaPlayer.js diff --git a/frontend/src/Call/SupportModal.js b/frontend/src/Call/components/SupportModal.js similarity index 100% rename from frontend/src/Call/SupportModal.js rename to frontend/src/Call/components/SupportModal.js