diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js index a2fd3d0..01f80d3 100644 --- a/frontend/src/Call/CallPlayer.js +++ b/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' }} > - {/* */} + diff --git a/frontend/src/features/calls/callsSlice.js b/frontend/src/features/calls/callsSlice.js index 234d4d7..36822d6 100644 --- a/frontend/src/features/calls/callsSlice.js +++ b/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} + );*/ + diff --git a/frontend/src/index.js b/frontend/src/index.js index 6e79eb3..e7ca077 100644 --- a/frontend/src/index.js +++ b/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( diff --git a/frontend/src/redux-router/reducers.js b/frontend/src/redux-router/reducers.js index c1bf77a..4ef6dae 100644 --- a/frontend/src/redux-router/reducers.js +++ b/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, }) \ No newline at end of file