From f23caa155178aa7cb896132e10b4b2ca908a96b5 Mon Sep 17 00:00:00 2001
From: M2K3K5 <63744077+M2K3K5@users.noreply.github.com>
Date: Thu, 26 Sep 2024 22:28:15 +0200
Subject: [PATCH 1/2] fix: update selected tab on the settings page based on
 URL path on page load

---
 .../src/components/ButtonsHeader/ButtonsHeader.tsx   | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/components/ButtonsHeader/ButtonsHeader.tsx b/apps/client/src/components/ButtonsHeader/ButtonsHeader.tsx
index 78f9d788..f1340d58 100644
--- a/apps/client/src/components/ButtonsHeader/ButtonsHeader.tsx
+++ b/apps/client/src/components/ButtonsHeader/ButtonsHeader.tsx
@@ -1,6 +1,6 @@
 import { Tab, Tabs } from "@mui/material";
-import { useCallback, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useCallback, useState, useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
 import Text from "../Text";
 import s from "./index.module.css";
 
@@ -15,8 +15,16 @@ interface ButtonsHeaderProps {
 
 export default function ButtonsHeader({ items }: ButtonsHeaderProps) {
   const navigate = useNavigate();
+  const location = useLocation(); 
   const [tab, setTab] = useState(0);
 
+  useEffect(() => {
+    const currentTab = items.findIndex(item => location.pathname.startsWith(item.url));
+    if (currentTab !== -1) {
+      setTab(currentTab);
+    }
+  }, [location.pathname, items]);
+
   const goto = useCallback(
     (value: number) => {
       const url = items[value];

From 77474db62724a20cf632d8fc9f8a05bc841b080d Mon Sep 17 00:00:00 2001
From: Timothee Boussus <timothee.boussus@gmail.com>
Date: Sun, 24 Nov 2024 14:07:07 +0100
Subject: [PATCH 2/2] buttons header value based on url instead of state

---
 .../components/ButtonsHeader/ButtonsHeader.tsx  | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/components/ButtonsHeader/ButtonsHeader.tsx b/apps/client/src/components/ButtonsHeader/ButtonsHeader.tsx
index f1340d58..d3acde33 100644
--- a/apps/client/src/components/ButtonsHeader/ButtonsHeader.tsx
+++ b/apps/client/src/components/ButtonsHeader/ButtonsHeader.tsx
@@ -1,5 +1,5 @@
 import { Tab, Tabs } from "@mui/material";
-import { useCallback, useState, useEffect } from "react";
+import { useCallback, useMemo } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import Text from "../Text";
 import s from "./index.module.css";
@@ -15,15 +15,17 @@ interface ButtonsHeaderProps {
 
 export default function ButtonsHeader({ items }: ButtonsHeaderProps) {
   const navigate = useNavigate();
-  const location = useLocation(); 
-  const [tab, setTab] = useState(0);
+  const location = useLocation();
 
-  useEffect(() => {
-    const currentTab = items.findIndex(item => location.pathname.startsWith(item.url));
+  const tab = useMemo(() => {
+    const currentTab = items.findIndex(item =>
+      location.pathname.startsWith(item.url),
+    );
     if (currentTab !== -1) {
-      setTab(currentTab);
+      return currentTab;
     }
-  }, [location.pathname, items]);
+    return items[0];
+  }, [items, location.pathname]);
 
   const goto = useCallback(
     (value: number) => {
@@ -32,7 +34,6 @@ export default function ButtonsHeader({ items }: ButtonsHeaderProps) {
         return;
       }
       navigate(url.url);
-      setTab(value);
     },
     [items, navigate],
   );