Implement delete

web/src/components/card/SearchThumbnailFooter.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import TimeAgo from "../dynamic/TimeAgo";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
@@ -24,15 +24,19 @@ import { FrigatePlusDialog } from "../overlay/dialog/FrigatePlusDialog";
 import { Event } from "@/types/event";
 import { FaArrowsRotate } from "react-icons/fa6";
 import { baseUrl } from "@/api/baseUrl";
+import axios from "axios";
+import { toast } from "sonner";
 
 type SearchThumbnailProps = {
   searchResult: SearchResult;
   findSimilar: () => void;
+  refreshResults: () => void;
 };
 
 export default function SearchThumbnailFooter({
   searchResult,
   findSimilar,
+  refreshResults,
 }: SearchThumbnailProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
@@ -40,6 +44,24 @@ export default function SearchThumbnailFooter({
 
   const [showFrigatePlus, setShowFrigatePlus] = useState(false);
 
+  const handleDelete = useCallback(() => {
+    axios
+      .delete(`events/${searchResult.id}`)
+      .then((resp) => {
+        if (resp.status == 200) {
+          toast.success("Deleted object successfully.", {
+            position: "top-center",
+          });
+          refreshResults();
+        }
+      })
+      .catch(() => {
+        toast.error("Failed to delete object.", {
+          position: "top-center",
+        });
+      });
+  }, [searchResult, refreshResults]);
+
   // date
 
   const formattedDate = useFormattedTimestamp(
@@ -124,7 +146,7 @@ export default function SearchThumbnailFooter({
               <FaArrowsRotate className="mr-2 size-4" />
               <span>View object lifecycle</span>
             </DropdownMenuItem>
-            <DropdownMenuItem>
+            <DropdownMenuItem onClick={handleDelete}>
               <LuTrash2 className="mr-2 size-4" />
               <span>Delete</span>
             </DropdownMenuItem>

web/src/pages/Explore.tsx

@@ -384,6 +384,7 @@ export default function Explore() {
           searchFilter={searchFilter}
           searchResults={searchResults}
           isLoading={(isLoadingInitialData || isLoadingMore) ?? true}
+          hasMore={!isReachingEnd}
           setSearch={setSearch}
           setSimilaritySearch={(search) => {
             setSearchFilter({
@@ -395,7 +396,7 @@ export default function Explore() {
           setSearchFilter={setSearchFilter}
           onUpdateFilter={setSearchFilter}
           loadMore={loadMore}
-          hasMore={!isReachingEnd}
+          refresh={mutate}
         />
       )}
     </>

web/src/views/search/SearchView.tsx

@@ -41,12 +41,13 @@ type SearchViewProps = {
   searchFilter?: SearchFilter;
   searchResults?: SearchResult[];
   isLoading: boolean;
+  hasMore: boolean;
   setSearch: (search: string) => void;
   setSimilaritySearch: (search: SearchResult) => void;
   setSearchFilter: (filter: SearchFilter) => void;
   onUpdateFilter: (filter: SearchFilter) => void;
   loadMore: () => void;
-  hasMore: boolean;
+  refresh: () => void;
 };
 export default function SearchView({
   search,
@@ -54,12 +55,13 @@ export default function SearchView({
   searchFilter,
   searchResults,
   isLoading,
+  hasMore,
   setSearch,
   setSimilaritySearch,
   setSearchFilter,
   onUpdateFilter,
   loadMore,
-  hasMore,
+  refresh,
 }: SearchViewProps) {
   const contentRef = useRef<HTMLDivElement | null>(null);
   const { data: config } = useSWR<FrigateConfig>("config", {
@@ -435,6 +437,7 @@ export default function SearchView({
                             setSimilaritySearch(value);
                           }
                         }}
+                        refreshResults={refresh}
                       />
                     </div>
                   </div>