auto scrolling working!

frontend/src/Call/ListCalls.js

@@ -3,19 +3,38 @@ import CallItem from "./CallItem";
 import {
   Icon,
   Table,
+  Ref
 } from "semantic-ui-react";
 import "./CallPlayer.css";
 
 // ----------------------------------------------------
 class ListCalls extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleCurrentCallRef = this.handleCurrentCallRef.bind(this);
 
+    //this.currentCallRef = React.createRef();
+  }
+  handleCurrentCallRef(ref) {
+    this.currentCallRef = ref
+    console.log("Setting it")
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.currentCallRef && this.props.activeCallId && (this.props.activeCallId != prevProps.activeCallId)) {
+      this.currentCallRef.scrollIntoView({
+        behavior: "smooth",
+
+        block: "center",
+        });
+    }
+  }
 
   //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
   render() {
     return (
 
-        <Table id="calls" unstackable>
+        <Table id="calls" unstackable  >
           <Table.Header >
             <Table.Row>
               <Table.HeaderCell>Len</Table.HeaderCell>
@@ -24,9 +43,16 @@ class ListCalls extends React.Component {
               <Table.HeaderCell><Icon name='star' /></Table.HeaderCell>
             </Table.Row>
           </Table.Header>
-          <Table.Body>
-
-            {this.props.callsAllIds.map((callId, index) => <CallItem activeCall={callId === this.props.activeCallId ? true : false} call={this.props.callsById[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/>)}
+          <Table.Body >
+            
+            {this.props.callsAllIds.map((callId, index) => {
+              if (callId === this.props.activeCallId) {
+                return (<Ref innerRef={this.handleCurrentCallRef}><CallItem activeCall={true}  call={this.props.callsById[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/></Ref>)
+              } else {
+                return <CallItem activeCall={false} call={this.props.callsById[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/>
+              }
+            })
+            }
 
           </Table.Body>
         </Table>