From 4264d1190c021900f1523b7e36b220946a906de7 Mon Sep 17 00:00:00 2001
From: Skander Mzali <skanderm@gmail.com>
Date: Tue, 19 Nov 2024 15:06:19 -0800
Subject: [PATCH] Sort feeds from high to low (on the map)

---
 ui/src/pages/listen/index.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/listen/index.tsx b/ui/src/pages/listen/index.tsx
index ec78fba1..2c818168 100644
--- a/ui/src/pages/listen/index.tsx
+++ b/ui/src/pages/listen/index.tsx
@@ -1,6 +1,7 @@
 import { Container, Stack, Typography } from "@mui/material";
 import { dehydrate, QueryClient } from "@tanstack/react-query";
 import Head from "next/head";
+import { useMemo } from "react";
 
 import FeedCard from "@/components/FeedCard";
 import { getMapLayout } from "@/components/layouts/MapLayout";
@@ -8,9 +9,16 @@ import { useFeedsQuery } from "@/graphql/generated";
 import type { NextPageWithLayout } from "@/pages/_app";
 
 const FeedsPage: NextPageWithLayout = () => {
-  const feeds = useFeedsQuery().data?.feeds;
+  const feedsQueryResult = useFeedsQuery();
 
-  if (!feeds) return null;
+  // Sort feeds by high latitude to low (to match the order on the map)
+  const sortedFeeds = useMemo(
+    () =>
+      feedsQueryResult.data?.feeds.sort((a, b) => b.latLng.lat - a.latLng.lat),
+    [feedsQueryResult.data],
+  );
+
+  if (!sortedFeeds) return null;
 
   return (
     <div>
@@ -27,7 +35,7 @@ const FeedsPage: NextPageWithLayout = () => {
             Select a location to start listening live
           </Typography>
           <Stack spacing={4} mt={4}>
-            {feeds.map((feed) => (
+            {sortedFeeds.map((feed) => (
               <FeedCard key={feed.id} feed={feed} />
             ))}
           </Stack>