Added a debounce to fix button mashing for article reactions (#174)

Author: braydoncoyer

README.md

@@ -35,5 +35,5 @@ $ npm run dev
 Create a `.env` file similar to `.env.example` and include the appropriate keys.
 
 ## Notion Article Template
-Duplicate [the following Notion database](https://www.notion.so/0d3e00c6bbe54231897b9fcbc7747f78?v=4d7f0006d9a144b5bd8b9251f2ec39cd), grab the database ID and add it to the environment variables in the `.env` file.
 
+Duplicate [the following Notion database](https://www.notion.so/0d3e00c6bbe54231897b9fcbc7747f78?v=4d7f0006d9a144b5bd8b9251f2ec39cd), grab the database ID and add it to the environment variables in the `.env` file.

components/Reactions.tsx

@@ -1,4 +1,5 @@
 import useArticleReactions from '@/hooks/useArticleReactions';
+import { useDebounce } from '@/lib/hooks/useDebounce';
 
 const Reactions = ({ slug }) => {
   const {
@@ -65,15 +66,19 @@ const Reactions = ({ slug }) => {
 export default Reactions;
 
 function ReactionCard({ isActive, incrementCB, decrementCB, children }) {
+  const handleClick = useDebounce(
+    isActive ? () => decrementCB() : () => incrementCB(),
+    300
+  );
   return (
     <div
       role="button"
-      onClick={isActive ? () => decrementCB() : () => incrementCB()}
+      onClick={handleClick}
       className={`${
         isActive
           ? 'bg-gray-300 dark:bg-darker'
           : 'bg-blueGray-100 dark:bg-midnight'
-      } flex-1 py-4 rounded-lg flex flex-col items-center general-ring-state`}
+      } flex-1 py-4 rounded-lg flex flex-col items-center general-ring-state select-none`}
     >
       {children}
     </div>

lib/hooks/useDebounce.ts

@@ -0,0 +1,25 @@
+import React, { Ref, useEffect, useRef, useState } from 'react';
+
+export const useDebounce = (callback, delay) => {
+  const latestCallback = useRef(null);
+  const [lastCalledAt, setLastCalledAt] = useState(null);
+
+  useEffect(() => {
+    latestCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (lastCalledAt) {
+      const fire = () => {
+        setLastCalledAt(null);
+        latestCallback.current();
+      };
+
+      const fireAt = lastCalledAt + delay;
+      const id = setTimeout(fire, fireAt - Date.now());
+      return () => clearTimeout(id);
+    }
+  }, [lastCalledAt, delay]);
+
+  return () => setLastCalledAt(Date.now());
+};