From 9edc48ef3755bdd443ede1f5adb4312a61c6bdac Mon Sep 17 00:00:00 2001 From: Luke Berndt Date: Wed, 18 Jan 2023 21:18:39 -0500 Subject: [PATCH] goodbye vars! --- frontend/src/Call/CallInfo.js | 6 +-- frontend/src/Call/CallItem.js | 6 +-- frontend/src/Call/CallPlayer.js | 21 +++------ frontend/src/Call/Calls.js | 42 +++++++++--------- frontend/src/Call/FilterModal.js | 6 +-- frontend/src/Call/GroupModal.js | 76 +------------------------------- frontend/src/Call/MediaPlayer.js | 6 +-- 7 files changed, 41 insertions(+), 122 deletions(-) diff --git a/frontend/src/Call/CallInfo.js b/frontend/src/Call/CallInfo.js index 7f75a35..0aa882c 100644 --- a/frontend/src/Call/CallInfo.js +++ b/frontend/src/Call/CallInfo.js @@ -30,11 +30,11 @@ function CallInfo(props) { if ((talkgroupsData) && talkgroupsData.talkgroups[currentCall.talkgroupNum]) { header = talkgroupsData.talkgroups[currentCall.talkgroupNum].description; } - var time = new Date(currentCall.time); + const time = new Date(currentCall.time); callTime = time.toLocaleTimeString(); callDate = time.toLocaleDateString(); if (currentCall.freq) { - var freq = currentCall.freq / 1000000; + const freq = currentCall.freq / 1000000; callFreq = Math.round(freq * 1000) / 1000; } @@ -49,7 +49,7 @@ function CallInfo(props) { return (
-
{props.header}
+
{header}
{srcList} diff --git a/frontend/src/Call/CallItem.js b/frontend/src/Call/CallItem.js index dcfd011..9e7dcce 100644 --- a/frontend/src/Call/CallItem.js +++ b/frontend/src/Call/CallItem.js @@ -31,9 +31,9 @@ const CallItem = (props) => { } } - var rowSelected = {}; + let rowSelected = {}; let starButton; - var starClickable = {}; + let starClickable = {}; if (!starClicked) { starClickable = { link: true }; } @@ -61,7 +61,7 @@ const CallItem = (props) => { inverted: "true" } } - var talkgroup; + let talkgroup; if ((typeof props.talkgroups == 'undefined') || (typeof props.talkgroups[call.talkgroupNum] == 'undefined')) { talkgroup = call.talkgroupNum; } else { diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js index a670a9c..621c570 100644 --- a/frontend/src/Call/CallPlayer.js +++ b/frontend/src/Call/CallPlayer.js @@ -34,7 +34,7 @@ const socket = io(process.env.REACT_APP_BACKEND_SERVER); function CallPlayer(props) { const { shortName } = useParams(); - const loadCallId = props.loadCallId; + const selectCallId = props.selectCallId; const callsData = props.callsData; const { ref: loadOlderRef, inView: loadOlderInView } = useInView({ @@ -55,7 +55,7 @@ function CallPlayer(props) { const [isPlaying, setIsPlaying] = useState(false); - const {callLink,callDownload,callTweet} = useCallLink(props.call) + const {callLink,callDownload,callTweet} = useCallLink(currentCall) @@ -63,7 +63,6 @@ function CallPlayer(props) { const navigate = useNavigate(); const dispatch = useDispatch(); const positionRef = useRef(); // lets us get the Y Scroll offset for the Call List - const pageYOffset = useRef(); // Store the current Scroll Offset in a way that guarantees the latest value is available when Call Data is updated const shouldPlayAddCallRef = useRef(); // we need to do this to make the current value of isPlaying available in the socket message callback shouldPlayAddCallRef.current = (!isPlaying && autoPlay)?true:false; @@ -121,26 +120,20 @@ function CallPlayer(props) { }, [loadOlderInView]); useEffect(() => { - if ( loadCallId && callsData && !currentCall) { - const call = callsData.entities[loadCallId]; + if ( selectCallId && callsData && !currentCall) { + const call = callsData.entities[selectCallId]; if (call) { setCurrentCall(call); } } - }, [loadCallId, callsData]) + }, [selectCallId, callsData]) + - useLayoutEffect( () => { - const scrollAmount = parseInt(positionRef.current.clientHeight) - parseInt(pageYOffset.current); - if (scrollAmount > 0) { - console.log("useLayoutEffect for callsData - ref: " + pageYOffset.current + " current: " + positionRef.current.clientHeight + " Scroll Amount: " + scrollAmount) - window.scrollBy(0, scrollAmount); - } - }, [callsData]) return (
- + { - var filter = { type: 'all', code: "", filterStarred: false }; + let filter = { type: 'all', code: "", filterStarred: false }; switch (filterType) { case 1: @@ -117,9 +117,7 @@ function Calls(props) { pageYOffset.current = positionRef.current.clientHeight; - if (shouldPlayAddCallRef.current) { - setCurrentCall(message); - } + setSelectCallId(message._id); dispatch(addCall(message)); console.log("Got: " + message._id); @@ -145,7 +143,7 @@ function Calls(props) { } const updateUri = () => { - var search = "?" + let search = "?" switch (filterType) { case 1: @@ -159,12 +157,7 @@ function Calls(props) { break; } - if (loadCallId) { - if (search.length !== 1) { - search = search + '&'; - } - search = search + `call-id=${loadCallId}` - } + if (filterDate) { if (search.length !== 1) { search = search + '&'; @@ -217,7 +210,7 @@ function Calls(props) { const setStateFromUri = async () => { - var filter = { + let filter = { filterDate: false, filterType: 0, // this is "all" filterTalkgroups: [], @@ -245,7 +238,7 @@ function Calls(props) { // is this just for one call? if (uri.hasOwnProperty('call-id')) { const _id = uri['call-id']; - setLoadCallId(_id); + setSelectCallId(_id); setAutoPlay(false); if (!urlOptions) setUrlOptions(true); } @@ -319,18 +312,25 @@ function Calls(props) { // Update the Browser URI when any relevant values change useEffect(() => { updateUri(); - }, [filterGroupId, filterTalkgroups, filterType, filterDate, filterStarred, loadCallId]) - + }, [filterGroupId, filterTalkgroups, filterType, filterDate, filterStarred, selectCallId]) +/* useEffect(() => { if (!urlOptions && groupsData && (groupsData.length > 0)) { setGroupVisible(true); } - }, [groupsData]) + }, [groupsData])*/ + + useLayoutEffect( () => { + const scrollAmount = parseInt(positionRef.current.clientHeight) - parseInt(pageYOffset.current); + if (scrollAmount > 0) { + console.log("useLayoutEffect for callsData - ref: " + pageYOffset.current + " current: " + positionRef.current.clientHeight + " Scroll Amount: " + scrollAmount) + window.scrollBy(0, scrollAmount); + } + }, [callsData]) - - var archiveLabel = ""; + let archiveLabel = ""; if (filterDate) { const filterDateObj = new Date(filterDate); archiveLabel = filterDateObj.toLocaleDateString() + " " + filterDateObj.toLocaleTimeString() @@ -340,7 +340,7 @@ function Calls(props) { const archive = process.env.REACT_APP_ARCHIVE_DAYS - var filterLabel = "All" + let filterLabel = "All" switch (filterType) { case 1: filterLabel = "Group" @@ -398,7 +398,7 @@ function Calls(props) { - +
); diff --git a/frontend/src/Call/FilterModal.js b/frontend/src/Call/FilterModal.js index bf55082..01b1b2a 100644 --- a/frontend/src/Call/FilterModal.js +++ b/frontend/src/Call/FilterModal.js @@ -64,12 +64,12 @@ function FilterModal(props) { } - var obj; + let talkgroupList = []; if (isTalkgroupsSuccess) { for (const num in talkgroupsData["talkgroups"]) { const talkgroup = talkgroupsData["talkgroups"][num]; - obj = { + const obj = { key: talkgroup.num, value: talkgroup.num, text: talkgroup.description @@ -82,7 +82,7 @@ function FilterModal(props) { if (isGroupsSuccess) { for (const num in groupsData) { const group = groupsData[num] - obj = { + const obj = { key: group._id, value: group._id, text: group.groupName diff --git a/frontend/src/Call/GroupModal.js b/frontend/src/Call/GroupModal.js index 59ebcbe..b079a6b 100644 --- a/frontend/src/Call/GroupModal.js +++ b/frontend/src/Call/GroupModal.js @@ -37,7 +37,7 @@ function GroupModal (props) { for (const num in data) { const group = data[num]; - var obj = { + const obj = { key: group._id, value: group._id, text: group.groupName @@ -69,79 +69,5 @@ function GroupModal (props) { ) } -/* -class GroupModal extends Component { - constructor(props) { - super(props) - this.handleInputChange = this.handleInputChange.bind(this); - this.handleDone = this.handleDone.bind(this); - this.handleClose = this.handleClose.bind(this); - - this.state = { - open: false, - selectedGroup: false - } -} - - -handleInputChange = (e, { name, value }) => this.setState({ [name]: value }); -handleClose = () => this.props.onClose(false); - -handleDone(event) { - - if (this.state.selectedGroup) { - this.props.callActions.setGroupFilter(this.state.selectedGroup); - this.props.onClose(true); - } else { - this.props.onClose(false); - } - -} -componentDidUpdate(prevProps) { - - const filterChanged = (prevProps.selectedGroup !== this.props.selectedGroup); - if (filterChanged) { - this.setState({ selectedGroup: this.props.selectedGroup}); - } -} - - render() { - - - var groupList = []; - if (this.props.groups) { - for (const num in this.props.groups) { - const group = this.props.groups[num]; - var obj = { - key: group._id, - value: group._id, - text: group.groupName - } - groupList.push(obj); - } - } - - return ( - - - Select a Group - - -

Choose the type of calls you want to listen to

- - - - - - - - - - - ) - } -}*/ export default GroupModal; diff --git a/frontend/src/Call/MediaPlayer.js b/frontend/src/Call/MediaPlayer.js index 0afcfe5..49e5a56 100644 --- a/frontend/src/Call/MediaPlayer.js +++ b/frontend/src/Call/MediaPlayer.js @@ -22,16 +22,16 @@ const MediaPlayer = (props) => { const handlePlay = () => { setIsPlaying(true); parentHandlePlayPause(true); } const playPause = () => { const audio = audioRef.current.audioEl.current; if (isPlaying) { audio.pause(); } else { audio.play(); } } - var call = props.call; + const call = props.call; useEffect(() => { const audio = audioRef.current.audioEl.current; - var onEnded = props.onEnded; + const onEnded = props.onEnded; setSourceIndex(0); if (call) { audio.src = call.url; - var playPromise = audio.play(); + const playPromise = audio.play(); // In browsers that don’t yet support this functionality, // playPromise won’t be defined.