From e21a1c15a2e4bf3e51cdd7a5671bbfee5837ef13 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Tue, 15 Jun 2021 19:20:04 +0530
Subject: Using react-router to switch pages

---
 src/components/App.js                 | 14 +++++++++++---
 src/components/Header/Header.js       |  7 +++----
 src/components/Menu/HomePageMenu.js   |  9 +++++----
 src/components/Menu/HomePageMenu.scss |  2 ++
 src/components/Pages/BillingPage.js   | 14 +++++++-------
 src/components/Pages/HomePage.scss    |  4 ++--
 6 files changed, 30 insertions(+), 20 deletions(-)

(limited to 'src/components')

diff --git a/src/components/App.js b/src/components/App.js
index 4e6157a..64057b8 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -7,17 +7,25 @@
 */
 
 import React from "react";
+import {BrowserRouter, Route, Switch} from "react-router-dom";
+
 import Header from "./Header/Header";
 import HomePage from "./Pages/HomePage";
+import BillingPage from "./Pages/BillingPage";
 
 const App = () => {
-  const showHeader = false;
   return (
     <>
-      {showHeader && <Header/>}
+      <BrowserRouter>
+        <Header/>
         <div className={"root-content"}>
-          <HomePage />
+          <Switch>
+            <Route exact path="/" component={HomePage}/>
+            <Route exact path="/BillingPage" component={BillingPage}/>
+            <Route path="/" render={() => <div>404</div>}/>
+          </Switch>
         </div>
+      </BrowserRouter>
     </>
   );
 }
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 5fb5104..a1bd097 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -7,6 +7,7 @@
 */
 
 import React from "react";
+import {Link} from "react-router-dom";
 import "./Header.scss";
 
 const Header = () => {
@@ -18,10 +19,8 @@ const Header = () => {
 			</div>
 			<div className={"navBar"}>
 				<nav>
-					<a href="https://nhentai.net">Link1</a>
-					<a href="https://youtube.com">Link2</a>
-					<a href="https://google.com">Link3</a>
-					<a href="https://github.com">Link4</a>
+          <Link to="/">Home</Link>
+          <Link to="/BillingPage">BillingPage</Link>
 				</nav>
 			</div>
 		</div>
diff --git a/src/components/Menu/HomePageMenu.js b/src/components/Menu/HomePageMenu.js
index 29295bb..92f2a8d 100644
--- a/src/components/Menu/HomePageMenu.js
+++ b/src/components/Menu/HomePageMenu.js
@@ -7,17 +7,18 @@
 */
 
 import React from "react";
+import {Link} from "react-router-dom";
 import "./HomePageMenu.scss";
 
 const HomePageMenu = () => {
 	return (
     <div className="HomePageMenu">
-      <span className="menuItem">
+      <Link className="menuItem" to="BillingPage">
         Create Invoice
-      </span>
-      <span className="menuItem">
+      </Link>
+      <Link className="menuItem" to="pepe">
         Don't Create Invoice
-      </span>
+      </Link>
     </div>
 	)
 }
diff --git a/src/components/Menu/HomePageMenu.scss b/src/components/Menu/HomePageMenu.scss
index e9497ad..bc46e08 100644
--- a/src/components/Menu/HomePageMenu.scss
+++ b/src/components/Menu/HomePageMenu.scss
@@ -11,7 +11,9 @@
 
 .HomePageMenu .menuItem {
   text-align: center;
+  text-decoration: none;
   font-size: $fontSize2;
+  color: $defFG;
 }
 
 .HomePageMenu .menuItem:hover {
diff --git a/src/components/Pages/BillingPage.js b/src/components/Pages/BillingPage.js
index cb9e74c..abb7b7d 100644
--- a/src/components/Pages/BillingPage.js
+++ b/src/components/Pages/BillingPage.js
@@ -9,16 +9,16 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
 
-import AddNewItemForm from "./Form/Items/AddNewItemForm";
-import RegisterItemForm from "./Form/Items/RegisterItemForm";
+import AddNewItemForm from "./../Form/Items/AddNewItemForm";
+import RegisterItemForm from "./../Form/Items/RegisterItemForm";
 
-import RegisterPersonForm from "./Form/People/RegisterPersonForm";
+import RegisterPersonForm from "./../Form/People/RegisterPersonForm";
 
-import DocumentInfoForm from "./Form/Document/DocumentInfoForm";
-import MetaInfoForm from "./Form/MetaInfoForm";
+import DocumentInfoForm from "./../Form/Document/DocumentInfoForm";
+import MetaInfoForm from "./../Form/MetaInfoForm";
 
-import ItemsDisplay from "./Display/ItemsDisplay";
-import SummaryDisplay from "./Display/SummaryDisplay"; 
+import ItemsDisplay from "./../Display/ItemsDisplay";
+import SummaryDisplay from "./../Display/SummaryDisplay"; 
 
 const BillingPage = () => {
   const [savedItems, getSavedItems] = useState([]);
diff --git a/src/components/Pages/HomePage.scss b/src/components/Pages/HomePage.scss
index 4e06e11..8ac7594 100644
--- a/src/components/Pages/HomePage.scss
+++ b/src/components/Pages/HomePage.scss
@@ -1,7 +1,7 @@
 .HomePage {
-  height: 80vh;
+  height: 60vh;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: space-evenly;
   align-items: center;
 }
-- 
cgit v1.2.3