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