From 5bd5ab0fd53bf9de2f435543b31de83c8d8dab8d Mon Sep 17 00:00:00 2001 From: Luke Berndt Date: Tue, 10 Jan 2023 22:09:52 -0500 Subject: [PATCH] almost have loadolder working --- frontend/src/Call/CallPlayer.js | 29 ++++---- frontend/src/features/calls/callsSlice.js | 81 +++++++++++++++++++++-- 2 files changed, 91 insertions(+), 19 deletions(-) diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js index 773b461..3fad19a 100644 --- a/frontend/src/Call/CallPlayer.js +++ b/frontend/src/Call/CallPlayer.js @@ -9,8 +9,8 @@ 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 { getCalls} from "../features/calls/callsSlice"; +import { setLive, setShortName } from "../features/callPlayer/callPlayerSlice"; +import { getCalls, getOlderCalls} from "../features/calls/callsSlice"; import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice' import { selectAllCalls, useGetCallsQuery, callsAdapter } from "../features/calls/callsSlice"; import { @@ -21,13 +21,13 @@ import { Menu, Icon, Sidebar, - Visibility + Visibility, + Button } from "semantic-ui-react"; import "./CallPlayer.css"; //import setupSocket from '../socket/SetupSocket.js' import queryString from '../query-string'; -import { setShortName } from "./call-actions"; @@ -89,9 +89,6 @@ function CallPlayer (props) { const loadNewerCalls = () => { - } - const loadOlderCalls = () => { - } const playCall = (data) => { @@ -109,13 +106,13 @@ function CallPlayer (props) { console.log("Loading Newer Calls"); callActions.fetchNewerCalls(newestCallTime.getTime()); } - - loadOlderCalls() { +*/ + const loadOlderCalls = (getOlderCalls) => { console.log("Loading Older Calls"); - callActions.fetchOlderCalls(oldestCallTime.getTime()); + dispatch(getOlderCalls()); - }*/ + } const getFilter = () => { @@ -385,13 +382,17 @@ const getFilter = () => { if (filter.live) { this.startSocket(shortName, filterType, filterCode, filter.filterStarred); }*/ + console.log("Setting short name to: " + shortName) dispatch(setShortName(shortName)); - dispatch(getCalls({shortName})); + return () => { //this.endSocket(); }; }, []); + useEffect(() => { + dispatch(getCalls({shortName})); + }, [shortName,filterGroupId,filterTalkgroups,filterType,filterStarred]) @@ -599,6 +600,10 @@ const getFilter = () => { > + +
+ +
diff --git a/frontend/src/features/calls/callsSlice.js b/frontend/src/features/calls/callsSlice.js index 5e197d9..c178d93 100644 --- a/frontend/src/features/calls/callsSlice.js +++ b/frontend/src/features/calls/callsSlice.js @@ -74,10 +74,11 @@ const initialState = { }).join('&') } - function buildCallUrl(shortName,filterType=0,filterGroupId=false, filterTalkgroups=false,filterDate=false, date=false, direction=false,filterStarred=false) { + function buildCallUrl(getState, direction=false, date=false) { var params = {}; var url = ""; + const {shortName,filterType,filterGroupId, filterTalkgroups, filterStarred, filterDate} = getState().callPlayer; if ((typeof direction === 'string') && (typeof date === 'number')) { url = url + '/' + direction; @@ -126,14 +127,38 @@ const initialState = { export const getCalls = createAsyncThunk( 'calls/getCalls', - async({shortName,filterType=0,filterGroupId=false, filterTalkgroups=false, filterStarred=false }) => { - const url = buildCallUrl(shortName, filterType, filterGroupId,filterTalkgroups, filterStarred); + async({},{getState, requestId}) => { + const state = getState() + const {loading,oldestCallTime, newestCallTime} = getState().call; + const url = buildCallUrl(getState); const res = await fetch(url).then( (data) => data.json() ) return res; }) + export const getOlderCalls = createAsyncThunk( + 'calls/getOlderCalls', + async({},{getState, requestId} ) => { + const {loading,oldestCallTime, newestCallTime} = getState().call; + const url = buildCallUrl(getState,"older",oldestCallTime.getTime()); + const res = await fetch(url).then( + (data) => data.json() + ) + return res; + }) + + export const getNewerCalls = createAsyncThunk( + 'calls/getNewerCalls', + async({},{getState, requestId} ) => { + const {loading,oldestCallTime, newestCallTime} = getState().call; + const url = buildCallUrl(getState,"newer",newestCallTime.getTime()); + const res = await fetch(url).then( + (data) => data.json() + ) + return res; + }) + export const callsSlice = createSlice({ name: 'calls', initialState, @@ -142,15 +167,57 @@ export const callsSlice = createSlice({ [getCalls.pending]: (state) => { state.loading = true; }, + [getCalls.rejected]: (state) => { + state.loading = false; + }, [getCalls.fulfilled]: (state, {payload}) => { state.loading = false; state.data = callsAdapter.setAll(state.data, payload.calls) - state.newestCallTime = new Date(payload.calls[0].time) - state.oldestCallTime = new Date(payloads.calls[payloads.calls.length-1].time) + if (state.data && (state.data.ids.length > 0)) { + const first = state.data.ids[0] + const firstTime = state.data.entities[first].time; + const last = state.data.ids[state.data.ids[0].length-1]; + const lastTime = state.data.entities[last].time; + state.newestCallTime = new Date(firstTime) + state.oldestCallTime = new Date(lastTime) + } }, - [getCalls.rejected]: (state) => { + [getOlderCalls.pending]: (state) => { + state.loading = true; + }, + [getOlderCalls.rejected]: (state) => { state.loading = false; - } + }, + [getOlderCalls.fulfilled]: (state, {payload}) => { + state.loading = false; + state.data = callsAdapter.addMany(state.data, payload.calls) + if (state.data && (state.data.ids.length > 0)) { + const first = state.data.ids[0] + const firstTime = state.data.entities[first].time; + const last = state.data.ids[state.data.ids[0].length-1]; + const lastTime = state.data.entities[last].time; + state.newestCallTime = new Date(firstTime) + state.oldestCallTime = new Date(lastTime) + } + }, + [getNewerCalls.pending]: (state) => { + state.loading = true; + }, + [getNewerCalls.rejected]: (state) => { + state.loading = false; + }, + [getNewerCalls.fulfilled]: (state, {payload}) => { + state.loading = false; + state.data = callsAdapter.addMany(state.data, payload.calls) + if (state.data && (state.data.ids.length > 0)) { + const first = state.data.ids[0] + const firstTime = state.data.entities[first].time; + const last = state.data.ids[state.data.ids[0].length-1]; + const lastTime = state.data.entities[last].time; + state.newestCallTime = new Date(firstTime) + state.oldestCallTime = new Date(lastTime) + } + }, } })