add cmd k and escape for search

Alex Patterson · Alex Patterson · commit fff27fe05424 · 2021-09-27T20:22:58.000-04:00
diff --git a/frontend/main/src/components/algolia/SearchModal.tsx b/frontend/main/src/components/algolia/SearchModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import AlgoliaInstantSearch from './algoliaInstantSearch';
 
 export default function SearchModal(): JSX.Element {
@@ -12,6 +12,29 @@ export default function SearchModal(): JSX.Element {
     setShow(false);
   };
 
+  const escFunction = useCallback((e) => {
+    e.preventDefault();
+    if (e.keyCode === 27) {
+      setShow(false);
+    }
+  }, []);
+
+  const cmdKFunction = useCallback((e) => {
+    e.preventDefault();
+    if ((e.metaKey || e.ctrlKey) && e.code === 'KeyK') {
+      setShow(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', escFunction, false);
+    document.addEventListener('keydown', cmdKFunction, false);
+    return () => {
+      document.removeEventListener('keydown', escFunction, false);
+      document.removeEventListener('keydown', cmdKFunction, false);
+    };
+  }, []);
+
   const Modal = ({ handleClose, show, children }: any) => {
     const showHideclassNameName = show
       ? 'fixed inset-0 z-50 bg-basics-900 dark:bg-basics-900 dark:bg-opacity-50 bg-opacity-50 grid place-items-center h-screen'
