From 5c897f4ffb0a1cadc4074e7f3b6a471898c5e48c Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 25 Mar 2021 13:17:11 +0100
Subject: [PATCH] Fix invalid tab selection console error

---
 webui/src/components/Header/Header.tsx | 30 +++++++++++++++-----------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 3064f6e458d8a0ac3ebad6ae83ab52aaf22b2d33..864b2c398f3e26e3c60512038ddf2f6c3835f659 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -67,14 +67,23 @@ const DisabledTabWithTooltip = (props: TabProps) => {
 function Header() {
   const classes = useStyles();
   const location = useLocation();
-  const [selectedTab, setTab] = React.useState(location.pathname);
 
-  const handleTabClick = (
-    event: React.ChangeEvent<{}>,
-    newTabValue: string
-  ) => {
-    setTab(newTabValue);
-  };
+  // Prevents error of invalid tab selection in <Tabs>
+  function highlightTab() {
+    switch (location.pathname) {
+      case '/':
+        return '/';
+      case '/code':
+        return '/code';
+      case '/pulls':
+        return '/pulls';
+      case '/settings':
+        return '/settings';
+      default:
+        // using false as value for tabs will result in no selected tab
+        return false;
+    }
+  }
 
   return (
     <>
@@ -92,12 +101,7 @@ function Header() {
         </Toolbar>
       </AppBar>
       <div className={classes.offset} />
-      <Tabs
-        centered
-        value={selectedTab}
-        onChange={handleTabClick}
-        aria-label="nav tabs"
-      >
+      <Tabs centered value={highlightTab()} aria-label="nav tabs">
         <DisabledTabWithTooltip label="Code" value="/code" {...a11yProps(1)} />
         <Tab label="Bugs" value="/" component={Link} to="/" {...a11yProps(2)} />
         <DisabledTabWithTooltip