Merge branch 'preview'

pdelfan · Jan 15, 2024 · 61e3480 · 61e3480
2 parents 001ef6e + 19fbe50
commit 61e3480
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 62 deletions.
diff --git 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
@@ -11,22 +11,26 @@ 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/")
       ? pathname.split("/")[3]
       : "";
   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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/src/lib/hooks/useScrollTranslation.tsx 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;