almost have loadolder working

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 = () => {
             >
               <Visibility onTopVisible={loadNewerCalls} onBottomVisible={loadOlderCalls} once={false}>
               <ListCalls callsData={callsData} currentCallRef={false} activeCallId={callId} talkgroups={talkgroupsData} playCall={playCall} />
+              <Button onClick={()=> dispatch(getOlderCalls())}>Load More!</Button> 
+              <div>
+              <Button>padding</Button>
+              </div>
              </Visibility>
             </Sidebar.Pusher>
           </Sidebar.Pushable>

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)
+      }
+    },
   }
 })