added stars and new calls

frontend/src/Call/CallItem.js

@@ -1,88 +1,44 @@
 
-import React, { Component } from "react";
+import React, { useState } from "react";
 import {
   Table,
   Icon,
   Label
 } from "semantic-ui-react";
 import { connect } from "react-redux"
-import { bindActionCreators } from 'redux'
-import * as callActionCreators from "./call-actions"
 
+import { addStar, removeStar} from "../features/calls/callsSlice";
+import { useDispatch } from 'react-redux'
 
-function mapStateToProps(state, props) {
-  return {
-    shortName: props.shortName
+const CallItem = (props) => {
 
-	}
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    callActions: bindActionCreators(callActionCreators, dispatch)
-  }
-}
-
-
-class CallItem extends Component {
-constructor(props) {
-  super(props);
-  this.hideStar = this.hideStar.bind(this);
-  this.showStar = this.showStar.bind(this);
-  this.addStar = this.addStar.bind(this);
-  this.state = {
-    starVisible: false,
-    starClicked: false
-  }
-}
-sourceString(call) {
-    var srcString = "";
-    if (call.srcList) {
-        for (var src in call.srcList) {
-          /*  srcNum = call.srcList[src].src;
-            if (sources.hasOwnProperty(srcNum)) {
-                srcString = srcString + sources[srcNum].codeName + ", ";
-            }*/
-        }
-    }
-
-    return srcString;
-}
-
-componentDidUpdate(){
-  if (this.props.activeCall) {
-    console.log("Active call mounted")
-  }
-}
-addStar(e) {
- e.preventDefault();
- e.stopPropagation();
-  e.nativeEvent.stopImmediatePropagation();
- if (!this.state.starClicked) {
-   
-    this.props.callActions.addStar(this.props.call._id);
-    this.setState({starClicked: true});
- }
-}
-
-hideStar() {
-  this.setState({ starVisible: false })
-}
-
-showStar() {
-  this.setState({ starVisible: true })
-}
-
-render() {
-  const call = this.props.call;
+  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 (!this.state.starClicked) {
+  if (!starClicked) {
     starClickable = {link: true };
   }
-  if (!call.star && this.state.starVisible) {
+  if (!call.star && starVisible) {
     starButton = <Icon name='star outline' />
   }
 
@@ -98,7 +54,7 @@ render() {
   </Icon.Group>)
   }
 
-  if (this.props.activeCall) {
+  if (activeCall) {
     rowSelected={positive: true,
       color: "blue",
        key: "blue",
@@ -106,26 +62,21 @@ render() {
       } 
   }
   var talkgroup;
-  if ((typeof this.props.talkgroups  == 'undefined') || (typeof this.props.talkgroups[call.talkgroupNum] == 'undefined')) {
+  if ((typeof props.talkgroups  == 'undefined') || (typeof props.talkgroups[call.talkgroupNum] == 'undefined')) {
       talkgroup = call.talkgroupNum;
   } else {
-      talkgroup = this.props.talkgroups[call.talkgroupNum].description;
+      talkgroup = props.talkgroups[call.talkgroupNum].description;
   }
   return (
-    <Table.Row  onClick={(e) => this.props.onClick({call: call}, e)} {...rowSelected}>
+    <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={this.showStar} onMouseLeave={this.hideStar} onClick={this.addStar}>{starButton}</Table.Cell>
+    <Table.Cell onMouseEnter={()=> setStarVisible(true)} onMouseLeave={() => setStarVisible(false)} onClick={handleStarClicked}>{starButton}</Table.Cell>
     </Table.Row>
 
 
   );
 }
-}
-
-export default connect(
-	mapStateToProps,
-	mapDispatchToProps
-)(CallItem)
 
+export default CallItem;