added home page routes and some tab stuff w/ burnettk

src/App.tsx

@@ -6,8 +6,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import ErrorContext from './contexts/ErrorContext';
 import NavigationBar from './components/NavigationBar';
 
-import HomePage from './routes/HomePage';
-import TaskShow from './routes/TaskShow';
+import HomePageRoutes from './routes/HomePageRoutes';
 import ErrorBoundary from './components/ErrorBoundary';
 import AdminRoutes from './routes/AdminRoutes';
 import { ErrorForDisplay } from './interfaces';
@@ -54,17 +53,9 @@ export default function App() {
             {errorTag}
             <ErrorBoundary>
               <Routes>
-                <Route path="/" element={<HomePage />} />
-                <Route path="/tasks" element={<HomePage />} />
+                <Route path="/" element={<HomePageRoutes />} />
+                <Route path="/tasks/*" element={<HomePageRoutes />} />
                 <Route path="/admin/*" element={<AdminRoutes />} />
-                <Route
-                  path="/tasks/:process_instance_id/:task_id"
-                  element={<TaskShow />}
-                />
-                <Route
-                  path="/tasks/:process_instance_id/:task_id"
-                  element={<TaskShow />}
-                />
               </Routes>
             </ErrorBoundary>
           </Content>

src/routes/HomePageRoutes.tsx

@@ -0,0 +1,45 @@
+import { useContext, useEffect, useState } from 'react';
+import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+// @ts-ignore
+import { Tabs, TabList, Tab } from '@carbon/react';
+import TaskShow from './TaskShow';
+import ErrorContext from '../contexts/ErrorContext';
+import MyTasks from './MyTasks';
+
+export default function HomePageRoutes() {
+  const location = useLocation();
+  const setErrorMessage = (useContext as any)(ErrorContext)[1];
+  const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setErrorMessage(null);
+  }, [location, setErrorMessage]);
+
+  // selectedIndex={selectedTabIndex}
+  // onChange={(event: any) => {
+  //   setSelectedTabIndex(event.selectedIndex);
+  // }}
+  return (
+    <>
+      <h1>HELO</h1>
+      <Tabs>
+        <TabList aria-label="List of tabs">
+          <Tab onClick={() => navigate('http://www.google.com')}>
+            Tab Label 1
+          </Tab>
+          <Tab>Tab Label 2</Tab>
+          <Tab disabled>Tab Label 3</Tab>
+          <Tab title="Tab Label 4 with a very long long title">
+            Tab Label 4 with a very long long title
+          </Tab>
+          <Tab>Tab Label 5</Tab>
+        </TabList>
+      </Tabs>
+      <Routes>
+        <Route path="/" element={<MyTasks />} />
+        <Route path=":process_instance_id/:task_id" element={<TaskShow />} />
+      </Routes>
+    </>
+  );
+}

src/routes/MyTasks.tsx

@@ -12,7 +12,7 @@ import { PaginationObject, RecentProcessModel } from '../interfaces';
 
 const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
 
-export default function HomePage() {
+export default function MyTasks() {
   const [searchParams] = useSearchParams();
   const [tasks, setTasks] = useState([]);
   const [pagination, setPagination] = useState<PaginationObject | null>(null);