polynux
/
groupomania
mirror of https://github.com/polynux/groupomania-openclassrooms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

scroll to bottom on load

This commit is contained in:
Guillaume Dorce 2022-10-06 16:42:05 +02:00
parent 30dce9faf4
commit ee6b78afff
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/MessageWrapper.tsx
View File

@ -14,6 +14,10 @@ const MessageWrapper = () => {
toastError(error as string); toastError(error as string);
}, },
}); });
if (isLoading || isError) {
return null;
}
return ( return (
<main className="messages-wrapper rounded-md w-full max-w-3xl flex flex-col max-h-[83vh] relative"> <main className="messages-wrapper rounded-md w-full max-w-3xl flex flex-col max-h-[83vh] relative">

10
client/src/components/ScrollToBottom.tsx
View File

@ -1,8 +1,12 @@
import { ReactNode, useRef } from 'react'; import { ReactNode, useCallback, useState } from 'react';
import { FaChevronDown } from 'react-icons/fa'; import { FaChevronDown } from 'react-icons/fa';
const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; className?: string }) => { const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; className?: string }) => {
const bottom = useRef<HTMLDivElement>(null); const [node, setNode] = useState<HTMLDivElement | null>(null);
const bottom = useCallback((node: HTMLDivElement) => {
node.scrollIntoView({ behavior: 'smooth' });
setNode(node);
}, []);
return ( return (
<> <>
@ -11,7 +15,7 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
<div className="scroll-bottom" ref={bottom}></div> <div className="scroll-bottom" ref={bottom}></div>
</div> </div>
<button <button
onClick={() => bottom?.current?.scrollIntoView({ behavior: 'smooth' })} onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
className="absolute right-3 bottom-3" className="absolute right-3 bottom-3"
> >
<div className="popup-btn cursor-pointer rounded-full bg-grey-dark hover:bg-grey-light transition-all"> <div className="popup-btn cursor-pointer rounded-full bg-grey-dark hover:bg-grey-light transition-all">