mate-academy · modeltoIT · Oct 9, 2024 · Oct 9, 2024
diff --git a/README.md b/README.md
@@ -32,5 +32,5 @@ or [React Tabs](https://github.com/mate-academy/react_tabs#react-tabs).
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
 - Open one more terminal and run tests with `npm test` to ensure your solution is correct.
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_tabs-with-router/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://modeltoIT.github.io/react_tabs-with-router/) and add it to the PR description.
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
-    "bulma": "^1.0.1",
+    "bulma": "^0.9.4",
     "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,56 +1,37 @@
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
+import { NavLink, Outlet } from 'react-router-dom';
+import React from 'react';
+import classNames from 'classnames';
 
-// 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 activeLinkClasses = ({ isActive }: { isActive: React.ReactNode }) =>
+  classNames('navbar-item', { 'is-active': isActive });
 
-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>
-
-        <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>
+export const App = () => {
+  return (
+    <>
+      <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={activeLinkClasses}>
+              Home
+            </NavLink>
+            <NavLink to="/tabs" className={activeLinkClasses}>
+              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/api/tabs.tsx b/src/api/tabs.tsx
@@ -0,0 +1,5 @@
+export 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' },
+];
diff --git a/src/components/Loader/TabList.tsx b/src/components/Loader/TabList.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import classNames from 'classnames';
+import { Tab } from '../../types/Tab';
+
+interface Props {
+  id: string;
+  title: string;
+  selectedTab: Tab | null;
+}
+
+export const TabList: React.FC<Props> = ({ id, title, selectedTab }) => {
+  return (
+    <li
+      data-cy="Tab"
+      className={classNames({ 'is-active': selectedTab?.id === id })}
+    >
+      <Link to={`/tabs/${id}`}>{title}</Link>
+    </li>
+  );
+};
diff --git a/src/components/pages/HomePage.tsx b/src/components/pages/HomePage.tsx
@@ -0,0 +1,11 @@
+import { Navigate, useParams } from 'react-router-dom';
+
+export const HomePage = () => {
+  const { home } = useParams();
+
+  if (home === 'home') {
+    return <Navigate to=".." />;
+  }
+
+  return <h1 className="title">Home page</h1>;
+};
diff --git a/src/components/pages/PageNotFound.tsx b/src/components/pages/PageNotFound.tsx
@@ -0,0 +1,5 @@
+const PageNotFound = () => {
+  return <h1 className="title">Page not found</h1>;
+};
+
+export default PageNotFound;
diff --git a/src/components/pages/TabsPage.tsx b/src/components/pages/TabsPage.tsx
@@ -0,0 +1,26 @@
+import { TabList } from '../Loader/TabList';
+import { tabs } from '../../api/tabs';
+import { useParams } from 'react-router-dom';
+import { Tab } from '../../types/Tab';
+
+export const TabsPage = () => {
+  const { tabId } = useParams();
+  const selectedTab: Tab | null = tabs.find(t => t.id === tabId) || null;
+  const tabContent = selectedTab?.content || 'Please select a tab';
+
+  return (
+    <>
+      <h1 className="title">Tabs page</h1>
+      <div className="tabs is-boxed">
+        <ul>
+          {tabs.map(({ id, title }) => (
+            <TabList key={id} id={id} title={title} selectedTab={selectedTab} />
+          ))}
+        </ul>
+      </div>
+      <div className="block" data-cy="TabContent">
+        {tabContent}
+      </div>
+    </>
+  );
+};
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,9 +1,21 @@
 import { createRoot } from 'react-dom/client';
-import { HashRouter } from 'react-router-dom';
+import { HashRouter, Route, Routes } from 'react-router-dom';
 import { App } from './App';
+import PageNotFound from './components/pages/PageNotFound';
+import { HomePage } from './components/pages/HomePage';
+import { TabsPage } from './components/pages/TabsPage';
 
 createRoot(document.getElementById('root') as HTMLElement).render(
   <HashRouter>
-    <App />
+    <Routes>
+      <Route element={<App />}>
+        <Route path="/:home?" element={<HomePage />} />
+        <Route path="/tabs">
+          <Route index element={<TabsPage />} />
+          <Route path=":tabId" element={<TabsPage />} />
+        </Route>
+        <Route path="*" element={<PageNotFound />} />
+      </Route>
+    </Routes>
   </HashRouter>,
 );