Added authenticated routing and Created navbar

7dc0e2f1 · Ben Anderson · f58a2572 · 7dc0e2f1 · 7dc0e2f1 · 7dc0e2f1
Commit 7dc0e2f1 authored May 05, 2021 by Ben Anderson
11 changed files
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+
+.env
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },

--- a/public/index.html
+++ b/public/index.html
@@ -2,6 +2,12 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
+      crossorigin="anonymous"
+    />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

--- a/src/App.js
+++ b/src/App.js
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import Header from "./component/Header";
+import Main from "./component/Main";
+import AuthRoute from "./component/AuthRoute";
+import { Switch } from "react-router";
+import Login from "./component/Login";

 function App() {
  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <Switch>
+        <AuthRoute path="/login">
+          <Login />
+        </AuthRoute>
+        <AuthRoute>
+          <Header />
+          <Main />
+        </AuthRoute>
+      </Switch>
    </div>
  );
 }

--- a/src/component/AuthRoute.jsx
+++ b/src/component/AuthRoute.jsx
+import React from "react";
+import { Redirect, Route } from "react-router";
+
+export default function AuthRoute({ children, ...rest }) {
+  // TODO: replace with actual Auth data from redux later
+  const auth = true;
+  return (
+    <Route
+      {...rest}
+      render={({ location }) => {
+        console.log(location);
+        if (auth) {
+          if (location.pathname === "/login") {
+            return <Redirect to="/" />;
+          } else {
+            return children;
+          }
+        } else if (location.pathname !== "/login") {
+          return <Redirect to="/login" />;
+        }
+        return children;
+      }}
+    />
+  );
+}
--- a/src/component/Header.jsx
+++ b/src/component/Header.jsx
+import React, {  useState } from "react";
+import { Link } from "react-router-dom";
+
+const Header = () => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+      <div className="container-fluid">
+        <Link className="navbar-brand" href="/">
+          Ascend Inventory
+        </Link>
+        <button
+          className="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent"
+          aria-controls="navbarSupportedContent"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+          onClick={() => setShow((prev) => !prev)}
+        >
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div
+          className={`collapse navbar-collapse ${show ? "show" : ""}`}
+          id="navbarSupportedContent"
+        >
+          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+            <li className="nav-item">
+              <Link className="nav-link" to="">
+                Products
+              </Link>
+            </li>
+            <li className="nav-item">
+              <Link className="nav-link" to="">
+                Promotions
+              </Link>
+            </li>
+          </ul>
+          <form className="d-flex">
+            <input
+              type="search"
+              className="form-control me-2"
+              placeholder="search"
+            />
+            <button className="btn btn-light" type="submit">
+              GO
+            </button>
+          </form>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Header;
--- a/src/component/Login.jsx
+++ b/src/component/Login.jsx
+import React from 'react'
+
+export default function Login() {
+  return (
+    <div>
+      LOGIN
+    </div>
+  )
+}
--- a/src/component/Main.jsx
+++ b/src/component/Main.jsx
+import React from "react";
+import { Switch } from "react-router";
+import AuthRoute from "./AuthRoute";
+import ProductForm from "./ProductForm";
+
+export default function Main() {
+  return (
+    <div>
+      <Switch>
+        <AuthRoute to="/products/new">
+          <ProductForm />
+        </AuthRoute>
+      </Switch>
+    </div>
+  );
+}
--- a/src/component/ProductForm.jsx
+++ b/src/component/ProductForm.jsx
+import React from 'react'
+
+export default function ProductForm({ product }) {
+  return (
+    <div>
+      PRODUCT FORM
+    </div>
+  )
+}
--- a/src/index.js
+++ b/src/index.js
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter } from "react-router-dom";

 ReactDOM.render(
  <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
  </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );

 // If you want to start measuring performance in your app, pass a function

--- a/yarn.lock
+++ b/yarn.lock