feat: add monitor filter field

src/components/monitorFilter.js

@@ -0,0 +1,42 @@
+import config from '../../config.yaml'
+import { useState } from 'react'
+
+export default function MonitorFilter({ active, callback }) {
+  const [input, setInput] = useState('')
+
+  const handleInput = (event) => {
+    // ignore focus trigger
+    if (event.target.value === '/') {
+      return
+    }
+    setInput(event.target.value)
+    callback(event.target.value)
+  }
+
+  const handleKeyDown = (event) => {
+    // blur input field on escape
+    if (event.keyCode === 27) {
+      event.target.blur()
+    }
+  }
+
+  return (
+    <div className="ui search">
+      <div className="ui icon input">
+        <input
+          className="prompt"
+          type="text"
+          value={input}
+          onInput={handleInput}
+          onKeyDown={handleKeyDown}
+          placeholder="Tap '/' to search"
+          tabIndex={0}
+          ref={
+            (e) => e && active && e.focus()
+          }
+        />
+        <i className="search icon"></i>
+      </div>
+    </div>
+  )
+}

src/functions/helpers.js

@@ -1,4 +1,5 @@
 import config from '../../config.yaml'
+import {useEffect, useState} from 'react'
 
 export async function getMonitors() {
   const monitors = await listKV('s_')
@@ -115,3 +116,31 @@ export async function notifySlack(monitor, newMetadata) {
     headers: { 'Content-Type': 'application/json' },
   })
 }
+
+export function useKeyPress(targetKey) {
+  const [keyPressed, setKeyPressed] = useState(false)
+
+  function downHandler({ key }) {
+    if (key === targetKey) {
+      setKeyPressed(true);
+    }
+  }
+
+  const upHandler = ({ key }) => {
+    if (key === targetKey) {
+      setKeyPressed(false);
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+
+    return () => {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, [])
+
+  return keyPressed
+}