better Systems List

frontend/src/Call/CallPlayer.js

@@ -41,20 +41,20 @@ function CallPlayer(props) {
     /* Optional options */
     threshold: 0.5
   });
-  
+
   const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
   const [autoPlay, setAutoPlay] = useState(true);
   const [currentCall, setCurrentCall] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
 
-  const {callLink,callDownload,callTweet} = useCallLink(currentCall)
+  const { callLink, callDownload, callTweet } = useCallLink(currentCall)
 
   const dispatch = useDispatch();
   const stickyRef = useRef(); // lets us get the Y Scroll offset for the Call List
   const positionRef = useRef(); // lets us get the Y Scroll offset for the Call List
   const shouldPlayAddCallRef = useRef(); // we need to do this to make the current value of isPlaying available in the socket message callback
   const live = useSelector((state) => state.callPlayer.live);
-  shouldPlayAddCallRef.current = (!isPlaying && autoPlay)?true:false;
+  shouldPlayAddCallRef.current = (!isPlaying && autoPlay) ? true : false;
 
   let currentCallId = false;
 
@@ -112,7 +112,7 @@ function CallPlayer(props) {
   // we should only set the selectCallId to be the current call when AutoPlay is selected
   // and when there isn't another call already playing
   useEffect(() => {
-    if ( selectCallId && callsData && !isPlaying && autoPlay) {
+    if (selectCallId && callsData && !isPlaying && autoPlay) {
       const call = callsData.entities[selectCallId];
       if (call) {
         setCurrentCall(call);
@@ -129,7 +129,7 @@ function CallPlayer(props) {
             style={{ minHeight: '100vh' }}
           >
             <div ref={loadNewerRef} />
-            <ListCalls callsData={callsData} activeCallId={isPlaying?currentCallId:false} talkgroups={talkgroupsData?talkgroupsData.talkgroups:false} playCall={playCall} />
+            <ListCalls callsData={callsData} activeCallId={isPlaying ? currentCallId : false} talkgroups={talkgroupsData ? talkgroupsData.talkgroups : false} playCall={playCall} />
             <div ref={loadOlderRef} style={{ height: 50 }} />
           </Sidebar.Pusher>
         </Sidebar.Pushable>

frontend/src/Main/Main.js

@@ -117,6 +117,7 @@ const DesktopContainer = (props) => {
               <Container>
                 <Menu.Item ><Header as='h3' inverted>{process.env.REACT_APP_SITE_NAME}</Header></Menu.Item>
                 <Link to="/systems"><Menu.Item link >Listen</Menu.Item></Link>
+                <Link to="/events"><Menu.Item link >Events</Menu.Item></Link>
                 <Link to="/about"><Menu.Item link >About</Menu.Item></Link>
               </Container>
             </Menu>

frontend/src/System/ListSystems.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, useRef } from "react";
 import { Link, useNavigate } from 'react-router-dom'
 import SystemCard from "./SystemCard";
 import { useSelector, useDispatch } from 'react-redux'
@@ -8,7 +8,12 @@ import {
   Card,
   Icon,
   Menu,
-  Divider
+  Divider,
+  List,
+  Segment,
+  Sticky,
+  Rail,
+  Grid
 } from "semantic-ui-react";
 import NavBar from "../Common/NavBar"
 import { selectAllSystems, selectActiveSystems, } from "../features/systems/systemsSlice";
@@ -19,6 +24,7 @@ const ListSystems = (props) => {
 
   const { data: allSystems, isSuccess } = useGetSystemsQuery();
   const systems = useSelector(selectActiveSystems)
+  const contextRef = useRef();
   let states = {};
   let other = []
   for (var i = 0; i < systems.length; i++) {
@@ -33,17 +39,32 @@ const ListSystems = (props) => {
     }
 
   }
-
-  let systemsByState = [];
   let keys = Object.keys(states);
   keys.sort();
-  for(var i=0; i<keys.length; ++i){
+
-    const state = keys[i];    
+  let stateList = [];
-  
+  for (var i = 0; i < keys.length; ++i) {
-    systemsByState.push((<Header as="h2">{state}</Header>))
+    const state = keys[i];
+    stateList.push((
+
+      <List.Item>
+        <List.Content>
+          <List.Header><a href={"#" + state}>{state}</a></List.Header>
+        </List.Content>
+      </List.Item>
+
+    ))
+  }
+
+  let systemsByState = [];
+
+  for (var i = 0; i < keys.length; ++i) {
+    const state = keys[i];
+
+    systemsByState.push((<Header as="h2" id={state}>{state}</Header>))
     systemsByState.push((
       <Card.Group key={state} itemsPerRow={4} stackable={true}>
-        {states[state]&&
+        {states[state] &&
           states[state].map((system) => {
             return <SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)} />
           })}
@@ -51,10 +72,10 @@ const ListSystems = (props) => {
     ))
   }
   let international = [];
-  international.push((<Header as="h2">International</Header>))
+  international.push((<Header as="h2" id="international">International</Header>))
   international.push((
-    <Card.Group  itemsPerRow={4} stackable={true}>
+    <Card.Group itemsPerRow={4} stackable={true}>
-      {other&&
+      {other &&
         other.map((system) => {
           return <SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)} />
         })}
@@ -62,12 +83,36 @@ const ListSystems = (props) => {
   ))
   const navigate = useNavigate();
   return (
-    <div>
+    <div ref={contextRef}>
       <NavBar />
       <Container >
+
         <Divider horizontal style={{ paddingTop: "5em", paddingBottom: "2em" }}><Header as="h1">Radio Systems<Icon name='rss' /></Header></Divider>
+        
+        <Grid centered columns={2}>
+    <Grid.Column width="15">
+        <List horizontal>
+          {stateList}
+          <List.Item>
+            <List.Content>
+              <List.Header><a href="#international">International</a></List.Header>
+            </List.Content>
+          </List.Item>
+        </List>
         {systemsByState}
         {international}
+      
+        </Grid.Column>
+        <Grid.Column width="1">
+        <Sticky offset={60} context={contextRef}>
+        <Segment>
+          <List >
+            {stateList}
+          </List>
+        </Segment>
+        </Sticky>
+      </Grid.Column>
+      </Grid>
       </Container>
     </div>
   );