trunk-server/frontend/src/Call/CallItem.js

import React, { useState } from "react";
import {
  Table,
  Icon,
  Label
} from "semantic-ui-react";
import { connect } from "react-redux"

import { addStar, removeStar} from "../features/calls/callsSlice";
import { useDispatch } from 'react-redux'

const CallItem = (props) => {

  const [starVisible, setStarVisible] = useState(false);
  const [starClicked, setStarClicked] = useState(false);
  const dispatch = useDispatch();
  const call = props.call;
  const time = new Date(call.time);
  const activeCall = props.activeCall;

  const handleStarClicked = (e) => {
    e.preventDefault();
    e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
    if (!starClicked) {
      setStarClicked(true);
      dispatch(addStar(props.call._id));
    } else {
      setStarClicked(false);
      dispatch(removeStar(props.call._id));
    }
  }

  var rowSelected={};
  let starButton;
  var starClickable = {};
  if (!starClicked) {
    starClickable = {link: true };
  }
  if (!call.star && starVisible) {
    starButton = <Icon name='star outline' />
  }

  if (call.star) {
    starButton = <Icon name='star' />
  }
  if (call.star && call.star > 1) {
    starButton = (<Icon.Group >
    <Icon {...starClickable} name='star' />
    <Label circular color='red' size='mini' floating>
      {call.star}
    </Label>
  </Icon.Group>)
  }

  if (activeCall) {
    rowSelected={positive: true,
      color: "blue",
       key: "blue",
        inverted: "true"
      } 
  }
  var talkgroup;
  if ((typeof props.talkgroups  == 'undefined') || (typeof props.talkgroups[call.talkgroupNum] == 'undefined')) {
      talkgroup = call.talkgroupNum;
  } else {
      talkgroup = props.talkgroups[call.talkgroupNum].description;
  }
  return (
    <Table.Row  onClick={(e) => props.onClick({call: call}, e)} {...rowSelected}>
    <Table.Cell>  {call.len} </Table.Cell>
    <Table.Cell> {talkgroup} </Table.Cell>
    <Table.Cell> {time.toLocaleTimeString()} </Table.Cell>
    <Table.Cell onMouseEnter={()=> setStarVisible(true)} onMouseLeave={() => setStarVisible(false)} onClick={handleStarClicked}>{starButton}</Table.Cell>
    </Table.Row>


  );
}

export default CallItem;