From 754243e3b2b1dbf9d16a369c5979b25e846c6f53 Mon Sep 17 00:00:00 2001
From: vikingowl <cw.nachtigall@gmail.com>
Date: Mon, 24 Jan 2022 13:32:25 +0100
Subject: [PATCH] added router and updated base-layout

---
 package.json                      |  1 +
 public/index.html                 |  6 +++---
 src/App.js                        | 23 ++++++++++++++++++--
 src/components/Footer.js          | 13 +++++++++++
 src/components/Nav.js             |  9 ++++++++
 src/components/Routing.js         | 14 ++++++++++++
 src/components/ScrollTopButton.js | 31 ++++++++++++++++++++++++++
 src/pages/Home.js                 |  9 ++++++++
 src/pages/NotFound.js             |  9 ++++++++
 yarn.lock                         | 36 ++++++++++++++++++++++++++++++-
 10 files changed, 145 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Footer.js
 create mode 100644 src/components/Nav.js
 create mode 100644 src/components/Routing.js
 create mode 100644 src/components/ScrollTopButton.js
 create mode 100644 src/pages/Home.js
 create mode 100644 src/pages/NotFound.js
diff --git a/package.json b/package.json
index 621cfb3..33471d5 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "bootstrap-icons": "^1.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "sass": "^1.49.0",
     "sass-loader": "^12.4.0",
diff --git a/public/index.html b/public/index.html
index c099290..394c4a8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html class="h-100" lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -26,9 +26,9 @@
     -->
     <title>React Base /w Bootstrap</title>
   </head>
-  <body>
+  <body class="h-100">
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" class="d-flex flex-column h-100"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/App.js b/src/App.js
index 32e4b0f..3daf842 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,29 @@
 import './App.css';
 
+import {BrowserRouter as Router} from "react-router-dom";
+import {ScrollTopButton} from "./components/ScrollTopButton";
+
+import {Nav} from "./components/Nav";
+import {Routing} from "./components/Routing";
+import {Footer} from "./components/Footer";
+
 function App() {
   return (
-    <div className="App">
+    <Router>
+      <header>
+        <Nav/>
+      </header>
 
-    </div>
+      <main className="flex-shrink-0">
+        <Routing/>
+      </main>
+
+      <footer className="footer mt-auto bg-light pt-4 pb-2">
+        <Footer/>
+      </footer>
+
+      <ScrollTopButton/>
+    </Router>
   );
 }
 
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..ac96896
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export const Footer = () => {
+  return (
+    <div className='container d-flex justify-content-between'>
+      <p>&copy; COPYRIGHT</p>
+
+      <span>
+        LINKS
+      </span>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/Nav.js b/src/components/Nav.js
new file mode 100644
index 0000000..3ca887a
--- /dev/null
+++ b/src/components/Nav.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Nav = () => {
+  return (
+    <div>
+        NAV
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/Routing.js b/src/components/Routing.js
new file mode 100644
index 0000000..8f5b1e0
--- /dev/null
+++ b/src/components/Routing.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import {Routes, Route} from "react-router-dom";
+import {Home} from "../pages/Home";
+import {NotFound} from "../pages/NotFound";
+
+export const Routing = () => {
+  return (
+    <Routes>
+      <Route exact path="/" element={<Home/>}/>
+
+      <Route path="*" element={<NotFound/>}/>
+    </Routes>
+  )
+}
\ No newline at end of file
diff --git a/src/components/ScrollTopButton.js b/src/components/ScrollTopButton.js
new file mode 100644
index 0000000..1a73fbc
--- /dev/null
+++ b/src/components/ScrollTopButton.js
@@ -0,0 +1,31 @@
+import React, {useState} from 'react'
+
+export const ScrollTopButton = () => {
+  const [visible, setVisible] = useState(false)
+
+  const toggleVisible = () => {
+    const scrolled = document.documentElement.scrollTop
+    if (scrolled > 300) {
+      setVisible(true)
+    } else if (scrolled <= 300) {
+      setVisible(false)
+    }
+  }
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+
+  window.addEventListener('scroll', toggleVisible)
+
+  return (
+    <i
+      className="bi bi-arrow-up-square scroll-top-btn text-info"
+      onClick={() => scrollToTop()}
+      style={{display: visible ? 'inline' : 'none'}}
+    />
+  )
+}
\ No newline at end of file
diff --git a/src/pages/Home.js b/src/pages/Home.js
new file mode 100644
index 0000000..fa15370
--- /dev/null
+++ b/src/pages/Home.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Home = () => {
+  return (
+    <div>
+        HOME
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js
new file mode 100644
index 0000000..388a22a
--- /dev/null
+++ b/src/pages/NotFound.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const NotFound = () => {
+  return (
+    <div className='container'>
+      <h2>Site not found</h2>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 53aed04..2f07bcb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1429,7 +1429,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
   version: 7.16.7
   resolution: "@babel/runtime@npm:7.16.7"
   dependencies:
@@ -6104,6 +6104,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"history@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "history@npm:5.2.0"
+  dependencies:
+    "@babel/runtime": ^7.7.6
+  checksum: 2c6a05aa86793e0a0857013457f34474c17f81a012c6bdb00bf30862389ac6a8c2df113d82176f67af2fd534ea9dc4e1218470c5526355b6fc1aefcc971f2eb2
+  languageName: node
+  linkType: hard
+
 "hoopy@npm:^0.1.4":
   version: 0.1.4
   resolution: "hoopy@npm:0.1.4"
@@ -9672,6 +9681,7 @@ __metadata:
     postcss-loader: ^6.2.1
     react: ^17.0.2
     react-dom: ^17.0.2
+    react-router-dom: ^6.2.1
     react-scripts: 5.0.0
     sass: ^1.49.0
     sass-loader: ^12.4.0
@@ -9752,6 +9762,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router-dom@npm:^6.2.1":
+  version: 6.2.1
+  resolution: "react-router-dom@npm:6.2.1"
+  dependencies:
+    history: ^5.2.0
+    react-router: 6.2.1
+  peerDependencies:
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: fa0edc69fddf0cb1313bcb3dbd5eb2b2ff24a75ee03ba928995e16a6a251585750f91d966612e868eb68a5aebc4a5240be40fd96c4acf1d8d48d33f54ad3f4e2
+  languageName: node
+  linkType: hard
+
+"react-router@npm:6.2.1":
+  version: 6.2.1
+  resolution: "react-router@npm:6.2.1"
+  dependencies:
+    history: ^5.2.0
+  peerDependencies:
+    react: ">=16.8"
+  checksum: 081a89237ab4f32195d1f2173bc4b3d95637cd6942a4d1a9e90d4ac8c80faa95528255ca2ec44c1e88c1b369e712c4ca74cba5ae3acef6fc30a51a62805b95a4
+  languageName: node
+  linkType: hard
+
 "react-scripts@npm:5.0.0":
   version: 5.0.0
   resolution: "react-scripts@npm:5.0.0"
