From 77c67168ad1f89309f19b63df5267e02df335a7f Mon Sep 17 00:00:00 2001
From: adam-skowronek <adasko8@st.amu.edu.pl>
Date: Thu, 9 Jun 2022 23:59:07 +0200
Subject: [PATCH] Add routes prop in TopBar

---
 frontend/src/components/TopBar.tsx            | 16 +++++-------
 .../src/views/coordinator/Coordinator.tsx     | 26 ++++++++++++-------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/TopBar.tsx b/frontend/src/components/TopBar.tsx
index 779e2ad..65f9f0c 100644
--- a/frontend/src/components/TopBar.tsx
+++ b/frontend/src/components/TopBar.tsx
@@ -1,21 +1,17 @@
 import { NavLink } from 'react-router-dom'
 
-const TopBar = () => {
+const TopBar = ({ routes }: { routes: { name: string; path: string }[] }) => {
   const linkClass = ({ isActive }: { isActive: boolean }) =>
     isActive ? 'underline font-bold' : ''
   return (
     <div className="flex items-center bg-gray-300 py-6 px-10 shadow">
       <h1 className="text-xl font-bold">System PRI</h1>
       <div className="flex ml-10 gap-3">
-        <NavLink className={linkClass} to="/coordinator/groups">
-          Grupy
-        </NavLink>
-        <NavLink className={linkClass} to="/coordinator/students">
-          Studenci
-        </NavLink>
-        <NavLink className={linkClass} to="/coordinator/leaders">
-          Opiekunowie
-        </NavLink>
+        {routes.map(({ path, name }) => (
+          <NavLink key={path} className={linkClass} to={path}>
+            {name}
+          </NavLink>
+        ))}
       </div>
     </div>
   )
diff --git a/frontend/src/views/coordinator/Coordinator.tsx b/frontend/src/views/coordinator/Coordinator.tsx
index 91bb25e..0ae7e00 100644
--- a/frontend/src/views/coordinator/Coordinator.tsx
+++ b/frontend/src/views/coordinator/Coordinator.tsx
@@ -1,23 +1,29 @@
-import { useEffect } from "react";
-import { Outlet, useNavigate } from "react-router-dom";
-import TopBar from "../../components/TopBar";
+import { useEffect } from 'react'
+import { Outlet, useNavigate } from 'react-router-dom'
+import TopBar from '../../components/TopBar'
 
 const Coordinator = () => {
-  const navigate = useNavigate();
+  const navigate = useNavigate()
 
   useEffect(() => {
-    navigate("/coordinator/students");
+    navigate('/coordinator/students')
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [])
 
   return (
     <>
-      <TopBar />
+      <TopBar
+        routes={[
+          { name: 'Grupy', path: '/coordinator/groups' },
+          { name: 'Studenci', path: '/coordinator/students' },
+          { name: 'Opiekunowie', path: '/coordinator/leaders' },
+        ]}
+      />
       <div className="m-10">
         <Outlet />
       </div>
     </>
-  );
-};
+  )
+}
 
-export default Coordinator;
+export default Coordinator