Add retain button and retain action

web/src/api/index.jsx

@@ -117,6 +117,20 @@ export function useDelete() {
   return deleteEvent;
 }
 
+export function useRetain() {
+  const { dispatch, state } = useContext(Api);
+
+  async function retainEvent(eventId) {
+    if (!eventId) return null;
+
+    const response = await fetch(`${state.host}/api/events/${eventId}`, { method: 'POST' });
+    await dispatch({ type: 'DELETE', payload: { eventId } });
+    return await (response.status < 300 ? response.json() : { success: true });
+  }
+
+  return retainEvent;
+}
+
 export function useApiHost() {
   const { state } = useContext(Api);
   return state.host;

web/src/routes/Event.jsx

@@ -7,6 +7,7 @@ import ArrowDown from '../icons/ArrowDropdown';
 import ArrowDropup from '../icons/ArrowDropup';
 import Clip from '../icons/Clip';
 import Close from '../icons/Close';
+import StarRecording from '../icons/StarRecording';
 import Delete from '../icons/Delete';
 import Snapshot from '../icons/Snapshot';
 import Dialog from '../components/Dialog';
@@ -74,6 +75,16 @@ export default function Event({ eventId, close, scrollRef }) {
     };
   }, [data, scrollRef, eventId, shouldScroll]);
 
+  const handleClickRetain = () => {
+    let success;
+    try {
+      success = await setRetainEvent(eventId);
+      setRetainStatus(success ? FetchStatus.LOADED : FetchStatus.ERROR);
+    } catch (e) {
+      setRetainStatus(FetchStatus.ERROR);
+    }
+  };
+
   const handleClickDelete = () => {
     setShowDialog(true);
   };