From dae270a910fbfcca39480ef5464c052ac387c71c Mon Sep 17 00:00:00 2001
From: Skander Mzali <skanderm@gmail.com>
Date: Thu, 10 Oct 2024 15:46:31 -0700
Subject: [PATCH 1/2] Select first online feed on load

---
 ui/src/components/layouts/MapLayout.tsx  | 12 ++++++++++--
 ui/src/graphql/generated/index.ts        |  4 ++++
 ui/src/graphql/queries/listFeeds.graphql |  2 ++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/layouts/MapLayout.tsx b/ui/src/components/layouts/MapLayout.tsx
index 76493db2..0b45b85e 100644
--- a/ui/src/components/layouts/MapLayout.tsx
+++ b/ui/src/components/layouts/MapLayout.tsx
@@ -4,7 +4,7 @@ import { QueryClient } from "@tanstack/react-query";
 import type { Map as LeafletMap } from "leaflet";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
-import { ReactElement, ReactNode, useEffect, useState } from "react";
+import { ReactElement, ReactNode, useEffect, useMemo, useState } from "react";
 
 import Drawer from "@/components/Drawer";
 import Header from "@/components/Header";
@@ -44,6 +44,11 @@ function MapLayout({ children }: { children: ReactNode }) {
   const [currentFeed, setCurrentFeed] = useState(feed);
   const [map, setMap] = useState<LeafletMap>();
   const feeds = useFeedsQuery().data?.feeds ?? [];
+  const feedsResult = useMemo(
+    () => feeds.filter(({ online }) => online),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [feeds.length],
+  );
 
   // update the currentFeed only if there's a new feed
   useEffect(() => {
@@ -52,7 +57,10 @@ function MapLayout({ children }: { children: ReactNode }) {
       map?.setZoom(9);
       map?.panTo(feed.latLng);
     }
-  }, [feed, map, currentFeed]);
+    if (!feed && !currentFeed && feedsResult.length > 0) {
+      setCurrentFeed(feedsResult[0]);
+    }
+  }, [feed, map, currentFeed, feedsResult]);
 
   const invalidateSize = () => {
     if (map) {
diff --git a/ui/src/graphql/generated/index.ts b/ui/src/graphql/generated/index.ts
index 8b341b67..b5435820 100644
--- a/ui/src/graphql/generated/index.ts
+++ b/ui/src/graphql/generated/index.ts
@@ -2338,6 +2338,8 @@ export type FeedsQuery = {
     imageUrl?: string | null;
     thumbUrl?: string | null;
     mapUrl?: string | null;
+    bucket: string;
+    online?: boolean | null;
     latLng: { __typename?: "LatLng"; lat: number; lng: number };
   }>;
 };
@@ -3207,6 +3209,8 @@ export const FeedsDocument = `
     imageUrl
     thumbUrl
     mapUrl
+    bucket
+    online
   }
 }
     `;
diff --git a/ui/src/graphql/queries/listFeeds.graphql b/ui/src/graphql/queries/listFeeds.graphql
index 5e11d32e..e962a870 100644
--- a/ui/src/graphql/queries/listFeeds.graphql
+++ b/ui/src/graphql/queries/listFeeds.graphql
@@ -11,5 +11,7 @@ query feeds {
     imageUrl
     thumbUrl
     mapUrl
+    bucket
+    online
   }
 }

From dbcfea3848de74c13f2ad7842aaa26164506a66d Mon Sep 17 00:00:00 2001
From: Skander Mzali <skanderm@gmail.com>
Date: Thu, 10 Oct 2024 16:00:32 -0700
Subject: [PATCH 2/2] Inline first feed result

---
 ui/src/components/layouts/MapLayout.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/layouts/MapLayout.tsx b/ui/src/components/layouts/MapLayout.tsx
index 0b45b85e..b0a86af6 100644
--- a/ui/src/components/layouts/MapLayout.tsx
+++ b/ui/src/components/layouts/MapLayout.tsx
@@ -4,7 +4,7 @@ import { QueryClient } from "@tanstack/react-query";
 import type { Map as LeafletMap } from "leaflet";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
-import { ReactElement, ReactNode, useEffect, useMemo, useState } from "react";
+import { ReactElement, ReactNode, useEffect, useState } from "react";
 
 import Drawer from "@/components/Drawer";
 import Header from "@/components/Header";
@@ -44,11 +44,7 @@ function MapLayout({ children }: { children: ReactNode }) {
   const [currentFeed, setCurrentFeed] = useState(feed);
   const [map, setMap] = useState<LeafletMap>();
   const feeds = useFeedsQuery().data?.feeds ?? [];
-  const feedsResult = useMemo(
-    () => feeds.filter(({ online }) => online),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [feeds.length],
-  );
+  const firstOnlineFeed = feeds.filter(({ online }) => online)[0];
 
   // update the currentFeed only if there's a new feed
   useEffect(() => {
@@ -57,10 +53,10 @@ function MapLayout({ children }: { children: ReactNode }) {
       map?.setZoom(9);
       map?.panTo(feed.latLng);
     }
-    if (!feed && !currentFeed && feedsResult.length > 0) {
-      setCurrentFeed(feedsResult[0]);
+    if (!feed && !currentFeed && firstOnlineFeed) {
+      setCurrentFeed(firstOnlineFeed);
     }
-  }, [feed, map, currentFeed, feedsResult]);
+  }, [feed, map, currentFeed, firstOnlineFeed]);
 
   const invalidateSize = () => {
     if (map) {