From 538ed5fd55b5ea1ce4010455722acbda6ea641f3 Mon Sep 17 00:00:00 2001
From: Mariana Sartorato <mariana.sartorato@profusion.mobi>
Date: Wed, 3 Jul 2024 16:03:31 -0300
Subject: [PATCH] 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
---
 .../TreeMonitorListingPage.tsx                | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/dashboard/src/components/TreeMonitorListingPage/TreeMonitorListingPage.tsx b/dashboard/src/components/TreeMonitorListingPage/TreeMonitorListingPage.tsx
index 513cc65..9a62198 100644
--- a/dashboard/src/components/TreeMonitorListingPage/TreeMonitorListingPage.tsx
+++ b/dashboard/src/components/TreeMonitorListingPage/TreeMonitorListingPage.tsx
@@ -44,10 +44,10 @@ 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>
@@ -55,6 +55,17 @@ const TableInfo = ({
   );
 };
 
+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}