From d3fc83dd9c66db83f45acf3d58bbfd1828c294be Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Thu, 2 Jul 2020 16:22:54 -0700
Subject: [PATCH] Lesson 8 - use-keydown composable

---
 src/components/ModalView.vue   | 21 ++++++---------------
 src/composables/use-keydown.js | 17 +++++++++++++++++
 2 files changed, 23 insertions(+), 15 deletions(-)
 create mode 100644 src/composables/use-keydown.js

diff --git a/src/components/ModalView.vue b/src/components/ModalView.vue
index b7dee00..10bf200 100644
--- a/src/components/ModalView.vue
+++ b/src/components/ModalView.vue
@@ -8,23 +8,14 @@
 </template>
 
 <script>
-  import { onBeforeUnmount } from 'vue'
-  
+  import useKeydown from '../composables/use-keydown';
+
   export default {
     setup(props, {emit}) {
-      let onKeydown = (event) => {
-        console.log(event.key)
-        
-        if(event.key == 'Escape') {
-          emit('closeModal')
-        }
-      }
-
-      window.addEventListener('keydown', onKeydown)
-      onBeforeUnmount(()=>{
-        window.removeEventListener('keydown', onKeydown)
-      })
-
+      useKeydown([
+        {key: 'Escape', fn: () => { emit('closeModal') }},
+      ])
+    
       return {
         emit
       }
diff --git a/src/composables/use-keydown.js b/src/composables/use-keydown.js
new file mode 100644
index 0000000..9a01c0b
--- /dev/null
+++ b/src/composables/use-keydown.js
@@ -0,0 +1,17 @@
+import { onBeforeUnmount } from 'vue'
+  
+let useKeydown = (keyCombos) => {
+  let onKeydown = (event) => {
+    let kc = keyCombos.find(kc => kc.key == event.key)
+    if(kc) {
+      kc.fn()
+    }
+  }
+
+  window.addEventListener('keydown', onKeydown)
+  onBeforeUnmount(()=>{
+    window.removeEventListener('keydown', onKeydown)
+  })
+}
+
+export default useKeydown;
\ No newline at end of file