Permalink
Browse files

Scaffold out auth and add HOCs for private and public routes

  • Loading branch information...
samanthamichele7 committed Jun 1, 2017
1 parent d71a34a commit 84569a003551ab8e85a45d2e93ea7a81f7495189
@@ -3,6 +3,8 @@ import request from 'superagent';
export const OPEN_MODAL = 'OPEN_MODAL';
export const CLOSE_MODAL = 'CLOSE_MODAL';
export const REQUEST_GIFS = 'REQUEST_GIFS';
export const SIGN_IN_USER = 'SIGN_IN_USER';
export const SIGN_OUT_USER = 'SIGN_OUT_USER';

const API_URL = 'http://api.giphy.com/v1/gifs/search?q=';
const API_KEY = '&api_key=dc6zaTOxFJmzC';
@@ -28,3 +30,16 @@ export function closeModal() {
type: CLOSE_MODAL
}
}

export function signInUser() {
return {
type: SIGN_IN_USER
}
}


export function signOutUser() {
return {
type: SIGN_OUT_USER
}
}

This file was deleted.

Oops, something went wrong.
@@ -0,0 +1,58 @@
import React from 'react';
import { ConnectedRouter } from 'react-router-redux';
import { Route, Redirect } from 'react-router-dom'
import { history } from '../store/configureStore';
import { connect } from 'react-redux';

import Header from './Header';
import Home from './Home';
import Signup from './Signup';
import Login from './Login';
import Favorites from './Favorites';

const PrivateRoute = ({component: Component, authenticated, ...props}) => {
return (
<Route
{...props}
render={(props) => authenticated === true
? <Component {...props} />
: <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
/>
);
};

const PublicRoute = ({component: Component, authenticated, ...props}) => {
return (
<Route
{...props}
render={(props) => authenticated === false
? <Component {...props} />
: <Redirect to='/favorites' />}
/>
);
};

class App extends React.Component {
render() {
return (
<ConnectedRouter history={history}>
<div>
<Header />

<div className="container">
<Route exact path="/" component={ Home }/>
<PublicRoute authenticated={ this.props.authenticated } path="/signup" component={ Signup } />
<PublicRoute authenticated={ this.props.authenticated } path="/login" component={ Login } />
<PrivateRoute authenticated={ this.props.authenticated } path="/favorites" component={ Favorites } />
</div>
</div>
</ConnectedRouter>
);
}
}

const mapStateToProps = (state) => {
return { authenticated: state.auth.authenticated };
};

export default connect(mapStateToProps)(App);
@@ -1,22 +1,44 @@
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import * as Actions from '../actions';

class Header extends React.Component {
handleSignout() {
this.props.signOutUser();
}

renderAuthLinks() {
if (this.props.authenticated) {
return [
<li className="nav-item" key={1}>
<Link className="nav-link" to="/favorites">My Favorites</Link>
</li>,
<li className="nav-item" key={2}>
<a className="nav-link" onClick={() => this.handleSignout()}>Sign Out</a>
</li>
]
} else {
return [
<li className="nav-item" key={1}>
<Link className="nav-link" to="/login">Login</Link>
</li>,
<li className="nav-item" key={2}>
<Link className="nav-link" to="/signup">Sign Up</Link>
</li>
]
}
}

render() {
return (
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<Link className="navbar-brand" to="/">React2Gifs</Link>
<Link to="/" className="navbar-brand">React2Gifs</Link>
</div>
<ul className="nav navbar-nav navbar-right">
<li className="nav-item">
<Link className="nav-link" to="/login">Login</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/signup">Signup</Link>
</li>
{ this.renderAuthLinks() }
</ul>
</div>
</nav>
@@ -25,7 +47,9 @@ class Header extends React.Component {
}

function mapStateToProps(state) {
return {}
return {
authenticated: state.auth.authenticated
}
}

export default connect(mapStateToProps)(Header);
export default connect(mapStateToProps, Actions)(Header);
@@ -1,5 +1,7 @@
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import * as Actions from '../actions';

const validate = values => {
const errors = {};
@@ -19,7 +21,7 @@ const validate = values => {

class Login extends React.Component {
handleFormSubmit = (values) => {
console.log(values);
this.props.signInUser(values);
};

renderField = ({ input, label, type, meta: { touched, error } }) => (
@@ -49,7 +51,7 @@ class Login extends React.Component {
}
}

export default reduxForm({
export default connect(null, Actions)(reduxForm({
form: 'login',
validate
})(Login);
})(Login));
@@ -1,5 +1,7 @@
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import * as Actions from '../actions';

const validate = values => {
const errors = {};
@@ -27,7 +29,7 @@ const validate = values => {

class Signup extends React.Component {
handleFormSubmit = (values) => {
console.log(values);
this.props.signInUser(values);
};

renderField = ({ input, label, type, meta: { touched, error } }) => (
@@ -58,7 +60,7 @@ class Signup extends React.Component {
}
}

export default reduxForm({
export default connect(null, Actions)(reduxForm({
form: 'signup',
validate
})(Signup);
})(Signup));
@@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import App from './containers/App';
import { Provider } from 'react-redux';
import { configureStore } from './store/configureStore';

@@ -0,0 +1,20 @@
import { SIGN_IN_USER, SIGN_OUT_USER } from '../actions';

const initialState = {
authenticated: false
};

export default function gifs(state = initialState, action) {
switch (action.type) {
case SIGN_IN_USER:
return {
...state, authenticated: true
};
case SIGN_OUT_USER:
return {
...state, authenticated: false
};
default:
return state;
}
}
@@ -1,10 +1,12 @@
import { combineReducers } from 'redux';
import AuthReducer from './auth';
import GifsReducer from './gifs';
import ModalReducer from './modal';
import { routerReducer } from 'react-router-redux';
import { reducer as FormReducer } from 'redux-form';

const rootReducer = combineReducers({
auth: AuthReducer,
form: FormReducer,
gifs: GifsReducer,
modal: ModalReducer,

0 comments on commit 84569a0

Please sign in to comment.