loading Groups

frontend/src/Call/CallPlayer.js

@@ -20,7 +20,7 @@ import {
 import "./CallPlayer.css";
 //import setupSocket from '../socket/SetupSocket.js'
 import queryString from '../query-string';
-
+import {Groups} from "./call-data"
 
 
 
@@ -374,6 +374,8 @@ class CallPlayer extends React.Component {
     this.props.callActions.fetchCalls();
     this.props.talkgroupActions.fetchTalkgroups(this.props.shortName);
     this.props.groupActions.fetchGroups(this.props.shortName);
+  
+
     this.props.systemActions.fetchSystems();
     this.setupSocket();
 
@@ -542,6 +544,7 @@ class CallPlayer extends React.Component {
           <Link to="/"><Menu.Item link>Home</Menu.Item></Link>
           <Link to="/systems"><Menu.Item link>Systems</Menu.Item></Link>
           <Link to="/about"><Menu.Item link>About</Menu.Item></Link>
+          <Menu.Item link><Groups shortName={this.props.shortName}/></Menu.Item>
         </Sidebar>
         <Menu fixed="top">
           <Menu.Item onClick={this.handleSidebarToggle}>

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 = <div>Loading...</div>
+    } else if (isSuccess) {
+
+        for (const num in data) {
+            const group = data[num];
+            content =  <li>{group.groupName}</li>;
+          }
+
+    } else if (isError) {
+      content = <div>{error.toString()}</div>
+    }
+  
+    return (
+      <section className="posts-list">
+        <h2>Group</h2>
+        {content}
+      </section>
+    )
+  }

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
+export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetCallsQuery } = apiSlice

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 ...
       ),
     ),

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