mate-academy · tania-kuzmenko · Nov 28, 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://tania-kuzmenko.github.io/react_tabs-with-router/) and add it to the PR description.
 
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,55 +1,15 @@
 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' },
-// ];
+import { Navbar } from './components/Navbar';
+import { Outlet } from 'react-router-dom';
 
 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>
-
+    <Navbar />
     <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>
-        </div>
-
-        <div className="block" data-cy="TabContent">
-          Please select a tab
-        </div>
+        <Outlet />
       </div>
     </div>
   </>

diff --git a/src/Root.tsx b/src/Root.tsx
@@ -0,0 +1,28 @@
+import {
+  HashRouter as Router,
+  Route,
+  Routes,
+  Navigate,
+} from 'react-router-dom';
+import { TabProvider } from './components/TabContext';
+import { TabsPage } from './components/TabsPage';
+import { PageNotFount } from './components/PageNotFound';
+import { App } from './App';
+import { HomePage } from './components/HomePage';
+
+export const Root = () => {
+  return (
+    <Router>
+      <TabProvider>
+        <Routes>
+          <Route path="/" element={<App />}>
+            <Route path="home" element={<Navigate to="/" replace />} />
+            <Route index element={<HomePage />} />
+            <Route path="tabs/:tabId?" element={<TabsPage />} />
+            <Route path="*" element={<PageNotFount />} />
+          </Route>
+        </Routes>
+      </TabProvider>
+    </Router>
+  );
+};
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
@@ -0,0 +1,3 @@
+export const HomePage = () => {
+  return <h1 className="title">Home page</h1>;
+};
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -0,0 +1,20 @@
+import { NavLink } from 'react-router-dom';
+import { getLinkClass } from '../services/services';
+
+export const Navbar = () => (
+  <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>
+);
diff --git a/src/components/PageNotFound.tsx b/src/components/PageNotFound.tsx
@@ -0,0 +1,3 @@
+export const PageNotFount = () => {
+  return <h1 className="title">Page not found</h1>;
+};
diff --git a/src/components/TabContext.tsx b/src/components/TabContext.tsx
@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+import { Tab } from '../types/Tab';
+
+type TabContextType = {
+  tabs: Tab[];
+};
+
+export const TabContext = React.createContext<TabContextType | undefined>(
+  undefined,
+);
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const TabProvider: React.FC<Props> = ({ children }) => {
+  const tabs: Tab[] = [
+    { 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 value = { tabs };
+
+  return <TabContext.Provider value={value}>{children}</TabContext.Provider>;
+};
+
+export const useTabContext = () => {
+  const context = useContext(TabContext);
+
+  if (!context) {
+    throw new Error('useTodoContext must be used within a TodoProvider');
+  }
+
+  return context;
+};
diff --git a/src/components/TabPage.tsx b/src/components/TabPage.tsx
@@ -0,0 +1,20 @@
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+import { Tab } from '../types/Tab';
+
+type Props = {
+  tab: Tab;
+  selectedTab?: Tab;
+};
+
+export const TabPage: React.FC<Props> = ({ tab, selectedTab }) => (
+  <li
+    key={tab.id}
+    data-cy="Tab"
+    className={classNames({
+      'is-active': selectedTab?.id === tab.id,
+    })}
+  >
+    <Link to={`/tabs/${tab.id}`}>{tab.title}</Link>
+  </li>
+);
diff --git a/src/components/TabsList.tsx b/src/components/TabsList.tsx
@@ -0,0 +1,28 @@
+import { useParams } from 'react-router-dom';
+import { useTabContext } from './TabContext';
+import { TabPage } from './TabPage';
+
+type Props = {};
+
+export const TabsList: React.FC<Props> = () => {
+  const { tabs } = useTabContext();
+  const { tabId } = useParams();
+  const selectedTab = tabs.find(tab => tab.id === tabId);
+  const defaultContent = 'Please select a tab';
+
+  return (
+    <>
+      <div className="tabs is-boxed">
+        <ul>
+          {tabs.map(tab => (
+            <TabPage key={tab.id} tab={tab} selectedTab={selectedTab} />
+          ))}
+        </ul>
+      </div>
+
+      <div className="block" data-cy="TabContent">
+        {selectedTab?.content || defaultContent}
+      </div>
+    </>
+  );
+};
diff --git a/src/components/TabsPage.tsx b/src/components/TabsPage.tsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'react-router-dom';
+import { TabsList } from './TabsList';
+
+export const TabsPage = () => (
+  <>
+    <h1 className="title">Tabs page</h1>
+    <TabsList />
+    <Outlet />
+  </>
+);
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,9 +1,6 @@
 import { createRoot } from 'react-dom/client';
-import { HashRouter } from 'react-router-dom';
-import { App } from './App';
+import { Root } from './Root';
 
-createRoot(document.getElementById('root') as HTMLElement).render(
-  <HashRouter>
-    <App />
-  </HashRouter>,
-);
+const container = document.getElementById('root') as HTMLElement;
+
+createRoot(container).render(<Root />);
diff --git a/src/services/services.ts b/src/services/services.ts
@@ -0,0 +1,4 @@
+import classNames from 'classnames';
+
+export const getLinkClass = ({ isActive }: { isActive: boolean }) =>
+  classNames('navbar-item', { 'is-active': isActive });