GitHub/trunk-server
1
0
Fork 0
mirror of https://github.com/openmhz/trunk-server.git synced 2026-11-12 08:47:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Loads and gets calls

Browse Source
This commit is contained in:
Luke Berndt
2023-01-08 15:13:41 -05:00
parent 9205224f23
commit 1bfb796a49
4 changed files with 273 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

439
frontend/src/Call/CallPlayer.js
View File

@@ -1,5 +1,6 @@
import React from "react";
import { Link } from 'react-router-dom';
import React, { useEffect, useState } from "react";
import { Link, useLocation} from 'react-router-dom';
import { useParams } from "react-router-dom";
import MediaPlayer from "./MediaPlayer";
import FilterModal from "./FilterModal";
import GroupModal from "./GroupModal";
@@ -7,6 +8,10 @@ import SupportModal from "./SupportModal";
import CalendarModal from "./CalendarModalContainer";
import CallInfo from "./CallInfo";
import ListCalls from "./ListCalls";
import { useSelector, useDispatch } from 'react-redux'
import { setLive } from "../features/callPlayer/callPlayerSlice";
import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice'
import { selectAllCalls, useGetCallsQuery } from "../features/calls/callsSlice";
import {
Container,
Label,
@@ -20,114 +25,117 @@ import {
import "./CallPlayer.css";
//import setupSocket from '../socket/SetupSocket.js'
import queryString from '../query-string';
import {Groups, Calls} from "./call-data"
import { setShortName } from "./call-actions";
// ----------------------------------------------------
class CallPlayer extends React.Component {
function CallPlayer (props) {
constructor(props) {
super(props);
this.loadNewerCalls = this.loadNewerCalls.bind(this);
this.loadOlderCalls = this.loadOlderCalls.bind(this);
this.playCall = this.playCall.bind(this);
this.updateUri = this.updateUri.bind(this);
this.switchAutoPlay = this.switchAutoPlay.bind(this);
this.callEnded = this.callEnded.bind(this);
this.addCall = this.addCall.bind(this);
this.handlePusherClick = this.handlePusherClick.bind(this);
this.handleSidebarToggle = this.handleSidebarToggle.bind(this);
this.handleFilterClose = this.handleFilterClose.bind(this);
this.handleGroupClose = this.handleGroupClose.bind(this);
this.handleCalendarToggle = this.handleCalendarToggle.bind(this);
this.handleCalendarClose = this.handleCalendarClose.bind(this);
this.handleLiveToggle = this.handleLiveToggle.bind(this);
this.handlePlayPause = this.handlePlayPause.bind(this);
this.getFilter = this.getFilter.bind(this);
this.socket = window.socket;
this.setupSocket = this.setupSocket.bind(this);
this.endSocket = this.endSocket.bind(this);
this.changeUrl = this.changeUrl.bind(this);
this.audioRef = React.createRef();
this.currentCallRef = React.createRef();
this.state = {
requestMessage: "",
callUrl: "",
autoPlay: true,
callId: false,
playTime: 0,
callScroll: false,
callSelect: false,
urlOptions: false,
isPlaying: false,
sidebarOpened: false,
filterVisible: false,
groupVisible: false,
calendarVisible: false
}
const { shortName } = useParams();
const { data:groupsData, isSuccess:isGroupsSuccess } = useGetGroupsQuery(shortName);
const { data:callsData, isSuccess:isCallsSuccess } = useGetCallsQuery({shortName});
const { data:talkgroupsData, isSuccess:isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
//const allCalls = selectAllCalls(shortName)
const [requestMessage, setRequestMessage] = useState("");
const [callUrl, setCallUrl] = useState("");
const [autoPlay, setAutoPlay] = useState(true);
const [callId, setCallId] = useState(false);
const [playTime, setPlayTime] = useState(0);
const [callScroll, setCallScroll] = useState(false);
const [callSelect, setCallSelect] = 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 dispatch = useDispatch();
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 switchAutoPlay = () => setAutoPlay(!autoPlay);
const handlePlayPause = (playing) => setIsPlaying(playing);
const handlePusherClick = () => {
if (sidebarOpened) setSidebarOpened(false);
}
switchAutoPlay = () => this.setState({
autoPlay: !this.state.autoPlay
})
handlePlayPause = (playing) => this.setState({
isPlaying: playing
})
handlePusherClick = () => {
const { sidebarOpened } = this.state
const handleSidebarToggle = () => setSidebarOpened(!sidebarOpened);
const handleFilterToggle = () => setFilterVisible(!filterVisible);
const handleCalendarToggle = () => setCalendarVisible(!calendarVisible);
const handleLiveToggle = () => {
dispatch(setLive(!live));
}
const audioRef = false;
const loadNewerCalls = () => {
}
const loadOlderCalls = () => {
if (sidebarOpened) this.setState({ sidebarOpened: false })
}
handleSidebarToggle = () => this.setState({ sidebarOpened: !this.state.sidebarOpened })
const playCall = (data) => {
handleFilterToggle = () => this.setState({
filterVisible: !this.state.filterVisible
})
}
const callEnded = () => {
}
/*const changeUrl = url => callActions.changeUrl(url)
handleContextRef = contextRef => this.setState({ contextRef })
changeUrl = url => this.props.callActions.changeUrl(url)
loadNewerCalls() {
console.log("Loading Newer Calls");
this.props.callActions.fetchNewerCalls(this.props.newestCallTime.getTime());
callActions.fetchNewerCalls(newestCallTime.getTime());
}
loadOlderCalls() {
console.log("Loading Older Calls");
this.props.callActions.fetchOlderCalls(this.props.oldestCallTime.getTime());
callActions.fetchOlderCalls(oldestCallTime.getTime());
}
}*/
handleCalendarToggle = () => this.setState({
calendarVisible: !this.state.calendarVisible
})
getFilter() {
const getFilter = () => {
var filter = { type: 'all', code: "", filterStarred: false };
switch (this.props.filterType) {
switch (filterType) {
case 1:
filter.type = "group";
filter.code = this.props.filterGroupId;
filter.code = filterGroupId
break;
case 2:
filter.type = "talkgroup";
filter.code = this.props.filterTalkgroups;
filter.code = filterTalkgroups
break;
default:
case 0:
filter.type = "all";
filter.code = ""
}
filter.filterStarred = this.props.filterStarred;
filter.filterStarred = filterStarred
return filter;
}
endSocket() {
/*
const endSocket = () => {
this.socket.removeAllListeners("new message");
this.socket.removeAllListeners("reconnect");
}
@@ -135,9 +143,9 @@ class CallPlayer extends React.Component {
this.socket.on('new message', this.addCall);
this.socket.on('reconnect', (attempts) => {
console.log("Socket Reconnected after attempts: " + attempts); // true
if (this.props.live) {
if (live) {
var filter = this.getFilter();
this.startSocket(this.props.shortName, filter.type, filter.code, filter.filterStarred);
this.startSocket(shortName, filter.type, filter.code, filter.filterStarred);
}
})
}
@@ -154,16 +162,17 @@ class CallPlayer extends React.Component {
this.socket.emit("stop");
}
handleLiveToggle() {
if (!this.props.live) {
this.props.callActions.setDateFilter(false);
this.props.callActions.setLive(false);
if (!live) {
callActions.setDateFilter(false);
callActions.setLive(false);
this.setState({ callUrl: "", callId: false });
this.props.callActions.fetchCalls();
callActions.fetchCalls();
var filter = this.getFilter();
this.startSocket(this.props.shortName, filter.type, filter.code, filter.filterStarred);
this.startSocket(shortName, filter.type, filter.code, filter.filterStarred);
}
}
*/
/*
updateUri(props, state) {
var search = "?"
switch (props.filterType) {
@@ -198,51 +207,48 @@ class CallPlayer extends React.Component {
}
search = search + `starred=true`;
}
/*
this.props.history.push({
pathname: this.props.history.location.pathname,
history.push({
pathname: history.location.pathname,
search: search
});*/
}
handleCalendarClose(didUpdate) {
this.setState({
calendarVisible: !this.state.calendarVisible
});
if (didUpdate) {
this.props.callActions.setLive(false);
this.props.callActions.fetchCalls();
}
*/
this.setState({ callUrl: "", callId: false });
this.stopSocket();
const handleCalendarClose = (didUpdate) => {
setCalendarVisible(!calendarVisible);
if (didUpdate) {
dispatchEvent(setLive(false));
setCallId(false);
setCallUrl("");
//callActions.fetchCalls();
//this.stopSocket();
//this.socket.close();
}
}
handleGroupClose(didUpdate) {
this.setState({
groupVisible: !this.state.groupVisible
});
this.props.callActions.fetchCalls();
const handleGroupClose = (didUpdate) => {
setGroupVisible(!groupVisible);
//callActions.fetchCalls();
}
handleFilterClose(didUpdate) {
this.setState({
filterVisible: !this.state.filterVisible
});
const handleFilterClose = (didUpdate) => {
setFilterVisible(!filterVisible);
if (didUpdate) {
this.setState({ callUrl: "", callId: false });
this.props.callActions.fetchCalls();
setCallUrl("");
setCallId(false);
//callActions.fetchCalls();
}
}
/*
callEnded(data) {
const audio = this.audioRef.current;
const currentIndex = this.props.callsAllIds.findIndex(callId => callId === this.state.callId);
if (this.state.autoPlay && (currentIndex > 0)) {
const nextCallId = this.props.callsAllIds[currentIndex - 1];
const nextCall = this.props.callsById[nextCallId];
const currentIndex = callsAllIds.findIndex(callId => callId === callId);
if (autoPlay && (currentIndex > 0)) {
const nextCallId = callsAllIds[currentIndex - 1];
const nextCall = callsById[nextCallId];
var callUrl = nextCall.url;
this.setState({ callUrl: callUrl, callId: nextCallId, isPlaying: true }, () => { audio.playSource(callUrl) }); //scrollToComponent(this.currentCallRef.current);
@@ -252,7 +258,7 @@ class CallPlayer extends React.Component {
block: "center",
});
}
this.props.callActions.fetchCallInfo(nextCallId);
callActions.fetchCallInfo(nextCallId);
} else {
this.setState({ isPlaying: false });
}
@@ -266,7 +272,7 @@ class CallPlayer extends React.Component {
callId: data.call._id,
isPlaying: true
}, () => { audio.playSource(callUrl); }); //scrollToComponent(this.currentCallRef.current);
this.props.callActions.fetchCallInfo(data.call._id);
callActions.fetchCallInfo(data.call._id);
}
addCall(data) {
@@ -274,9 +280,9 @@ class CallPlayer extends React.Component {
switch (message.type) {
case 'calls':
const refs = this.refs.current;
this.props.callActions.addCall(message);
const newCall = this.props.callsById[this.props.callsAllIds[0]];
if (!this.state.isPlaying && this.state.autoPlay) {
callActions.addCall(message);
const newCall = callsById[callsAllIds[0]];
if (!isPlaying && autoPlay) {
this.playCall({ call: newCall });
if (this.currentCallRef.current) {
this.currentCallRef.current.scrollIntoView({
@@ -289,14 +295,9 @@ class CallPlayer extends React.Component {
default:
break
}
}
componentWillUnmount() {
this.endSocket();
}
componentDidMount() {
//const parsed = queryString.parse(location.search);
//console.log(parsed);
this.props.callActions.setShortName(this.props.shortName);
}*/
const setStateFromUri = () => {
var filter = {
filterDate: false,
filterType: 0, // this is "all"
@@ -305,7 +306,6 @@ class CallPlayer extends React.Component {
filterStarred: false,
live: true
};
const uri = queryString.parse(this.props.location.search);
// is there a star filter?
if (uri.hasOwnProperty('starred')) {
@@ -335,10 +335,8 @@ class CallPlayer extends React.Component {
callScroll: true,
callSelect: true
});
this.props.callActions.fetchCallInfo(_id);
this.props.callActions.setCallTime(date);
//callActions.fetchCallInfo(_id);
//callActions.setCallTime(date);
}
@@ -367,23 +365,31 @@ class CallPlayer extends React.Component {
}
}
this.props.callActions.setFilter(filter);
//callActions.setFilter(filter);
}
useEffect(() => {
// When a time/date is provided in the URL, it will be added to the filter
// When fetchCalls is called it will selected calls that are older
this.props.callActions.fetchCalls();
this.props.talkgroupActions.fetchTalkgroups(this.props.shortName);
this.props.groupActions.fetchGroups(this.props.shortName);
this.props.systemActions.fetchSystems();
this.setupSocket();
//callActions.fetchCalls();
//talkgroupActions.fetchTalkgroups(shortName);
//groupActions.fetchGroups(shortName);
//systemActions.fetchSystems();
/*this.setupSocket();
if (filter.live) {
this.startSocket(this.props.shortName, filterType, filterCode, filter.filterStarred);
}
}
compareArray(a1, a2) {
this.startSocket(shortName, filterType, filterCode, filter.filterStarred);
}*/
dispatch(setShortName(shortName));
return () => {
//this.endSocket();
};
}, []);
const compareArray = (a1, a2) => {
var i = a1.length;
while (i--) {
if (a1[i] !== a2[i])
@@ -392,62 +398,60 @@ class CallPlayer extends React.Component {
return true
}
useEffect( () => {
if (!urlOptions && groupsData && (groupsData.length > 0)) {
setGroupVisible(true);
}
},[groupsData] )
useEffect( () => {
/*var typeString = 'all';
var filterCode = '';
switch (nextProps.filterType) {
case 1:
typeString = 'group';
filterCode = nextProps.filterGroupId;
break;
case 2:
typeString = 'talkgroup';
filterCode = nextProps.filterTalkgroups;
break;
default:
case 0:
typeString = "all";
filterCode = '';
break;
}
this.updateUri(nextProps, nextState);
if (live) {
this.startSocket(shortName, typeString, filterCode, nextProps.filterStarred);
}*/
}, [filterType,filterTalkgroups,filterGroupId,filterStarred,filterDate])
/*
componentWillUpdate(nextProps, nextState) {
if (!this.props.groups && nextProps.groups) {
if (!this.state.urlOptions && (nextProps.groups.length > 0)) {
this.setState({
groupVisible: true
});
}
}
const filterChanged = (nextProps.filterType !== this.props.filterType) || !this.compareArray(nextProps.filterTalkgroups, this.props.filterTalkgroups) || (nextProps.filterGroupId !== this.props.filterGroupId) || (nextProps.filterDate !== this.props.filterDate) || (nextProps.filterStarred !== this.props.filterStarred);
if (filterChanged) {
var typeString = 'all';
var filterCode = '';
switch (nextProps.filterType) {
case 1:
typeString = 'group';
filterCode = nextProps.filterGroupId;
break;
case 2:
typeString = 'talkgroup';
filterCode = nextProps.filterTalkgroups;
break;
default:
case 0:
typeString = "all";
filterCode = '';
break;
}
this.updateUri(nextProps, nextState);
if (this.props.live) {
this.startSocket(this.props.shortName, typeString, filterCode, nextProps.filterStarred);
}
}
const callsChanged = nextProps.callsAllIds[0] !== this.props.callsAllIds[0];
const callsChanged = nextProps.callsAllIds[0] !== callsAllIds[0];
if (callsChanged) {
const { contextRef } = this.state;
this.scrollPos = contextRef.scrollTop;
this.prevHeight = contextRef.clientHeight;
this.autoScroll = true;
}
/* // if you do this, you also need to update time in the URI to be the call time...
if (this.state.callId != nextState.callId) {
this.updateUri(nextProps, nextState);
}*/
if (this.state.callId && !this.state.callUrl) {
const call = this.props.callsById[this.state.callId];
if (callId && !callUrl) {
const call = callsById[callId];
if (call) {
this.setState({ callUrl: call.url });
}
}
}
}*/
/*
componentDidUpdate(prevProps, prevState) {
const { contextRef } = this.state
//console.log( contextRef.clientHeight - this.prevHeight );
@@ -457,8 +461,8 @@ class CallPlayer extends React.Component {
}
// scroll to a call once the calls have loaded
if (this.state.callScroll && (this.props.callsAllIds.length > prevProps.callsAllIds.length)) {
const call = this.props.callsById[this.state.callId];
if (callScroll && (callsAllIds.length > prevProps.callsAllIds.length)) {
const call = callsById[callId];
if (call) {
this.setState({ callScroll: false });
if (this.currentCallRef.current) {
@@ -472,8 +476,8 @@ class CallPlayer extends React.Component {
}
}
if (this.state.callSelect) {
const call = this.props.callsById[this.state.callId];
if (callSelect) {
const call = callsById[callId];
if (call) {
const audio = this.audioRef.current;
var callUrl = call.url;
@@ -484,37 +488,40 @@ class CallPlayer extends React.Component {
}, () => { audio.playSource(callUrl); }); //scrollToComponent(this.currentCallRef.current);
}
}
}
}*/
//https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
//https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
render() {
const { contextRef } = this.state
const { sidebarOpened } = this.state
//const { contextRef } = this.state
var archiveLabel = "";
if (this.props.filterDate) {
const filterDate = new Date(this.props.filterDate);
if (filterDate) {
const filterDate = new Date(filterDate);
archiveLabel = filterDate.toLocaleDateString() + " " + filterDate.toLocaleTimeString()
}
var callInfoHeader = "Call Info";
const currentCall = this.props.callsById[this.state.callId];
const currentCall = false;//callsById[callId];
var callsAllIds = [];
var callsById = false;
var callLink = ""
var callDownload = ""
if (currentCall) {
if ((this.props.talkgroups) && this.props.talkgroups[currentCall.talkgroupNum]) {
callInfoHeader = this.props.talkgroups[currentCall.talkgroupNum].description;
if ((talkgroupsData) && talkgroupsData[currentCall.talkgroupNum]) {
callInfoHeader = talkgroupsData[currentCall.talkgroupNum].description;
}
const callDate = new Date(currentCall.time);
callLink = "/system/" + this.props.shortName + "?call-id=" + currentCall._id + "&time=" + (callDate.getTime() + 1);
callLink = "/system/" + shortName + "?call-id=" + currentCall._id + "&time=" + (callDate.getTime() + 1);
callDownload = currentCall.url;
}
var archive = process.env.REACT_APP_ARCHIVE_DAYS
var filterLabel = "All"
switch (this.props.filterType) {
switch (filterType) {
case 1:
filterLabel = "Group"
break;
@@ -526,41 +533,39 @@ class CallPlayer extends React.Component {
case 0:
filterLabel = "All"
}
/* if (this.props.calls) {
/* if (calls) {
var callRows = calls.map((call) =>
<CallItem call={call} key={call.shortName}/>
))
}*/
return (
<div ref={this.handleContextRef}>
<FilterModal shortName={this.props.shortName} open={this.state.filterVisible} onClose={this.handleFilterClose} />
<CalendarModal open={this.state.calendarVisible} onClose={this.handleCalendarClose} archive={archive} key={this.props.shortName} />
<GroupModal shortName={this.props.shortName} open={this.state.groupVisible} onClose={this.handleGroupClose} />
<div >
<FilterModal shortName={shortName} open={filterVisible} onClose={handleFilterClose} />
<CalendarModal open={calendarVisible} onClose={handleCalendarClose} archive={archive} key={shortName} />
<GroupModal shortName={shortName} open={groupVisible} onClose={handleGroupClose} />
<Sidebar as={Menu} animation='overlay' inverted vertical visible={sidebarOpened}
onClick={this.handlePusherClick} duration={50} width='thin'>
<Menu.Item onClick={this.handlePusherClick} >
onClick={handlePusherClick} duration={50} width='thin'>
<Menu.Item onClick={handlePusherClick} >
<span> </span><Icon name="close" inverted={true} link={true} size='small' /></Menu.Item>
<Link to="/"><Menu.Item link>Home</Menu.Item></Link>
<Link to="/systems"><Menu.Item link>Systems</Menu.Item></Link>
<Link to="/about"><Menu.Item link>About</Menu.Item></Link>
<Menu.Item link><Groups shortName={this.props.shortName}/></Menu.Item>
<Menu.Item link><Calls shortName={this.props.shortName}/></Menu.Item>
</Sidebar>
<Menu fixed="top">
<Menu.Item onClick={this.handleSidebarToggle}>
<Menu.Item onClick={handleSidebarToggle}>
<Icon name='sidebar' />
</Menu.Item>
<Menu.Item name='filter-btn' onClick={this.handleFilterToggle}>
<Menu.Item name='filter-btn' onClick={handleFilterToggle}>
<Icon name="filter" />
<span className="desktop-only">Filter</span>
<Label horizontal={true} color="grey" className="desktop-only">{filterLabel}</Label>
</Menu.Item>
<Container className="desktop-only" textAlign='center' style={{ fontSize: '1.5rem', paddingLeft: '1em', paddingTop: '.5em' }}>
{this.props.system && this.props.system.name}
{/*system && system.name*/}
</Container>
<Menu.Menu position="right">
<Menu.Item name='archive-btn' onClick={this.handleCalendarToggle} active={!this.props.live}>
<Menu.Item name='archive-btn' onClick={handleCalendarToggle} active={!live}>
<Icon name="calendar" />
<span className="desktop-only">
{
@@ -570,7 +575,7 @@ class CallPlayer extends React.Component {
}
</span>
</Menu.Item>
<Menu.Item name='live-btn' onClick={this.handleLiveToggle} active={this.props.live}>
<Menu.Item name='live-btn' onClick={handleLiveToggle} active={live}>
<Icon name="unmute" />
<span className="desktop-only">Live</span>
</Menu.Item>
@@ -583,24 +588,24 @@ class CallPlayer extends React.Component {
<Container className="main">
<Sidebar.Pushable>
<Sidebar.Pusher
onClick={this.handlePusherClick}
onClick={handlePusherClick}
style={{ minHeight: '100vh' }}
>
<Visibility onTopVisible={this.loadNewerCalls} onBottomVisible={this.loadOlderCalls} once={false}>
<ListCalls callsAllIds={this.props.callsAllIds} currentCallRef={this.currentCallRef} callsById={this.props.callsById} activeCallId={this.state.callId} talkgroups={this.props.talkgroups} playCall={this.playCall} />
<Visibility onTopVisible={loadNewerCalls} onBottomVisible={loadOlderCalls} once={false}>
{/* <ListCalls callsAllIds={callsAllIds} currentCallRef={false} callsById={callsById} activeCallId={callId} talkgroups={talkgroupsData} playCall={playCall} /> */}
</Visibility>
</Sidebar.Pusher>
</Sidebar.Pushable>
<Rail position='right' className="desktop-only" dimmed={sidebarOpened ? "true" : "false"} >
<Sticky context={contextRef} offset={60}>
<Sticky offset={60}>
<CallInfo call={currentCall} header={callInfoHeader} link={callLink}/>
</Sticky>
</Rail>
</Container>
<Menu fixed="bottom" compact inverted >
<Menu.Item active={this.state.autoPlay} onClick={() => this.switchAutoPlay()}><Icon name="level up" /><span className="desktop-only">Autoplay</span></Menu.Item>
<MediaPlayer ref={this.audioRef} call={currentCall} onEnded={this.callEnded} onPlayPause={this.handlePlayPause} />
<Menu.Item active={autoPlay} onClick={() => this.switchAutoPlay()}><Icon name="level up" /><span className="desktop-only">Autoplay</span></Menu.Item>
{ /*<MediaPlayer ref={audioRef} call={currentCall} onEnded={callEnded} onPlayPause={handlePlayPause} /> */ }
<Menu.Menu position="right" className="desktop-only">
<Menu.Item><SupportModal/></Menu.Item>
<Menu.Item><a href={callDownload}><Icon name="download" />Download</a></Menu.Item>
@@ -616,6 +621,6 @@ class CallPlayer extends React.Component {
);
}
}
export default CallPlayer;

9
frontend/src/features/api/apiSlice.js
View File

@@ -25,14 +25,7 @@ export const apiSlice = createApi({
// The URL for the request is '/fakeApi/posts'
query: (shortName) => ({ url: `/${shortName}/talkgroups` })
}),
getCalls: builder.query({
// The URL for the request is '/fakeApi/posts'
query: ({shortName,filterType=0,filterCode=0}) => ({
url: `/${shortName}/calls`,
method: "GET",
params: { filterType, filterCode },
})
})
})
})

48
frontend/src/features/calls/callsSlice.js Normal file
View File

@@ -0,0 +1,48 @@
import {
createSlice,
createEntityAdapter,
createSelector
} from '@reduxjs/toolkit'
import { apiSlice } from '../api/apiSlice'
const callsAdapter = createEntityAdapter({
selectId: (call) => call._id,
sortComparer: (a, b) => a.time.localeCompare(b.time),
})
const initialState = callsAdapter.getInitialState()
export const extendedApiSlice = apiSlice.injectEndpoints({
endpoints: builder => ({
getCalls: builder.query({
query: ({shortName,filterType=0,filterCode=0}) => ({
url: `/${shortName}/calls`,
method: "GET",
params: { filterType, filterCode },
}),
transformResponse: responseData => {
responseData = responseData.calls;
return callsAdapter.setAll(initialState, responseData)
}
})
})
})
export const { useGetCallsQuery } = extendedApiSlice
// Calling `someEndpoint.select(someArg)` generates a new selector that will return
// the query result object for a query with those parameters.
// To generate a selector for a specific query argument, call `select(theQueryArg)`.
// In this case, the users query has no params, so we don't pass anything to select()
export const selectCallsResult = extendedApiSlice.endpoints.getCalls.select()
export const selectCallsData = createSelector(
selectCallsResult,
callsResult => callsResult.data
)
export const { selectAll: selectAllCalls, selectById: selectCallById } =
callsAdapter.getSelectors(state => selectCallsData(state) ?? initialState)

4
frontend/src/index.js
View File

@@ -17,7 +17,7 @@ import MainContainer from "./Main/MainContainer"
import ListSystemsContainer from "./System/ListSystemsContainer"
// Call
import CallPlayerContainer from "./Call/CallPlayerContainer"
import CallPlayer from "./Call/CallPlayer"
import AboutComponent from "./About/AboutComponent"
@@ -31,7 +31,7 @@ root.render(
<Routes>
<Route exact path="/" element={<MainContainer/>} />
<Route exact path="/systems" element={<ListSystemsContainer/>} />
<Route exact path="/system/:shortName" element={<CallPlayerContainer/>} />
<Route exact path="/system/:shortName" element={<CallPlayer/>} />
<Route exact path="/about" element={<AboutComponent/>} />
</Routes>