add back to top button

Author: James-Kua

src/components/BackToTopButton.tsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect, useCallback } from "react";
+
+const BackToTopButton: React.FC = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = useCallback(() => {
+    if (window.scrollY > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", toggleVisibility);
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility);
+    };
+  }, [toggleVisibility]);
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 hidden md:block">
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transition-opacity duration-300 ease-in-out opacity-75 hover:opacity-100"
+          aria-label="Scroll to top"
+        >
+          ↑
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default BackToTopButton;

src/components/Feed.tsx

@@ -26,6 +26,7 @@ import PollData from "./PollData";
 import { RedditApiClient } from "../api/RedditApiClient";
 import { useNavigate, useParams } from "react-router-dom";
 import SegmentedControl from "./SegmentedControl";
+import BackToTopButton from "./BackToTopButton";
 
 export interface FeedProps {
   subreddit: string;
@@ -289,6 +290,7 @@ const Feed: React.FC<FeedProps> = memo(({ subreddit, initialTime, initialSort })
           ))}
         </div>
         <div ref={sentinel} className="h-1"></div>{" "}
+        <BackToTopButton />
       </div>
     </div>
   );