From c743dfd657d7efec2e765a430b75555c5d9dc73d Mon Sep 17 00:00:00 2001
From: Scott Stancil <hoverduck@users.noreply.github.com>
Date: Thu, 21 Sep 2023 06:27:23 -0400
Subject: [PATCH] Add capability to link directly to an event ID in the web UI
 (#7803)

* Add capability to link directly to an event ID in the web UI

* Move event ID to searchParams, add View All button

* Use searchParams inside eventsFetcher
---
 web/src/routes/Events.jsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index 94b8d3826..1a692195b 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -56,6 +56,7 @@ export default function Events({ path, ...props }) {
     zones: props.zones ?? 'all',
     sub_labels: props.sub_labels ?? 'all',
     favorites: props.favorites ?? 0,
+    event: props.event,
   });
   const [state, setState] = useState({
     showDownloadMenu: false,
@@ -69,7 +70,7 @@ export default function Events({ path, ...props }) {
     validBox: null,
   });
   const [uploading, setUploading] = useState([]);
-  const [viewEvent, setViewEvent] = useState();
+  const [viewEvent, setViewEvent] = useState(props.event);
   const [eventOverlay, setEventOverlay] = useState();
   const [eventDetailType, setEventDetailType] = useState('clip');
   const [downloadEvent, setDownloadEvent] = useState({
@@ -87,9 +88,13 @@ export default function Events({ path, ...props }) {
   });
 
   const eventsFetcher = useCallback((path, params) => {
+    if (searchParams.event) {
+      path = `${path}/${searchParams.event}`;
+      return axios.get(path).then((res) => [res.data]);
+    }
     params = { ...params, include_thumbnails: 0, limit: API_LIMIT };
     return axios.get(path, { params }).then((res) => res.data);
-  }, []);
+  }, [searchParams]);
 
   const getKey = useCallback(
     (index, prevData) => {
@@ -355,6 +360,11 @@ export default function Events({ path, ...props }) {
             onSelectSingle={(item) => onFilter('sub_labels', item)}
           />
         )}
+        {searchParams.event && (
+          <Button className="ml-2" onClick={() => onFilter('event',null)} type="text">
+            View All
+          </Button>
+        )}
 
         <StarRecording
           className="h-10 w-10 text-yellow-300 cursor-pointer ml-auto"