GitHub/trunk-server
1
0
Fork 0
mirror of https://github.com/openmhz/trunk-server.git synced 2026-11-13 01:07:42 -05:00
Code Issues Packages Projects Releases Wiki Activity

loading using an Async Thunk

Browse Source
This commit is contained in:
Luke Berndt
2023-01-10 10:14:01 -05:00
parent a2deb4373e
commit 020f00b8fc
4 changed files with 123 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,7 @@ import CallInfo from "./CallInfo";
import ListCalls from "./ListCalls";
import { useSelector, useDispatch } from 'react-redux'
import { setLive } from "../features/callPlayer/callPlayerSlice";
import { getCalls} from "../features/calls/callsSlice";
import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice'
import { selectAllCalls, useGetCallsQuery, callsAdapter } from "../features/calls/callsSlice";
import {
@@ -37,10 +38,12 @@ function CallPlayer (props) {
const { shortName } = useParams();
const { data:groupsData, isSuccess:isGroupsSuccess } = useGetGroupsQuery(shortName);
const { data:callsData, isSuccess:isCallsSuccess } = useGetCallsQuery({shortName});
//const { data:callsData, isSuccess:isCallsSuccess } = useGetCallsQuery({shortName});
const {loading, data: callsData} = useSelector((state) => state.calls);
//console.log(callsData);
const { data:talkgroupsData, isSuccess:isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
const allCalls = callsData?callsData.ids.map( id => callsData.entities[id] ):[]
//const allCalls = callsData?callsData.ids.map( id => callsData.entities[id] ):[]
const [requestMessage, setRequestMessage] = useState("");
const [callUrl, setCallUrl] = useState("");
const [autoPlay, setAutoPlay] = useState(true);
@@ -383,6 +386,7 @@ const getFilter = () => {
this.startSocket(shortName, filterType, filterCode, filter.filterStarred);
}*/
dispatch(setShortName(shortName));
dispatch(getCalls({shortName}));
return () => {
//this.endSocket();
};
@@ -594,8 +598,8 @@ const getFilter = () => {
style={{ minHeight: '100vh' }}
>
<Visibility onTopVisible={loadNewerCalls} onBottomVisible={loadOlderCalls} once={false}>
<ListCalls callsAllIds={callsData.ids} currentCallRef={false} callsById={callsData.entities} activeCallId={callId} talkgroups={talkgroupsData} playCall={playCall} />
</Visibility>
<ListCalls callsData={callsData} currentCallRef={false} activeCallId={callId} talkgroups={talkgroupsData} playCall={playCall} />
</Visibility>
</Sidebar.Pusher>
</Sidebar.Pushable>
<Rail position='right' className="desktop-only" dimmed={sidebarOpened ? "true" : "false"} >

17
frontend/src/Call/ListCalls.js
View File

@@ -13,6 +13,7 @@ class ListCalls extends React.Component {
//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 callsData = this.props.callsData;
return (
<Table id="calls" unstackable >
@@ -24,20 +25,24 @@ class ListCalls extends React.Component {
<Table.HeaderCell><Icon name='star' /></Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body >
{callsData != false &&
<Table.Body>
{this.props.callsAllIds.map((callId, index) => {
{
this.props.callsData.ids.map((callId, index) => {
if (callId === this.props.activeCallId) {
return (<Ref innerRef={this.props.currentCallRef} key={index} ><CallItem activeCall={true} call={this.props.callsById[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/></Ref>)
return (<Ref innerRef={this.props.currentCallRef} key={index} ><CallItem activeCall={true} call={this.props.callsData.entities[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/></Ref>)
} else {
return <CallItem activeCall={false} call={this.props.callsById[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/>
return <CallItem activeCall={false} call={this.props.callsData.entities[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/>
}
})
}
}
</Table.Body>
}
</Table>
);
}