From 19fbe50d46b9090b93a4fc9bb42282081beb2742 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Sun, 14 Jan 2024 16:43:55 -0800
Subject: [PATCH] Translate in and out nav and buttons smoothly

Remove useHideOnScroll which only detected direction. The new hook will update translation and opacity based on scroll amount.
---
 src/app/providers/scroll.tsx                  |  8 ++--
 .../actions/composeButton/ComposeButton.tsx   | 12 ++++--
 src/components/actions/refetch/Refetch.tsx    | 12 ++++--
 src/components/navigational/appBar/AppBar.tsx | 12 ++++--
 .../navigational/feedTabs/FeedTabs.tsx        | 11 +++--
 src/components/navigational/topBar/TopBar.tsx | 12 ++++--
 src/lib/hooks/useHideOnScroll.tsx             | 38 -----------------
 src/lib/hooks/useScrollTranslation.tsx        | 42 +++++++++++++++++++
 8 files changed, 85 insertions(+), 62 deletions(-)
 delete mode 100644 src/lib/hooks/useHideOnScroll.tsx
 create mode 100644 src/lib/hooks/useScrollTranslation.tsx

diff --git a/src/app/providers/scroll.tsx b/src/app/providers/scroll.tsx
index 9458fba4..efa16b7f 100644
--- a/src/app/providers/scroll.tsx
+++ b/src/app/providers/scroll.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import useHideOnScroll from "@/lib/hooks/useHideOnScroll";
+import useScrollTranslation from "@/lib/hooks/useScrollTranslation";
 import { ReactNode, createContext, useContext } from "react";
 
-const ScrollContext = createContext<boolean | undefined>(undefined);
+const ScrollContext = createContext<number>(0);
 
 export const useScrollContext = () => {
   const context = useContext(ScrollContext);
@@ -18,9 +18,9 @@ interface ScrollProviderProps {
 }
 export const ScrollProvider = (props: ScrollProviderProps) => {
   const { children } = props;
-  const show = useHideOnScroll();
+  const val = useScrollTranslation();
 
   return (
-    <ScrollContext.Provider value={show}>{children}</ScrollContext.Provider>
+    <ScrollContext.Provider value={val}>{children}</ScrollContext.Provider>
   );
 };
diff --git a/src/components/actions/composeButton/ComposeButton.tsx b/src/components/actions/composeButton/ComposeButton.tsx
index 20274c13..421bade6 100644
--- a/src/components/actions/composeButton/ComposeButton.tsx
+++ b/src/components/actions/composeButton/ComposeButton.tsx
@@ -11,7 +11,7 @@ interface Props {
 
 export default function ComposeButton(props: Props) {
   const { mode } = props;
-  const show = useScrollContext();
+  const val = useScrollContext();
   const pathname = usePathname();
   const userHandle =
     pathname.includes("/user/") && !pathname.includes("/post/")
@@ -19,14 +19,18 @@ export default function ComposeButton(props: Props) {
       : "";
   const { openComposer } = useComposerControls();
 
+  const canUpdate = typeof window !== "undefined";
+
   return (
     <>
       {mode === "float" && (
         <button
           onClick={() => openComposer({ mention: userHandle })}
-          className={`z-40 p-3.5 rounded-full fixed md:hidden right-3 bottom-24 bg-primary text-white hover:bg-primary-dark outline-none ${
-            show ? "translate-y-0 opacity-100" : "translate-y-36 opacity-0"
-          } transition-all ease-in-out duration-500`}
+          className="z-40 p-3.5 rounded-full fixed md:hidden right-3 bottom-24 bg-primary text-white hover:bg-primary-dark outline-none"
+          style={{
+            opacity: canUpdate ? `${100 - (val ?? 0)}%` : "none",
+            transform: canUpdate ? `translateY(${val ?? 0}%)` : "none",
+          }}
         >
           <RiQuillPenFill className="text-2xl" />
         </button>
diff --git a/src/components/actions/refetch/Refetch.tsx b/src/components/actions/refetch/Refetch.tsx
index 584e0929..99c7cd79 100644
--- a/src/components/actions/refetch/Refetch.tsx
+++ b/src/components/actions/refetch/Refetch.tsx
@@ -11,15 +11,19 @@ interface Props {
 
 export default function Refetch(props: Props) {
   const { onRefetch } = props;
-  const show = useScrollContext();
+  const val = useScrollContext();
   const debouncedRefetch = useDebouncedCallback(onRefetch, 300);
 
+  const canUpdate = typeof window !== "undefined";
+
   return (
     <Button
       onClick={debouncedRefetch}
-      className={`z-40 p-3 rounded-full fixed bottom-24 md:bottom-8 ml-3 md:ml-[0.80rem] border border-neutral-300 bg-white hover:bg-neutral-50 hover:-rotate-180 ${
-        show ? "translate-y-0 opacity-100" : "translate-y-36 opacity-0"
-      } transition-all ease-in-out duration-500`}
+      className="z-40 p-3 rounded-full fixed bottom-24 md:bottom-8 ml-3 md:ml-[0.80rem] border border-neutral-300 bg-white hover:bg-neutral-50 hover:-rotate-180"
+      style={{
+        opacity: canUpdate ? `${100 - (val ?? 0)}%` : "none",
+        transform: canUpdate ? `translateY(${val ?? 0}%)` : "none",
+      }}
     >
       <LuRefreshCcw className="text-2xl text-neutral-500 hover:text-neutral-600" />
     </Button>
diff --git a/src/components/navigational/appBar/AppBar.tsx b/src/components/navigational/appBar/AppBar.tsx
index c1547346..4a2d9824 100644
--- a/src/components/navigational/appBar/AppBar.tsx
+++ b/src/components/navigational/appBar/AppBar.tsx
@@ -13,7 +13,7 @@ import { FaBell } from "react-icons/fa";
 
 export default function AppBar() {
   const pathname = usePathname();
-  const show = useScrollContext();
+  const val = useScrollContext();
   const agent = useAgent();
   const {
     data: notificationsCount,
@@ -25,11 +25,15 @@ export default function AppBar() {
     refetchInterval: 10000,
   });
 
+  const canUpdate = typeof window !== "undefined";
+
   return (
     <nav
-      className={`flex justify-between pb-8 pt-1 px-6 border-t gap-6 fixed bottom-0 z-40 w-full md:hidden bg-white overflow-auto ${
-        show ? "translate-y-0 opacity-100" : "translate-y-36 opacity-0"
-      } transition-all ease-in-out duration-500`}
+      className="flex justify-between pb-8 pt-1 px-6 border-t gap-6 fixed bottom-0 z-40 w-full md:hidden bg-white overflow-auto"
+      style={{
+        opacity: canUpdate ? `${100 - (val ?? 0)}%` : "none",
+        transform: canUpdate ? `translateY(${val ?? 0}%)` : "none",
+      }}
     >
       <NavItem
         href="/dashboard/home"
diff --git a/src/components/navigational/feedTabs/FeedTabs.tsx b/src/components/navigational/feedTabs/FeedTabs.tsx
index dae3487e..6c87a2cb 100644
--- a/src/components/navigational/feedTabs/FeedTabs.tsx
+++ b/src/components/navigational/feedTabs/FeedTabs.tsx
@@ -15,6 +15,7 @@ export default function FeedTabs() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const uri = searchParams.get("uri");
+  const val = useScrollContext();
 
   const {
     status,
@@ -27,15 +28,17 @@ export default function FeedTabs() {
     queryFn: () => getSavedFeeds(agent),
   });
 
-  const show = useScrollContext();
+  const canUpdate = typeof window !== "undefined" && window.innerWidth < 768;
 
   return (
     <>
       <div className="z-40 hidden md:block fixed bg-white top-0 lg:p-5 md:p-5 max-w-xl w-full" />
       <div
-        className={`bg-white border-x-0 border-t-0 border-b md:border md:rounded-t-2xl overflow-x-hidden hover:overflow-x-auto md:opacity-100 ${
-          show ? "translate-y-0 opacity-100" : "-translate-y-20 opacity-0"
-        } transition-all ease-in-out duration-500 sticky top-[3.2rem] md:top-6 md:translate-y-0  z-50 md:z-50`}
+        className={`bg-white border-x-0 border-t-0 border-b md:border md:rounded-t-2xl overflow-x-hidden hover:overflow-x-auto md:opacity-100 sticky top-[3.2rem] md:top-6 z-50 md:z-50`}
+        style={{
+          opacity: canUpdate ? `${100 - (val ?? 0)}%` : "none",
+          transform: canUpdate ? `translateY(-${val ?? 0}%)` : "none",
+        }}
       >
         {isFetching && <FeedTabsSkeleton />}
         {!isFetching && savedFeeds && (
diff --git a/src/components/navigational/topBar/TopBar.tsx b/src/components/navigational/topBar/TopBar.tsx
index fb14488c..60589ff7 100644
--- a/src/components/navigational/topBar/TopBar.tsx
+++ b/src/components/navigational/topBar/TopBar.tsx
@@ -14,13 +14,17 @@ interface Props {
 
 export default function TopBar(props: Props) {
   const { profile } = props;
-  const show = useScrollContext();
+  const val = useScrollContext();
+
+  const canUpdate = typeof window !== "undefined" && window.innerWidth < 768;
 
   return (
     <div
-      className={`flex justify-between bg-white border-b px-3 py-2.5 sticky md:hidden top-0 z-50 ${
-        show ? "translate-y-0 opacity-100" : "-translate-y-20 opacity-0"
-      } transition-all ease-in-out duration-500`}
+      className="flex justify-between bg-white border-b px-3 py-2.5 sticky md:hidden top-0 z-50"
+      style={{
+        opacity: canUpdate ? `${100 - (val ?? 0)}%` : "none",
+        transform: canUpdate ? `translateY(-${val ?? 0}%)` : "none",
+      }}
     >
       <Link
         href={`/dashboard/user/${profile?.handle}`}
diff --git a/src/lib/hooks/useHideOnScroll.tsx b/src/lib/hooks/useHideOnScroll.tsx
deleted file mode 100644
index 91dee96e..00000000
--- a/src/lib/hooks/useHideOnScroll.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { useDebouncedCallback } from "use-debounce";
-
-const DEBOUNCE_DELAY = 15;
-
-export default function useHideOnScroll() {
-  const [show, setShow] = useState(true);
-  const [prevScrollY, setPrevScrollY] = useState(0);
-
-  const controlNavbar = useCallback(() => {
-    const scrollY = window.scrollY || document.documentElement.scrollTop;
-
-    if (scrollY === 0) {
-      setShow(true); // explicitly set show to true when at the top of the page (fix for Safari)
-    } else if (scrollY > prevScrollY && show) {
-      setShow(false);
-    } else if (scrollY <= prevScrollY && !show) {
-      setShow(true);
-    }
-
-    setPrevScrollY(scrollY);
-  }, [prevScrollY, show]);
-
-  const debouncedControlNavbar = useDebouncedCallback(
-    controlNavbar,
-    DEBOUNCE_DELAY
-  );
-
-  useEffect(() => {
-    window.addEventListener("scroll", debouncedControlNavbar);
-
-    return () => {
-      window.removeEventListener("scroll", debouncedControlNavbar);
-    };
-  }, [debouncedControlNavbar]);
-
-  return show;
-}
diff --git a/src/lib/hooks/useScrollTranslation.tsx b/src/lib/hooks/useScrollTranslation.tsx
new file mode 100644
index 00000000..220571ce
--- /dev/null
+++ b/src/lib/hooks/useScrollTranslation.tsx
@@ -0,0 +1,42 @@
+import { useState, useEffect, useCallback } from "react";
+
+const useScrollTranslation = () => {
+  const [val, setVal] = useState(0);
+  const [prevY, setPrevY] = useState(0);
+
+  const MAX = 100;
+  const MIN = 0;
+
+  const handleScroll = useCallback(() => {
+    const currY = Math.floor(window.scrollY);
+    const diff = currY - prevY;
+
+    // map the scroll difference to the range [MIN, MAX]
+    const mapped = Math.floor((diff / 100) * 100);
+    // update the value within the range [MIN, MAX]
+
+    setVal((prev) => {
+      const nextVal = Math.floor(prev + mapped);
+
+      if (nextVal >= MAX) {
+        return MAX;
+      }
+
+      if (nextVal <= MIN) {
+        return MIN;
+      }
+
+      return nextVal;
+    });
+    setPrevY(currY);
+  }, [prevY]);
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+
+  return val;
+};
+
+export default useScrollTranslation;