react-sidebar-v1-master

src/App.css

@@ -37,6 +37,26 @@
   }
 }
 
+@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'Lato', sans-serif;
+}
+
+.home,
+.flights,
+.seasons {
+  display: flex;
+  height: 90vh;
+  align-items: center;
+  justify-content: center;
+  font-size: 3rem;
+}
+
+
 .sort-button {
   background-color: transparent;
   border: none;

src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.tsx

@@ -1,34 +1,25 @@
 import React from "react";
 import "./App.css";
-import FlightsTable from "./components/FlightsTable";
-import SeasonTable from "./components/SeasonTable";
-import {groupByMap} from './global/tools';
-import flights from './data/HoPe_all_flights.json';
-import {CFlight} from './classes/CFlight';
-import {CSeason} from './classes/CSeason';
+import Navbar from './components/Navbar';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Home from './pages/Home';
+import Flights from './pages/Flights';
+import Seasons from './pages/Seasons';
 
-const data_raw = flights.data;
-const data: CFlight[] = [];
-const seasondata: CSeason[] = [];
 
-for (let fl of data_raw) 
-{
-  data.push(new CFlight(fl));
-}
-
-const seasondata_raw = groupByMap(data, i => i.FKSeason);
-
-for (let [key, value] of seasondata_raw) 
-{
-  seasondata.push(new CSeason(key, value));
-}
 
 export default function App() 
 {
   return(
-<div className='App'>
-  <SeasonTable seasondata = {seasondata} />
-  <FlightsTable flightdata = {data}/>
-</div>
+    <>
+      <Router>
+        <Navbar />
+        <Routes>
+          <Route path='/'  element={<Home/>} />
+          <Route path='/flights' element={<Flights/>} />
+          <Route path='/seasons' element={<Seasons/>} />
+        </Routes>
+      </Router>
+    </>
   );
 }

src/components/Data.tsx

@@ -0,0 +1,20 @@
+import flights from '../data/HoPe_all_flights.json';
+import {CFlight} from '../classes/CFlight';
+import {CSeason} from '../classes/CSeason';
+import {groupByMap} from '../global/tools';
+
+const data_raw = flights.data;
+export const g_data: CFlight[] = [];
+export const g_seasondata: CSeason[] = [];
+
+for (let fl of data_raw) 
+{
+  g_data.push(new CFlight(fl));
+}
+
+const seasondata_raw = groupByMap(g_data, i => i.FKSeason);
+
+for (let [key, value] of seasondata_raw) 
+{
+  g_seasondata.push(new CSeason(key, value));
+}

src/components/Navbar.tsx

@@ -6,7 +6,7 @@ import { SidebarData } from './SidebarData';
 import './Navbar.css';
 import { IconContext } from 'react-icons';
 
-function Navbar() 
+export default function Navbar() 
 {
   const [sidebar, setSidebar] = useState(false);
 
@@ -42,6 +42,4 @@ function Navbar()
       </IconContext.Provider>
     </>
   );
-}
-
-export default Navbar;
+}

src/components/SidebarData.ts

@@ -1,43 +0,0 @@
-import React from 'react';
-import * as FaIcons from 'react-icons/fa';
-import * as AiIcons from 'react-icons/ai';
-import * as IoIcons from 'react-icons/io';
-
-export const SidebarData = [
-  {
-    title: 'Home',
-    path: '/',
-    icon: <AiIcons.AiFillHome />,
-    cName: 'nav-text'
-  },
-  {
-    title: 'Reports',
-    path: '/reports',
-    icon: <IoIcons.IoIosPaper />,
-    cName: 'nav-text'
-  },
-  {
-    title: 'Products',
-    path: '/products',
-    icon: <FaIcons.FaCartPlus />,
-    cName: 'nav-text'
-  },
-  {
-    title: 'Team',
-    path: '/team',
-    icon: <IoIcons.IoMdPeople />,
-    cName: 'nav-text'
-  },
-  {
-    title: 'Messages',
-    path: '/messages',
-    icon: <FaIcons.FaEnvelopeOpenText />,
-    cName: 'nav-text'
-  },
-  {
-    title: 'Support',
-    path: '/support',
-    icon: <IoIcons.IoMdHelpCircle />,
-    cName: 'nav-text'
-  }
-];

src/components/SidebarData.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import * as FaIcons from 'react-icons/fa';
+import * as AiIcons from 'react-icons/ai';
+import * as IoIcons from 'react-icons/io';
+
+export const SidebarData = [
+  {
+    title: 'Home',
+    path: '/',
+    icon: <AiIcons.AiFillHome />,
+    cName: 'nav-text'
+  },
+  {
+    title: 'Flights',
+    path: '/flights',
+    icon: <IoIcons.IoIosPaper />,
+    cName: 'nav-text'
+  },
+  {
+    title: 'Seasons',
+    path: '/seasons',
+    icon: <FaIcons.FaCartPlus />,
+    cName: 'nav-text'
+  }
+];

src/pages/Flights.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import {g_data} from '../components/Data';
+import FlightsTable from "../components/FlightsTable";
+
+export default function Flights() {
+  return (
+    <FlightsTable flightdata = {g_data}/>
+    );
+}

src/pages/Home.js

@@ -1,11 +0,0 @@
-import React from 'react';
-
-function Home() {
-  return (
-    <div className='home'>
-      <h1>Home</h1>
-    </div>
-  );
-}
-
-export default Home;

src/pages/Home.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Home() {
+  return (
+    <div>
+      <h1>HOME</h1>
+    </div>
+  );
+}

src/pages/Products.js

@@ -1,11 +0,0 @@
-import React from 'react';
-
-function Products() {
-  return (
-    <div className='products'>
-      <h1>Products</h1>
-    </div>
-  );
-}
-
-export default Products;

src/pages/Reports.js

@@ -1,11 +0,0 @@
-import React from 'react';
-
-function Reports() {
-  return (
-    <div className='reports'>
-      <h1>Reports</h1>
-    </div>
-  );
-}
-
-export default Reports;

src/pages/Seasons.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {g_seasondata} from '../components/Data';
+import SeasonTable from "../components/SeasonTable";
+
+export default function Seasons() {
+  return (
+    <SeasonTable seasondata = {g_seasondata}/>  
+    );
+}