moved the links stuff to a component

frontend/src/Call/CallInfo.js

@@ -1,4 +1,7 @@
 import React from "react";
+import { useCallLink } from "./CallLinks";
+import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice'
+import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
 import {
   Header,
   Divider,
@@ -11,39 +14,46 @@ import {
 
 // ----------------------------------------------------
 function CallInfo(props) {
-    let srcList = "";
+  const { shortName } = useParams();
-    let callLength = "-";
+  const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
-    let callFreq = "-";
-    let callDate = "-";
-    let callTime = "-";
-    let talkgroupNum = "-";
-    let callDownload = "";
-    let callTweet = "";
-    if (props.call) {
-      const currentCall = props.call;
-      var time = new Date(currentCall.time);
-      callTime = time.toLocaleTimeString();
-      callDate = time.toLocaleDateString();
-      if (currentCall.freq) {
-        var freq = currentCall.freq / 1000000;
-        callFreq = Math.round(freq * 1000) / 1000;
-      }
 
-      srcList = currentCall.srcList.map((source, index) => <List.Item key={index}>{source.src}[{source.pos}]</List.Item>);
+  let srcList = "";
-      callLength = currentCall.len;
+  let callLength = "-";
-      talkgroupNum = currentCall.talkgroupNum;
+  let callFreq = "-";
-      callDownload = currentCall.url;
+  let callDate = "-";
-      callTweet = "https://twitter.com/intent/tweet?url="+encodeURIComponent(document.location.origin+props.link)+"&via="+encodeURIComponent("OpenMHz");
+  let callTime = "-";
+  let talkgroupNum = "-";
+  let header = "Call Info"
+
+  if (props.call) {
+    const currentCall = props.call;
+    if ((talkgroupsData) && talkgroupsData.talkgroups[currentCall.talkgroupNum]) {
+      header = talkgroupsData.talkgroups[currentCall.talkgroupNum].description;
+    }
+    var time = new Date(currentCall.time);
+    callTime = time.toLocaleTimeString();
+    callDate = time.toLocaleDateString();
+    if (currentCall.freq) {
+      var freq = currentCall.freq / 1000000;
+      callFreq = Math.round(freq * 1000) / 1000;
     }
 
-    return (
+
-      <div>
+    srcList = currentCall.srcList.map((source, index) => <List.Item key={index}>{source.src}[{source.pos}]</List.Item>);
+    callLength = currentCall.len;
+    talkgroupNum = currentCall.talkgroupNum;
+
+  }
+  const {callLink,callDownload,callTweet} = useCallLink(props.call)
+
+  return (
+    <div>
       <Segment padded attached>
         <Header as='h1'>{props.header}</Header>
         <List bulleted horizontal link>
           {srcList}
         </List>
-        <Divider/>
+        <Divider />
         <Statistic size='small'>
           <Statistic.Label>Seconds</Statistic.Label>
           <Statistic.Value>{callLength}</Statistic.Value>
@@ -55,32 +65,32 @@ function CallInfo(props) {
 
         <List divided verticalAlign='middle'>
           <List.Item>
-            <Icon name="wait"/>
+            <Icon name="wait" />
             <List.Content>
               {callTime}
             </List.Content>
           </List.Item>
           <List.Item>
-            <Icon name="calendar outline"/>
+            <Icon name="calendar outline" />
             <List.Content>
               {callDate}
             </List.Content>
           </List.Item>
           <List.Item>
-            <Icon name="cubes"/>
+            <Icon name="cubes" />
             <List.Content>
               {callFreq} MHz
             </List.Content>
           </List.Item>
         </List>
       </Segment>
-          <Menu attached='bottom'>
+      <Menu attached='bottom'>
-          <a href={callTweet}><Menu.Item name="tweet" ><Icon name='twitter' />Tweet</Menu.Item></a>
+        <a href={callTweet}><Menu.Item name="tweet" ><Icon name='twitter' />Tweet</Menu.Item></a>
-          <a href={callDownload}><Menu.Item name="download"><Icon name="download" />Download</Menu.Item></a>
+        <a href={callDownload}><Menu.Item name="download"><Icon name="download" />Download</Menu.Item></a>
-          <a href={props.link}><Menu.Item name="link"><Icon name="at" />Link</Menu.Item></a>
+        <a href={callLink}><Menu.Item name="link"><Icon name="at" />Link</Menu.Item></a>
-        </Menu>
+      </Menu>
-        </div>
+    </div>
-    );
+  );
-  }
+}
 
-  export default CallInfo;
+export default CallInfo;

frontend/src/Call/CallLinks.js

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+export function useCallLink(currentCall) {
+    const filterType = useSelector((state) => state.callPlayer.filterType);
+    const filterGroupId = useSelector((state) => state.callPlayer.filterGroupId);
+    const filterTalkgroups = useSelector((state) => state.callPlayer.filterTalkgroups);
+    const shortName = useSelector((state) => state.callPlayer.shortName);
+    if (currentCall) {
+        let search = ""
+        const time = new Date(currentCall.time);
+        const callTime = time.toLocaleTimeString();
+        const callDate = time.toLocaleDateString();
+
+        switch (filterType) {
+
+            case 1:
+                search = `filter-type=group&filter-code=${filterGroupId}&`;
+                break;
+            case 2:
+                search = `filter-type=talkgroup&filter-code=${filterTalkgroups}&`;
+                break;
+            default:
+            case 0:
+                break;
+
+        }
+        const callLink = "/system/" + shortName + "?" + search + "call-id=" + currentCall._id + "&time=" + (time.getTime() + 1);
+        const callDownload = currentCall.url;
+        const callTweet = "https://twitter.com/intent/tweet?url=" + encodeURIComponent(document.location.origin + callLink) + "&via=" + encodeURIComponent("OpenMHz");
+
+        return { callLink, callDownload, callTweet }
+    } else {
+        return { callLink: "", callDownload: "", callTweet: "" }
+    }
+}

frontend/src/Call/CallPlayer.js

@@ -24,7 +24,7 @@ import {
 import "./CallPlayer.css";
 import queryString from '../query-string';
 import io from 'socket.io-client';
-
+import { useCallLink } from "./CallLinks";
 
 
 const socket = io(process.env.REACT_APP_BACKEND_SERVER);
@@ -55,9 +55,7 @@ function CallPlayer(props) {
   const [isPlaying, setIsPlaying] = useState(false);
 
 
-  const filterType = useSelector((state) => state.callPlayer.filterType);
+  const {callLink,callDownload,callTweet} = useCallLink(props.call)
-  const filterGroupId = useSelector((state) => state.callPlayer.filterGroupId);
-  const filterTalkgroups = useSelector((state) => state.callPlayer.filterTalkgroups);
 
 
 
@@ -109,9 +107,6 @@ function CallPlayer(props) {
     }
   }
 
-
-
-
   useEffect(() => {
     if (loadNewerInView && callsData && (callsData.ids.length > 0)) {
       dispatch(getNewerCalls({}));
@@ -142,40 +137,6 @@ function CallPlayer(props) {
     }
   }, [callsData])
 
-/*
-  useEffect(() => {
-
-  }, [callsData]);
-*/
-
-
-  var callInfoHeader = "Call Info";
-  var callLink = ""
-  var callDownload = ""
-  if (currentCall) {
-    if ((talkgroupsData) && talkgroupsData[currentCall.talkgroupNum]) {
-      callInfoHeader = talkgroupsData[currentCall.talkgroupNum].description;
-    }
-    const callDate = new Date(currentCall.time);
-    var search = ""
-    switch (filterType) {
-
-      case 1:
-        search = `filter-type=group&filter-code=${filterGroupId}&`;
-        break;
-      case 2:
-        search = `filter-type=talkgroup&filter-code=${filterTalkgroups}&`;
-        break;
-      default:
-      case 0:
-        break;
-
-    }
-    callLink = "/system/" + shortName + "?" + search + "call-id=" + currentCall._id + "&time=" + (callDate.getTime() + 1);
-    callDownload = currentCall.url;
-  }
-
-
 
   return (
     <div ref={positionRef}>
@@ -187,13 +148,11 @@ function CallPlayer(props) {
             <div ref={loadNewerRef} />
             <ListCalls callsData={callsData} activeCallId={isPlaying?currentCallId:false} talkgroups={talkgroupsData?talkgroupsData.talkgroups:false} playCall={playCall} />
             <div ref={loadOlderRef} style={{ height: 50 }} />
-
-
           </Sidebar.Pusher>
         </Sidebar.Pushable>
         <Rail position='right' className="desktop-only"  >
           <Sticky offset={60} context={positionRef}>
-            <CallInfo call={currentCall} header={callInfoHeader} link={callLink} />
+            <CallInfo call={currentCall} />
           </Sticky>
         </Rail>
       </Container>