call data fetching

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"
+import {Groups, Calls} from "./call-data"
 
 
 
@@ -545,6 +545,7 @@ class CallPlayer extends React.Component {
           <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>
+          <Menu.Item link><Calls shortName={this.props.shortName}/></Menu.Item>
         </Sidebar>
         <Menu fixed="top">
           <Menu.Item onClick={this.handleSidebarToggle}>

frontend/src/Call/call-data.js

@@ -1,10 +1,38 @@
 import React from 'react'
-import { useGetGroupsQuery } from '../features/api/apiSlice'
+import { useGetGroupsQuery, useGetCallsQuery } 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>
+    )
+  }
+
+
+  export const Calls = (args) => {
+
+    const { data, isError, isLoading, isSuccess,error } = useGetCallsQuery(args.shortName);
+
     let content
   
     if (isLoading) {