cleans up the group modal and the center call

frontend/src/Call/components/GroupModal.js

@@ -1,66 +1,99 @@
-import React, { Component, useState } from "react";
-import { useGetGroupsQuery } from '../../features/api/apiSlice'
-import { setGroupFilter } from "../../features/callPlayer/callPlayerSlice";
+import React, { Component, useState, useEffect } from "react";
+import { useGetGroupsQuery, useGetSystemsQuery, } from '../../features/api/apiSlice'
+import { setGroupFilter, setCenterCall } from "../../features/callPlayer/callPlayerSlice";
 import { useSelector, useDispatch } from 'react-redux'
 
 import {
   Modal,
   Button,
   Icon,
-  Dropdown
+  Dropdown,
+  Grid,
+  Form
 } from "semantic-ui-react";
 import "./FilterModal.css";
 
-function GroupModal (props) {
+function GroupModal(props) {
   const shortName = useSelector((state) => state.callPlayer.shortName);
-  const { data, isError, isLoading, isSuccess,error } = useGetGroupsQuery(props.shortName);
+  const { data: groupData, isSuccess } = useGetGroupsQuery(props.shortName);
+  const { data: allSystems } = useGetSystemsQuery();
   const [selectedGroup, setSelectedGroup] = useState(false);
+  const [groupOptions, setGroupOptions] = useState([]);
+  const [centerCall, setLocalCenterCall] = useState(true);
   const dispatch = useDispatch()
   const onClose = props.onClose;
+  let system = false;
+
+
+  if (allSystems) {
+    system = allSystems.systems.find((system) => system.shortName === shortName)
+  }
 
   function handleDone(onClose) {
-
-    if (selectedGroup) {
+    dispatch(setCenterCall(centerCall));
+    if (selectedGroup && (selectedGroup!="all")) {
       dispatch(setGroupFilter(selectedGroup))
+      
       //dispatch({type: types.SET_GROUP_FILTER, groupId: selectedGroup  })
       onClose(true);
     } else {
       onClose(false);
     }
-}  
+  }
 
 
-  let groupOptions = []
-
-  if (isSuccess) {
-
-    for (const num in data) {
-      const group = data[num];
-      const obj = {
-        key: group._id,
-        value: group._id,
-        text: group.groupName
+  useEffect(() => {
+    if (isSuccess) {
+      let temp = [{
+        key: "all",
+        value: "all",
+        text: "All Calls"
+      }];
+      for (const num in groupData) {
+        const group = groupData[num];
+        const obj = {
+          key: group._id,
+          value: group._id,
+          text: group.groupName
+        }
+        temp.push(obj);
       }
-      groupOptions.push(obj);
+      setGroupOptions(temp);
     }
-}
+  }, [groupData]);
+
+
+
 
 
   return (
 
     <Modal open={props.open} onClose={onClose} size='tiny'>
-   
-      <Modal.Header>Select a Group</Modal.Header>
+
+      <Modal.Header>{system && system.name}</Modal.Header>
       <Modal.Content >
         <Modal.Description>
-          <p>Choose the type of calls you want to listen to</p>
-          <Dropdown placeholder='Group...' fluid selection options={groupOptions}  name='selectedGroup' onChange={(e, data) => setSelectedGroup(data.value)} />
+
+          <Grid >
+            <Grid.Row>
+              <Grid.Column width={8}>
+                {system && system.description}
+              </Grid.Column>
+              <Grid.Column width={8}>
+                <p>Choose the type of calls you want to listen to</p>
+                <Form>
+                <Form.Select placeholder='All Calls' fluid selection options={groupOptions} name='selectedGroup' onChange={(e, data) => setSelectedGroup(data.value)} />
+                <Form.Checkbox label='Center playing call ' checked={centerCall} onChange={(e, data) => setLocalCenterCall(data.value)} />
+                </Form>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
 
         </Modal.Description>
 
       </Modal.Content>
       <Modal.Actions>
-        <Button onClick={()=> handleDone(onClose)} >
+        <Button onClick={() => handleDone(onClose)} >
           <Icon name='headphones' /> Listen
         </Button>
       </Modal.Actions>