I think it is ready...

frontend/src/Call/components/CallItem.js

@@ -7,15 +7,17 @@ import {
 
 
 import { addStar, removeStar } from "../../features/calls/callsSlice";
-import { useGetTalkgroupsQuery } from '../../features/api/apiSlice'
+
 import { useDispatch } from 'react-redux'
 
 const CallItem = (props) => {
   const call = props.call;
+  const shortName = props.shortName;
+  const talkgroups = props.talkgroups;
   const activeCall = props.activeCall;
   const [starVisible, setStarVisible] = useState(false);
   const [starClicked, setStarClicked] = useState(false);
-  const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(call.shortName);
+
   const dispatch = useDispatch();
 
   const time = new Date(call.time);
@@ -82,10 +84,10 @@ const CallItem = (props) => {
     }
   }
   let talkgroup;
-  if ((typeof talkgroupsData == 'undefined') || (typeof talkgroupsData.talkgroups[call.talkgroupNum] == 'undefined')) {
+  if ((typeof talkgroups== 'undefined') || (typeof talkgroups.talkgroups[call.talkgroupNum] == 'undefined')) {
     talkgroup = call.talkgroupNum;
   } else {
-    talkgroup = talkgroupsData.talkgroups[call.talkgroupNum].description;
+    talkgroup = talkgroups.talkgroups[call.talkgroupNum].description;
   }
   return (
     <Table.Row draggable="true" onClick={(e) => props.onClick({ call: call }, e)} {...rowSelected} onDragStart={onDragStart} data-callid={call._id}>
@@ -94,8 +96,6 @@ const CallItem = (props) => {
       <Table.Cell> {time.toLocaleTimeString()} </Table.Cell>
       <Table.Cell onMouseEnter={() => setStarVisible(true)} onMouseLeave={() => setStarVisible(false)} onClick={handleStarClicked}>{starButton}</Table.Cell>
     </Table.Row>
-
-
   );
 }
 

frontend/src/Call/components/ListCalls.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from "react";
+import { useParams } from 'react-router-dom';
 import CallItem from "./CallItem";
 import {
   Icon,
@@ -6,11 +7,13 @@ import {
   Ref
 } from "semantic-ui-react";
 import "../CallPlayer.css";
+import { useGetTalkgroupsQuery } from '../../features/api/apiSlice'
 
 // ----------------------------------------------------
 const ListCalls = (props) => {
     const activeCallRef  = useRef();
-
+    const { shortName } = useParams();
+    const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
   //https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
   //https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
 
@@ -40,9 +43,9 @@ const ListCalls = (props) => {
             {
               props.callsData.ids.map((callId, index) => {
               if (callId === props.activeCallId) {
-                return (<Ref innerRef={activeCallRef} key={index} ><CallItem activeCall={true}  call={props.callsData.entities[callId]} key={index} onClick={props.playCall}/></Ref>)
+                return (<Ref innerRef={activeCallRef} key={index} ><CallItem activeCall={true}  call={props.callsData.entities[callId]} talkgroups={talkgroupsData} key={index} onClick={props.playCall}/></Ref>)
               } else {
-                return <CallItem activeCall={false} call={props.callsData.entities[callId]} key={index} onClick={props.playCall}/>
+                return <CallItem activeCall={false} call={props.callsData.entities[callId]} talkgroups={talkgroupsData} key={index} onClick={props.playCall}/>
               }
             })
            

frontend/src/Call/components/PlaylistBuilder.js

@@ -15,7 +15,8 @@ import {
   Modal,
   Button,
   Image,
-  Form
+  Form,
+  Message
 } from "semantic-ui-react";
 import { useAddNewEventMutation, useGetTalkgroupsQuery } from '../../features/api/apiSlice'
 
@@ -113,6 +114,16 @@ function PlaylistBuilder(props) {
     setDescription("")
     setPlaylist([])
   }
+
+  let content = (<Header as="h3" icon textAlign='center' style={{paddingTop: "3em"}}><Icon name='target' />Drag Calls Here</Header>)
+  if (playlist.length > 0) {
+    content = (<Table basic="very">
+    <Table.Body>
+    {listItems}
+    </Table.Body>
+  </Table>)
+  }
+
   return (
     <>
         <Modal
@@ -121,11 +132,16 @@ function PlaylistBuilder(props) {
       open={open}
     >
       <Modal.Header>Submit an Event</Modal.Header>
-      <Modal.Content image>
-        <Image size='medium' src='https://react.semantic-ui.com/images/avatar/large/rachel.png' wrapped />
+      <Modal.Content>
+        
         <Modal.Description>
+        <Message icon>
+            <Icon name='warning sign' />
+            <Message.Content>The Events feature is a work in progress! Things may break, change, or get deleted. Contact me with ideas or problems: luke@robotastic.com</Message.Content>
+            </Message>
           <Header>Event</Header>
           <Form>
+          
             <Form.Input
               name="title"
               value={title}
@@ -139,8 +155,6 @@ function PlaylistBuilder(props) {
               placeholder='Please describe the event'
               onChange={handleDescriptionChange}
               />
-
-
           </Form>
         </Modal.Description>
       </Modal.Content>
@@ -158,11 +172,7 @@ function PlaylistBuilder(props) {
       </Modal.Actions>
     </Modal>
       <Tab.Pane attached='bottom' onDragOver={onDragOver} onDrop={onDrop}>
-        <Table basic="very">
-          <Table.Body>
-          {listItems}
-          </Table.Body>
-        </Table>
+        {content}
       </Tab.Pane>
       <Menu fluid widths={2}>
         <Menu.Item name="clear" onClick={() => setPlaylist([])}><Icon name='delete' />Clear</Menu.Item>