added in path search

frontend/src/Call/CallPlayer.js

@@ -1,6 +1,6 @@
-import React, {  useEffect, useState } from "react";
+import React, {  useEffect, useState, useRef } from "react";
-import { Link, useLocation} from 'react-router-dom';
+import { Link, useLocation, useParams, useNavigate} from 'react-router-dom';
-import { useParams } from "react-router-dom";
+
 import MediaPlayer from "./MediaPlayer";
 import FilterModal from "./FilterModal";
 import GroupModal from "./GroupModal";
@@ -54,10 +54,11 @@ function CallPlayer (props) {
     //const allCalls  = callsData?callsData.ids.map( id => callsData.entities[id] ):[]
 
     const [autoPlay, setAutoPlay] = useState(true);
-
+    const [addCallScroll, setAddCallScroll] = useState(false);
     const [currentCall, setCurrentCall] = useState(false);
+    const [prevScrollHeight, setPrevScrollHeight] = useState(0);
     const [playTime, setPlayTime] = useState(0);
-    const [callScroll, setCallScroll] = useState(false);
+    const [selectLoadCall, setSelectLoadCall] = useState(false);
     const [callSelect, setCallSelect] = useState(false);
     const [urlOptions, setUrlOptions] = useState(false);
     const [isPlaying, setIsPlaying] = useState(false);
@@ -66,11 +67,11 @@ function CallPlayer (props) {
     const [groupVisible, setGroupVisible] = useState(false);
     const [calendarVisible, setCalendarVisible] = useState(false);
     const [isConnected, setIsConnected] = useState(socket.connected);
+    const [loadCallId, setLoadCallId] = useState(false);
 
-
+    const navigate = useNavigate();
-
     const dispatch = useDispatch();
-    
+    const positionRef = useRef();
 
     const filterType = useSelector((state) => state.callPlayer.filterType);
     const filterGroupId = useSelector((state) => state.callPlayer.filterGroupId);
@@ -79,6 +80,7 @@ function CallPlayer (props) {
     const filterDate = useSelector((state) => state.callPlayer.filterDate);
     const live = useSelector((state) => state.callPlayer.live);
     const uri = queryString.parse(useLocation().search);
+    const pathname = useLocation().pathname;
 
     let currentCallId = false;
     let currentCallMedia = false;
@@ -102,16 +104,9 @@ function CallPlayer (props) {
   const handleFilterToggle = () => setFilterVisible(!filterVisible);
   const handleCalendarToggle = () => setCalendarVisible(!calendarVisible);
 
-
-
-  const loadNewerCalls = () => {
-
-  }
-
   const playCall = (data) => {
       setCurrentCall(data.call);
       setIsPlaying(true);
-      //callActions.fetchCallInfo(data.call._id);
     }
   
 
@@ -124,15 +119,6 @@ function CallPlayer (props) {
 
       setCurrentCall(nextCall);
       setIsPlaying(true);
-      /*
-      this.setState({ callUrl: callUrl, callId: nextCallId, isPlaying: true }, () => { audio.playSource(callUrl) }); //scrollToComponent(this.currentCallRef.current);
-      if (this.currentCallRef.current) {
-        this.currentCallRef.current.scrollIntoView({
-          behavior: "smooth",
-          block: "center",
-        });
-      }
-      callActions.fetchCallInfo(nextCallId);*/
     } else {
       setIsPlaying(false);
     }
@@ -142,21 +128,9 @@ function CallPlayer (props) {
   }
   /*const changeUrl = url => callActions.changeUrl(url)
 
-  handleContextRef = contextRef => this.setState({ contextRef })
-  loadNewerCalls() {
 
-    console.log("Loading Newer Calls");
-    callActions.fetchNewerCalls(newestCallTime.getTime());
-  }
 */
 
-  const loadOlderCalls = (getOlderCalls) => {
-
-    console.log("Loading Older Calls");
-    dispatch(getOlderCalls({}));
-
-  }
-
 
 const getFilterDescription = () => {
   
@@ -185,6 +159,9 @@ const getFilterDescription = () => {
     const message = JSON.parse(data)
     switch (message.type) {
       case 'calls':
+        const ref = positionRef;
+        setPrevScrollHeight(positionRef.clientHeight);
+        setAddCallScroll(true);
         /*const refs = this.refs.current;
         callActions.addCall(message);
         const newCall = callsById[callsAllIds[0]];
@@ -257,48 +234,45 @@ const getFilterDescription = () => {
 
 
 
-/*
+
-  updateUri(props, state) {
+const updateUri = () => {
     var search = "?"
-    switch (props.filterType) {
+    switch (filterType) {
 
       case 1:
-        search = search + `filter-type=group&filter-code=${props.filterGroupId}`;
+        search = search + `filter-type=group&filter-code=${filterGroupId}`;
         break;
       case 2:
-        search = search + `filter-type=talkgroup&filter-code=${props.filterTalkgroups}`;
+        search = search + `filter-type=talkgroup&filter-code=${filterTalkgroups}`;
         break;
       default:
       case 0:
         break;
 
     }
-    if (state.callId) {
+    if (loadCallId) {
       if (search.length !== 1) {
         search = search + '&';
       }
-      search = search + `call-id=${state.callId}`
+      search = search + `call-id=${loadCallId}`
     }
-    if (props.filterDate) {
+    if (filterDate) {
       if (search.length !== 1) {
         search = search + '&';
       }
-      search = search + `time=${props.filterDate}`;
+      search = search + `time=${filterDate}`;
     }
 
-    if (props.filterStarred) {
+    if (filterStarred) {
       if (search.length !== 1) {
         search = search + '&';
       }
       search = search + `starred=true`;
     }
+    navigate(pathname + search, {replace:true});
 
-    history.push({
-      pathname: history.location.pathname,
-      search: search
-    });
   }
-*/
+
 
   const handleCalendarClose = (didUpdate) => {
     setCalendarVisible(!calendarVisible);
@@ -306,8 +280,7 @@ const getFilterDescription = () => {
     if (didUpdate) {
       dispatchEvent(setLive(false));
       setCurrentCall(false);
-      //callActions.fetchCalls();
+      stopSocket();
-      //this.stopSocket();
       //this.socket.close();
     }
   }
@@ -323,60 +296,7 @@ const getFilterDescription = () => {
       setCurrentCall(false);
     }
   }
-/*
-  callEnded(data) {
-    const audio = this.audioRef.current;
-    const currentIndex = callsAllIds.findIndex(callId => callId === callId);
-    if (autoPlay && (currentIndex > 0)) {
-      const nextCallId = callsAllIds[currentIndex - 1];
-      const nextCall = callsById[nextCallId];
-      var callUrl = nextCall.url;
 
-      this.setState({ callUrl: callUrl, callId: nextCallId, isPlaying: true }, () => { audio.playSource(callUrl) }); //scrollToComponent(this.currentCallRef.current);
-      if (this.currentCallRef.current) {
-        this.currentCallRef.current.scrollIntoView({
-          behavior: "smooth",
-          block: "center",
-        });
-      }
-      callActions.fetchCallInfo(nextCallId);
-    } else {
-      this.setState({ isPlaying: false });
-    }
-  }
-
-  playCall(data) {
-    const audio = this.audioRef.current;
-    var callUrl = data.call.url;
-    this.setState({
-      callUrl: callUrl,
-      callId: data.call._id,
-      isPlaying: true
-    }, () => { audio.playSource(callUrl); }); //scrollToComponent(this.currentCallRef.current);
-    callActions.fetchCallInfo(data.call._id);
-  }
-
-  addCall(data) {
-    const message = JSON.parse(data)
-    switch (message.type) {
-      case 'calls':
-        const refs = this.refs.current;
-        callActions.addCall(message);
-        const newCall = callsById[callsAllIds[0]];
-        if (!isPlaying && autoPlay) {
-          this.playCall({ call: newCall });
-          if (this.currentCallRef.current) {
-            this.currentCallRef.current.scrollIntoView({
-              behavior: "smooth",
-              block: "center",
-            });
-          }
-        }
-        break
-      default:
-        break
-    }
-  }*/
 
   const setStateFromUri = async () => {
     var filter = {
@@ -393,6 +313,7 @@ const getFilterDescription = () => {
     if (uri.hasOwnProperty('starred')) {
       const starred = uri['starred'];
       filter.filterStarred = starred === 'true' ? true : false;
+      
       this.setState({ urlOptions: true });
     }
 
@@ -408,8 +329,9 @@ const getFilterDescription = () => {
     if (uri.hasOwnProperty('call-id')) {
       const _id = uri['call-id'];
       const date = new Date(parseInt(uri['time']));
-
+      setLoadCallId(_id);
-      filter.live = false;
+      setSelectLoadCall(true);
+      setAutoPlay(false);
       this.setState({
         callId: _id,
         urlOptions: true,
@@ -463,6 +385,21 @@ const getFilterDescription = () => {
     }
   }, [loadOlderInView]);
 
+  useEffect(() => {
+    if (addCallScroll) {
+      const ref = positionRef;
+      window.scrollBy(0, positionRef.clientHeight - prevScrollHeight);
+      setAddCallScroll(false);
+    }
+    if (selectLoadCall && loadCallId && callsData) {
+
+      const call = callsData.entities[loadCallId];
+      if (call) {
+        setSelectLoadCall(false);
+        setCurrentCall(call);
+      }
+    }
+  },[callsData])
 
   useEffect(() => {
     // When a time/date is provided in the URL, it will be added to the filter
@@ -484,8 +421,7 @@ const getFilterDescription = () => {
   }, []);
 
   useEffect(() => {
-     /*
+    updateUri();
-    this.updateUri(nextProps, nextState);*/
     dispatch(getCalls({}));
     if (live) {
       startSocket();
@@ -620,7 +556,7 @@ const getFilterDescription = () => {
 
 
     return (
-      <div >
+      <div ref={positionRef}>
         <FilterModal shortName={shortName} open={filterVisible} onClose={handleFilterClose} />
         <CalendarModal open={calendarVisible} onClose={handleCalendarClose} archive={archive} key={shortName} />
         <GroupModal shortName={shortName} open={groupVisible} onClose={handleGroupClose} />
@@ -680,7 +616,7 @@ const getFilterDescription = () => {
             </Sidebar.Pusher>
           </Sidebar.Pushable>
           <Rail position='right' className="desktop-only" dimmed={sidebarOpened ? "true" : "false"} >
-            <Sticky  offset={60}>
+            <Sticky  offset={60} context={positionRef}>
               <CallInfo call={currentCall} header={callInfoHeader} link={callLink}/>
             </Sticky>
           </Rail>

frontend/src/Call/ListCalls.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import CallItem from "./CallItem";
 import {
   Icon,
@@ -8,12 +8,22 @@ import {
 import "./CallPlayer.css";
 
 // ----------------------------------------------------
-class ListCalls extends React.Component {
+const ListCalls = (props) => {
+    const activeCallRef  = useRef();
 
   //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() {
+
-    const callsData = this.props.callsData;
+    useEffect(() => {
+      if (activeCallRef.current) {
+        activeCallRef.current.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+    }
+  });
+
+    const callsData = props.callsData;
     return (
 
         <Table id="calls" unstackable  >
@@ -29,11 +39,11 @@ class ListCalls extends React.Component {
           <Table.Body>
             
             {
-              this.props.callsData.ids.map((callId, index) => {
+              props.callsData.ids.map((callId, index) => {
-              if (callId === this.props.activeCallId) {
+              if (callId === props.activeCallId) {
-                return (<Ref innerRef={this.props.currentCallRef} key={index} ><CallItem activeCall={true}  call={this.props.callsData.entities[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/></Ref>)
+                return (<Ref innerRef={activeCallRef} key={index} ><CallItem activeCall={true}  call={props.callsData.entities[callId]} talkgroups={props.talkgroups} key={index} onClick={props.playCall}/></Ref>)
               } else {
-                return <CallItem activeCall={false} call={this.props.callsData.entities[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/>
+                return <CallItem activeCall={false} call={props.callsData.entities[callId]} talkgroups={props.talkgroups} key={index} onClick={props.playCall}/>
               }
             })
            
@@ -45,7 +55,7 @@ class ListCalls extends React.Component {
         
 
   );
-  }
+  
 }
 
 export default ListCalls;