From 6e01331ef4bb6cce1829c5c2f32d3fc8f2103fcd Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Thu, 6 Oct 2022 17:05:55 +0200
Subject: [PATCH] animate scroll button

---
 client/src/components/ScrollToBottom.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ScrollToBottom.tsx b/client/src/components/ScrollToBottom.tsx
index 8e5f138..60bb13d 100644
--- a/client/src/components/ScrollToBottom.tsx
+++ b/client/src/components/ScrollToBottom.tsx
@@ -1,12 +1,27 @@
-import { ReactNode, useCallback, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { FaChevronDown } from 'react-icons/fa';
 
 const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; className?: string }) => {
   const [node, setNode] = useState<HTMLDivElement | null>(null);
+  const [show, setShow] = useState(false);
+  
   const bottom = useCallback((node: HTMLDivElement) => {
+    if (node) {
       node.scrollIntoView({ behavior: 'smooth' });
       setNode(node);
+    }
   }, []);
+  
+  useEffect(() => {
+    document.querySelector('main > div')?.addEventListener('scroll', () => {
+      if (node?.getBoundingClientRect() && node.getBoundingClientRect().y >= window.innerHeight) {
+        setShow(true);
+      } else {
+        setShow(false);
+      }
+    });
+  }, [node]);
+      
 
   return (
     <>
@@ -16,7 +31,7 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
       </div>
       <button
         onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
-        className="absolute right-3 bottom-3"
+        className={"absolute right-3 transition-all" + (show ? ' bottom-3' : ' -bottom-10')}
       >
           <div className="popup-btn cursor-pointer rounded-full bg-grey-dark hover:bg-grey-light transition-all">
             <FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />