todo.isComplete === isComplete)}
15 | deleteTodo={deleteTodo}
16 | updateTodo={updateTodo}
17 | />
18 | );
19 |
20 | TodoListContainer.propTypes = {
21 | deleteTodo: PropTypes.func.isRequired,
22 | isComplete: PropTypes.bool.isRequired,
23 | todos: PropTypes.array.isRequired,
24 | updateTodo: PropTypes.func.isRequired,
25 | };
26 |
27 | const mapStateToProps = state => ({
28 | ...state.todos,
29 | });
30 |
31 | const mapDispatchToProps = {
32 | deleteTodo: deleteTodoAction,
33 | updateTodo: updateTodoAction,
34 | };
35 |
36 | export default connect(mapStateToProps, mapDispatchToProps)(TodoListContainer);
37 |
--------------------------------------------------------------------------------
/app/components/navigation/tests/index.snapshot.test.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 | import { MemoryRouter } from 'react-router-dom';
4 | import { fakeSession, fakeEmptySession } from 'mocks/fakeSession';
5 | import Navigation from 'components/navigation';
6 |
7 | describe('Navigation', () => {
8 | let props;
9 | const renderComponent = () => renderer.create((
10 |
11 |
13 | ));
14 |
15 | beforeEach(() => {
16 | props = {
17 | ...fakeEmptySession,
18 | logout: () => {},
19 | signin: () => {},
20 | signup: () => {},
21 | };
22 | });
23 |
24 | it('renders correctly', () => {
25 | expect(renderComponent().toJSON()).toMatchSnapshot();
26 | });
27 |
28 | context('when user is logged in', () => {
29 | beforeEach(() => {
30 | props = {
31 | ...props,
32 | ...fakeSession,
33 | };
34 | });
35 |
36 | it('renders user navigations', () => {
37 | expect(renderComponent().toJSON()).toMatchSnapshot();
38 | });
39 | });
40 | });
41 |
--------------------------------------------------------------------------------
/app/components/signin/tests/modal.snapshot.test.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 | import { fakeSession } from 'mocks/fakeSession';
4 | import SigninModal from '../modal';
5 |
6 | jest.mock('components/modal', () => 'Modal');
7 |
8 | describe('SigninModal', () => {
9 | let props;
10 | let component;
11 | const renderComponent = () => renderer.create(
30 |
35 |
38 | Test Modal
39 |
40 |
41 |
46 | `;
47 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015-2018 Flatstack
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/app/containers/modal/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import { closeModal as closeModalAction } from 'actions/modal';
5 | import TodoModal from 'containers/todoModal';
6 | import SigninModal from 'containers/signinModal';
7 | import SignupModal from 'containers/signupModal';
8 |
9 | const MODALS = {
10 | todo: TodoModal,
11 | signin: SigninModal,
12 | signup: SignupModal,
13 | };
14 |
15 | const ModalContainer = ({ modal, closeModal }) => {
16 | const { modalName, ...rest } = modal;
17 |
18 | if (modalName) {
19 | const params = { ...rest, closeModal };
20 | const CurrentModal = MODALS[modalName];
21 |
22 | return Why React? Edit on GitHub React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC. We built React to solve one problem: building large applications with data that changes over time.
Simple Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.
Declarative When the data changes, React conceptually hits the \"refresh\" button, and knows to only update the changed parts.
Build Composable Components React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.
Give It Five Minutes React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. Give it five minutes while reading this guide; those crazy ideas have worked for building thousands of components both inside and outside of Facebook and Instagram.
article id: {{articleId}} "
3 | }
4 |
--------------------------------------------------------------------------------
/app/services/i18n.js:
--------------------------------------------------------------------------------
1 | import i18n from 'i18next';
2 | import languageDetector from 'i18next-browser-languagedetector';
3 | import storage from 'lib/storage';
4 | import config from 'config';
5 |
6 | const { localizationKey } = config.storage;
7 | const defaultLanguage = 'en';
8 | const currentLanguage = storage.get(localizationKey);
9 | const getResources = () => {
10 | const requireContext = require.context('../locales', true, /\.json$/);
11 |
12 | return requireContext.keys().reduce((acc, value) => {
13 | const fileName = value.match(/.+\/(.+).json$/)[1];
14 | const languageDomain = value.match(/^\.\/(.+?)\/.+/)[1];
15 |
16 | return {
17 | ...acc,
18 | [languageDomain]: {
19 | ...acc[languageDomain],
20 | [fileName]: requireContext(value),
21 | },
22 | };
23 | }, {});
24 | };
25 |
26 | i18n
27 | .use(languageDetector)
28 | .init({
29 | fallbackLng: defaultLanguage,
30 |
31 | interpolation: {
32 | escapeValue: false,
33 | },
34 |
35 | lookupLocalStorage: localizationKey,
36 | caches: ['localStorage'],
37 |
38 | resources: getResources(),
39 | });
40 |
41 | if (!currentLanguage) {
42 | i18n.changeLanguage(defaultLanguage);
43 | }
44 |
45 | export default i18n;
46 |
--------------------------------------------------------------------------------
/app/components/todo/item.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 | import { ListGroupItem } from 'react-bootstrap';
5 | import styles from './styles.css';
6 |
7 | const TodoItem = ({ todo, updateTodo, deleteTodo }) => {
8 | const toggle = () => {
9 | updateTodo({
10 | ...todo,
11 | isComplete: !todo.isComplete,
12 | });
13 | };
14 |
15 | const remove = (event) => {
16 | deleteTodo(todo);
17 | event.stopPropagation();
18 | };
19 |
20 | return (
21 |
25 |
26 | { todo.name }
27 |
28 |
33 | );
34 | };
35 |
36 | TodoItem.propTypes = {
37 | deleteTodo: PropTypes.func.isRequired,
38 | todo: PropTypes.shape({
39 | id: PropTypes.number,
40 | isComplete: PropTypes.bool,
41 | name: PropTypes.any,
42 | }).isRequired,
43 | updateTodo: PropTypes.func.isRequired,
44 | };
45 |
46 | export default TodoItem;
47 |
--------------------------------------------------------------------------------
/app/actions/todos.js:
--------------------------------------------------------------------------------
1 | import { createAction } from 'redux-actions';
2 | import todosSource from 'sources/todos';
3 |
4 | export const LOAD_TODOS = 'LOAD_TODOS';
5 | export const SET_TODOS = 'SET_TODOS';
6 | export const ADD_TODO = 'ADD_TODO';
7 | export const TOGGLE_TODO = 'TOGGLE_TODO';
8 | export const REMOVE_TODO = 'REMOVE_TODO';
9 |
10 | export const loadTodos = createAction(LOAD_TODOS);
11 | export const setTodos = createAction(SET_TODOS);
12 | export const addTodo = createAction(ADD_TODO);
13 | export const toggleTodo = createAction(TOGGLE_TODO);
14 | export const removeTodo = createAction(REMOVE_TODO);
15 |
16 | export const fetchTodos = () =>
17 | async (dispatch) => {
18 | dispatch(loadTodos());
19 |
20 | const result = await todosSource.get();
21 |
22 | dispatch(setTodos(result));
23 | };
24 |
25 | export const createTodo = todo =>
26 | async (dispatch) => {
27 | const result = await todosSource.create({ ...todo, isComplete: false });
28 |
29 | dispatch(addTodo(result));
30 | };
31 |
32 | export const updateTodo = todo =>
33 | (dispatch) => {
34 | dispatch(toggleTodo(todo));
35 | todosSource.update(todo);
36 | };
37 |
38 | export const deleteTodo = todo =>
39 | (dispatch) => {
40 | dispatch(removeTodo(todo));
41 | todosSource.delete(todo);
42 | };
43 |
--------------------------------------------------------------------------------
/app/services/api.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import Alert from 'react-s-alert';
3 | import currentUser from 'services/currentUser';
4 | import sessionStorage from 'services/sessionStorage';
5 | import i18n from 'services/i18n';
6 | import config from 'config';
7 |
8 | const api = axios.create({ baseURL: config.apiTarget });
9 |
10 | api.interceptors.request.use(
11 | (axiosConfig) => {
12 | if (axiosConfig.withoutAuth) return axiosConfig;
13 |
14 | return {
15 | ...axiosConfig,
16 | headers: {
17 | ...axiosConfig.headers,
18 | 'X-User-Email': currentUser.email,
19 | 'X-User-Token': currentUser.token,
20 | },
21 | };
22 | },
23 | error => Promise.reject(error),
24 | );
25 |
26 |
27 | api.interceptors.response.use(
28 | response => response,
29 | (error) => {
30 | const {
31 | message,
32 | response: errorResponse,
33 | } = error;
34 |
35 | if (errorResponse) {
36 | if (errorResponse.status === 401) {
37 | sessionStorage.remove();
38 | } else {
39 | Alert.error(errorResponse.data.error);
40 | }
41 | } else if (message === 'Network Error') {
42 | Alert.error(i18n.t('common:errorNetwork'));
43 | }
44 |
45 | return Promise.reject(error);
46 | },
47 | );
48 |
49 | export default api;
50 |
--------------------------------------------------------------------------------
/app/components/todo/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | Grid,
5 | Row,
6 | Col,
7 | Button,
8 | } from 'react-bootstrap';
9 | import i18n from 'services/i18n';
10 | import TodoList from 'containers/todo/list';
11 | import styles from './styles.css';
12 |
13 | const Todo = props => (
14 |
15 |
16 | { i18n.t('todo:list') }
18 |
19 |
25 | { i18n.t('todo:newTask') }
26 |
27 |
28 |
29 |
30 |
32 | { i18n.t('todo:incomplete') }
33 |
34 |
38 | { i18n.t('todo:complete') }
39 |
40 |
43 |
44 | );
45 |
46 | Todo.propTypes = {
47 | openModal: PropTypes.func.isRequired,
48 | };
49 |
50 | export default Todo;
51 |
--------------------------------------------------------------------------------
/app/actions/session.js:
--------------------------------------------------------------------------------
1 | import { createAction } from 'redux-actions';
2 | import sessionSource from 'sources/session';
3 | import usersSource from 'sources/users';
4 | import sessionStorage from 'services/sessionStorage';
5 | import appHistory from 'services/history';
6 | import { paths } from 'helpers/routes';
7 |
8 | export const LOAD_DATA = 'LOAD_DATA';
9 | export const SET_USER = 'SET_USER';
10 | export const REMOVE_USER = 'REMOVE_USER';
11 |
12 | export const loadData = createAction(LOAD_DATA);
13 | export const setUser = createAction(SET_USER);
14 | export const removeUser = createAction(REMOVE_USER);
15 |
16 | export const signinUser = user =>
17 | async (dispatch) => {
18 | dispatch(loadData());
19 |
20 | const result = await sessionSource.signin(user);
21 |
22 | sessionStorage.set(result);
23 | dispatch(setUser(result));
24 | appHistory.push(paths.home());
25 | };
26 |
27 | export const signupUser = user =>
28 | async (dispatch) => {
29 | dispatch(loadData());
30 |
31 | const result = await usersSource.create(user);
32 |
33 | sessionStorage.set(result);
34 | dispatch(setUser(result));
35 | appHistory.push(paths.home());
36 | };
37 |
38 | export const logoutUser = user =>
39 | async (dispatch) => {
40 | await sessionSource.logout(user);
41 | sessionStorage.remove();
42 | dispatch(removeUser());
43 | };
44 |
--------------------------------------------------------------------------------
/app/components/todo/tests/item.test.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 | import TodoItem from '../item';
4 |
5 | describe('TodoItem', () => {
6 | let props;
7 | let component;
8 | const renderComponent = () => mount(Why React? Edit on GitHub React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC. We built React to solve one problem: building large applications with data that changes over time.
Simple Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.
Declarative When the data changes, React conceptually hits the \\"refresh\\" button, and knows to only update the changed parts.
Build Composable Components React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.
Give It Five Minutes React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. Give it five minutes while reading this guide; those crazy ideas have worked for building thousands of components both inside and outside of Facebook and Instagram.
article id: 1 ",
8 | }
9 | }
10 | />
11 | `;
12 |
--------------------------------------------------------------------------------
/app/containers/todo/tests/list.test.js:
--------------------------------------------------------------------------------
1 | import { shallow } from 'enzyme';
2 | import { containerWithStore, containerProps } from 'helpers/store';
3 | import TodoListContainer from '../list';
4 |
5 | describe('TodoListContainer', () => {
6 | let state;
7 | let props;
8 | let component;
9 | const renderComponent = () => shallow(containerWithStore(TodoListContainer, state, props));
10 |
11 | beforeEach(() => {
12 | state = {
13 | todos: {
14 | isLoading: false,
15 | todos: [
16 | { id: 1, isComplete: true, name: 'Something to do 1' },
17 | { id: 2, isComplete: false, name: 'Something to do 2' },
18 | { id: 3, isComplete: false, name: 'Something to do 3' },
19 | ],
20 | },
21 | };
22 | props = {
23 | deleteTodo: () => {},
24 | updateTodo: () => {},
25 | isComplete: true,
26 | };
27 | });
28 |
29 | it('renders TodoList component', () => {
30 | component = renderComponent().find('TodoListContainer').shallow();
31 | const todoListProps = containerProps(component);
32 |
33 | expect(component).toBePresent();
34 | expect(todoListProps).toEqual(['todos', 'deleteTodo', 'updateTodo']);
35 | });
36 |
37 | it('filters todos by isComplete', () => {
38 | component = renderComponent().find('TodoListContainer').shallow();
39 | const todos = component.prop('todos');
40 |
41 | expect(todos).toHaveLength(1);
42 | expect(todos).toContainEqual({ id: 1, isComplete: true, name: 'Something to do 1' });
43 | });
44 | });
45 |
--------------------------------------------------------------------------------
/app/components/todo/tests/__snapshots__/index.snapshot.test.jsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Todo renders correctly 1`] = `
4 |
9 |
14 |
20 | Todo List
21 |
22 |
23 |
37 | New Task
38 |
39 |
40 |
41 |
46 |
54 | Incomplete
55 |
56 |
68 | Complete
69 |
70 |
75 |
76 | `;
77 |
--------------------------------------------------------------------------------
/app/reducers/modal/index.test.js:
--------------------------------------------------------------------------------
1 | import reducer from './';
2 |
3 | describe('Modal reducer', () => {
4 | let initialState;
5 | let state;
6 | let actionType;
7 | let payload;
8 |
9 | const callReducer = () => reducer(state, { type: actionType, payload });
10 |
11 | beforeEach(() => {
12 | initialState = {
13 | isOpen: false,
14 | modalName: '',
15 | modalOptions: {},
16 | };
17 | });
18 |
19 | it('returns initial state', () => {
20 | expect(callReducer()).toEqual(initialState);
21 | });
22 |
23 | context('when state is present', () => {
24 | beforeEach(() => {
25 | state = initialState;
26 |
27 | payload = {
28 | name: 'Awesome Modal',
29 | someOption: 'Some option value',
30 | };
31 | });
32 |
33 | describe('OPEN_MODAL', () => {
34 | beforeEach(() => {
35 | actionType = 'OPEN_MODAL';
36 | });
37 |
38 | it('returns new state', () => {
39 | expect(callReducer()).toEqual({
40 | isOpen: true,
41 | modalName: 'Awesome Modal',
42 | modalOptions: {
43 | someOption: 'Some option value',
44 | },
45 | });
46 | });
47 | });
48 |
49 | describe('CLOSE_MODAL', () => {
50 | beforeEach(() => {
51 | actionType = 'CLOSE_MODAL';
52 |
53 | state = {
54 | isOpen: true,
55 | modalName: 'Awesome Modal',
56 | modalOptions: {
57 | someOption: 'Some option value',
58 | },
59 | };
60 | });
61 |
62 | it('returns initial state', () => {
63 | expect(callReducer()).toEqual(initialState);
64 | });
65 | });
66 | });
67 | });
68 |
--------------------------------------------------------------------------------
/app/hoc/withAuth/tests/index.test.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 | import { MemoryRouter, Switch, Route } from 'react-router';
4 | import { containerWithStore } from 'helpers/store';
5 | import { fakeSession, fakeEmptySession } from 'mocks/fakeSession';
6 | import { paths } from 'helpers/routes';
7 | import withAuth from '../';
8 |
9 | describe('withAuth HOC', () => {
10 | let state;
11 |
12 | const WrappedComponent = () => null;
13 | const Home = () => null;
14 |
15 | const renderComponent = () => {
16 | const EnhancedComponent = () => containerWithStore(withAuth(WrappedComponent), state);
17 |
18 | return mount((
19 |
20 |
21 |
28 |
29 | ));
30 | };
31 |
32 | context('when authenticated', () => {
33 | beforeEach(() => {
34 | state = {
35 | session: fakeSession,
36 | };
37 | });
38 |
39 | it('renders WrappedComponent', () => {
40 | const component = renderComponent().find(WrappedComponent);
41 |
42 | expect(component).toBePresent();
43 | });
44 | });
45 |
46 | context('when unauthenticated', () => {
47 | beforeEach(() => {
48 | state = {
49 | session: fakeEmptySession,
50 | };
51 | });
52 |
53 | it('redirect to root', () => {
54 | const component = renderComponent().find(Home);
55 |
56 | expect(component).toBePresent();
57 | });
58 | });
59 | });
60 |
--------------------------------------------------------------------------------
/app/components/navigation/tests/index.test.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import { MemoryRouter } from 'react-router-dom';
4 | import Navigation from 'components/navigation';
5 |
6 | describe('Navigation', () => {
7 | const signup = jest.fn();
8 | const signin = jest.fn();
9 | const logout = jest.fn();
10 | let props;
11 | const renderComponent = () => shallow((
12 |
13 |
15 | ))
16 | .find(Navigation)
17 | .dive();
18 |
19 | beforeEach(() => {
20 | props = {
21 | signin,
22 | signup,
23 | logout,
24 | loggedIn: false,
25 | currentUser: {},
26 | };
27 | });
28 |
29 | it('calls signup callback', () => {
30 | const navigationComponent = renderComponent();
31 |
32 | navigationComponent.find('NavItem').at(0).simulate('click');
33 |
34 | expect(signup).toHaveBeenCalled();
35 | });
36 |
37 | it('calls signin callback', () => {
38 | const navigationComponent = renderComponent();
39 |
40 | navigationComponent.find('NavItem').at(1).simulate('click');
41 |
42 | expect(signin).toHaveBeenCalled();
43 | });
44 |
45 | context('when user is logged in', () => {
46 | beforeEach(() => {
47 | props = {
48 | ...props,
49 | loggedIn: true,
50 | currentUser: {
51 | id: 1,
52 | name: 'user',
53 | email: 'user@example.com',
54 | },
55 | };
56 | });
57 |
58 | it('calls logout callback', () => {
59 | const navigationComponent = renderComponent();
60 |
61 | navigationComponent.find('NavItem').at(0).simulate('click');
62 |
63 | expect(logout).toHaveBeenCalled();
64 | });
65 | });
66 | });
67 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies,no-console */
2 | require('dotenv').config();
3 |
4 | const webpack = require('webpack');
5 | const webpackDevMiddleware = require('webpack-dev-middleware');
6 | const webpackHotMiddleware = require('webpack-hot-middleware');
7 | const express = require('express');
8 | const compression = require('compression');
9 | const historyApiFallback = require('connect-history-api-fallback');
10 | const jsonServer = require('./json-server');
11 | const webpackConfig = require('./webpack.config');
12 |
13 | const port = process.env.PORT || 8000;
14 | const server = express();
15 |
16 | if (process.env.NODE_ENV !== 'production') {
17 | const compiler = webpack(webpackConfig);
18 | const webpackOptions = {
19 | stats: {
20 | assets: true,
21 | chunks: false,
22 | modules: false,
23 | colors: true,
24 | performance: true,
25 | timings: true,
26 | version: true,
27 | warnings: true,
28 | },
29 | watchOptions: {
30 | aggregateTimeout: 300,
31 | poll: true,
32 | ignored: /node_modules/,
33 | },
34 | publicPath: webpackConfig.output.publicPath,
35 | };
36 |
37 | compiler.apply(new webpack.ProgressPlugin());
38 | server.use(historyApiFallback());
39 | server.use(webpackDevMiddleware(compiler, webpackOptions));
40 | server.use(webpackHotMiddleware(compiler));
41 | server.listen(port, 'localhost', () => {
42 | console.log(`Server listening on port ${port}`);
43 | });
44 | jsonServer.initialize(server);
45 | } else {
46 | webpack(webpackConfig, (err) => {
47 | if (err) {
48 | console.log(err);
49 | return;
50 | }
51 |
52 | server.use(compression());
53 | server.use(historyApiFallback());
54 | server.use(express.static(webpackConfig.output.path));
55 | server.listen(port);
56 | });
57 | }
58 |
--------------------------------------------------------------------------------
/app/components/todo/tests/__snapshots__/modal.snapshot.test.jsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`TodoModal renders correctly 1`] = `
4 |
9 |
41 |
42 | `;
43 |
44 | exports[`TodoModal when form is invalid renders form with validation errors 1`] = `
45 |
50 |
82 |
83 | `;
84 |
--------------------------------------------------------------------------------
/app/components/navigation/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Navbar, Nav, NavItem } from 'react-bootstrap';
4 | import i18n from 'services/i18n';
5 | import { paths } from 'helpers/routes';
6 | import styles from './styles.css';
7 | import NavItemLink from './navItemLink';
8 |
9 | const Navigation = ({
10 | loggedIn, currentUser, logout, signin, signup,
11 | }) => {
12 | const logoutUser = () => {
13 | logout(currentUser);
14 | };
15 |
16 | const signinUser = () => {
17 | signin(currentUser);
18 | };
19 |
20 | const signupUser = () => {
21 | signup(currentUser);
22 | };
23 |
24 | const renderRightNav = () => {
25 | if (loggedIn) {
26 | return (
27 |
28 |
29 | { currentUser.email }
30 |
31 |
32 | { i18n.t('header:signOut') }
33 |
34 |
35 | );
36 | }
37 |
38 | return (
39 |
40 |
41 | { i18n.t('header:signUp') }
42 |
43 |
44 | { i18n.t('header:signIn') }
45 |
46 |
47 | );
48 | };
49 |
50 | return (
51 |
52 |
53 |
54 | { i18n.t('common:projectName') }
55 |
56 |
57 |
58 |
59 | { i18n.t('header:home') }
60 |
61 |
62 | { i18n.t('header:about') }
63 |
64 |
65 | { renderRightNav() }
66 |
67 | );
68 | };
69 |
70 | Navigation.propTypes = {
71 | currentUser: PropTypes.object.isRequired,
72 | loggedIn: PropTypes.bool.isRequired,
73 | logout: PropTypes.func.isRequired,
74 | signin: PropTypes.func.isRequired,
75 | signup: PropTypes.func.isRequired,
76 | };
77 |
78 | export default Navigation;
79 |
--------------------------------------------------------------------------------
/app/reducers/session/index.test.js:
--------------------------------------------------------------------------------
1 | import reducer from './';
2 |
3 | jest.mock('services/sessionStorage', () => ({
4 | loggedIn: () => true,
5 | currentUser: () => ({ id: 1 }),
6 | }));
7 |
8 | describe('Session reducer', () => {
9 | let initialState;
10 | let state;
11 | let actionType;
12 | let payload;
13 |
14 | const callReducer = () => reducer(state, { type: actionType, payload });
15 |
16 | beforeEach(() => {
17 | initialState = {
18 | isLoading: false,
19 | loggedIn: true,
20 | currentUser: { id: 1 },
21 | };
22 | });
23 |
24 | it('returns initial state', () => {
25 | expect(callReducer()).toEqual(initialState);
26 | });
27 |
28 | context('when state is present', () => {
29 | beforeEach(() => {
30 | state = initialState;
31 | });
32 |
33 | describe('LOAD_DATA', () => {
34 | beforeEach(() => {
35 | actionType = 'LOAD_DATA';
36 | });
37 |
38 | it('returns new state', () => {
39 | expect(callReducer()).toEqual({
40 | isLoading: true,
41 | loggedIn: true,
42 | currentUser: { id: 1 },
43 | });
44 | });
45 | });
46 |
47 | describe('SET_USER', () => {
48 | beforeEach(() => {
49 | actionType = 'SET_USER';
50 |
51 | state = {
52 | isLoading: true,
53 | loggedIn: false,
54 | currentUser: {},
55 | };
56 |
57 | payload = {
58 | name: 'User name',
59 | };
60 | });
61 |
62 | it('returns new state', () => {
63 | expect(callReducer()).toEqual({
64 | isLoading: false,
65 | loggedIn: true,
66 | currentUser: { name: 'User name' },
67 | });
68 | });
69 | });
70 |
71 | describe('REMOVE_USER', () => {
72 | beforeEach(() => {
73 | actionType = 'REMOVE_USER';
74 |
75 | state = {
76 | isLoading: true,
77 | loggedIn: true,
78 | currentUser: { name: 'User name' },
79 | };
80 | });
81 |
82 | it('returns new state', () => {
83 | expect(callReducer()).toEqual({
84 | isLoading: false,
85 | loggedIn: false,
86 | currentUser: {},
87 | });
88 | });
89 | });
90 | });
91 | });
92 |
--------------------------------------------------------------------------------
/app/containers/modal/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import { shallow } from 'enzyme';
2 | import { containerWithStore, containerProps } from 'helpers/store';
3 | import Modal from 'containers/modal';
4 |
5 | describe('Modal', () => {
6 | let state;
7 | let component;
8 | const renderComponent = () => shallow(containerWithStore(Modal, state));
9 |
10 | context('when it is todo modal', () => {
11 | beforeEach(() => {
12 | state = {
13 | modal: {
14 | isOpen: true,
15 | modalName: 'todo',
16 | modalOptions: {},
17 | },
18 | };
19 | });
20 |
21 | it('renders TodoModal component', () => {
22 | component = renderComponent().find('ModalContainer').shallow();
23 | const modalProps = containerProps(component);
24 |
25 | expect(component).toBePresent();
26 | expect(component.name()).toEqual('Connect(TodoModal)');
27 | expect(modalProps).toEqual(['isOpen', 'modalOptions', 'closeModal']);
28 | });
29 | });
30 |
31 | context('when it is signin modal', () => {
32 | beforeEach(() => {
33 | state = {
34 | modal: {
35 | isOpen: false,
36 | modalName: 'signin',
37 | modalOptions: {},
38 | },
39 | };
40 | });
41 |
42 | it('renders SigninModal component', () => {
43 | component = renderComponent().find('ModalContainer').shallow();
44 | const modalProps = containerProps(component);
45 |
46 | expect(component).toBePresent();
47 | expect(component.name()).toEqual('Connect(SigninModal)');
48 | expect(modalProps).toEqual(['isOpen', 'modalOptions', 'closeModal']);
49 | });
50 | });
51 |
52 | context('when it is signup modal', () => {
53 | beforeEach(() => {
54 | state = {
55 | modal: {
56 | isOpen: false,
57 | modalName: 'signup',
58 | modalOptions: {},
59 | },
60 | };
61 | });
62 |
63 | it('renders SignupModal component', () => {
64 | component = renderComponent().find('ModalContainer').shallow();
65 | const modalProps = containerProps(component);
66 |
67 | expect(component).toBePresent();
68 | expect(component.name()).toEqual('Connect(SignupModal)');
69 | expect(modalProps).toEqual(['isOpen', 'modalOptions', 'closeModal']);
70 | });
71 | });
72 | });
73 |
--------------------------------------------------------------------------------
/app/components/todo/modal.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-unused-state */
2 | import React, { Component } from 'react';
3 | import PropTypes from 'prop-types';
4 | import {
5 | Button,
6 | FormGroup,
7 | FormControl,
8 | ControlLabel,
9 | } from 'react-bootstrap';
10 | import i18n from 'services/i18n';
11 | import Modal from 'components/modal';
12 | import Form from 'components/form';
13 |
14 | class TodoModal extends Component {
15 | state = {
16 | name: '',
17 | errors: {},
18 | };
19 |
20 | changeName = ({ target }) => {
21 | const { name, value } = target;
22 |
23 | this.setState({ [name]: value });
24 | };
25 |
26 | validationState = () => {
27 | const { length } = this.state.name;
28 |
29 | if (!length) return null;
30 |
31 | return length > 5 ? 'success' : 'error';
32 | };
33 |
34 | createTodo = async (event) => {
35 | event.preventDefault();
36 |
37 | const { name } = this.state;
38 | const { createTodo, closeModal } = this.props;
39 |
40 | if (this.validationState() === 'success') {
41 | try {
42 | await createTodo({ name });
43 | this.setState({ name: '' });
44 | closeModal();
45 | } catch ({ errors }) {
46 | this.setState({ errors });
47 | }
48 | }
49 | };
50 |
51 | render() {
52 | const { name } = this.state;
53 | const { isOpen, closeModal } = this.props;
54 |
55 | return (
56 |
61 |
81 |
82 | );
83 | }
84 | }
85 |
86 | TodoModal.propTypes = {
87 | closeModal: PropTypes.func.isRequired,
88 | createTodo: PropTypes.func.isRequired,
89 | isOpen: PropTypes.bool.isRequired,
90 | };
91 |
92 | export default TodoModal;
93 |
--------------------------------------------------------------------------------
/app/components/signin/tests/__snapshots__/modal.snapshot.test.jsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`SigninModal renders correctly 1`] = `
4 |
9 |
55 |
56 | `;
57 |
58 | exports[`SigninModal when form is invalid renders form with validation errors 1`] = `
59 |
64 |
110 |
111 | `;
112 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
4 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
5 |
6 | const getEntry = () => {
7 | let entry = ['babel-polyfill'];
8 |
9 | if (process.env.NODE_ENV !== 'production') {
10 | entry = entry.concat('react-hot-loader/patch', 'webpack-hot-middleware/client');
11 | }
12 |
13 | return entry.concat('./index');
14 | };
15 |
16 | const getPlugins = () => {
17 | let plugins = [
18 | new HtmlWebpackPlugin({
19 | template: 'index.html',
20 | }),
21 | new ExtractTextPlugin('application.css'),
22 | new webpack.EnvironmentPlugin(['NODE_ENV']),
23 | ];
24 |
25 | if (process.env.NODE_ENV !== 'production') {
26 | plugins = plugins.concat([
27 | new webpack.NamedModulesPlugin(),
28 | new webpack.HotModuleReplacementPlugin(),
29 | new webpack.NoEmitOnErrorsPlugin(),
30 | ]);
31 | } else {
32 | plugins = plugins.concat([
33 | new webpack.optimize.UglifyJsPlugin(),
34 | ]);
35 | }
36 | return plugins;
37 | };
38 |
39 | module.exports = {
40 | context: path.resolve(__dirname, 'app'),
41 | resolve: {
42 | modules: [
43 | path.resolve(__dirname, 'app'),
44 | 'node_modules',
45 | ],
46 | alias: {
47 | config: path.resolve(__dirname, 'app', 'config', 'env', process.env.NODE_ENV || 'development'),
48 | },
49 | extensions: ['.js', '.jsx', '.json'],
50 | },
51 | entry: getEntry(),
52 | output: {
53 | path: path.resolve(__dirname, 'dist'),
54 | publicPath: '/',
55 | filename: 'application.js',
56 | },
57 | devtool: process.env.NODE_ENV !== 'production' ? 'eval-source-map' : undefined,
58 | plugins: getPlugins(),
59 | module: {
60 | rules: [
61 | {
62 | test: /\.js(x)?$/,
63 | exclude: [/node_modules/],
64 | use: ['babel-loader'],
65 | },
66 | {
67 | test: /\.css$/,
68 | exclude: [/app\/stylesheets\//],
69 | use: ExtractTextPlugin.extract({
70 | fallback: 'style-loader',
71 | use: [
72 | {
73 | loader: 'css-loader',
74 | query: {
75 | modules: true,
76 | importLoaders: 1,
77 | },
78 | },
79 | 'postcss-loader',
80 | ],
81 | }),
82 | },
83 | {
84 | test: /\.css$/,
85 | include: [/app\/stylesheets\//],
86 | use: ExtractTextPlugin.extract({
87 | fallback: 'style-loader',
88 | use: [
89 | 'css-loader',
90 | 'postcss-loader',
91 | ],
92 | }),
93 | },
94 | {
95 | test: /\.(jpg|png|ttf|eot|svg|woff2|woff)$/,
96 | use: ['file-loader'],
97 | },
98 | ],
99 | },
100 | };
101 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Skeleton for React based application
2 |
3 | [](https://travis-ci.org/fs/react-base)
4 | [](https://david-dm.org/fs/react-base)
5 | [](https://david-dm.org/fs/react-base#info=devDependencies)
6 |
7 | Kick-start your new web application based on React and Redux technologies. It also includes Webpack 3, Yarn, React hot loader, PostCSS, JSON-server tools and test environment based on Jest, Enzyme, Eslint and Stylelint for even more rapid development.
8 |
9 | Try the demo [http://react-base.herokuapp.com](http://react-base.herokuapp.com)
10 |
11 | ## Dependencies:
12 |
13 | List of all dependencies is presented [here](https://github.com/fs/react-base/blob/master/package.json)
14 |
15 | ## Install
16 | ### OSX
17 |
18 | Install Node.js
19 |
20 | ```bash
21 | brew install nvm yarn
22 | nvm install node
23 | nvm alias default node
24 | ```
25 |
26 | ## Quick start
27 |
28 | Clone application as new project with original repository named "react-base"
29 |
30 | ```bash
31 | git clone git@github.com:fs/react-base.git --origin react-base [MY-NEW-PROJECT]
32 | ```
33 |
34 | Create your new repo on GitHub and push master into it.
35 | Make sure master branch is tracking origin repo.
36 |
37 | ```bash
38 | git remote add origin git@github.com:[MY-GITHUB-ACCOUNT]/[MY-NEW-PROJECT].git
39 | git push -u origin master
40 | ```
41 |
42 | Run bootstrap script
43 |
44 | ```bash
45 | bin/setup
46 | ```
47 |
48 | ## Run application
49 |
50 | Run app (by default environment is 'development', port is 8000)
51 |
52 | ```bash
53 | yarn start
54 | ```
55 |
56 | Run app with options
57 |
58 | ```bash
59 | [] yarn start
60 | ```
61 |
62 | ```bash
63 | NODE_ENV=development # build app with development environment
64 | NODE_ENV=production # build app with production environment
65 | NODE_ENV=test # build app with test environment
66 | PORT=8000 # run server on 8000 port
67 | ```
68 |
69 | Start to use application in browser:
70 |
71 | ```bash
72 | localhost:8000
73 | ```
74 |
75 | ## Run tests and linters
76 |
77 | ```bash
78 | yarn test
79 | ```
80 |
81 | ## Code linting tasks
82 |
83 | Run javascript linter
84 | ```bash
85 | yarn eslint
86 | ```
87 |
88 | Run stylesheets linter
89 | ```bash
90 | yarn stylelint
91 | ```
92 |
93 | Run all linters
94 | ```bash
95 | yarn lint
96 | ```
97 |
98 | ## Test tasks
99 |
100 | Run jest tests
101 | ```bash
102 | yarn jest
103 | ```
104 |
105 | ## Credits
106 |
107 | React base is maintained by [Marat Fakhreev](http://github.com/maratfakhreev).
108 | It was written by [Flatstack](http://www.flatstack.com) with the help of our
109 | [contributors](http://github.com/fs/react-base/contributors).
110 |
111 | [
74 |
110 |
111 | );
112 | }
113 | }
114 |
115 | SigninModal.propTypes = {
116 | closeModal: PropTypes.func.isRequired,
117 | isOpen: PropTypes.bool.isRequired,
118 | session: PropTypes.object.isRequired,
119 | signinUser: PropTypes.func.isRequired,
120 | };
121 |
122 | export default SigninModal;
123 |
--------------------------------------------------------------------------------
/app/reducers/todos/index.test.js:
--------------------------------------------------------------------------------
1 | import reducer from './';
2 |
3 | describe('Todos reducer', () => {
4 | let initialState;
5 | let state;
6 | let actionType;
7 | let payload;
8 |
9 | const callReducer = () => reducer(state, { type: actionType, payload });
10 |
11 | beforeEach(() => {
12 | initialState = {
13 | isLoading: false,
14 | todos: [],
15 | };
16 | });
17 |
18 | it('returns initial state', () => {
19 | expect(callReducer()).toEqual(initialState);
20 | });
21 |
22 | context('when state is present', () => {
23 | beforeEach(() => {
24 | state = initialState;
25 | });
26 |
27 | describe('LOAD_TODOS', () => {
28 | beforeEach(() => {
29 | actionType = 'LOAD_TODOS';
30 | });
31 |
32 | it('returns new state', () => {
33 | expect(callReducer()).toEqual({
34 | isLoading: true,
35 | todos: [],
36 | });
37 | });
38 | });
39 |
40 | describe('SET_TODOS', () => {
41 | beforeEach(() => {
42 | actionType = 'SET_TODOS';
43 |
44 | state.isLoading = true;
45 |
46 | payload = [{
47 | id: 1,
48 | name: 'Awesome Todo',
49 | }];
50 | });
51 |
52 | it('returns new state', () => {
53 | expect(callReducer()).toEqual({
54 | isLoading: false,
55 | todos: [{
56 | id: 1,
57 | name: 'Awesome Todo',
58 | }],
59 | });
60 | });
61 | });
62 |
63 | describe('ADD_TODO', () => {
64 | beforeEach(() => {
65 | actionType = 'ADD_TODO';
66 |
67 | state.todos = [{
68 | id: 2,
69 | name: 'Another Todo',
70 | }];
71 |
72 | payload = {
73 | id: 1,
74 | name: 'Awesome Todo',
75 | };
76 | });
77 |
78 | it('returns new state', () => {
79 | expect(callReducer()).toEqual({
80 | isLoading: false,
81 | todos: [{
82 | id: 2,
83 | name: 'Another Todo',
84 | }, {
85 | id: 1,
86 | name: 'Awesome Todo',
87 | }],
88 | });
89 | });
90 | });
91 |
92 | describe('TOGGLE_TODO', () => {
93 | beforeEach(() => {
94 | actionType = 'TOGGLE_TODO';
95 |
96 | state.todos = [{
97 | id: 1,
98 | name: 'Awesome Todo',
99 | }, {
100 | id: 2,
101 | name: 'Another Todo',
102 | }];
103 |
104 | payload = {
105 | id: 1,
106 | name: 'Updated Todo',
107 | };
108 | });
109 |
110 | it('returns new state', () => {
111 | expect(callReducer()).toEqual({
112 | isLoading: false,
113 | todos: [{
114 | id: 1,
115 | name: 'Updated Todo',
116 | }, {
117 | id: 2,
118 | name: 'Another Todo',
119 | }],
120 | });
121 | });
122 | });
123 |
124 | describe('REMOVE_TODO', () => {
125 | beforeEach(() => {
126 | actionType = 'REMOVE_TODO';
127 |
128 | state.todos = [{
129 | id: 1,
130 | name: 'Awesome Todo',
131 | }, {
132 | id: 2,
133 | name: 'Another Todo',
134 | }];
135 |
136 | payload = {
137 | id: 1,
138 | name: 'Awesome Todo',
139 | };
140 | });
141 |
142 | it('returns new state', () => {
143 | expect(callReducer()).toEqual({
144 | isLoading: false,
145 | todos: [{
146 | id: 2,
147 | name: 'Another Todo',
148 | }],
149 | });
150 | });
151 | });
152 | });
153 | });
154 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-base",
3 | "version": "2.0.0",
4 | "authors": [
5 | "Marat Fakhreev "
6 | ],
7 | "repository": {
8 | "type": "git",
9 | "url": "git://github.com:fs/react-base.git"
10 | },
11 | "scripts": {
12 | "stylelint": "stylelint './app/**/*.css'",
13 | "stylelint-fix": "stylefmt --recursive './app/**/*.css'",
14 | "eslint": "eslint 'server.js' './app' './config' --ext .js,.jsx",
15 | "eslint-fix": "yarn eslint -- --fix",
16 | "lint": "yarn stylelint && yarn eslint",
17 | "jest": "jest",
18 | "test": "yarn lint && yarn jest",
19 | "start": "node ./server"
20 | },
21 | "license": "MIT",
22 | "engines": {
23 | "node": ">=9.0.0"
24 | },
25 | "dependencies": {
26 | "axios": "^0.18.0",
27 | "bootstrap": "^3.3.7",
28 | "classnames": "^2.2.5",
29 | "history": "^4.7.2",
30 | "i18next": "^10.4.1",
31 | "i18next-browser-languagedetector": "^2.0.0",
32 | "lodash": "^4.17.4",
33 | "path-to-regexp": "^2.1.0",
34 | "prop-types": "^15.6.0",
35 | "react": "^16.2.0",
36 | "react-bootstrap": "^0.32.1",
37 | "react-dom": "^16.2.0",
38 | "react-hot-loader": "^4.0.0-beta.18",
39 | "react-redux": "^5.0.6",
40 | "react-router": "^4.2.0",
41 | "react-router-dom": "^4.2.2",
42 | "react-s-alert": "^1.4.1",
43 | "redux": "^3.7.2",
44 | "redux-actions": "^2.2.1",
45 | "redux-devtools-extension": "^2.13.2",
46 | "redux-thunk": "^2.2.0"
47 | },
48 | "devDependencies": {
49 | "autoprefixer": "^8.0.0",
50 | "babel-core": "^6.26.0",
51 | "babel-eslint": "^8.2.2",
52 | "babel-jest": "^22.2.2",
53 | "babel-loader": "^7.1.2",
54 | "babel-plugin-module-resolver": "^3.1.0",
55 | "babel-plugin-transform-react-constant-elements": "^6.23.0",
56 | "babel-plugin-transform-react-inline-elements": "^6.22.0",
57 | "babel-plugin-transform-react-remove-prop-types": "^0.4.8",
58 | "babel-polyfill": "^6.26.0",
59 | "babel-preset-env": "^1.6.1",
60 | "babel-preset-react": "^6.24.1",
61 | "babel-preset-stage-0": "^6.24.1",
62 | "compression": "^1.7.0",
63 | "connect-history-api-fallback": "^1.3.0",
64 | "css-loader": "^0.28.5",
65 | "dotenv": "^5.0.0",
66 | "enzyme": "^3.3.0",
67 | "enzyme-adapter-react-16": "^1.1.1",
68 | "enzyme-matchers": "^4.2.0",
69 | "enzyme-to-json": "^3.3.1",
70 | "eslint": "^4.5.0",
71 | "eslint-config-airbnb": "^16.1.0",
72 | "eslint-import-resolver-jest": "^2.0.1",
73 | "eslint-import-resolver-webpack": "^0.8.4",
74 | "eslint-plugin-import": "^2.8.0",
75 | "eslint-plugin-jest": "^21.12.2",
76 | "eslint-plugin-jsx-a11y": "^6.0.3",
77 | "eslint-plugin-react": "^7.7.0",
78 | "express": "^4.15.4",
79 | "extract-text-webpack-plugin": "^3.0.0",
80 | "file-loader": "^1.1.7",
81 | "html-webpack-plugin": "^2.30.1",
82 | "identity-obj-proxy": "^3.0.0",
83 | "jest": "^22.3.0",
84 | "jest-enzyme": "^4.2.0",
85 | "json-server": "^0.12.0",
86 | "postcss-color-function": "^4.0.0",
87 | "postcss-extend": "^1.0.5",
88 | "postcss-import": "^11.1.0",
89 | "postcss-loader": "^2.0.6",
90 | "postcss-mixins": "^6.1.0",
91 | "postcss-nested": "^3.0.0",
92 | "postcss-pxtorem": "^4.0.1",
93 | "postcss-simple-vars": "^4.1.0",
94 | "react-test-renderer": "^16.2.0",
95 | "redux-mock-store": "^1.2.3",
96 | "style-loader": "^0.20.2",
97 | "stylefmt": "^6.0.0",
98 | "stylelint": "^9.0.0",
99 | "stylelint-config-fs": "^0.5.0",
100 | "url-loader": "^0.6.2",
101 | "webpack": "^3.5.5",
102 | "webpack-dev-middleware": "^2.0.5",
103 | "webpack-hot-middleware": "^2.18.2"
104 | },
105 | "jest": {
106 | "modulePaths": [
107 | "app",
108 | "test"
109 | ],
110 | "testPathIgnorePatterns": [
111 | "/node_modules/",
112 | "config"
113 | ],
114 | "moduleFileExtensions": [
115 | "js",
116 | "jsx"
117 | ],
118 | "moduleNameMapper": {
119 | "\\.css$": "identity-obj-proxy"
120 | },
121 | "setupFiles": [
122 | "./test/mocks/fakeStorage.js"
123 | ],
124 | "setupTestFrameworkScriptFile": "./test/setup.js"
125 | }
126 | }
127 |
--------------------------------------------------------------------------------
/app/components/signup/tests/__snapshots__/modal.snapshot.test.jsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`SignupModal renders correctly 1`] = `
4 |
9 |
88 |
89 | `;
90 |
91 | exports[`SignupModal when form is invalid renders form with validation errors 1`] = `
92 |
97 |
176 |
177 | `;
178 |
--------------------------------------------------------------------------------
/app/components/navigation/tests/__snapshots__/index.snapshot.test.jsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Navigation renders correctly 1`] = `
4 |
7 |
10 |
13 |
16 | React-base
17 |
18 |
19 |
56 |
89 |
91 | `;
92 |
93 | exports[`Navigation when user is logged in renders user navigations 1`] = `
94 |
97 |
100 |
103 |
106 | React-base
107 |
108 |
109 |
146 |
181 |
183 | `;
184 |
--------------------------------------------------------------------------------
/app/components/signup/modal.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-unused-state */
2 | import React, { Component } from 'react';
3 | import PropTypes from 'prop-types';
4 | import {
5 | Button,
6 | FormGroup,
7 | FormControl,
8 | ControlLabel,
9 | } from 'react-bootstrap';
10 | import i18n from 'services/i18n';
11 | import Modal from 'components/modal';
12 | import Form from 'components/form';
13 |
14 | class SignupModal extends Component {
15 | state = {
16 | name: '',
17 | email: '',
18 | password: '',
19 | passwordConfirmation: '',
20 | errors: {},
21 | };
22 |
23 | setValue = ({ target }) => {
24 | const { name, value } = target;
25 |
26 | this.setState({ [name]: value });
27 | };
28 |
29 | isFormValid = () => {
30 | const {
31 | name,
32 | email,
33 | password,
34 | passwordConfirmation,
35 | } = this.state;
36 |
37 | return (
38 | name.trim().length &&
39 | email.length > 5 &&
40 | password.length > 5 &&
41 | passwordConfirmation.length > 5 &&
42 | this.isValidPassword()
43 | );
44 | };
45 |
46 | isValidPassword = () => {
47 | const { password, passwordConfirmation } = this.state;
48 |
49 | return password === passwordConfirmation;
50 | };
51 |
52 | validationState = (value) => {
53 | const { length } = value;
54 |
55 | if (!length) return null;
56 |
57 | return length > 5 ? 'success' : 'error';
58 | };
59 |
60 | nameValidationState = (value) => {
61 | const { length } = value.trim();
62 |
63 | return length ? 'success' : null;
64 | };
65 |
66 | passwordValidationState = (value) => {
67 | const { length } = value;
68 |
69 | if (!length) return null;
70 |
71 | return (this.isValidPassword() && length > 5) ? 'success' : 'error';
72 | };
73 |
74 | signUp = async (event) => {
75 | event.preventDefault();
76 |
77 | const {
78 | name,
79 | email,
80 | password,
81 | passwordConfirmation,
82 | } = this.state;
83 | const { signupUser, closeModal } = this.props;
84 |
85 | if (this.isFormValid()) {
86 | try {
87 | await signupUser({
88 | name, email, password, passwordConfirmation,
89 | });
90 | this.setState({
91 | name: '',
92 | email: '',
93 | password: '',
94 | passwordConfirmation: '',
95 | });
96 | closeModal();
97 | } catch ({ errors }) {
98 | this.setState({ errors });
99 | }
100 | }
101 | };
102 |
103 | render() {
104 | const {
105 | name,
106 | email,
107 | password,
108 | passwordConfirmation,
109 | } = this.state;
110 | const {
111 | isOpen,
112 | closeModal,
113 | session: {
114 | isLoading,
115 | },
116 | } = this.props;
117 |
118 | return (
119 |
124 |
177 |
178 | );
179 | }
180 | }
181 |
182 | SignupModal.propTypes = {
183 | closeModal: PropTypes.func.isRequired,
184 | isOpen: PropTypes.bool.isRequired,
185 | session: PropTypes.object.isRequired,
186 | signupUser: PropTypes.func.isRequired,
187 | };
188 |
189 | export default SignupModal;
190 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | ## Unreleased
4 | - Introduce async/await for async requests. Use axios instead of j-fetch. Move json-server logic to separated module
5 | ([#100](https://github.com/fs/react-base/pull/100))
6 | - Add "env" preset and move some plugins to production environment
7 | ([#98](https://github.com/fs/react-base/pull/98))
8 | - Setup HMR for reducers
9 | ([#96](https://github.com/fs/react-base/pull/96))
10 | - Setup env variable usage on client side
11 | ([#95](https://github.com/fs/react-base/pull/95))
12 | - Require reducers automatically via webpack require.context
13 | ([#94](https://github.com/fs/react-base/pull/94))
14 |
15 | ## 2.0.0 - 2017-11-12
16 | - Upgrade Node.js to version 9. Update hmr setup code regarding to webpack 3
17 | ([#92](https://github.com/fs/react-base/pull/92))
18 | - Remove mirror-creator. Move constants declaration to actions. Refactor actions and reducers.
19 | ([#91](https://github.com/fs/react-base/pull/91))
20 | - Add test environment, snapshot and unit tests. Refactor containers.
21 | ([#79](https://github.com/fs/react-base/pull/79))
22 | - Upgrade dependencies. Remove react-transition-group. Remove webpack-dashboard
23 | ([#88](https://github.com/fs/react-base/pull/88))
24 | - Add localization using i18next and react-i18next
25 | ([#83](https://github.com/fs/react-base/pull/83))
26 | - Use j-fetch library as main request library
27 | ([#85](https://github.com/fs/react-base/pull/85))
28 | - Use major version of Node.js in .nvmrc and package.json
29 | ([#82](https://github.com/fs/react-base/pull/82))
30 | - Cleanup postcss config
31 | ([#81](https://github.com/fs/react-base/pull/81))
32 | - Refactor stylesheets. Add react-transition-group, postcss-extend
33 | ([#80](https://github.com/fs/react-base/pull/80))
34 | - Remove deprecated postcss-inline-comment and react-addons-css-transition-group.
35 | ([#80](https://github.com/fs/react-base/pull/80))
36 | - Upgrade dependencies
37 | ([#80](https://github.com/fs/react-base/pull/80))
38 | - Upgrade dependencies
39 | ([#77](https://github.com/fs/react-base/pull/77))
40 | - Make improvements in the http lib
41 | ([#77](https://github.com/fs/react-base/pull/77))
42 | - Use stylelint-config-fs for linting CSS
43 | ([#76](https://github.com/fs/react-base/pull/76))
44 | - Migrate to React 15.5.x
45 | ([#76](https://github.com/fs/react-base/pull/76))
46 | - Upgrade dependencies
47 | ([#76](https://github.com/fs/react-base/pull/76))
48 | - Upgrade Node.js to 7.8.x
49 | ([#68](https://github.com/fs/react-base/pull/68))
50 | - Upgrade dependencies
51 | ([#68](https://github.com/fs/react-base/pull/68))
52 | - Cleanup eslint config
53 | ([#68](https://github.com/fs/react-base/pull/68))
54 | - Introduce Redux as a main unidirectional architecture realization
55 | ([#60](https://github.com/fs/react-base/pull/60))
56 | - Introduce custom http lib based on fetch-api as a main tool for server requests
57 | ([#60](https://github.com/fs/react-base/pull/60))
58 | - Introduce yarn
59 | ([#67](https://github.com/fs/react-base/pull/67))
60 |
61 | ## 1.1.0 - 2017-01-24
62 | - Upgrade dependencies
63 | ([#65](https://github.com/fs/react-base/pull/65))
64 | - Upgrade Node.js to 7.4.x
65 | ([#63](https://github.com/fs/react-base/pull/63))
66 | - Add transform-react-constant-elements, transform-react-inline-elements babel plugins
67 | ([#63](https://github.com/fs/react-base/pull/63))
68 | - Setup jest as default testing framework instead of karma
69 | ([#63](https://github.com/fs/react-base/pull/63))
70 | - Upgrade dependencies
71 | ([#63](https://github.com/fs/react-base/pull/63))
72 | - Add webpack dashboard
73 | ([#63](https://github.com/fs/react-base/pull/63))
74 | - Migrate to Webpack 2. Setup React-hot-loader 3
75 | ([#63](https://github.com/fs/react-base/pull/63))
76 | - Upgrade Node.js to 7.2.x
77 | ([#62](https://github.com/fs/react-base/pull/62))
78 | - Upgrade dependencies
79 | ([#62](https://github.com/fs/react-base/pull/62))
80 | - Use eslint-config-fs for linting javascript
81 | ([#62](https://github.com/fs/react-base/pull/62))
82 | - Upgrade Node.js to 6.7.x
83 | ([#57](https://github.com/fs/react-base/pull/57))
84 | - Upgrade eslint rules
85 | ([#57](https://github.com/fs/react-base/pull/57))
86 | - Upgrade dependencies
87 | ([#57](https://github.com/fs/react-base/pull/57))
88 | - Add json loader. Cleanup webpack config files
89 | ([#57](https://github.com/fs/react-base/pull/57))
90 | - Use react entities as self imported
91 | ([#56](https://github.com/fs/react-base/pull/56))
92 |
93 | ## 1.0.0 - 2016-09-15
94 | - Upgrade dependencies
95 | ([#55](https://github.com/fs/react-base/pull/55))
96 | - Upgrade dependencies
97 | ([#54](https://github.com/fs/react-base/pull/54))
98 | - Add Todo Modal test
99 | ([#53](https://github.com/fs/react-base/pull/53))
100 | - Add Sign Up Modal test
101 | ([#52](https://github.com/fs/react-base/pull/52))
102 | - Add Sign In Modal test
103 | ([#51](https://github.com/fs/react-base/pull/51))
104 | - Bring eslint rules to general view
105 | ([#50](https://github.com/fs/react-base/pull/50))
106 | - Add assets compression.
107 | ([#49](https://github.com/fs/react-base/pull/49))
108 | - Upgrade dependencies. Add new stylelint/eslint rules.
109 | ([#48](https://github.com/fs/react-base/pull/48))
110 | - Upgrade Node.js to 6.5.x
111 | ([#47](https://github.com/fs/react-base/pull/47))
112 | - Prefer camelCase to js files
113 | ([#47](https://github.com/fs/react-base/pull/47))
114 | - Add new rules to stylelint config
115 | ([#47](https://github.com/fs/react-base/pull/47))
116 | - Upgrade dependencies
117 | ([#46](https://github.com/fs/react-base/pull/46))
118 | - Remove functions binding inside jsx
119 | ([#46](https://github.com/fs/react-base/pull/46))
120 | - Upgrade Node.js to 6.4.x
121 | ([#44](https://github.com/fs/react-base/pull/44))
122 | - Add .gitattributes to avoid merge conflicts
123 | ([#44](https://github.com/fs/react-base/pull/44))
124 | - Upgrade dependencies. Simplify environment configs
125 | ([#43](https://github.com/fs/react-base/pull/43))
126 | - Introduce appHistory service. Update custom request lib. Update routes helper
127 | ([#42](https://github.com/fs/react-base/pull/42))
128 | - Extract session actions into session service
129 | ([#41](https://github.com/fs/react-base/pull/41))
130 | - Add new rules in postcss sorting config
131 | ([#39](https://github.com/fs/react-base/pull/39))
132 | - Upgrade Node.js to 6.3.x
133 | ([#38](https://github.com/fs/react-base/pull/38))
134 | - Upgrade dependencies
135 | ([#37](https://github.com/fs/react-base/pull/37))
136 | - Remove warnings in production build and update react-bootstrap
137 | ([#36](https://github.com/fs/react-base/pull/36))
138 | - Add postcss sorting config and rule for stylelint properties order
139 | ([#35](https://github.com/fs/react-base/pull/35))
140 | - Rewrite modals logic and add main Modals component. Clean up code
141 | ([#33](https://github.com/fs/react-base/pull/33))
142 | - Upgrade dependencies
143 | ([#31](https://github.com/fs/react-base/pull/31))
144 | - Add qs lib. Add ability to pass query parameters into request url
145 | ([#32](https://github.com/fs/react-base/pull/32))
146 | - Add classnames utility for conditionally joining classNames together
147 | ([#32](https://github.com/fs/react-base/pull/32))
148 | - Reorganize components structure
149 | ([#29](https://github.com/fs/react-base/pull/29))
150 | - Change javascript files extensions from .jsx to .js
151 | ([#29](https://github.com/fs/react-base/pull/29))
152 | - Fix stylesheets hot reloading issue
153 | ([#29](https://github.com/fs/react-base/pull/29))
154 | - Fix issue related to server port for production server
155 | ([#28](https://github.com/fs/react-base/pull/28))
156 | - Rewrite all scripts without usage of gulp. Remove gulp from project
157 | ([#27](https://github.com/fs/react-base/pull/27))
158 | - Upgrade Node.js to 6.2.x
159 | ([#26](https://github.com/fs/react-base/pull/26))
160 | - Lock core-decorators package version to avoid tests errors
161 | - Upgrade dependencies
162 | ([#25](https://github.com/fs/react-base/pull/25))
163 | - Upgrade dependencies
164 | ([#20](https://github.com/fs/react-base/pull/20))
165 | - Upgrade es6-promise polyfill lib
166 | ([#19](https://github.com/fs/react-base/pull/19))
167 | - Setup karma and jasmine for test environment
168 | ([#11](https://github.com/fs/react-base/pull/11))
169 | - Upgrade Node.js version to 6.1.0
170 | ([#18](https://github.com/fs/react-base/pull/18))
171 | - Remove stylelint-statement-max-nesting-depth since stylelint contains this option
172 | ([#17](https://github.com/fs/react-base/pull/17))
173 | - Upgrade dependencies
174 | ([#17](https://github.com/fs/react-base/pull/17))
175 | - Replace abstract actions/stores with their decorator analogs
176 | ([#12](https://github.com/fs/react-base/pull/12))
177 | - Add lodash to the devDependencies to avoid problem with json-server's resolved lodash version
178 | ([#16](https://github.com/fs/react-base/pull/16))
179 | - Add sign up functionality
180 | ([#8](https://github.com/fs/react-base/pull/8))
181 | - Introduce abstract actions and stores
182 | ([#8](https://github.com/fs/react-base/pull/8))
183 | - Introduce props validation for components
184 | ([#10](https://github.com/fs/react-base/pull/10))
185 | - Upgrade Node.js version to 6.0.0
186 | ([#9](https://github.com/fs/react-base/pull/9))
187 | - Replace deprecated Input on FormGroup in react-bootstrap
188 | ([#7](https://github.com/fs/react-base/pull/7))
189 | - Implement sign in form validation
190 | ([#7](https://github.com/fs/react-base/pull/7))
191 | - Fix setup script to avoid issue with application bootstraping
192 | ([#6](https://github.com/fs/react-base/pull/6))
193 | - Upgrade dependencies
194 | ([#5](https://github.com/fs/react-base/pull/5))
195 | - Upgrade React to 15.0.0
196 | ([#2](https://github.com/fs/react-base/pull/2))
197 |
--------------------------------------------------------------------------------
](http://www.flatstack.com)
112 |
--------------------------------------------------------------------------------
/app/components/signin/modal.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-unused-state */
2 | import React, { Component } from 'react';
3 | import PropTypes from 'prop-types';
4 | import {
5 | Button,
6 | FormGroup,
7 | FormControl,
8 | ControlLabel,
9 | } from 'react-bootstrap';
10 | import i18n from 'services/i18n';
11 | import Modal from 'components/modal';
12 | import Form from 'components/form';
13 |
14 | class SigninModal extends Component {
15 | state = {
16 | email: '',
17 | password: '',
18 | errors: {},
19 | };
20 |
21 | setValue = ({ target }) => {
22 | const { name, value } = target;
23 |
24 | this.setState({ [name]: value });
25 | };
26 |
27 | isFormValid = () => {
28 | const { email, password } = this.state;
29 |
30 | return email.length > 5 && password.length > 5;
31 | };
32 |
33 | signIn = async (event) => {
34 | event.preventDefault();
35 |
36 | const { email, password } = this.state;
37 | const { signinUser, closeModal } = this.props;
38 |
39 | if (this.isFormValid()) {
40 | try {
41 | await signinUser({ email, password });
42 | this.setState({ email: '', password: '' });
43 | closeModal();
44 | } catch ({ errors }) {
45 | this.setState({ errors });
46 | }
47 | }
48 | };
49 |
50 | validationState = (value) => {
51 | const { length } = value;
52 |
53 | if (!length) return null;
54 |
55 | return length > 5 ? 'success' : 'error';
56 | };
57 |
58 | render() {
59 | const { email, password } = this.state;
60 | const {
61 | isOpen,
62 | closeModal,
63 | session: {
64 | isLoading,
65 | },
66 | } = this.props;
67 |
68 | return (
69 |