Fix invalid tab selection console error

1 files changed, 17 insertions, 13 deletions

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 3064f6e4..864b2c39 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