Merge pull request #164 from noquinn/trending-systems

Add "trending" category for systems with the most listeners

frontend/src/System/ListSystems.js

@@ -21,6 +21,7 @@ import { useGetSystemsQuery, } from '../features/api/apiSlice'
 import StateLinkList from "./StateLinkList";
 import SystemsByState from "./SystemsByState";
 import InternationList from "./InternationList";
+import TrendingList from "./TrendingList";
 // ----------------------------------------------------
 
 const ListSystems = (props) => {
@@ -46,6 +47,10 @@ const ListSystems = (props) => {
     }
   }
 
+  let popularSystems = [];
+  if (isSuccess && systems.systems)
+    popularSystems = systems.systems.sort((a, b) => b.clientCount - a.clientCount).slice(0, 4);
+
   const handleContactClick = (system) => {
     setContactSystem(system);
     setContactVisible(true);
@@ -54,6 +59,7 @@ const ListSystems = (props) => {
   const stateList = StateLinkList(states);
   const systemsByState = SystemsByState(states, handleContactClick);
   const international = InternationList(other, handleContactClick);
+  const trending = TrendingList(popularSystems, handleContactClick);
 
   return (
     <div ref={contextRef}>
@@ -71,6 +77,7 @@ const ListSystems = (props) => {
                 </List.Content>
               </List.Item>
             </List>
+            {trending}
             {systemsByState}
             {international}
           </Grid.Column>

frontend/src/System/TrendingList.js

@@ -0,0 +1,25 @@
+import {
+  Card,
+  Header
+} from "semantic-ui-react";
+import { useNavigate } from 'react-router-dom'
+import SystemCard from "./SystemCard";
+
+
+const TrendingList = (popularSystems, onContactClick) => {
+  
+  const navigate = useNavigate();
+  let trending = [];
+  trending.push((<Header as="h2" id="trending">Trending</Header>))
+  trending.push((
+      <Card.Group itemsPerRow={4} stackable={true}>
+          {popularSystems &&
+              popularSystems.map((system) => {
+                  return <SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)} onContactClick={onContactClick} />
+              })}
+      </Card.Group>
+  ))
+  return trending;
+}
+
+export default TrendingList;