diff --git a/cypress/integration/NavBar.test.js b/cypress/integration/NavBar.test.js
index 726c2fa..0ad5830 100644
--- a/cypress/integration/NavBar.test.js
+++ b/cypress/integration/NavBar.test.js
@@ -1,8 +1,18 @@
describe('Nav Bar', () => {
- it('should render', () => {
- cy.visit('/signin')
+ it('should have a sign in button that will take you to sign in page', () => {
+ cy.visit('/')
cy.get('.NavBar')
- .find('li')
- .should('have.text', 'Sign In')
+ .contains('li', 'Sign In')
+ .click()
+ cy.url().should('contain', '/signin')
+ })
+
+ it('should have a private user page', () => {
+ cy.visit('/')
+ cy.get('.NavBar')
+ .contains('li', 'User')
+ .click()
+
+ cy.url().should('contain', '/user')
})
})
\ No newline at end of file
diff --git a/cypress/integration/SignInPage.test.js b/cypress/integration/SignInPage.test.js
index 6a12f4e..b6269a5 100644
--- a/cypress/integration/SignInPage.test.js
+++ b/cypress/integration/SignInPage.test.js
@@ -35,5 +35,12 @@ describe('Sign In Page', () => {
cy.get('a#signup')
.should('have.attr', 'href')
})
+
+ it('should redirect after successful sign in', () => {
+ cy.get('button.signin')
+ .click()
+
+ cy.url().should('not.contain', '/signin').should('be', 'localhost:3000/')
+ })
})
})
\ No newline at end of file
diff --git a/public/_redirects b/public/_redirects
new file mode 100644
index 0000000..50a4633
--- /dev/null
+++ b/public/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index cd42cae..c4c5e9b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react'
import './App.css'
-import { BrowserRouter as Router, Route, Link } from "react-router-dom"
+import { BrowserRouter as Router, Route } from "react-router-dom"
import SignInPage from './pages/SignInPage'
import SignUpPage from './pages/SignUpPage'
import HomePage from './pages/HomePage'
@@ -8,16 +8,20 @@ import NavBar from './components/NavBar';
function App () {
const [signedIn, setSignedIn] = useState(false)
+ const [user, setUser] = useState(undefined)
return (
- <>
-
-
-
-
-
-
- >
+
+
+
+
+ }>
+
+
+
)
}
diff --git a/src/DefaultComponents.js b/src/DefaultComponents.js
index d0d7ff3..1568a75 100644
--- a/src/DefaultComponents.js
+++ b/src/DefaultComponents.js
@@ -1,4 +1,5 @@
import styled from 'styled-components'
+import { Link } from 'react-router-dom'
export const Button = styled.button`
background: ${props => props.primary ? '#00FFA2' : '#D1D1D1'};
@@ -67,6 +68,7 @@ export const H1 = styled.h1`
`
export const Nav = styled.nav`
+ display: flex;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 20px;
@@ -78,11 +80,17 @@ export const Nav = styled.nav`
export const NavUL = styled.ul`
display: flex;
+ margin-left: auto;
list-style-type: none;
`
export const NavLI = styled.li`
- margin-left: auto;
+ margin-left: 1em;
+`
+
+export const NavLink = styled(Link)`
+ color: white;
+ text-decoration: none;
`
export const Page = styled.div`
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 324cfc2..a1110de 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -1,14 +1,20 @@
import React from 'react'
-import { Nav, NavLI, NavUL } from '../DefaultComponents'
+import { Nav, NavLI, NavUL, NavLink } from '../DefaultComponents'
function NavBar ({ signedIn }) {
const SignedInItems = (
- Sign Out
+ <>
+ User
+ Sign Out
+ >
)
const SignedOutItems = (
- Sign In
+ <>
+ User
+ Sign In
+ >
)
return (
diff --git a/src/components/PrivateRoute.js b/src/components/PrivateRoute.js
new file mode 100644
index 0000000..03a6ea0
--- /dev/null
+++ b/src/components/PrivateRoute.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Route, Redirect } from 'react-router-dom'
+
+function PrivateRoute ({ component: Component, AuthCondition, ...rest }) {
+ return (
+
+ AuthCondition ? (
+
+ ) : (
+
+ )
+ }
+ />
+ )
+}
+
+export default PrivateRoute
\ No newline at end of file
diff --git a/src/components/SignInCard.js b/src/components/SignInCard.js
index a34ad9b..357ad88 100644
--- a/src/components/SignInCard.js
+++ b/src/components/SignInCard.js
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react'
import { Card, SubmitButton, Input, Label, A, H1 } from '../DefaultComponents'
-function SignInCard () {
+function SignInCard ({ handleSubmit }) {
const emailInput = React.createRef()
const focus = useState(true)
@@ -21,7 +21,7 @@ function SignInCard () {
- Sign In
+ Sign In
Don't have an account? Sign Up Here
)
diff --git a/src/pages/SignInPage.js b/src/pages/SignInPage.js
index dc1474c..2dd1c0f 100644
--- a/src/pages/SignInPage.js
+++ b/src/pages/SignInPage.js
@@ -1,13 +1,23 @@
import React from 'react'
import { Page } from '../DefaultComponents';
import SignInCard from '../components/SignInCard';
+import { Redirect } from 'react-router-dom'
-function SignInPage () {
- return (
-
-
-
- )
+function SignInPage ({ signedIn, setSignedIn }) {
+ const handleSignIn = (evt) => {
+ evt.preventDefault()
+ setSignedIn(true)
+ }
+
+ if (signedIn) {
+ return
+ } else {
+ return (
+
+
+
+ )
+ }
}
export default SignInPage
\ No newline at end of file