react-sidebar-v1-master

package-lock.json

@@ -18,6 +18,8 @@
         "natural-orderby": "^3.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.7.1",
+        "react-router-dom": "^6.4.4",
         "react-scripts": "^5.0.1",
         "react-table": "^7.8.0",
         "typescript": "^4.9.3",
@@ -3028,6 +3030,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz",
+      "integrity": "sha512-gTL8H5USTAKOyVA4xczzDJnC3HMssdFa3tRlwBicXynx9XfiXwneHnYQogwSKpdCkjXISrEKSTtX62rLpNEVQg==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -13956,6 +13966,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -13969,6 +13987,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.4.tgz",
+      "integrity": "sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q==",
+      "dependencies": {
+        "@remix-run/router": "1.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4.tgz",
+      "integrity": "sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA==",
+      "dependencies": {
+        "@remix-run/router": "1.0.4",
+        "react-router": "6.4.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -18821,6 +18869,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz",
+      "integrity": "sha512-gTL8H5USTAKOyVA4xczzDJnC3HMssdFa3tRlwBicXynx9XfiXwneHnYQogwSKpdCkjXISrEKSTtX62rLpNEVQg=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -26594,6 +26647,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -26604,6 +26663,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.4.tgz",
+      "integrity": "sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q==",
+      "requires": {
+        "@remix-run/router": "1.0.4"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4.tgz",
+      "integrity": "sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA==",
+      "requires": {
+        "@remix-run/router": "1.0.4",
+        "react-router": "6.4.4"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -13,6 +13,8 @@
     "natural-orderby": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
+    "react-router-dom": "^6.4.4",
     "react-scripts": "^5.0.1",
     "react-table": "^7.8.0",
     "typescript": "^4.9.3",

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);
 
@@ -43,5 +43,3 @@ function Navbar()
     </>
   );
 }
-
-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}/>  
+    );
+}

thirdParty/react-sidebar-v1-master/src/components/Navbar.css

@@ -1,72 +0,0 @@
-.navbar {
-  background-color: #060b26;
-  height: 80px;
-  display: flex;
-  justify-content: start;
-  align-items: center;
-}
-
-.menu-bars {
-  margin-left: 2rem;
-  font-size: 2rem;
-  background: none;
-}
-
-.nav-menu {
-  background-color: #060b26;
-  width: 250px;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  position: fixed;
-  top: 0;
-  left: -100%;
-  transition: 850ms;
-}
-
-.nav-menu.active {
-  left: 0;
-  transition: 350ms;
-}
-
-.nav-text {
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  padding: 8px 0px 8px 16px;
-  list-style: none;
-  height: 60px;
-}
-
-.nav-text a {
-  text-decoration: none;
-  color: #f5f5f5;
-  font-size: 18px;
-  width: 95%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  border-radius: 4px;
-}
-
-.nav-text a:hover {
-  background-color: #1a83ff;
-}
-
-.nav-menu-items {
-  width: 100%;
-}
-
-.navbar-toggle {
-  background-color: #060b26;
-  width: 100%;
-  height: 80px;
-  display: flex;
-  justify-content: start;
-  align-items: center;
-}
-
-span {
-  margin-left: 16px;
-}

thirdParty/react-sidebar-v1-master/src/components/Navbar.js

@@ -1,46 +0,0 @@
-import React, { useState } from 'react';
-import * as FaIcons from 'react-icons/fa';
-import * as AiIcons from 'react-icons/ai';
-import { Link } from 'react-router-dom';
-import { SidebarData } from './SidebarData';
-import './Navbar.css';
-import { IconContext } from 'react-icons';
-
-function Navbar() {
-  const [sidebar, setSidebar] = useState(false);
-
-  const showSidebar = () => setSidebar(!sidebar);
-
-  return (
-    <>
-      <IconContext.Provider value={{ color: '#fff' }}>
-        <div className='navbar'>
-          <Link to='#' className='menu-bars'>
-            <FaIcons.FaBars onClick={showSidebar} />
-          </Link>
-        </div>
-        <nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
-          <ul className='nav-menu-items' onClick={showSidebar}>
-            <li className='navbar-toggle'>
-              <Link to='#' className='menu-bars'>
-                <AiIcons.AiOutlineClose />
-              </Link>
-            </li>
-            {SidebarData.map((item, index) => {
-              return (
-                <li key={index} className={item.cName}>
-                  <Link to={item.path}>
-                    {item.icon}
-                    <span>{item.title}</span>
-                  </Link>
-                </li>
-              );
-            })}
-          </ul>
-        </nav>
-      </IconContext.Provider>
-    </>
-  );
-}
-
-export default Navbar;

thirdParty/react-sidebar-v1-master/src/components/SidebarData.js

@@ -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'
-  }
-];

thirdParty/react-sidebar-v1-master/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;

thirdParty/react-sidebar-v1-master/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;

thirdParty/react-sidebar-v1-master/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;