Fixed merge conflict

831bd6aa · Khai Yuan Liew · fc5c32df · 290c7a9b · 831bd6aa · 831bd6aa
Commit 831bd6aa authored May 05, 2021 by Khai Yuan Liew
11 changed files
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.env
\ No newline at end of file
+.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">
+    <div>
-      <header className="App-header">
+      <Switch>
-        <img src={logo} className="App-logo" alt="logo" />
+        <AuthRoute path="/login">
-        <p>
+          <Login />
-          Edit <code>src/App.js</code> and save to reload.
+        </AuthRoute>
-        </p>
+        <AuthRoute>
-        <a
+          <Header />
-          className="App-link"
+          <Main />
-          href="https://reactjs.org"
+        </AuthRoute>
-          target="_blank"
+      </Switch>
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
    </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" to="/">
+          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">
+                Products
+              </Link>
+            </li>
+            <li className="nav-item">
+              <Link className="nav-link" to="/promos">
+                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 { Redirect, Switch } from "react-router";
+import AuthRoute from "./AuthRoute";
+import ProductForm from "./ProductForm";
+export default function Main() {
+  return (
+    <div>
+      <Switch>
+        <AuthRoute exact path="/products/new">
+          <ProductForm />
+        </AuthRoute>
+        <AuthRoute exact path="/promos/new">NEW PROMO</AuthRoute>
+        <AuthRoute exact  path="/products">PRODUCTS</AuthRoute>
+        <AuthRoute path="/promos">PROMOS</AuthRoute>
+        <AuthRoute exact path="/">
+          <Redirect to="/products" />
+        </AuthRoute>
+        <AuthRoute >404 PAGE</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 React from "react";
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
-import './index.css';
+import "./index.css";
-import App from './App';
+import App from "./App";
-import reportWebVitals from './reportWebVitals';
+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