From 10006a106b2b3f96beefe077b8c4cf1ad69d2880 Mon Sep 17 00:00:00 2001 From: Luke Berndt Date: Sat, 31 Dec 2022 13:56:38 -0500 Subject: [PATCH] loading Groups --- .DS_Store | Bin 6148 -> 6148 bytes frontend/src/Call/CallPlayer.js | 5 +- frontend/src/Call/call-data.js | 29 +++++++++ frontend/src/features/api/apiSlice.js | 63 ++------------------ frontend/src/redux-router/configureStore.js | 3 + frontend/src/redux-router/reducers.js | 4 +- 6 files changed, 44 insertions(+), 60 deletions(-) create mode 100644 frontend/src/Call/call-data.js diff --git a/.DS_Store b/.DS_Store index 2a559d693a35f56dbe5d52e55f9c002ced87b135..b4b7e59d95290f6827abaa1fbf4422f9ad3d9431 100644 GIT binary patch delta 59 zcmZoMXfc@JFUZ8ez`)4BAi$88Qk>Pjj0lsh$bN~PV delta 45 zcmZoMXfc@JFUrWkzyQPo3=AaHome Systems About + diff --git a/frontend/src/Call/call-data.js b/frontend/src/Call/call-data.js new file mode 100644 index 0000000..c6f8c76 --- /dev/null +++ b/frontend/src/Call/call-data.js @@ -0,0 +1,29 @@ +import React from 'react' +import { useGetGroupsQuery } from '../features/api/apiSlice' + +export const Groups = (args) => { + + const { data, isError, isLoading, isSuccess,error } = useGetGroupsQuery(args.shortName); + console.log(args.shortName) + let content + + if (isLoading) { + content =
Loading...
+ } else if (isSuccess) { + + for (const num in data) { + const group = data[num]; + content =
  • {group.groupName}
    • ; + } + + } else if (isError) { + content =
    {error.toString()}
    + } + + return ( +
    +

    Group

    + {content} +
    + ) + } \ No newline at end of file diff --git a/frontend/src/features/api/apiSlice.js b/frontend/src/features/api/apiSlice.js index 6710ffb..d72cd04 100644 --- a/frontend/src/features/api/apiSlice.js +++ b/frontend/src/features/api/apiSlice.js @@ -2,65 +2,12 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' -function buildCallUrl(state, date, direction) { - var params = {}; - var url = ""; - - - if ((typeof direction === 'string') && (typeof date === 'number')) { - url = url + '/' + direction; - params["time"] = date; - } else { - if (state.call.filterDate){ - url = url + '/older' - params["time"] = state.call.filterDate; - } - } - if (state.call.filterStarred) { - params["filter-starred"] = true; - } - switch(state.call.filterType) { - case 1: - params["filter-type"] = "group"; - params["filter-code"] = state.call.filterGroupId; - break; - case 2: - params["filter-type"] = "talkgroup"; - params["filter-code"] = state.call.filterTalkgroups; - break; - default: - case 0: - } -/* - - if (this.filterCode != "") { - params["filter-code"] = this.filterCode; - } - - if (this.filterType == this.FilterType.Group) { - params["filter-type"] = "group"; - params["filter-name"] = this.filterName; - } - - if (this.filterType == this.FilterType.Talkgroup) { - params["filter-type"] = "talkgroup"; - } - - if (this.filterType == this.FilterType.Unit) { - params["filter-type"] = "unit"; - } - -*/ - // url = startUp.backend_server + "/" + startUp.shortName.toLowerCase() + "/calls" + url + '?' + buildUrlParams(params); - url = process.env.REACT_APP_BACKEND_SERVER + "/" + state.call.shortName + "/calls" + url + '?' + buildUrlParams(params); - console.log("Trying to fetch data from this url: " + url); - return url; -} // Define our single API slice object export const apiSlice = createApi({ // The cache reducer expects to be added at `state.api` (already default - this is optional) reducerPath: 'api', + // All of our requests will have URLs starting with '/fakeApi' baseQuery: fetchBaseQuery({ baseUrl: process.env.REACT_APP_BACKEND_SERVER }), // The "endpoints" represent operations and requests for this server @@ -68,7 +15,7 @@ export const apiSlice = createApi({ // The `getPosts` endpoint is a "query" operation that returns data getGroups: builder.query({ // The URL for the request is '/fakeApi/posts' - query: (shortName) => ({ url: '/${shortName}/groups' }) + query: (shortName) => ({ url: `/${shortName}/groups` }) }), getSystems: builder.query({ // The URL for the request is '/fakeApi/posts' @@ -76,12 +23,12 @@ export const apiSlice = createApi({ }), getTalkgroups: builder.query({ // The URL for the request is '/fakeApi/posts' - query: (shortName) => ({ url: '/${shortName}/talkgroups' }) + query: (shortName) => ({ url: `/${shortName}/talkgroups` }) }), getCalls: builder.query({ // The URL for the request is '/fakeApi/posts' query: ({shortName, filterType, filterCode}) => ({ - url: "/${shortName}/calls", + url: `/${shortName}/calls`, method: "GET", params: { filterType, filterCode }, }) @@ -90,4 +37,4 @@ export const apiSlice = createApi({ }) // Export the auto-generated hook for the `getPosts` query endpoint -export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetCallsQuery } = apiSlice \ No newline at end of file +export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetCallsQuery } = apiSlice diff --git a/frontend/src/redux-router/configureStore.js b/frontend/src/redux-router/configureStore.js index 8982424..a825832 100644 --- a/frontend/src/redux-router/configureStore.js +++ b/frontend/src/redux-router/configureStore.js @@ -5,6 +5,8 @@ import { createBrowserHistory } from 'history' import { applyMiddleware, compose, createStore } from 'redux' import { routerMiddleware } from 'connected-react-router' import createRootReducer from './reducers' +import { apiSlice } from '../features/api/apiSlice' + import thunk from 'redux-thunk'; export const history = createBrowserHistory() @@ -18,6 +20,7 @@ export default function configureStore(preloadedState) { applyMiddleware( routerMiddleware(history), // for dispatching history actions thunk, + apiSlice.middleware // ... other middlewares ... ), ), diff --git a/frontend/src/redux-router/reducers.js b/frontend/src/redux-router/reducers.js index ac78ad6..209e0c6 100644 --- a/frontend/src/redux-router/reducers.js +++ b/frontend/src/redux-router/reducers.js @@ -6,11 +6,13 @@ import systemReducer from "../System/system-reducer" import talkgroupReducer from "../Talkgroups/talkgroup-reducer" import groupReducer from "../Group/group-reducer" import callReducer from "../Call/call-reducer" +import {apiSlice} from "../features/api/apiSlice" export default (history) => combineReducers({ router: connectRouter(history), system: systemReducer, talkgroup: talkgroupReducer, group: groupReducer, - call: callReducer + call: callReducer, + [apiSlice.reducerPath]: apiSlice.reducer }) \ No newline at end of file