fix: disable go buttons when impossible to do so

Signed-off-by: rare-magma <[email protected]>

src/components/NavBar/NavBar.css

@@ -15,6 +15,12 @@
   color: var(--lightbgcolor);
 }
 
+.btn-go-button:disabled {
+  background-color: var(--lightbgcolor);
+  border: 1px solid var(--comment);
+  color: var(--comment);
+}
+
 .btn-outline-danger {
   background-color: var(--lightbgcolor);
   border: 1px solid var(--comment);

src/components/NavBar/NavBar.tsx

@@ -49,7 +49,8 @@ export function NavBar() {
   const [theme, setTheme] = useState("light");
   const [invalidName, setInvalidName] = useState(false);
 
-  const { select, goBack, goForward, goHome } = useMove();
+  const { select, goBack, canGoBack, goForward, canGoForward, goHome } =
+    useMove();
   const {
     options,
     createBudget,
@@ -172,6 +173,7 @@ export function NavBar() {
                   <NavBarItem
                     itemClassName={"me-1 my-2"}
                     onClick={goBack}
+                    disabled={!canGoBack}
                     tooltipID={"tooltip-go-to-older-budget"}
                     tooltipText={"go to older budget"}
                     buttonAriaLabel={"go to older budget"}
@@ -181,6 +183,7 @@ export function NavBar() {
                   <NavBarItem
                     itemClassName={"m-2"}
                     onClick={goForward}
+                    disabled={!canGoForward}
                     tooltipID={"tooltip-go-to-newer-budget"}
                     tooltipText={"go to newer budget"}
                     buttonAriaLabel={"go to newer budget"}

src/hooks/useMove.ts

@@ -57,10 +57,26 @@ export function useMove() {
     budgetList && handleGo(1, budgetList.length - 1);
   }
 
+  function checkCanGo(position: number): boolean {
+    const sortedList = budgetList?.sort((a, b) => a.name.localeCompare(b.name));
+    if (budget) {
+      const index = sortedList?.findIndex((b) => b.name.includes(budget.name));
+      if (index !== position) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  const canGoBack = checkCanGo(0);
+  const canGoForward = budgetList && checkCanGo(budgetList?.length - 1);
+
   return {
     select,
     goBack,
     goForward,
+    canGoBack,
+    canGoForward,
     goHome,
   };
 }