showing calls

frontend/src/Call/CallPlayer.js

@@ -11,7 +11,7 @@ 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 { selectAllCalls, useGetCallsQuery, callsAdapter } from "../features/calls/callsSlice";
 import {
   Container,
   Label,
@@ -38,8 +38,9 @@ function CallPlayer (props) {
     const { shortName } = useParams();
     const { data:groupsData, isSuccess:isGroupsSuccess } = useGetGroupsQuery(shortName);
     const { data:callsData, isSuccess:isCallsSuccess } = useGetCallsQuery({shortName});
+    //console.log(callsData);
     const { data:talkgroupsData, isSuccess:isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
-    //const allCalls = selectAllCalls(shortName)
+    const allCalls  = callsData?callsData.ids.map( id => callsData.entities[id] ):[]
     const [requestMessage, setRequestMessage] = useState("");
     const [callUrl, setCallUrl] = useState("");
     const [autoPlay, setAutoPlay] = useState(true);
@@ -73,6 +74,7 @@ function CallPlayer (props) {
     if (sidebarOpened) setSidebarOpened(false);
   }
 
+
   const handleSidebarToggle = () => setSidebarOpened(!sidebarOpened);
   const handleFilterToggle = () => setFilterVisible(!filterVisible);
   const handleCalendarToggle = () => setCalendarVisible(!calendarVisible);
@@ -592,7 +594,7 @@ const getFilter = () => {
               style={{ minHeight: '100vh' }}
             >
               <Visibility onTopVisible={loadNewerCalls} onBottomVisible={loadOlderCalls} once={false}>
-               {/*  <ListCalls callsAllIds={callsAllIds} currentCallRef={false} callsById={callsById} activeCallId={callId} talkgroups={talkgroupsData} playCall={playCall} /> */}
+               <ListCalls callsAllIds={callsData.ids} currentCallRef={false} callsById={callsData.entities} activeCallId={callId} talkgroups={talkgroupsData} playCall={playCall} /> 
               </Visibility>
             </Sidebar.Pusher>
           </Sidebar.Pushable>

frontend/src/features/calls/callsSlice.js

@@ -6,7 +6,10 @@ import {
   
   import { apiSlice } from '../api/apiSlice'
 
-  const callsAdapter = createEntityAdapter({
+// in order for the initial fetch to happen this call needs to be made in index.js
+// store.dispatch(extendedApiSlice.endpoints.getCalls.initiate())
+
+  export const callsAdapter = createEntityAdapter({
     selectId: (call) => call._id,
     sortComparer: (a, b) => a.time.localeCompare(b.time),
   })
@@ -16,11 +19,15 @@ import {
   export const extendedApiSlice = apiSlice.injectEndpoints({
     endpoints: builder => ({
       getCalls: builder.query({
-          query: ({shortName,filterType=0,filterCode=0}) => ({
+            query: ({shortName,filterType=0,filterCode=0}) => ({
               url: `/${shortName}/calls`,
               method: "GET", 
               params: { filterType, filterCode },
             }),
+            /*query: () => ({
+                url: `/test/calls`,
+                method: "GET"
+              }),*/
         transformResponse: responseData => {
             responseData = responseData.calls;
           return callsAdapter.setAll(initialState, responseData)
@@ -29,20 +36,28 @@ import {
     })
   })
   
+
+  // from tutorials: https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#transforming-responses
   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 selectCallsResult = extendedApiSlice.endpoints.getCalls.select({"shortName":"test"})
 
-
-export const selectCallsData = createSelector(
+const selectCallsData = createSelector(
   selectCallsResult,
-  callsResult => callsResult.data 
+  (callsResult) => {
+    return callsResult.data
+  }
 )
 
-export const { selectAll: selectAllCalls, selectById: selectCallById } =
-  callsAdapter.getSelectors(state => selectCallsData(state) ?? initialState)
+export const { selectAll: selectAllCalls, selectById: selectCallById } = callsAdapter.getSelectors(state => { 
+    return selectCallsData(state) ?? initialState
+})
+
+  /*
+export const {selectAll: selectAllCalls}  = callsAdapter.getSelectors((state) =>  {
+    return state.api}
+    );*/
+

frontend/src/index.js

@@ -23,6 +23,7 @@ import AboutComponent from "./About/AboutComponent"
 
 
 const store = configureStore(/* provide initial state if any */)
+
 const container = document.getElementById('root');
 const root = createRoot(container);
 root.render(

frontend/src/redux-router/reducers.js

@@ -9,6 +9,7 @@ import callReducer from "../Call/call-reducer"
 import {apiSlice} from "../features/api/apiSlice"
 import callPlayerSlice from "../features/callPlayer/callPlayerSlice"
 
+
 export default (history) => combineReducers({
   router: connectRouter(history),
   system: systemReducer,
@@ -16,7 +17,6 @@ export default (history) => combineReducers({
 	group: groupReducer,
   callPlayer: callPlayerSlice,
 	call: callReducer,
-
   [apiSlice.reducerPath]: apiSlice.reducer,
 
 })