tabs with router

mate-academy · Aug 24, 2023 · ac19673 · ac19673
1 parent 6515c4e
commit ac19673
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 48 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,52 +1,52 @@
+import classNames from 'classnames';
+
+import {
+  NavLink,
+  Outlet,
+} from 'react-router-dom';
+
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
 
-// const tabs = [
-//   { id: 'tab-1', title: 'Tab 1', content: 'Some text 1' },
-//   { id: 'tab-2', title: 'Tab 2', content: 'Some text 2' },
-//   { id: 'tab-3', title: 'Tab 3', content: 'Some text 3' },
-// ];
-
-export const App = () => (
-  <>
-    {/* Also requires <html class="has-navbar-fixed-top"> */}
-    <nav
-      className="navbar is-light is-fixed-top is-mobile has-shadow"
-      data-cy="Nav"
-    >
-      <div className="container">
-        <div className="navbar-brand">
-          <a href="/" className="navbar-item is-active">Home</a>
-          <a href="/tabs" className="navbar-item">Tabs</a>
-        </div>
-      </div>
-    </nav>
-
-    <div className="section">
-      <div className="container">
-        <h1 className="title">Home page</h1>
-        <h1 className="title">Tabs page</h1>
-        <h1 className="title">Page not found</h1>
+export const App = () => {
+  const getLinkClass = ({ isActive }: { isActive: boolean }) => {
+    return classNames(
+      'navbar-item',
+      { 'is-active': isActive },
+    );
+  };
 
-        <div className="tabs is-boxed">
-          <ul>
-            <li data-cy="Tab" className="is-active">
-              <a href="#/">Tab 1</a>
-            </li>
-            <li data-cy="Tab">
-              <a href="#/">Tab 2</a>
-            </li>
-            <li data-cy="Tab">
-              <a href="#/">Tab 3</a>
-            </li>
-          </ul>
+  return (
+    // <html className="has-navbar-fixed-top" />
+    <>
+      <nav
+        className="navbar is-light is-fixed-top is-mobile has-shadow"
+        data-cy="Nav"
+      >
+        <div className="container">
+          <div className="navbar-brand">
+            <NavLink
+              to="/"
+              className={getLinkClass}
+            >
+              Home
+            </NavLink>
+            <NavLink
+              to="/tabs"
+              className={getLinkClass}
+            >
+              Tabs
+            </NavLink>
+          </div>
         </div>
+      </nav>
 
-        <div className="block" data-cy="TabContent">
-          Please select a tab
+      <div className="section">
+        <div className="container">
+          <Outlet />
         </div>
       </div>
-    </div>
-  </>
-);
+    </>
+  );
+};
diff --git a/src/Root.tsx b/src/Root.tsx
@@ -0,0 +1,28 @@
+import {
+  HashRouter as Router,
+  Navigate,
+  Route,
+  Routes,
+} from 'react-router-dom';
+import { App } from './App';
+import { Home } from './pages/Home';
+import { Tabs } from './pages/Tabs';
+import { ErrorPage } from './pages/Error';
+
+export const Root = () => {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/home" element={<Navigate to="/" />} />
+        <Route element={<App />}>
+          <Route index element={<Home />} />
+          <Route path="tabs">
+            <Route index element={<Tabs />} />
+            <Route path=":tabId" element={<Tabs />} />
+          </Route>
+          <Route path="*" element={<ErrorPage />} />
+        </Route>
+      </Routes>
+    </Router>
+  );
+};
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,10 +1,7 @@
 import ReactDOM from 'react-dom';
-import { HashRouter } from 'react-router-dom';
-import { App } from './App';
+import { Root } from './Root';
 
 ReactDOM.render(
-  <HashRouter>
-    <App />
-  </HashRouter>,
+  <Root />,
   document.getElementById('root'),
 );
diff --git a/src/pages/Error.tsx b/src/pages/Error.tsx
@@ -0,0 +1,3 @@
+export const ErrorPage = () => (
+  <h1 className="title">Page not found</h1>
+);
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -0,0 +1,7 @@
+export const Home = () => {
+  return (
+
+    <h1 className="title">Home page</h1>
+
+  );
+};
diff --git a/src/pages/Tabs.tsx b/src/pages/Tabs.tsx
@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import { Link, useParams } from 'react-router-dom';
+
+export const Tabs = () => {
+  const tabs = [
+    { id: 'tab-1', title: 'Tab 1', content: 'Some text 1' },
+    { id: 'tab-2', title: 'Tab 2', content: 'Some text 2' },
+    { id: 'tab-3', title: 'Tab 3', content: 'Some text 3' },
+  ];
+
+  const { tabId } = useParams();
+  const selectedTab = tabs.find(tab => tab.id === tabId);
+
+  const tabContent = selectedTab
+    ? selectedTab.content
+    : 'Please select a tab';
+
+  return (
+    <>
+      <h1 className="title">Tabs page</h1>
+      <div className="tabs is-boxed">
+        <ul>
+          {tabs.map(({ id, title }) => {
+            return (
+              <li
+                data-cy="Tab"
+                key={id}
+                className={classNames({ 'is-active': tabId === id })}
+              >
+                <Link to={`/tabs/${id}`}>
+                  {title}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+      <div className="block" data-cy="TabContent">
+        {tabContent}
+      </div>
+    </>
+  );
+};