TUR-41: Updated Frontend

README.md

@@ -29,7 +29,7 @@ https://app.circleci.com/pipelines/github/CPSECapstone
 
 ## Glossary
 
-**UserInterface-as-a-Service** Date and UI compenents that can be effortlessly inserted into any apllications UI
+**UserInterface-as-a-Service** Date and UI components that can be effortlessly inserted into any apllications UI
 
  **Tokenization** The process of turning sensitive pieces of data into a non-sensitive random string of characters that has no value if breached.
 

frontend/src/app/index.js

@@ -14,10 +14,12 @@ import { Provider } from 'react-redux';
 import store from '../store';
 
 import NavBar from '../components/NavBar/NavBar';
-import Register from '../pages/Register';
-import Login from '../pages/Login';
+import Register from '../pages/Register/Register';
+import Login from '../pages/Login/Login';
 import Home from '../pages/Home/Home';
 import PrivateRoute from '../components/private-route/PrivateRoute';
+import NewPage from '../components/NewPage/NewPage';
+
 
 // Check for token to keep user logged in
 if (localStorage.jwtToken) {
@@ -33,28 +35,31 @@ if (localStorage.jwtToken) {
         // Logout user
         store.dispatch(logoutUser()); 
 
-        // Redirect to login
-        window.location.href = './login';
+        // Redirect to NewPage, was login
+        window.location.href = './';
     }
 }
 
 function App () {
-    return (
+    return ( 
         <Provider store={store}>
             <Router>
                 <div>
-                    <NavBar />
+                    <div>
+                        <NavBar />
 
-                    <Switch>
-                        <Route
-                            exact
-                            path='/'
-                            component={() => <Redirect to='/login' />}
-                        />
-                        <Route exact path='/login' component={Login} />
-                        <Route exact path='/register' component={Register} />
-                        <PrivateRoute exact path='/home' component={Home} />
-                    </Switch>
+                        <Switch>
+                            <Route
+                                exact
+                                path='/'
+                                component={() => <Redirect to='/login' />}
+                            />
+                            <Route exact path='/newpage' component={NewPage}/>
+                            <Route exact path='/login' component={Login} />
+                            <Route exact path='/register' component={Register} />
+                            <PrivateRoute exact path='/home' component={Home} />
+                        </Switch>
+                        </div>
                 </div>
             </Router>
         </Provider>

frontend/src/components/NavBar/NavBar.jsx

@@ -3,25 +3,35 @@ import { Link, withRouter } from "react-router-dom";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { logoutUser } from "../../actions/authActions";
+import { MainNav, NavLogo, StyledLinked, Header, NavItemLocation} from "./NavBar.styled";
+import logo from '../../images/real.png';
 
 class NavBar extends Component {
     render() {
         const { auth, logoutUser } = this.props;
 
         return (
-            <>
-                {auth.isAuthenticated ? (
+            <MainNav>
+            <NavLogo>
+                <img src={logo}/>
+            </NavLogo>
+            <Header>Cloud Haven</Header>
+               <NavItemLocation>
                     <>
-                        <button onClick={logoutUser}>Sign out</button>
-                        <p key={3}>{`Logged in as: You`}</p>
+                        {auth.isAuthenticated ? (
+                            <>
+                                <button onClick={logoutUser}>Sign out</button>
+                                <p key={3}>{`Logged in as: You`}</p>
+                            </>
+                        ) : (
+                            <>
+                                <StyledLinked to="login">Login</StyledLinked>
+                                <StyledLinked to="register">Register </StyledLinked>
+                            </>
+                        )}
                     </>
-                ) : (
-                    <>
-                        <Link to="/login">Login</Link>
-                        <Link to="/register">Register</Link>
-                    </>
-                )}
-            </>
+                </NavItemLocation>
+            </MainNav>
         );
     }
 }

frontend/src/components/NavBar/NavBar.styled.js

@@ -1 +1,57 @@
 import styled from 'styled-components';
+import { Link } from "react-router-dom";
+
+export const MainNav = styled.a`
+  align-items: center;
+  background: gray;
+  display: flex;
+  flex-flow: row nowrap;
+  -webkit-font-smoothing: antialiased;
+  height: 60px;
+  padding: 0 30px;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
+`;
+
+export const NavLogo = styled.a`
+    display: flex;
+    height: 100%;
+    margin-right: 10px;
+    transition: opacity 0.2s ease-in-out;
+    :hover {
+      cursor: pointer;
+      opacity: 0.5;
+    }
+    > img {
+      margin: auto;
+    }
+  `;
+
+  export const StyledLinked = styled(Link)`
+    font-family: 'Trebuchet MS', sans-serif;
+    color: white;
+    text-decoration: none;
+    height: 100%;
+    padding: 0px 20px;
+
+    :hover {
+      color: black;
+      transition: all 0.3s ease;
+    }
+  `;
+
+  export const Header = styled.h2`
+    text-align: center;
+    color: black;
+    font-family: 'Trebuchet MS', sans-serif;
+    :hover {
+        cursor: pointer;
+    }
+`;
+
+export const NavItemLocation = styled.div`
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    margin-left: auto;
+    justify-content: space-between;
+`;

frontend/src/components/NewPage/NewPage.jsx

@@ -0,0 +1,50 @@
+import React, { Component } from "react";
+
+class NewPage extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            students: [
+                { id: 1, name: 'Joe', age: 21, email: '[email protected]'},
+                { id: 2, name: 'Bob', age: 22, email: '[email protected]'}
+            ]
+        }
+    }
+
+    returnTableData() {
+        return this.state.students.map((student, index) => {
+            let col = Object.keys(student)
+            return (
+               <tr key={student.id}>
+                  {col.map((val, index) => {
+                     return <td key={index}>{student[col[index]]}</td>
+                  })}
+               </tr>
+            )
+         })
+    }
+
+    renderTableHeader() {
+        let header = Object.keys(this.state.students[0])
+        return header.map((key, index) => {
+            return <th key={index}>{key.toUpperCase()}</th>
+        })
+    }
+
+    render() {
+        return (
+            <div>
+                <h1 id='title'>TESTING TABLE PAGE</h1>
+                <table id='students'>
+                    <tbody>
+                        <tr>{this.renderTableHeader()}</tr>
+                        {this.returnTableData()}
+                    </tbody>
+                </table>
+            </div>
+        )
+    }
+}
+
+export default NewPage;

frontend/src/components/NewPage/NewPage.styled.js

@@ -0,0 +1,2 @@
+import styled from 'styled-components';
+

frontend/src/pages/Home/Home.jsx

@@ -1,10 +1,14 @@
 import React, { Component } from "react";
 
-export default class Home extends Component {
+export default class EmptyPage extends Component {
+    constructor(props) {
+        super(props);
+    }
     render() {
+
         return (
             <div>
-                Welcome Home
+                <h3>Hello</h3>
             </div>
         )
     }