From 94c91bdc42c1ecf4adc5fb38bfd4d4a497d2fc8f Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Thu, 20 Jun 2024 11:09:25 +0200
Subject: [PATCH] Hold reads scroll position

---
 src/components/HomeHeader/ReadsHeader.tsx | 43 +++++++++++++++++++++++
 src/pages/Reads.tsx                       |  7 ++--
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/components/HomeHeader/ReadsHeader.tsx b/src/components/HomeHeader/ReadsHeader.tsx
index 5bf815a..c53c5f9 100644
--- a/src/components/HomeHeader/ReadsHeader.tsx
+++ b/src/components/HomeHeader/ReadsHeader.tsx
@@ -16,6 +16,7 @@ import LoginModal from '../LoginModal/LoginModal';
 import { userName } from '../../stores/profile';
 import { PrimalUser } from '../../types/primal';
 import ReedSelect from '../FeedSelect/ReedSelect';
+import { useReadsContext } from '../../contexts/ReadsContext';
 
 const ReadsHeader: Component< {
   id?: string,
@@ -25,6 +26,48 @@ const ReadsHeader: Component< {
   newPostAuthors: PrimalUser[],
 } > = (props) => {
 
+  const reads = useReadsContext();
+
+  let lastScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+
+  const onScroll = () => {
+    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+    // const smallHeader = document.getElementById('small_header');
+    const border = document.getElementById('small_bottom_border');
+
+    reads?.actions.updateScrollTop(scrollTop);
+
+    const isScrollingDown = scrollTop > lastScrollTop;
+    lastScrollTop = scrollTop;
+
+    if (scrollTop < 2) {
+      if (border) {
+        border.style.display = 'none';
+      }
+      return;
+    }
+
+    if (lastScrollTop < 2) {
+      return;
+    }
+
+    if (border) {
+      border.style.display = 'flex';
+    }
+
+    if (!isScrollingDown) {
+      return;
+    }
+
+  }
+
+  onMount(() => {
+    window.addEventListener('scroll', onScroll);
+  });
+
+  onCleanup(() => {
+    window.removeEventListener('scroll', onScroll);
+  });
   return (
     <div id={props.id}>
       <div class={`${styles.bigFeedSelect} ${styles.readsFeed}`}>
diff --git a/src/pages/Reads.tsx b/src/pages/Reads.tsx
index 09a567d..f8e4703 100644
--- a/src/pages/Reads.tsx
+++ b/src/pages/Reads.tsx
@@ -64,7 +64,7 @@ const Home: Component = () => {
 
 
   onMount(() => {
-    setIsHome(true);
+    // setIsHome(true);
     scrollWindowTo(context?.scrollTop);
   });
 
@@ -138,14 +138,14 @@ const Home: Component = () => {
 
   createEffect(() => {
     if (account?.isKeyLookupDone && account.publicKey) {
-      context?.actions.clearNotes();
 
       if (params.topic) {
+        context?.actions.clearNotes();
         context?.actions.fetchNotes(`filter;${decodeURIComponent(params.topic)}`, APP_ID);
         return;
       }
 
-      context?.actions.resetSelectedFeed();
+      // context?.actions.resetSelectedFeed();
       context?.actions.selectFeed({ hex: account.publicKey, name: 'My Reads'});
     }
   });
@@ -175,6 +175,7 @@ const Home: Component = () => {
             <Link
               class={styles.backToReads}
               href={'/reads'}
+              onClick={() => context?.actions.resetSelectedFeed()}
             >
               Reads:
             </Link>