issue#17 create navbar sub-menu (#37)

* issue#17 create navbar sub-menu * PR#37 remove prefix `My` from Portfolio and Profile * PR#37 Remove empty lines and fix typo on portfolio link
anitab-org · Jul 14, 2020 · 6d68383 · 6d68383
1 parent a3ee4e9
commit 6d68383
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 53 deletions.
diff --git a/src/Navigation.js b/src/Navigation.js
@@ -1,44 +1,102 @@
 import React, { useContext } from "react";
-import { Navbar, Nav } from "react-bootstrap";
-import { Link} from "react-router-dom"
+import { Navbar, Nav, Card, Accordion } from "react-bootstrap";
+import { Link } from "react-router-dom"
 import { AuthContext } from "./AuthContext";
 
 
 export default function Navigation() {
-    const {user, isAuth, login, logout } = useContext(AuthContext);
+    const { user, isAuth, login, logout } = useContext(AuthContext);
 
     return (
-                <Navbar bg="light" expand="lg">
-                    <Navbar.Brand href="/">
-                        <img
-                            className="d-inline-block align-top"
-                            src="public/assets/images/AnitaBLogo.png"
-                            alt="Logo"
-                        />
-                    </Navbar.Brand>
-                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
-                    <Navbar.Collapse id="basic-navbar-nav">
-                        <Nav className="mr-auto">
-                            <Nav.Link as={Link} to="/">Home</Nav.Link>
-                            <Nav.Link as={Link} to="/members">Members</Nav.Link>
-                            <Nav.Link as={Link} to="/my-space">My Space</Nav.Link>
-                            {!isAuth ?
-                                <>
-                                <Nav.Link as={Link} to="/register">
-                                    Register
-                                </Nav.Link>
-                                    <Nav.Link as={Link} to="/login" onClick={login}>
-                                    Login
-                                </Nav.Link>
-                                </>
-                                :
-                                <Nav.Link as={Link} to="/" onClick={logout} >
-                                    Logout
-                                </Nav.Link>
-                            }
-                        </Nav>
-                        {isAuth && <Nav>Welcome back, {user}!</Nav>}
-                    </Navbar.Collapse>
-                </Navbar>
+        <Navbar bg="light" expand="lg">
+            <Navbar.Brand href="/">
+                <img
+                    className="d-inline-block align-top"
+                    src="public/assets/images/AnitaBLogo.png"
+                    alt="Logo"
+                />
+            </Navbar.Brand>
+            <Navbar.Toggle aria-controls="basic-navbar-nav" />
+            <Navbar.Collapse id="basic-navbar-nav">
+                <Nav className="mr-auto" id="mainNav">
+                    <Nav.Item>
+                        <Accordion>
+                            <Card>
+                                <Card.Header>
+                                    <Accordion.Toggle as={Link} to="/" eventKey="0">Home</Accordion.Toggle>
+                                </Card.Header>
+                                <Accordion.Collapse eventKey="0">
+                                    <Nav>
+                                        <Nav.Link as={Link} to="/about">About</Nav.Link>
+                                        <Nav.Link as={Link} to="/benefit">Benefit</Nav.Link>
+                                        <Nav.Link as={Link} to="/contact">Contact</Nav.Link>
+                                    </Nav>
+                                </Accordion.Collapse>
+                            </Card>
+                        </Accordion>
+                    </Nav.Item>
+                    <Nav.Item>
+                        <Accordion>
+                            <Card>
+                                <Card.Header>
+                                    <Accordion.Toggle as={Link} to="/members" eventKey="0">Members</Accordion.Toggle>
+                                </Card.Header>
+                            </Card>
+                        </Accordion>
+                    </Nav.Item>
+                    <Nav.Item>
+                        <Accordion>
+                            <Card>
+                                <Card.Header>
+                                    <Accordion.Toggle as={Link} to="/portfolio" eventKey="0">My Space</Accordion.Toggle>
+                                </Card.Header>
+                                <Accordion.Collapse eventKey="0">
+                                    <Nav>
+                                        <Nav.Link as={Link} to="/portfolio">Portfolio</Nav.Link>
+                                        <Nav.Link as={Link} to="/profile">Profile</Nav.Link>
+                                        <Nav.Link as={Link} to="/request-history">Request History</Nav.Link>
+                                    </Nav>
+                                </Accordion.Collapse>
+                            </Card>
+                        </Accordion>
+                    </Nav.Item>
+                </Nav>
+                <Nav className="mr-sm-2">
+                    {!isAuth ?
+                        <>
+                            <Nav.Item>
+                                <Card>
+                                    <Card.Header>
+                                        <Accordion.Toggle as={Link} to="/register" eventKey="0">Register</Accordion.Toggle>
+                                    </Card.Header>
+                                </Card>
+                            </Nav.Item>
+                            <Nav.Item>
+                                <Card>
+                                    <Card.Header>
+                                        <Accordion.Toggle as={Link} to="/login" eventKey="0" onClick={login}>Login</Accordion.Toggle>
+                                    </Card.Header>
+                                </Card>
+                            </Nav.Item>
+                        </>
+                        :
+                        <Nav.Item>
+                            <Card>
+                                <Card.Header>
+                                    <Accordion.Toggle as={Link} to="/" onClick={logout}>Logout</Accordion.Toggle>
+                                </Card.Header>
+                            </Card>
+                        </Nav.Item>
+                    }
+                    {isAuth && <Nav.Item>
+                        <Card>
+                            <Card.Header>
+                                <Accordion.Toggle as={Link} to="/" eventKey="0">Welcome back, {user}!</Accordion.Toggle>
+                            </Card.Header>
+                        </Card>
+                    </Nav.Item>}
+                </Nav>
+            </Navbar.Collapse>
+        </Navbar>
     );
 }
diff --git a/src/Routes.js b/src/Routes.js
@@ -4,7 +4,8 @@ import Home from "./Home";
 import Members from "./members/Members";
 import Register from "./register/Register";
 import Login from "./login/Login";
-import MySpace from "./myspace/MySpace";
+import MyPortfolio from "./myspace/Portfolio";
+import MyProfile from "./myspace/Profile"
 import ProtectedRoute from "./ProtectedRoute";
 import Navigation from "./Navigation";
 import AuthProvider from "./AuthContext";
@@ -13,7 +14,7 @@ import AuthProvider from "./AuthContext";
 export default function Routes() {
 
   return (
-      <Router>
+    <Router>
       <AuthProvider>
         <Navigation />
         <Switch>
@@ -30,14 +31,19 @@ export default function Routes() {
             <Login />
           </Route>
           <ProtectedRoute
-            exact
-            path="/my-space"
-          >
-            <MySpace />
+            exact path="/portfolio">
+            <MyPortfolio />
+          </ProtectedRoute>
+          <ProtectedRoute
+            exact path="/profile">
+            <MyProfile />
+          </ProtectedRoute>
+          <ProtectedRoute
+            exact path="/request-history">
           </ProtectedRoute>
         </Switch>
-        </AuthProvider>
-      </Router>
+      </AuthProvider>
+    </Router>
   );
 }
 
diff --git a/src/config.js b/src/config.js
@@ -1 +1,2 @@
-export const BASE_API = process.env.REACT_APP_BASE_API ?  process.env.REACT_APP_BASE_API : "http://127.0.0.1:5000"
+export const BASE_API = process.env.REACT_APP_BASE_API ?  process.env.REACT_APP_BASE_API : "http://localhost:5000"
+// export const BASE_API = process.env.REACT_APP_BASE_API ?  process.env.REACT_APP_BASE_API : "https://bridgeintech-bit-heroku-psql.herokuapp.com"
diff --git a/src/myspace/Portfolio.jsx b/src/myspace/Portfolio.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+export default function Portfolio() {
+  return (
+    <div className="container-fluid" id="Portfolio">
+      <div className="top">
+        <h1>
+          This will be Private page for the Member's Portfolio
+            </h1>
+      </div>
+      <div className="middle">
+        <h2>The site is currently under construction...</h2>
+      </div>
+      <div className="bottom">
+        <h3>
+          Thank you for your patience and understanding.
+            </h3>
+      </div>
+    </div>
+  )
+}
diff --git a/src/myspace/MySpace.jsx → src/myspace/Profile.jsx b/src/myspace/MySpace.jsx → src/myspace/Profile.jsx
@@ -1,11 +1,11 @@
 import React from "react";
 
-export default function MySpace() {
+export default function Profile() {
     return (
-        <div className="container-fluid" id="myspace">
+        <div className="container-fluid" id="profile">
           <div className="top">
             <h1>
-              This will be Private page for the Member's Portfolio
+              This will be Private page for the Member's Profile page
             </h1>
           </div>
           <div className="middle">

diff --git a/src/register/Register.jsx b/src/register/Register.jsx
@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import "./Register.css";
+import {BASE_API} from "../config";
+
 
 export default function Register() {
     const [validName, setValidName] = useState(true);
@@ -31,7 +33,7 @@ export default function Register() {
         };
 
         let data = "";
-        fetch("http://127.0.0.1:5000/register", requestRegister)
+        fetch(`${BASE_API}/register`, requestRegister)
             .then(async response => {
 
                 data = await response.json();

diff --git a/src/tests/Login.test.jsx b/src/tests/Login.test.jsx
@@ -6,10 +6,10 @@ import '@testing-library/jest-dom';
 import Login from "../login/Login";
 import { AuthConsumer, AuthContext } from "../AuthContext";
 import { act } from 'react-dom/test-utils';
-
+import { BASE_API } from "../config";
 
 const server = setupServer(
-    rest.post('http://127.0.0.1:5000/login', (req, res, ctx) => {
+    rest.post(`${BASE_API}/login`, (req, res, ctx) => {
         const payload = {
             username: "MyUsername",
             password: "12345678",
@@ -49,7 +49,7 @@ it('allows the user to login successfully', async () => {
 
 it('handles wrong credentials', async () => {
     server.use(
-      rest.post('http://127.0.0.1:5000/login', (req, res, ctx) => {
+      rest.post(`${BASE_API}/login`, (req, res, ctx) => {
         const wrongPayload = {
             username: "MyUsername",
             password: "87654321",
@@ -80,7 +80,7 @@ it('handles wrong credentials', async () => {
 
   it('handles server down', async () => {
     server.use(
-      rest.post('http://127.0.0.1:5000/login', (req, res, ctx) => {
+      rest.post(`${BASE_API}/login`, (req, res, ctx) => {
         const wrongPayload = {
             username: "MyUsername",
             password: "87654321",

diff --git a/src/tests/Register.test.js b/src/tests/Register.test.js
@@ -4,10 +4,11 @@ import { setupServer } from 'msw/node';
 import { render, fireEvent, screen, waitForElement } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Register from "../register/Register";
+import { BASE_API } from "../config";
 
 
 const server = setupServer(
-    rest.post('http://127.0.0.1:5000/register', (req, res, ctx) => {
+    rest.post(`${BASE_API}/register`, (req, res, ctx) => {
         const payload = {
             name: "My Name",
             username: "MyUsername",