Fixed Call Links

frontend/notes.md

@@ -8,7 +8,6 @@
 - [React Date Picker](https://github.com/Hacker0x01/react-datepicker) - the popup calendar that lets you pick a date. Used in the calendar Modal.
 - [React Audio Player](https://github.com/justinmc/react-audio-player) - This is a light React wrapper around the HTML5 audio tag. It provides the ability to manipulate the player and listen to events through a nice React interface
 - [date-fns](https://date-fns.org) - date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. Used in the calendar modal to figure out how far apart days are.
-- [react-waypoint](https://github.com/civiccc/react-waypoint) - A React component to execute a function whenever you scroll to an element. Works in all containers that can scroll, including the window. Used to help scroll the list of calls.
 - [Semantic UI](https://react.semantic-ui.com/usage) - The UI frontend
 - [react-router-dom](https://reactrouter.com/web/guides/quick-start) - Adds routes to React
 ## Environment Variables

frontend/package.json

@@ -18,7 +18,6 @@
     "react-redux": "^7.1.3",
     "react-router-dom": "5.2.0",
     "react-scripts": "4.0.1",
-    "react-waypoint": "9.0.3",
     "redux-thunk": "2.3.0",
     "semantic-ui-css": "2.4.1",
     "semantic-ui-react": "2.0.1"

frontend/src/Call/CallItem.js

@@ -102,7 +102,7 @@ render() {
     rowSelected={positive: true,
       color: "blue",
        key: "blue",
-        inverted: true
+        inverted: "true"
       } 
   }
   var talkgroup;

frontend/src/Call/CallPlayer.js

@@ -14,9 +14,9 @@ import {
   Sticky,
   Menu,
   Icon,
-  Sidebar
+  Sidebar,
+  Visibility
 } from "semantic-ui-react";
-import { Waypoint } from 'react-waypoint';
 import "./CallPlayer.css";
 //import setupSocket from '../socket/SetupSocket.js'
 import queryString from '../query-string';
@@ -62,6 +62,7 @@ class CallPlayer extends React.Component {
       callId: false,
       playTime: 0,
       sourceIndex: 0,
+      callScroll: false,
       urlOptions: false,
       isPlaying: false,
       sidebarOpened: false,
@@ -98,21 +99,16 @@ class CallPlayer extends React.Component {
   changeUrl = url => this.props.callActions.changeUrl(url)
 
   loadNewerCalls() {
-    if (!this.props.callsIsWaiting) {
+
       console.log("Loading Newer Calls");
       this.props.callActions.fetchNewerCalls(this.props.newestCallTime.getTime());
-    } else {
-      console.log("Calls still loading - can't load newer calls");
-    }
   }
 
   loadOlderCalls() {
-    if (!this.props.callsIsWaiting) {
+
       console.log("Loading Older Calls");
       this.props.callActions.fetchOlderCalls(this.props.oldestCallTime.getTime());
-    } else {
-      console.log("Calls still loading - can't load older calls");
-    }
+
   }
 
   handleCalendarToggle = () => this.setState({
@@ -337,22 +333,20 @@ class CallPlayer extends React.Component {
     // is this just for one call?
     if (uri.hasOwnProperty('call-id')) {
       const _id = uri['call-id'];
-      const currentCall = this.props.callsById[this.state.callId];
+      const date = new Date(parseInt(uri['time']));
+
       filter.live = false;
       this.setState({
         callId: _id,
         sourceIndex: 0,
         urlOptions: true,
-        autoPlay: false
+        autoPlay: false,
+        callScroll: true
       });
       this.props.callActions.fetchCallInfo(_id);
+      this.props.callActions.setCallTime(date);
       
-      if (this.currentCallRef.current) {
-        this.currentCallRef.current.scrollIntoView({
-            behavior: "smooth",
-            block: "center",
-            });
-          }
+
     }
 
 
@@ -382,6 +376,9 @@ class CallPlayer extends React.Component {
     }
 
     this.props.callActions.setFilter(filter);
+
+    // When a time/date is provided in the URL, it will be added to the filter
+    // When fetchCalls is called it will selected calls that are older
     this.props.callActions.fetchCalls();
     this.props.talkgroupActions.fetchTalkgroups(this.props.shortName);
     this.props.groupActions.fetchGroups(this.props.shortName);
@@ -460,6 +457,19 @@ class CallPlayer extends React.Component {
       this.autoScroll = false;
       window.scrollBy(0, contextRef.clientHeight - this.prevHeight);
     }
+
+    // scroll to a call once the calls have loaded
+    if (this.state.callScroll && (this.props.callsAllIds.length > prevProps.callsAllIds.length)){
+      this.setState({callScroll: false});
+      if (this.currentCallRef.current) {
+        this.currentCallRef.current.scrollIntoView({
+            behavior: "auto",
+            block: "center",
+            });
+          }
+          this.scrollPos = contextRef.scrollTop;
+          this.prevHeight = contextRef.clientHeight;
+    }
   }
 
   //https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
@@ -560,11 +570,11 @@ class CallPlayer extends React.Component {
               onClick={this.handlePusherClick}
               style={{ minHeight: '100vh' }}
             >
-              <Waypoint onEnter={this.loadNewerCalls} />
+              <Visibility onTopVisible={this.loadNewerCalls} onBottomVisible={this.loadOlderCalls} once={false}>
               <ListCalls callsAllIds={this.props.callsAllIds} currentCallRef={this.currentCallRef} callsById={this.props.callsById} activeCallId={this.state.callId} talkgroups={this.props.talkgroups} playCall={this.playCall} />
+              </Visibility>
             </Sidebar.Pusher>
           </Sidebar.Pushable>
-          <Waypoint onEnter={this.loadOlderCalls} />
           <Rail position='right' className="desktop-only" dimmed={sidebarOpened ? "true" : "false"} >
             <Sticky context={contextRef} offset={60}>
               <CallInfo call={currentCall} header={callInfoHeader} />

frontend/src/Call/ListCalls.js

@@ -9,12 +9,6 @@ import "./CallPlayer.css";
 
 // ----------------------------------------------------
 class ListCalls extends React.Component {
-  constructor(props) {
-    super(props);
-
-    //this.currentCallRef = React.createRef();
-  }
-
 
   //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
@@ -34,7 +28,7 @@ class ListCalls extends React.Component {
             
             {this.props.callsAllIds.map((callId, index) => {
               if (callId === this.props.activeCallId) {
-                return (<Ref innerRef={this.props.currentCallRef}><CallItem activeCall={true}  call={this.props.callsById[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/></Ref>)
+                return (<Ref innerRef={this.props.currentCallRef} key={index} ><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}/>
               }

frontend/src/Call/call-actions.js

@@ -59,6 +59,10 @@ function fetchCallError(data) {
   data };
 }
 
+// The data field should be a JS date object
+export function setCallTime(data) {
+  return {type: types.SET_CALL_TIME, data};
+}
 
 export function changeUrl(url) {
   return dispatch => {
@@ -144,7 +148,7 @@ function buildCallUrl(state, date, direction) {
     return url;
 }
 
-export function fetchNewerCalls( timestamp) {
+export function fetchNewerCalls(timestamp) {
   return (dispatch, getState) => {
     const state = getState();
     if (shouldFetchCalls(state)) {

frontend/src/Call/call-constants.js

@@ -19,4 +19,5 @@ export const SET_DATE_FILTER = "SET_DATE_FILTER"
 export const SET_FILTER = "SET_FILTER"
 export const SET_STARRED_FILTER = "SET_STARRED_FILTER"
 export const SET_LIVE = "SET_LIVE"
-export const SET_CURRENT_CALL_ID = "SET_CURRENT_CALL_ID"
+export const SET_CALL_TIME = "SET_CALL_TIME"
+export const SET_CURRENT_CALL_ID = "SET_CURRENT_CALL_ID"

frontend/src/Call/call-reducer.js

@@ -18,6 +18,7 @@ import {
   SET_FILTER,
   SET_CURRENT_CALL_ID,
   SET_LIVE,
+  SET_CALL_TIME,
   ADD_STAR_SUCCESS
 } from "./call-constants";
 
@@ -95,6 +96,8 @@ const call = (
     case SET_CURRENT_CALL_ID:
       return Object.assign({}, state, {currentCallId: action.data});
       
+    case SET_CALL_TIME:
+      return Object.assign({}, state, {newestCallTime: action.data, oldestCallTime: action.data });
     case SET_FILTER:
     {
       var filter={};

frontend/yarn.lock

@@ -8196,13 +8196,6 @@ react-scripts@4.0.1:
   optionalDependencies:
     fsevents "^2.1.3"
 
-react-waypoint@9.0.3:
-  version "9.0.3"
-  resolved "https://registry.yarnpkg.com/react-waypoint/-/react-waypoint-9.0.3.tgz#176aa4686b33eb40d0d48d361c468f0367167958"
-  dependencies:
-    consolidated-events "^1.1.0 || ^2.0.0"
-    prop-types "^15.0.0"
-    react-is "^16.6.3"
 
 react@^17.0.1:
   version "17.0.1"