some component cleanup

assets/js/src/clipboard.js

@@ -10,6 +10,6 @@ document.querySelectorAll("div.highlight").forEach((highlightDiv) => {
 
   if (codeElement) {
     // add the button as a sibling to the original Hugo block whose contents we're copying
-    render(<CopyButton content={codeElement.textContent} />, highlightDiv);
+    render(<CopyButton content={codeElement.textContent} timeout={2000} />, highlightDiv);
   }
 });

assets/js/src/components/CopyButton.js

@@ -1,6 +1,6 @@
 import { h } from "preact";
-import { useState } from "preact/hooks";
-import copy from "clipboard-copy";
+import { useState, useEffect } from "preact/hooks";
+import copy from "copy-to-clipboard";
 import trimNewlines from "trim-newlines";
 
 // react components:
@@ -16,16 +16,25 @@ const CopyButton = (props) => {
     e.target.blur();
 
     // trim any surrounding whitespace from target block's content and send it to the clipboard
-    copy(trimNewlines(props.content));
+    const didCopy = copy(trimNewlines(props.content));
 
-    // indicate success...
-    setCopied(true);
-    // ...but reset everything after 2 seconds
-    setTimeout(() => {
-      setCopied(false);
-    }, 2000);
+    // indicate success
+    setCopied(didCopy);
   };
 
+  useEffect(() => {
+    // reset everything after given ms (defaults to 2 seconds)
+    if (copied) {
+      const id = setTimeout(() => {
+        setCopied(false);
+      }, props.timeout || 2000);
+
+      return () => clearTimeout(id);
+    }
+
+    return () => {};
+  }, [props.timeout, copied]);
+
   return (
     <button
       class="copy-button"

assets/js/src/components/Counter.js

@@ -10,7 +10,7 @@ const Counter = (props) => {
 
   // start fetching hits from API once slug is set
   useEffect(() => {
-    fetch(`/api/hits/?slug=${encodeURIComponent(props.slug)}`)
+    return fetch(`/api/hits/?slug=${encodeURIComponent(props.slug)}`)
       .then((response) => response.json())
       .then((data) => setHits(data.hits || 0));
   }, [props.slug]);

assets/js/src/components/RepositoryGrid.js

@@ -12,7 +12,7 @@ const RepositoryGrid = () => {
   // start fetching repos from API immediately
   useEffect(() => {
     // API endpoint (sort by stars, limit to 12)
-    fetch("/api/projects/?top&limit=12")
+    return fetch("/api/projects/?top&limit=12")
       .then((response) => response.json())
       .then((data) => setRepos(data || []));
   }, []);

assets/js/src/components/ThemeToggle.js

@@ -11,7 +11,7 @@ const ThemeToggle = () => {
   const [dark, setDark] = useState(isDark());
 
   useEffect(() => {
-    setDarkClass(dark);
+    return setDarkClass(dark);
   }, [dark]);
 
   const handleToggle = () => {