From 6c157019ea3ffb6ace9a40ed8b3b3fee87176871 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Mon, 9 Jan 2023 09:49:54 +0000
Subject: [PATCH] Use scroll hook

---
 src/pages/Root.js |  2 ++
 src/useScroll.js  | 26 ++++++++++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 src/useScroll.js

diff --git a/src/pages/Root.js b/src/pages/Root.js
index 785dadc..858c0f5 100644
--- a/src/pages/Root.js
+++ b/src/pages/Root.js
@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import { NoteCreator } from "../element/NoteCreator";
 import Timeline from "../element/Timeline";
 import { useState } from "react";
+import useScroll from "../useScroll";
 
 const RootTab = {
     Follows: 0,
@@ -13,6 +14,7 @@ const RootTab = {
 export default function RootPage() {
     const [loggedOut, pubKey, follows] = useSelector(s => [s.login.loggedOut, s.login.publicKey, s.login.follows]);
     const [tab, setTab] = useState(RootTab.Follows);
+    const [eop] = useScroll();
 
     function followHints() {
         if (follows?.length === 0 && pubKey) {
diff --git a/src/useScroll.js b/src/useScroll.js
new file mode 100644
index 0000000..e6d7277
--- /dev/null
+++ b/src/useScroll.js
@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+export default function useScroll() {
+    const [eop, setEop] = useState(false);
+
+    function handleScroll(e) {
+        let target = e.path[1];
+        let y = target.scrollY + target.innerHeight;
+        let h = e.target.scrollingElement.offsetHeight;
+        let padding = 10;
+        let atEnd = y + padding >= h;
+        setEop((s) => {
+            if (s !== atEnd) {
+                return atEnd;
+            }
+            return s;
+        });
+    }
+
+    useEffect(() => {
+        window.addEventListener("scroll", handleScroll, { passive: true });
+        return () => window.removeEventListener("scroll", handleScroll);
+    }, []);
+
+    return [eop];
+}
\ No newline at end of file