Merge pull request #42 from NullFull/feat/add-debounce

`ask()`함수에 `debounce()` 함수 추가

Author: limkhl

pages/api/requests.js

@@ -5,15 +5,15 @@ import {makeResponse} from '@/utils/api'
 export default async (req, res) => {
     const { to, content } = req.body
 
-    makeResponse(res, {
-        message: '지금은 질문할 수 없습니다'
-    })
-
-    // await Promise.all(
-    //     to.map(item => requestStore.create(item, content))
-    // )
-    //
     // makeResponse(res, {
-    //
+    //     message: '지금은 질문할 수 없습니다'
     // })
+
+    await Promise.all(
+        to.map(item => requestStore.create(item, content))
+    )
+    
+    makeResponse(res, {
+    
+    })
 }

src/components/Ask/Modal.css

@@ -0,0 +1,25 @@
+.modal {
+  display: flex; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 999; /* Sit on top */
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content/Box */
+.modalContent {
+  background-color: #fefefe;
+  margin: 15% auto; /* 15% from the top and centered */
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%; /* Could be more or less, depending on screen size */
+  max-width: 400px;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+}

src/components/Ask/Modal.js

@@ -0,0 +1,14 @@
+import './Modal.css'
+
+const Modal = () => {
+  return (
+    <div className="modal">
+      <div className="modalContent">
+        질문을 보내는 중입니다.<br/>
+        창을 닫지 말아주세요. 
+      </div>
+    </div>
+  )
+}
+
+export default Modal

src/components/Ask/index.css

@@ -28,7 +28,7 @@
   font-size: 1.1rem;
   padding: 12px 16px 12px 16px;
   color: #fff;
-  background: #463e39;
+  background: #BA44AE;
 }
 .askButton:disabled {
   opacity: 0.5;

src/components/Ask/index.js

@@ -8,7 +8,9 @@ import FindByRegion from '@/components/Ask/FindByRegion'
 import FindByParty from '@/components/Ask/FindByParty'
 import Candidates from '@/components/Ask/Candidates'
 import CandidatesContext from '@/components/Ask/CandidatesContext'
+import Modal from '@/components/Ask/Modal'
 import client from '@/utils/client'
+import debounce from '@/utils/debounce'
 import './index.css'
 
 
@@ -101,19 +103,30 @@ const useCandidates = () => {
 
 const Ask = () => {
   const { candidates, status, fetchCandidates, actions } = useCandidates()
+  const hasSelectedCandidates = candidates.filter(c => c.checked).length > 0
 
-  const ask = async () => {
-    if (candidates.filter(c => c.checked).length < 1) {
-      alert('먼저 문의를 보낼 후보를 선택해주세요')
-      return
-    }
+  const [pending, setPending] = React.useState(false)
 
-    const content = '후보님의 생각이 궁금합니다.'
-    await client().sendRequest(content, candidates.filter(c => c.checked).map(c => c.id))
+  const content = '후보님의 생각이 궁금합니다.'
 
-    alert('질문이 등록 되었습니다.\n연락처가 존재하는 후보에게는 질문이 메일로 전달됩니다.')
-  }
+  React.useEffect(() => {
+    const ask = async () => {
+      try {
+        await client().sendRequest(content, candidates.filter(c => c.checked).map(c => c.id))
+        alert('질문이 등록 되었습니다.\n연락처가 존재하는 후보에게는 질문이 메일로 전달됩니다.')
+        setPending(false)
+      }
+      catch(e)
+      {
+        alert('오류가 발생했습니다.')
+      }
+    }
 
+    if(pending) {
+      debounce(ask())
+    }
+  }, [pending, candidates])
+  
   return (
     <div className="ask">
       {/* <ul className="notice">
@@ -191,9 +204,14 @@ const Ask = () => {
         </CandidatesContext.Provider>
       </div>
 
-      {/* <div>
-        <button className="askButton" disabled={true}>지금은 질문을 보낼 수 없습니다.</button>
-      </div> */}
+      {hasSelectedCandidates && (
+        <div>
+          <button className="askButton" onClick={() => setPending(true)} >
+            질문 보내기
+          </button>
+        </div>
+      )}
+      { pending && <Modal /> }
     </div>
   )
 }

src/utils/debounce.js

@@ -0,0 +1,14 @@
+function debounce(func, timeout = 300) {
+  let timer;
+  return (...args) => {
+    if (!timer) {
+      func.apply(this, args);
+    }
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = undefined;
+    }, timeout);
+  };
+}
+
+export default debounce