11 |
14 | )
15 |
16 | export default NotFound
17 |
--------------------------------------------------------------------------------
/tests/components/Loading/Loading.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import { Loading } from '$root/components/Loading/Loading'
4 |
5 | describe("(Component) Loading", () => {
6 | let _wrapper;
7 |
8 | beforeEach(() => {
9 | _wrapper = shallow(Page not found!
12 | 13 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | )
13 |
14 | export default Loading
15 |
--------------------------------------------------------------------------------
/src/components/Root/Root.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import PropTypes from 'prop-types'
3 | import { connect } from 'react-redux'
4 |
5 | export class Root extends Component {
6 | static propTypes = {
7 | children: PropTypes.element.isRequired
8 | }
9 | render() {
10 | const { children } = this.props;
11 |
12 | return (
13 |
14 | {children}
15 |
16 | )
17 | }
18 | }
19 |
20 | export default Root
21 |
--------------------------------------------------------------------------------
/tests/components/Root/Root.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import { Root } from '$root/components/Root/Root'
4 |
5 | describe("(Component) Root", () => {
6 | let _wrapper;
7 |
8 | beforeEach(() => {
9 | let _props = {
10 | children:
16 |
18 | )
19 |
20 | export default (store) => ({
21 | component: Main,
22 | onEnter: checkAuth(store)
23 | })
24 |
--------------------------------------------------------------------------------
/src/routes/Home/UserList/components/User.scss:
--------------------------------------------------------------------------------
1 | .row {
2 | padding: 26px 0;
3 | position: relative;
4 |
5 | &:after {
6 | content: "";
7 | position: absolute;
8 | bottom: 0;
9 | left: 28px;
10 | right: 28px;
11 | border-bottom: 1px dashed #e9e9e9;
12 | }
13 |
14 | &:last-of-type:after {
15 | border: 0;
16 | }
17 | }
18 |
19 | .leftPanel {
20 | text-align: center;
21 | }
22 |
23 | .avatar {
24 | width: 60%;
25 | }
26 |
27 | .icon {
28 | margin: 0 6px 0 0;
29 | }
30 |
31 | .userName {
32 | font-weight: bold;
33 | }
34 |
--------------------------------------------------------------------------------
/src/modules/currentUser.js:
--------------------------------------------------------------------------------
1 | import simpleStorage from 'simplestorage.js'
2 |
3 | export const SIGNOUT_SUCCESS = 'SIGNOUT_SUCCESS';
4 |
5 | function signOutSuccess() {
6 | return {
7 | type: SIGNOUT_SUCCESS
8 | }
9 | }
10 |
11 | export function authorized(store) {
12 | const { currentUser } = store.getState();
13 |
14 | return currentUser && currentUser.id;
15 | }
16 |
17 | export function signOut(dispatch) {
18 | const result = simpleStorage.deleteKey('currentUser');
19 |
20 | dispatch(signOutSuccess());
21 | return Promise.resolve(result);
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/Forms/LoginForm/LoginForm.scss:
--------------------------------------------------------------------------------
1 | .loginForm {
2 | width: 480px;
3 | margin: 5% auto;
4 | background-color: white;
5 | box-shadow: 0 0 4px -2px rgba(0, 0, 0, 0.1);
6 | border: 1px solid #e0e0e0;
7 | }
8 |
9 | .title {
10 | font-size: 18px;
11 | color: white;
12 | background-color: #563d7c;
13 | padding: 12px 24px;
14 | text-transform: uppercase;
15 | margin: 0 0 8px 0;
16 | }
17 |
18 | .body {
19 | padding: 16px 24px 8px 24px;
20 | }
21 |
22 | .btnControl {
23 | padding: 8px 0;
24 |
25 | button {
26 | text-transform: uppercase;
27 | font-size: 15px;
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/layouts/CoreLayout/CoreLayout.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Header from '$root/components/Header'
4 | import Footer from '$root/components/Footer'
5 | import classes from './CoreLayout.scss'
6 | import '$root/static/styles/core.scss'
7 |
8 | export const CoreLayout = ({ children }) => (
9 |
10 |
16 | )
17 |
18 | CoreLayout.propTypes = {
19 | children: PropTypes.element.isRequired
20 | }
21 |
22 | export default CoreLayout
23 |
--------------------------------------------------------------------------------
/tests/routes/Home/UserList/modules/reducers.spec.js:
--------------------------------------------------------------------------------
1 | import { CHANGE_ACTIVE_USER } from '$root/routes/Home/UserList/modules/actions'
2 | import { activeUser as reducer } from '$root/routes/Home/UserList/modules/reducers'
3 |
4 | const initialState = undefined
5 | const user = { id: 1 }
6 |
7 | describe("(Reducer) activeUser", () => {
8 | it('Should return initial state', () => {
9 | expect(reducer(initialState, {})).to.eql({})
10 | })
11 |
12 | it('Should return active user', () => {
13 | const action = { type: CHANGE_ACTIVE_USER, user }
14 |
15 | expect(reducer(initialState, action)).to.eql(user)
16 | })
17 | })
18 |
--------------------------------------------------------------------------------
/src/store/reducers/currentUser.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux'
2 | import { browserHistory } from 'react-router'
3 | import { LOGIN_SUCCESS } from '$root/routes/Login/LoginForm/modules/actions'
4 | import { AUTHORIZED_SUCCESS, SIGNOUT_SUCCESS } from '$root/modules/currentUser'
5 |
6 | export const CURRENT_USER = 'currentUser';
7 |
8 | export function currentUser(state = {}, action) {
9 |
10 | switch(action.type) {
11 | case LOGIN_SUCCESS:
12 | case AUTHORIZED_SUCCESS:
13 | return { ...action.user };
14 | case SIGNOUT_SUCCESS:
15 | return {};
16 | default:
17 | return state;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/routes/Login/LoginForm/modules/actions.js:
--------------------------------------------------------------------------------
1 | import simpleStorage from 'simplestorage.js'
2 | import { post } from '$root/modules/fetch'
3 |
4 | export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
5 |
6 | export function loginSuccess(json) {
7 | return {
8 | type: LOGIN_SUCCESS,
9 | user: json
10 | }
11 | }
12 |
13 | function fetchLogin(user, dispatch) {
14 | return post('/users/sign_in', { user })
15 | .then(json => dispatch(loginSuccess(json)))
16 | .then(action => simpleStorage.set('currentUser', action.user))
17 | }
18 |
19 | export function loginAction(user, dispatch) {
20 | return fetchLogin(user, dispatch);
21 | }
22 |
--------------------------------------------------------------------------------
/src/static/styles/base/_normalize.scss:
--------------------------------------------------------------------------------
1 | * {
2 | vertical-align: middle;
3 | }
4 |
5 | html, body {
6 | height: 100%;
7 | min-height: 100%;
8 | }
9 |
10 | body {
11 | background-color: #f7f7f7;
12 | color: #333;
13 | }
14 |
15 | body, input, textarea, button {
16 | font-size: 14px;
17 | font-family: helvetica;
18 | }
19 |
20 | html, body, ul {
21 | margin: 0;
22 | padding: 0;
23 | }
24 |
25 | button, input, textarea {
26 | outline: none;
27 | }
28 |
29 | [draggable] {
30 | user-select: none;
31 | }
32 |
33 | textarea {
34 | resize: none;
35 | }
36 |
37 | a[href^="http"]:empty::before {
38 | content: attr(href);
39 | }
40 |
--------------------------------------------------------------------------------
/src/routes/Home/UserList/components/User.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import style from './User.scss'
4 |
5 | export const User = ({ user, onClick }) => (
6 |
12 | {children}
13 |
14 |
15 |
7 |
14 | )
15 |
16 | User.propTypes = {
17 | user: PropTypes.object,
18 | onClick: PropTypes.func
19 | }
20 |
21 | export default User
22 |
--------------------------------------------------------------------------------
/src/routes/Home/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import UserList from './UserList'
3 | import Report from './Report'
4 | import { authorized } from '$root/modules/currentUser'
5 |
6 | function checkAuth(store) {
7 | return (nextState, replace) => {
8 | if (!authorized(store)) {
9 | replace('/login');
10 | }
11 | }
12 | }
13 |
14 |
15 | const Main = () => (
16 |
8 | 
9 |
10 |
11 |
13 | {user.fullName} - {user.email}
12 |
17 |
26 | )
27 |
28 | export default (store) => ({
29 | component: Main,
30 | onEnter: checkAuth(store)
31 | })
32 |
--------------------------------------------------------------------------------
/tests/routes/Home/Report/Report.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import { Report } from '$root/routes/Home/Report/Report'
4 |
5 | const user = { id: 1, fullName: 'Redux' }
6 |
7 | describe("(Component) Report", () => {
8 | let _wrapper, _props;
9 |
10 | beforeEach(() => {
11 | _props = { user }
12 | _wrapper = shallow(
18 |
25 |
19 |
21 |
22 |
24 |
17 | 
19 |
20 | )
21 | }
22 | }
23 |
24 | function mapStateToProps(state) {
25 | return {
26 | user: state.activeUser
27 | }
28 | }
29 |
30 | export default connect(mapStateToProps)(Report)
31 |
--------------------------------------------------------------------------------
/tests/routes/Home/UserList/modules/actions.spec.js:
--------------------------------------------------------------------------------
1 | import configureMockStore from 'redux-mock-store'
2 | import thunk from 'redux-thunk'
3 | import fetchMock from 'fetch-mock'
4 | import { activeUser, changeActiveUser, CHANGE_ACTIVE_USER } from '$root/routes/Home/UserList/modules/actions'
5 |
6 | const middlewares = [ thunk ]
7 | const mockStore = configureMockStore(middlewares)
8 | const user = { id: 1 }
9 | const expectedAction = { type: CHANGE_ACTIVE_USER, user };
10 | const store = mockStore({ currentUser: {} })
11 |
12 | describe("(Actions) User", () => {
13 | afterEach(() => {
14 | store.clearActions();
15 | })
16 |
17 | it('Should create action for active user', () => {
18 | expect(activeUser(user)).to.eql(expectedAction)
19 | })
20 |
21 | it('Should dispatch active user', () => {
22 | store.dispatch(changeActiveUser(user))
23 | expect(store.getActions()).to.eql([expectedAction])
24 | })
25 | })
26 |
--------------------------------------------------------------------------------
/cli/theme/extract-style-loader.js:
--------------------------------------------------------------------------------
1 | function encodeLoader(loader) {
2 | if (typeof loader === "string") {
3 | return loader;
4 | }
5 |
6 | if (typeof loader.options !== "undefined") {
7 | const query = Object
8 | .keys(loader.options)
9 | .map(function map(param) {
10 | return `${encodeURIComponent(param)}=${encodeURIComponent(loader.options[param])}`;
11 | })
12 | .join("&");
13 | return `${loader.loader}?${query}`;
14 | }
15 | return loader.loader;
16 | }
17 |
18 | module.exports = function buildExtractStylesLoader(loaders) {
19 | const extractTextLoader = encodeLoader(loaders[0]);
20 | const fallbackLoader = encodeLoader(loaders[1]);
21 |
22 | const restLoaders = loaders
23 | .slice(2)
24 | .map(function map(loader) {
25 | if (typeof loader === "string") {
26 | return loader;
27 | }
28 | return encodeLoader(loader);
29 | });
30 |
31 | return [
32 | extractTextLoader,
33 | fallbackLoader,
34 | ...restLoaders,
35 | ].join("!");
36 | };
37 |
--------------------------------------------------------------------------------
/cli/server.js:
--------------------------------------------------------------------------------
1 | var express = require("express");
2 | var app = express();
3 | var cors = require('cors');
4 | var path = require("path");
5 | var users = [
6 | {id: 1, email: 'admin@example.com', full_name: 'Admin', authentication_token: 'xxx', avatar_url: 'http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png'},
7 | {id: 2, email: 'user@example.com', full_name: 'User', authentication_token: 'xxx', avatar_url: 'http://assets.pokemon.com/assets/cms2/img/pokedex/full/002.png'},
8 | ];
9 |
10 | app.use(express.static('dist'));
11 | app.use(cors());
12 | app.set('port', (process.env.PORT || 3000));
13 |
14 | app.post('/users/sign_in', function(req, res) {
15 | res.json(users[0]);
16 | });
17 |
18 | app.get('/users/:id', function(req, res) {
19 | res.json(users[0]);
20 | });
21 |
22 | app.get('/users', function(req, res) {
23 | res.json(users);
24 | })
25 |
26 | app.listen(app.get('port'), function() {
27 | console.log("Node app is running on port:" + app.get('port'))
28 | })
29 |
--------------------------------------------------------------------------------
/tests/store/reducers/currentUser.spec.js:
--------------------------------------------------------------------------------
1 | import { currentUser as reducer } from '$root/store/reducers/currentUser'
2 | import { LOGIN_SUCCESS } from '$root/routes/Login/LoginForm/modules/actions'
3 | import { AUTHORIZED_SUCCESS, SIGNOUT_SUCCESS } from '$root/modules/currentUser'
4 |
5 | const user = { id: 1 }
6 | const initialState = undefined;
7 |
8 | describe("(Reducer) currentUser", () => {
9 | it('should return initial state', () => {
10 | expect(reducer(initialState, {})).to.eql({})
11 | })
12 |
13 | describe('return user', () => {
14 | it('after authorize successfully', () => {
15 | const action = { type: AUTHORIZED_SUCCESS, user }
16 |
17 | expect(reducer(initialState, action)).to.eql(user)
18 | })
19 |
20 | it('after login successfully', () => {
21 | const action = { type: LOGIN_SUCCESS, user }
22 |
23 | expect(reducer(initialState, action)).to.eql(user)
24 | })
25 | })
26 |
27 | it('should clear user after logout', () => {
28 | const action = { type: SIGNOUT_SUCCESS }
29 |
30 | expect(reducer(initialState, action)).to.eql({})
31 | })
32 | })
33 |
--------------------------------------------------------------------------------
/src/routes/Login/LoginForm/LoginForm.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import PropTypes from 'prop-types'
3 | import { connect } from 'react-redux'
4 | import LoginForm from '$root/components/Forms/LoginForm'
5 | import { loginAction } from './modules/actions'
6 |
7 | export class LoginFormContainer extends Component {
8 | static contextTypes = {
9 | router: PropTypes.object
10 | }
11 | state = { messages: [] }
12 | constructor(props) {
13 | super(props)
14 |
15 | this.formSubmit = this.formSubmit.bind(this)
16 | }
17 | formSubmit(email, password) {
18 | const { dispatch } = this.props;
19 | const { router } = this.context;
20 | const user = { email , password };
21 |
22 | // NOTE: This then doesn't call in test
23 | return loginAction(user, dispatch)
24 | .then(() => { router.push('/') })
25 | .catch(json => this.setState({messages: json}))
26 | }
27 | render() {
28 | const { messages } = this.state;
29 |
30 | return (
31 | Report {user.fullName ? ` - ${user.fullName}` : ''}
18 |