gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Feature(components): fetch user after page load

Browse Source 
This makes it easier to serve whole site statically in the future
Feature(redux): Move user state into entities
This commit is contained in:
Berkeley Martinez
2016-06-20 11:35:19 -07:00
parent d9e9af0a0f
commit 0c07e961a7
12 changed files with 214 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/sagas/hard-go-to-saga.js
View File

@ -4,7 +4,7 @@ export default function hardGoToSaga(action$, getState, { history }) {
return action$
.filter(({ type }) => type === hardGoTo)
.map(({ payload = '/settings' }) => {
history.push(history.state, null, payload);
history.pushState(history.state, null, payload);
return null;
});
}

48
common/app/App.jsx
View File

@ -1,9 +1,7 @@
import React, { PropTypes } from 'react';
import { Button, Row } from 'react-bootstrap';
import { ToastMessage, ToastContainer } from 'react-toastr';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { contain } from 'redux-epic';
import { createSelector } from 'reselect';
import MapDrawer from './components/Map-Drawer.jsx';
@ -19,26 +17,27 @@ import { submitChallenge } from './routes/challenges/redux/actions';
import Nav from './components/Nav';
import { randomCompliment } from './utils/get-words';
import { userSelector } from './redux/selectors';
const toastMessageFactory = React.createFactory(ToastMessage.animation);
const mapStateToProps = createSelector(
state => state.app.username,
state => state.app.points,
state => state.app.picture,
userSelector,
state => state.app.shouldShowSignIn,
state => state.app.toast,
state => state.app.isMapDrawerOpen,
state => state.app.isMapAlreadyLoaded,
state => state.challengesApp.toast,
(
username,
points,
picture,
{ user: { username, points, picture } },
shouldShowSignIn,
toast,
isMapDrawerOpen,
isMapAlreadyLoaded,
showChallengeComplete
) => ({
shouldShowSignIn,
isSignedIn: !!username,
username,
points,
picture,
@ -58,13 +57,6 @@ const bindableActions = {
toggleMainChat
};
const fetchContainerOptions = {
fetchAction: 'fetchUser',
isPrimed({ username }) {
return !!username;
}
};
// export plain class for testing
export class FreeCodeCamp extends React.Component {
static displayName = 'FreeCodeCamp';
@ -72,6 +64,7 @@ export class FreeCodeCamp extends React.Component {
static propTypes = {
children: PropTypes.node,
username: PropTypes.string,
isSignedIn: PropTypes.bool,
points: PropTypes.number,
picture: PropTypes.string,
toast: PropTypes.object,
@ -82,7 +75,9 @@ export class FreeCodeCamp extends React.Component {
isMapDrawerOpen: PropTypes.bool,
isMapAlreadyLoaded: PropTypes.bool,
toggleMapDrawer: PropTypes.func,
toggleMainChat: PropTypes.func
toggleMainChat: PropTypes.func,
fetchUser: PropTypes.func,
shouldShowSignIn: PropTypes.bool
};
componentWillReceiveProps({
@ -119,6 +114,9 @@ export class FreeCodeCamp extends React.Component {
componentDidMount() {
this.props.initWindowHeight();
if (!this.props.isSignedIn) {
this.props.fetchUser();
}
}
renderChallengeComplete() {
@ -145,7 +143,8 @@ export class FreeCodeCamp extends React.Component {
isMapDrawerOpen,
isMapAlreadyLoaded,
toggleMapDrawer,
toggleMainChat
toggleMainChat,
shouldShowSignIn
} = this.props;
const navProps = {
username,
@ -153,7 +152,8 @@ export class FreeCodeCamp extends React.Component {
picture,
updateNavHeight,
toggleMapDrawer,
toggleMainChat
toggleMainChat,
shouldShowSignIn
};
return (
@ -177,11 +177,7 @@ export class FreeCodeCamp extends React.Component {
}
}
const wrapComponent = compose(
// connect Component to Redux Store
connect(mapStateToProps, bindableActions),
// handles prefetching data
contain(fetchContainerOptions)
);
export default wrapComponent(FreeCodeCamp);
export default connect(
mapStateToProps,
bindableActions
)(FreeCodeCamp);

55
common/app/components/Nav/Nav.jsx
View File

@ -19,7 +19,8 @@ const logoElement = (
<img
alt='learn to code javascript at Free Code Camp logo'
className='img-responsive nav-logo'
src={ fCClogo } />
src={ fCClogo }
/>
</a>
);
@ -41,7 +42,8 @@ export default class extends React.Component {
username: PropTypes.string,
updateNavHeight: PropTypes.func,
toggleMapDrawer: PropTypes.func,
toggleMainChat: PropTypes.func
toggleMainChat: PropTypes.func,
shouldShowSignIn: PropTypes.bool
};
componentDidMount() {
@ -65,7 +67,8 @@ export default class extends React.Component {
return (
<LinkContainer
eventKey={ 1 }
to='/map'>
to='/map'
>
<NavItem
onClick={ e => {
if (!(e.ctrlKey || e.metaKey)) {
@ -106,9 +109,11 @@ export default class extends React.Component {
<LinkContainer
eventKey={ index + 2 }
key={ content }
to={ link }>
to={ link }
>
<NavItem
target={ target || null }>
target={ target || null }
>
{ content }
</NavItem>
</LinkContainer>
@ -119,36 +124,45 @@ export default class extends React.Component {
eventKey={ index + 1 }
href={ link }
key={ content }
target={ target || null }>
target={ target || null }
>
{ content }
</NavItem>
);
});
}
renderPoints(username, points) {
if (!username) {
renderPoints(username, points, shouldShowSignIn) {
if (!username || !shouldShowSignIn) {
return null;
}
return (
<FCCNavItem
className='brownie-points-nav'
href={ '/' + username }>
href={ '/' + username }
key='points'
>
[ { points } ]
</FCCNavItem>
);
}
renderSignin(username, picture) {
renderSignIn(username, picture, shouldShowSignIn) {
if (!shouldShowSignIn) {
return null;
}
if (username) {
return (
<li
className='hidden-xs hidden-sm avatar'
eventKey={ 2 }>
eventKey={ 2 }
key='user'
>
<a href={ '/' + username }>
<img
className='profile-picture float-right'
src={ picture } />
src={ picture }
/>
</a>
</li>
);
@ -156,7 +170,9 @@ export default class extends React.Component {
return (
<NavItem
eventKey={ 2 }
href='/signin'>
href='/signin'
key='signin'
>
Sign In
</NavItem>
);
@ -169,7 +185,8 @@ export default class extends React.Component {
points,
picture,
toggleMapDrawer,
toggleMainChat
toggleMainChat,
shouldShowSignIn
} = this.props;
const { router } = this.context;
const isOnMap = router.isActive('/map');
@ -177,19 +194,21 @@ export default class extends React.Component {
return (
<Navbar
className='nav-height'
fixedTop={ true }>
fixedTop={ true }
>
<NavbarBrand>{ logoElement }</NavbarBrand>
<Navbar.Toggle children={ toggleButtonChild } />
<Navbar.Collapse eventKey={ 0 }>
<Nav
className='hamburger-dropdown'
navbar={ true }
pullRight={ true }>
pullRight={ true }
>
{ this.renderMapLink(isOnMap, toggleMapDrawer) }
{ this.renderChat(toggleMainChat) }
{ this.renderLinks() }
{ this.renderPoints(username, points) }
{ this.renderSignin(username, picture) }
{ this.renderPoints(username, points, shouldShowSignIn) }
{ this.renderSignIn(username, picture, shouldShowSignIn) }
</Nav>
</Navbar.Collapse>
</Navbar>

18
common/app/redux/actions.js
View File

@ -23,11 +23,21 @@ export const makeToast = createAction(
// used in combination with fetch-user-saga
export const fetchUser = createAction(types.fetchUser);
// setUser(userInfo: Object) => Action
export const setUser = createAction(types.setUser);
// setUser(
// entities: { [userId]: User }
// ) => Action
export const addUser = createAction(
types.addUser,
() => {},
entities => ({ entities })
);
export const updateThisUser = createAction(types.updateThisUser);
// updatePoints(points: Number) => Action
export const updatePoints = createAction(types.updatePoints);
// updateUserPoints(username: String, points: Number) => Action
export const updateUserPoints = createAction(
types.updateUserPoints,
(username, points) => ({ username, points })
);
// used when server needs client to redirect
export const delayedRedirect = createAction(types.delayedRedirect);

18
common/app/redux/entities-reducer.js
View File

@ -1,12 +1,26 @@
import { updateUserPoints } from './types';
const initialState = {
hike: {},
superBlock: {},
block: {},
challenge: {},
job: {}
user: {}
};
export default function entities(state = initialState, action) {
const { type, payload: { username, points } = {} } = action;
if (type === updateUserPoints) {
return {
...state,
user: {
...state.user,
[username]: {
...state.user[username],
points
}
}
};
}
if (action.meta && action.meta.entities) {
return {
...state,

23
common/app/redux/fetch-user-saga.js
View File

@ -1,16 +1,25 @@
import { setUser, fetchUser } from './types';
import { createErrorObservable } from './actions';
import { Observable } from 'rx';
import { fetchUser } from './types';
import {
addUser,
updateThisUser,
createErrorObservable,
showSignIn
} from './actions';
export default function getUserSaga(action$, getState, { services }) {
return action$
.filter(action => action.type === fetchUser)
.flatMap(() => {
return services.readService$({ service: 'user' })
.map(user => {
return {
type: setUser,
payload: user
};
.flatMap(({ entities, result })=> {
if (!entities || !result) {
return Observable.just(showSignIn());
}
return Observable.of(
addUser(entities),
updateThisUser(result)
);
})
.catch(createErrorObservable);
});

20
common/app/redux/reducer.js
View File

@ -3,10 +3,8 @@ import types from './types';
const initialState = {
title: 'Learn To Code | Free Code Camp',
username: null,
picture: null,
points: 0,
isSignedIn: false,
shouldShowSignIn: false,
user: '',
csrfToken: '',
windowHeight: 0,
navHeight: 0,
@ -25,20 +23,20 @@ export default handleActions(
toast
}),
[types.setUser]: (state, { payload: user }) => ({
[types.updateThisUser]: (state, { payload: user }) => ({
...state,
...user,
isSignedIn: true
user,
shouldShowSignIn: true
}),
[types.showSignIn]: state => ({
...state,
shouldShowSignIn: true
}),
[types.challengeSaved]: (state, { payload: { points = 0 } }) => ({
...state,
points
}),
[types.updatePoints]: (state, { payload: points }) => ({
...state,
points
}),
[types.updateWindowHeight]: (state, { payload: windowHeight }) => ({
...state,
windowHeight

9
common/app/redux/selectors.js Normal file
View File

@ -0,0 +1,9 @@
import { createSelector } from 'reselect';
export const userSelector = createSelector(
state => state.app.user,
state => state.entities.user,
(username, userMap) => ({
user: userMap[username] || {}
})
);

6
common/app/redux/types.js
View File

@ -4,10 +4,12 @@ export default createTypes([
'updateTitle',
'fetchUser',
'setUser',
'addUser',
'updateThisUser',
'updateUserPoints',
'showSignIn',
'makeToast',
'updatePoints',
'handleError',
'toggleNightMode',
// used to hit the server

33
common/app/routes/challenges/redux/completion-saga.js
View File

@ -4,7 +4,7 @@ import { showChallengeComplete, moveToNextChallenge } from './actions';
import {
createErrorObservable,
makeToast,
updatePoints
updateUserPoints
} from '../../../redux/actions';
import { challengeSelector } from './selectors';
@ -16,25 +16,16 @@ import { postJSON$ } from '../../../../utils/ajax-stream';
// lots of repeat code
function completedChallenge(state) {
let body;
let isSignedIn = false;
try {
const { challenge: { id } } = challengeSelector(state);
const {
challenge: { id }
} = challengeSelector(state);
const {
app: { isSignedIn: _isSignedId, csrfToken },
app: { user, csrfToken },
challengesApp: { files }
} = state;
isSignedIn = _isSignedId;
body = {
const body = {
id,
_csrf: csrfToken,
files
};
} catch (err) {
return createErrorObservable(err);
}
const saveChallenge$ = postJSON$('/modern-challenge-completed', body)
.retry(3)
.flatMap(({ alreadyCompleted, points }) => {
@ -46,7 +37,7 @@ function completedChallenge(state) {
title: 'Saved',
type: 'info'
}),
updatePoints(points)
updateUserPoints(user, points)
);
})
.catch(createErrorObservable);
@ -55,7 +46,7 @@ function completedChallenge(state) {
moveToNextChallenge(),
makeToast({
title: 'Congratulations!',
message: isSignedIn ? ' Saving...' : 'Moving on to next challenge.',
message: user ? ' Saving...' : 'Moving on to next challenge.',
type: 'success'
})
);
@ -87,7 +78,7 @@ function submitProject(type, state, { solution, githubLink }) {
challenge: { id, challengeType }
} = challengeSelector(state);
const {
app: { isSignedIn, csrfToken }
app: { user, csrfToken }
} = state;
const body = {
id,
@ -109,7 +100,7 @@ function submitProject(type, state, { solution, githubLink }) {
title: 'Saved',
type: 'info'
}),
updatePoints(points)
updateUserPoints(user, points)
);
})
.catch(createErrorObservable);
@ -117,7 +108,7 @@ function submitProject(type, state, { solution, githubLink }) {
const challengeCompleted$ = Observable.of(
makeToast({
title: randomCompliment(),
message: isSignedIn ? ' Saving...' : 'Moving on to next challenge.',
message: user ? ' Saving...' : 'Moving on to next challenge.',
type: 'success'
})
// moveToNextChallenge()
@ -130,7 +121,7 @@ function submitSimpleChallenge(type, state) {
challenge: { id }
} = challengeSelector(state);
const {
app: { isSignedIn, csrfToken }
app: { user, csrfToken }
} = state;
const body = {
id,
@ -147,7 +138,7 @@ function submitSimpleChallenge(type, state) {
title: 'Saved',
type: 'info'
}),
updatePoints(points)
updateUserPoints(user, points)
);
})
.catch(createErrorObservable);
@ -155,7 +146,7 @@ function submitSimpleChallenge(type, state) {
const challengeCompleted$ = Observable.of(
makeToast({
title: randomCompliment(),
message: isSignedIn ? ' Saving...' : 'Moving on to next challenge.',
message: user ? ' Saving...' : 'Moving on to next challenge.',
type: 'success'
}),
moveToNextChallenge()

24
common/app/routes/challenges/redux/fetch-challenges-saga.js
View File

@ -15,6 +15,18 @@ import {
updateCurrentChallenge
} from './actions';
function createNameIdMap(entities) {
const { challenge } = entities;
return {
...entities,
challengeIdToName: Object.keys(challenge)
.reduce((map, challengeName) => {
map[challenge[challengeName].id] = challenge[challengeName].dashedName;
return map;
}, {})
};
}
export default function fetchChallengesSaga(action$, getState, { services }) {
return action$
.filter(({ type }) => (
@ -48,12 +60,20 @@ export default function fetchChallengesSaga(action$, getState, { services }) {
.flatMap(({ entities, result, redirect } = {}) => {
if (type === fetchChallenge) {
return Observable.of(
fetchChallengeCompleted(entities, result),
fetchChallengeCompleted(
createNameIdMap(entities),
result
),
updateCurrentChallenge(entities.challenge[result.challenge]),
redirect ? delayedRedirect(redirect) : null
);
}
return Observable.just(fetchChallengesCompleted(entities, result));
return Observable.just(
fetchChallengesCompleted(
createNameIdMap(entities),
result
)
);
})
.catch(createErrorObserable);
});

53
server/services/user.js
View File

@ -1,11 +1,29 @@
import debugFactory from 'debug';
import debug from 'debug';
import _ from 'lodash';
const censor = '**********************:P********';
const debug = debugFactory('fcc:services:user');
const protectedUserFields = {
password: censor,
profiles: censor
};
const publicUserProps = [
'id',
'name',
'username',
'bio',
'theme',
'picture',
'points',
'languageTag',
'isCheater',
'isGithubCool',
'isFrontEndCert',
'isBackEndCert',
'isDataVisCert',
'isFullStackCert',
'githubURL',
'currentChallenge',
'challengeMap'
];
const log = debug('fcc:services:user');
export default function userServices() {
return {
@ -13,19 +31,26 @@ export default function userServices() {
read: (req, resource, params, config, cb) => {
let { user } = req;
if (user) {
debug('user is signed in');
// Zalgo!!!
return process.nextTick(() => {
cb(
log('user is signed in');
return user.getChallengeMap$()
.map(challengeMap => ({ ...user.toJSON(), challengeMap }))
.subscribe(
user => cb(
null,
{
...user.toJSON(),
...protectedUserFields
entities: {
user: {
[user.username]: _.pick(user, publicUserProps)
}
},
result: user.username
}
),
cb
);
});
}
debug('user is not signed in');
// Zalgo!!!
return process.nextTick(() => {
cb(null, {});
});