From 1f29875677e295e14c840b04f9c761ad05ef5001 Mon Sep 17 00:00:00 2001
From: Jacob Tan <6391234+jacobtyq@users.noreply.github.com>
Date: Sun, 29 Dec 2024 01:56:34 +0800
Subject: [PATCH 1/3] Add hook to close modal

---
 src/components/SnippetModal.tsx | 54 +++++++++++++++++----------------
 src/hooks/useEscapeKey.ts       | 16 ++++++++++
 2 files changed, 44 insertions(+), 26 deletions(-)
 create mode 100644 src/hooks/useEscapeKey.ts

diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx
index 372c1a64..6b1647b3 100644
--- a/src/components/SnippetModal.tsx
+++ b/src/components/SnippetModal.tsx
@@ -1,30 +1,32 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import Button from "./Button";
-import { CloseIcon } from "./Icons";
-import CodePreview from "./CodePreview";
-import { SnippetType } from "../types";
-import slugify from "../utils/slugify";
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Button from './Button'
+import { CloseIcon } from './Icons'
+import CodePreview from './CodePreview'
+import { SnippetType } from '../types'
+import slugify from '../utils/slugify'
+import useEscapeKey from '../hooks/useEscapeKey'
 
 type Props = {
-  snippet: SnippetType;
-  language: string;
-  handleCloseModal: () => void;
-};
+  snippet: SnippetType
+  language: string
+  handleCloseModal: () => void
+}
 
 const SnippetModal: React.FC<Props> = ({
   snippet,
   language,
   handleCloseModal,
 }) => {
-  const modalRoot = document.getElementById("modal-root");
-  if (!modalRoot) return null;
+  const modalRoot = document.getElementById('modal-root')
+  if (!modalRoot) return null
+  useEscapeKey(handleCloseModal)
 
   return ReactDOM.createPortal(
-    <div className="modal-overlay">
-      <div className="modal | flow" data-flow-space="lg">
-        <div className="modal__header">
-          <h2 className="section-title">{snippet.title}</h2>
+    <div className='modal-overlay'>
+      <div className='modal | flow' data-flow-space='lg'>
+        <div className='modal__header'>
+          <h2 className='section-title'>{snippet.title}</h2>
           <Button isIcon={true} onClick={handleCloseModal}>
             <CloseIcon />
           </Button>
@@ -35,19 +37,19 @@ const SnippetModal: React.FC<Props> = ({
           {snippet.description}
         </p>
         <p>
-          Contributed by{" "}
+          Contributed by{' '}
           <a
             href={`https://github.com/${snippet.author}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="styled-link"
+            target='_blank'
+            rel='noopener noreferrer'
+            className='styled-link'
           >
             @{snippet.author}
           </a>
         </p>
-        <ul role="list" className="modal__tags">
+        <ul role='list' className='modal__tags'>
           {snippet.tags.map((tag) => (
-            <li key={tag} className="modal__tag">
+            <li key={tag} className='modal__tag'>
               {tag}
             </li>
           ))}
@@ -55,7 +57,7 @@ const SnippetModal: React.FC<Props> = ({
       </div>
     </div>,
     modalRoot
-  );
-};
+  )
+}
 
-export default SnippetModal;
+export default SnippetModal
diff --git a/src/hooks/useEscapeKey.ts b/src/hooks/useEscapeKey.ts
new file mode 100644
index 00000000..736b8edc
--- /dev/null
+++ b/src/hooks/useEscapeKey.ts
@@ -0,0 +1,16 @@
+import { useEffect } from 'react'
+
+const useEscapeKey = (onEscapeEvent: () => void) => {
+  useEffect(() => {
+    const handleEscape = (event: { key: string }) => {
+      if (event.key === 'Escape') onEscapeEvent()
+    }
+    window.addEventListener('keydown', handleEscape)
+
+    return () => {
+      window.removeEventListener('keydown', handleEscape)
+    }
+  }, [onEscapeEvent])
+}
+
+export default useEscapeKey

From 126603c85b62de48965b9c88752ea24dd8522462 Mon Sep 17 00:00:00 2001
From: Jacob Tan <6391234+jacobtyq@users.noreply.github.com>
Date: Sun, 29 Dec 2024 16:08:19 +0800
Subject: [PATCH 2/3] undo prettier fixes

---
 src/components/SnippetModal.tsx | 56 ++++++++++++++++-----------------
 src/hooks/useEscapeKey.ts       | 14 ++++-----
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx
index 6b1647b3..13c4d792 100644
--- a/src/components/SnippetModal.tsx
+++ b/src/components/SnippetModal.tsx
@@ -1,32 +1,32 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import Button from './Button'
-import { CloseIcon } from './Icons'
-import CodePreview from './CodePreview'
-import { SnippetType } from '../types'
-import slugify from '../utils/slugify'
-import useEscapeKey from '../hooks/useEscapeKey'
+import React from "react";
+import ReactDOM from "react-dom";
+import Button from "./Button";
+import { CloseIcon } from "./Icons";
+import CodePreview from "./CodePreview";
+import { SnippetType } from "../types";
+import slugify from "../utils/slugify";
+import useEscapeKey from "../hooks/useEscapeKey";
 
 type Props = {
-  snippet: SnippetType
-  language: string
-  handleCloseModal: () => void
-}
+  snippet: SnippetType;
+  language: string;
+  handleCloseModal: () => void;
+};
 
 const SnippetModal: React.FC<Props> = ({
   snippet,
   language,
   handleCloseModal,
 }) => {
-  const modalRoot = document.getElementById('modal-root')
-  if (!modalRoot) return null
-  useEscapeKey(handleCloseModal)
+  const modalRoot = document.getElementById("modal-root");
+  if (!modalRoot) return null;
+  useEscapeKey(handleCloseModal);
 
   return ReactDOM.createPortal(
-    <div className='modal-overlay'>
-      <div className='modal | flow' data-flow-space='lg'>
-        <div className='modal__header'>
-          <h2 className='section-title'>{snippet.title}</h2>
+    <div className="modal-overlay">
+    <div className="modal | flow" data-flow-space="lg">
+      <div className="modal__header">
+        <h2 className="section-title">{snippet.title}</h2>
           <Button isIcon={true} onClick={handleCloseModal}>
             <CloseIcon />
           </Button>
@@ -37,19 +37,19 @@ const SnippetModal: React.FC<Props> = ({
           {snippet.description}
         </p>
         <p>
-          Contributed by{' '}
+          Contributed by{" "}
           <a
             href={`https://github.com/${snippet.author}`}
-            target='_blank'
-            rel='noopener noreferrer'
-            className='styled-link'
+            target="_blank"
+            rel="noopener noreferrer"
+            className="styled-link"
           >
             @{snippet.author}
           </a>
         </p>
-        <ul role='list' className='modal__tags'>
+        <ul role="list" className="modal__tags">
           {snippet.tags.map((tag) => (
-            <li key={tag} className='modal__tag'>
+            <li key={tag} className="modal__tag">
               {tag}
             </li>
           ))}
@@ -57,7 +57,7 @@ const SnippetModal: React.FC<Props> = ({
       </div>
     </div>,
     modalRoot
-  )
-}
+  );
+};
 
-export default SnippetModal
+export default SnippetModal;
diff --git a/src/hooks/useEscapeKey.ts b/src/hooks/useEscapeKey.ts
index 736b8edc..2ef4f70c 100644
--- a/src/hooks/useEscapeKey.ts
+++ b/src/hooks/useEscapeKey.ts
@@ -1,16 +1,16 @@
-import { useEffect } from 'react'
+import { useEffect } from "react"
 
 const useEscapeKey = (onEscapeEvent: () => void) => {
   useEffect(() => {
     const handleEscape = (event: { key: string }) => {
-      if (event.key === 'Escape') onEscapeEvent()
+      if (event.key === "Escape") onEscapeEvent();
     }
-    window.addEventListener('keydown', handleEscape)
+    window.addEventListener("keydown", handleEscape);
 
     return () => {
-      window.removeEventListener('keydown', handleEscape)
+      window.removeEventListener("keydown", handleEscape);
     }
-  }, [onEscapeEvent])
-}
+  }, [onEscapeEvent]);
+};
 
-export default useEscapeKey
+export default useEscapeKey;

From 0a2ee6b80e2879f3f4d7a8a5b6aee15c257cca25 Mon Sep 17 00:00:00 2001
From: Jacob Tan <6391234+jacobtyq@users.noreply.github.com>
Date: Sun, 29 Dec 2024 16:11:43 +0800
Subject: [PATCH 3/3] fix spacing

---
 src/components/SnippetModal.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx
index 13c4d792..02515be1 100644
--- a/src/components/SnippetModal.tsx
+++ b/src/components/SnippetModal.tsx
@@ -24,9 +24,9 @@ const SnippetModal: React.FC<Props> = ({
 
   return ReactDOM.createPortal(
     <div className="modal-overlay">
-    <div className="modal | flow" data-flow-space="lg">
-      <div className="modal__header">
-        <h2 className="section-title">{snippet.title}</h2>
+      <div className="modal | flow" data-flow-space="lg">
+        <div className="modal__header">
+          <h2 className="section-title">{snippet.title}</h2>
           <Button isIcon={true} onClick={handleCloseModal}>
             <CloseIcon />
           </Button>