feat(#20): refactor and fix small things in tree table

- disable back/forward button when there is no more data to show
- separate the filter button in a const
- fix end index that is show

closes #20

dashboard/src/components/TreeMonitorListingPage/TreeMonitorListingPage.tsx

@@ -44,17 +44,28 @@ const TableInfo = ({
         <MdExpandMore className={buttonsClassName}/>
       </div>
       <div className="flex flex-row gap-2 items-center">
-        <Button variant="outline" onClick={onClickBack}>
+        <Button variant="outline" onClick={onClickBack} disabled={startIndex === 1}>
           <MdArrowBackIos className={buttonsClassName}/>    
         </Button>
-        <Button variant="outline" onClick={onClickForward}>
+        <Button variant="outline" onClick={onClickForward} disabled={endIndex === totalTrees}>
           <MdArrowForwardIos className={buttonsClassName}/>
         </Button>
       </div>
     </div>
   );
 };
 
+const FilterButton = (): JSX.Element => {
+  return(
+    <Button variant="outline" className="rounded-full w-[128px] border-black">
+      <div className="flex flex-row gap-1 items-center">
+        <FormattedMessage id="global.filters" />
+        <MdExpandMore />
+      </div>
+    </Button>
+  );
+};
+
 const TreeMonitorListingPage = (): JSX.Element => {
 
   const { data } = useTreeTable();
@@ -71,7 +82,11 @@ const TreeMonitorListingPage = (): JSX.Element => {
 
   const itemsPerPage = 10;
   const [startIndex, setStartIndex] = useState(0);
-  const [endIndex, setEndIndex] = useState(listItems.length+1 > itemsPerPage ? itemsPerPage : listItems.length+1);
+  const [endIndex, setEndIndex] = useState(0);
+
+  useEffect(() => {
+    setEndIndex(listItems.length > itemsPerPage ? itemsPerPage : listItems.length);
+  }, [listItems]);
 
   const onClickGoForward = useCallback(() => {
     setStartIndex(endIndex);
@@ -86,12 +101,7 @@ const TreeMonitorListingPage = (): JSX.Element => {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-col items-end gap-4">
-      <Button variant="outline" className="rounded-full w-[128px] border-black">
-        <div className="flex flex-row gap-1 items-center">
-          <FormattedMessage id="global.filters" />
-          <MdExpandMore />
-        </div>
-      </Button>
+      <FilterButton />
       <TableInfo 
         startIndex={startIndex+1}
         endIndex={endIndex}