15 | `;
16 |
--------------------------------------------------------------------------------
/Chapter01/starter/app/configureStore.js:
--------------------------------------------------------------------------------
1 | import { createStore } from 'redux';
2 |
3 | import createReducer from './reducers';
4 |
5 | export default function configureStore(initialState = {}, history) {
6 | const store = createStore(createReducer());
7 |
8 | // Extensions
9 | store.injectedReducers = {}; // Reducer registry
10 |
11 | return store;
12 | }
13 |
--------------------------------------------------------------------------------
/Chapter03/app/containers/AboutPage/redirect.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Route, Redirect } from "react-router-dom";
3 |
4 | const redirect = () => (
5 |
10 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/Chapter02/app/React/__tests__/Header-test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import renderer from "react-test-renderer";
3 | import Header from "../Header";
4 |
5 | jest.mock("react-router-dom/Link", () => "Link");
6 |
7 | it("should render correctly", () => {
8 | const component = renderer.create(
10 |
14 | );
15 |
16 | export default HeaderNav;
17 |
--------------------------------------------------------------------------------
/Chapter04/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // This is a custom Jest transformer turning style imports into empty objects.
4 | // http://facebook.github.io/jest/docs/en/webpack.html
5 |
6 | module.exports = {
7 | process() {
8 | return 'module.exports = {};';
9 | },
10 | getCacheKey() {
11 | // The output is always the same.
12 | return 'cssTransform';
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/Chapter06/app/containers/Doctor/messages.js:
--------------------------------------------------------------------------------
1 | import { defineMessages } from 'react-intl';
2 |
3 | export const scope = 'moment.containers.doctor';
4 |
5 | export default defineMessages({
6 | header: {
7 | id: `${scope}.header`,
8 | defaultMessage: 'Search doctor',
9 | },
10 | placeholder: {
11 | id: `${scope}.placeholder`,
12 | defaultMessage: 'Enter doctor name',
13 | },
14 | });
15 |
--------------------------------------------------------------------------------
/Chapter07/app/containers/Doctor/messages.js:
--------------------------------------------------------------------------------
1 | import { defineMessages } from 'react-intl';
2 |
3 | export const scope = 'moment.containers.doctor';
4 |
5 | export default defineMessages({
6 | header: {
7 | id: `${scope}.header`,
8 | defaultMessage: 'Search doctor',
9 | },
10 | placeholder: {
11 | id: `${scope}.placeholder`,
12 | defaultMessage: 'Enter doctor name',
13 | },
14 | });
15 |
--------------------------------------------------------------------------------
/Chapter05/app/containers/Login/style.css:
--------------------------------------------------------------------------------
1 | .form-login-containers {
2 | width: 100%;
3 | margin: auto;
4 | max-width: 400px;
5 | padding: 50px 10px;
6 | }
7 |
8 | .form-login-containers .center {
9 | text-align: center;
10 | }
11 |
12 | .form-login-containers .ant-form-item-label {
13 | line-height: 1;
14 | }
15 |
16 | .form-login-containers .ant-form-item-with-help {
17 | margin-bottom: 0;
18 | }
19 |
--------------------------------------------------------------------------------
/Chapter06/app/containers/Login/style.css:
--------------------------------------------------------------------------------
1 | .form-login-containers {
2 | width: 100%;
3 | margin: auto;
4 | max-width: 400px;
5 | padding: 50px 10px;
6 | }
7 |
8 | .form-login-containers .center {
9 | text-align: center;
10 | }
11 |
12 | .form-login-containers .ant-form-item-label {
13 | line-height: 1;
14 | }
15 |
16 | .form-login-containers .ant-form-item-with-help {
17 | margin-bottom: 0;
18 | }
19 |
--------------------------------------------------------------------------------
/Chapter07/app/containers/Login/style.css:
--------------------------------------------------------------------------------
1 | .form-login-containers {
2 | width: 100%;
3 | margin: auto;
4 | max-width: 400px;
5 | padding: 50px 10px;
6 | }
7 |
8 | .form-login-containers .center {
9 | text-align: center;
10 | }
11 |
12 | .form-login-containers .ant-form-item-label {
13 | line-height: 1;
14 | }
15 |
16 | .form-login-containers .ant-form-item-with-help {
17 | margin-bottom: 0;
18 | }
19 |
--------------------------------------------------------------------------------
/Chapter05/app/containers/Login/constants.js:
--------------------------------------------------------------------------------
1 | export const LOGIN_REQUEST = 'raskLege/Login/LOGIN_REQUEST';
2 | export const LOGIN_SUCCESS = 'raskLege/Login/LOGIN_SUCCESS';
3 | export const LOGIN_FAILURE = 'raskLege/Login/LOGIN_FAILURE';
4 | export const LOGOUT_REQUEST = 'raskLege/Login/LOGOUT_REQUEST';
5 | export const LOGOUT_SUCCESS = 'raskLege/Login/LOGOUT_SUCCESS';
6 | export const LOGOUT_FAILURE = 'raskLege/Login/LOGOUT_FAILURE';
7 |
--------------------------------------------------------------------------------
/Chapter06/app/containers/Login/constants.js:
--------------------------------------------------------------------------------
1 | export const LOGIN_REQUEST = 'raskLege/Login/LOGIN_REQUEST';
2 | export const LOGIN_SUCCESS = 'raskLege/Login/LOGIN_SUCCESS';
3 | export const LOGIN_FAILURE = 'raskLege/Login/LOGIN_FAILURE';
4 | export const LOGOUT_REQUEST = 'raskLege/Login/LOGOUT_REQUEST';
5 | export const LOGOUT_SUCCESS = 'raskLege/Login/LOGOUT_SUCCESS';
6 | export const LOGOUT_FAILURE = 'raskLege/Login/LOGOUT_FAILURE';
7 |
--------------------------------------------------------------------------------
/Chapter07/app/containers/Login/constants.js:
--------------------------------------------------------------------------------
1 | export const LOGIN_REQUEST = 'raskLege/Login/LOGIN_REQUEST';
2 | export const LOGIN_SUCCESS = 'raskLege/Login/LOGIN_SUCCESS';
3 | export const LOGIN_FAILURE = 'raskLege/Login/LOGIN_FAILURE';
4 | export const LOGOUT_REQUEST = 'raskLege/Login/LOGOUT_REQUEST';
5 | export const LOGOUT_SUCCESS = 'raskLege/Login/LOGOUT_SUCCESS';
6 | export const LOGOUT_FAILURE = 'raskLege/Login/LOGOUT_FAILURE';
7 |
--------------------------------------------------------------------------------
/Chapter02/app/Redux/AlertContainer.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { connect } from "react-redux";
3 |
4 | import Alerts from "./Alerts";
5 |
6 | class AlertContainer extends Component {
7 | componentDidMount() {
8 | this.props.dispatch({ type: "REQUEST_ALERTS_LISTS" });
9 | }
10 |
11 | render() {
12 | return -
6 |
- 7 | Home 8 | 9 |
- 10 | Services 11 | 12 |
- 13 | Contact Us 14 | 15 |
- 16 | Login 17 | 18 |
15 |
17 |
15 |
17 | 
8 |
9 | # Getting Started
10 |
11 | ## Install dependencies
12 |
13 | ```
14 | yarn install
15 | ```
16 |
17 | ## Start the web
18 |
19 | ```
20 | yarn start
21 | ```
22 |
23 | The web admin should be available at http://localhost:3000/
24 |
--------------------------------------------------------------------------------
/Chapter06/app/components/Footer/tests/__snapshots__/Wrapper.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`
8 |
9 | # Getting Started
10 |
11 | ## Install dependencies
12 |
13 | ```
14 | yarn install
15 | ```
16 |
17 | ## Start the web
18 |
19 | ```
20 | yarn start
21 | ```
22 |
23 | The web admin should be available at http://localhost:3000/
24 |
--------------------------------------------------------------------------------
/Chapter07/scripts/helpers/progress.js:
--------------------------------------------------------------------------------
1 | const readline = require('readline');
2 |
3 | function animateProgress(message, amountOfDots) {
4 | if (typeof amountOfDots !== 'number') {
5 | // eslint-disable-next-line
6 | amountOfDots = 3;
7 | }
8 |
9 | let i = 0;
10 | return setInterval(() => {
11 | readline.cursorTo(process.stdout, 0);
12 | i = (i + 1) % (amountOfDots + 1);
13 | const dots = new Array(i + 1).join('.');
14 | process.stdout.write(message + dots);
15 | }, 500);
16 | }
17 |
18 | module.exports = animateProgress;
19 |
--------------------------------------------------------------------------------
/Chapter04/src/actions/todos.js:
--------------------------------------------------------------------------------
1 | import * as types from "../constants/ActionTypes";
2 |
3 | let idCounter = 0;
4 | export const addTodo = text => ({
5 | type: types.ADD_TODO,
6 | text,
7 | id: ++idCounter
8 | });
9 | export const completeTodo = id => ({ type: types.COMPLETE_TODO, id });
10 | export const changeFilter = filter => ({ type: types.CHANGE_FILTER, filter });
11 | export const deleteTodo = id => ({ type: types.DELETE_TODO, id });
12 | export const deleteAllTodos = () => {
13 | idCounter = 0;
14 | return { type: types.DELETE_ALL_TODOS };
15 | };
16 |
--------------------------------------------------------------------------------
/Chapter06/server/middlewares/frontendMiddleware.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable global-require */
2 | module.exports = (app, options) => {
3 | const isProd = process.env.NODE_ENV === 'production';
4 |
5 | if (isProd) {
6 | const addProdMiddlewares = require('./addProdMiddlewares');
7 | addProdMiddlewares(app, options);
8 | } else {
9 | const webpackConfig = require('../../webpack/webpack.dev.babel');
10 | const addDevMiddlewares = require('./addDevMiddlewares');
11 | addDevMiddlewares(app, webpackConfig);
12 | }
13 |
14 | return app;
15 | };
16 |
--------------------------------------------------------------------------------
/Chapter07/server/middlewares/frontendMiddleware.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable global-require */
2 | module.exports = (app, options) => {
3 | const isProd = process.env.NODE_ENV === 'production';
4 |
5 | if (isProd) {
6 | const addProdMiddlewares = require('./addProdMiddlewares');
7 | addProdMiddlewares(app, options);
8 | } else {
9 | const webpackConfig = require('../../webpack/webpack.dev.babel');
10 | const addDevMiddlewares = require('./addDevMiddlewares');
11 | addDevMiddlewares(app, webpackConfig);
12 | }
13 |
14 | return app;
15 | };
16 |
--------------------------------------------------------------------------------
/Chapter06/app/containers/LanguageProvider/reducer.js:
--------------------------------------------------------------------------------
1 | import { fromJS } from 'immutable';
2 |
3 | import { CHANGE_LOCALE } from './constants';
4 | import { DEFAULT_LOCALE } from '../../i18n';
5 |
6 | export const initialState = fromJS({
7 | locale: DEFAULT_LOCALE,
8 | });
9 |
10 | function languageProviderReducer(state = initialState, action) {
11 | switch (action.type) {
12 | case CHANGE_LOCALE:
13 | return state.set('locale', action.locale);
14 | default:
15 | return state;
16 | }
17 | }
18 |
19 | export default languageProviderReducer;
20 |
--------------------------------------------------------------------------------
/Chapter07/app/containers/LanguageProvider/reducer.js:
--------------------------------------------------------------------------------
1 | import { fromJS } from 'immutable';
2 |
3 | import { CHANGE_LOCALE } from './constants';
4 | import { DEFAULT_LOCALE } from '../../i18n';
5 |
6 | export const initialState = fromJS({
7 | locale: DEFAULT_LOCALE,
8 | });
9 |
10 | function languageProviderReducer(state = initialState, action) {
11 | switch (action.type) {
12 | case CHANGE_LOCALE:
13 | return state.set('locale', action.locale);
14 | default:
15 | return state;
16 | }
17 | }
18 |
19 | export default languageProviderReducer;
20 |
--------------------------------------------------------------------------------
/starter/app/configureStore.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware, compose } from "redux";
2 |
3 | import createReducer from "./reducers";
4 |
5 | export default function configureStore(initialState = {}, history) {
6 | const store = createStore(
7 | createReducer(),
8 | );
9 |
10 | // Extensions
11 | store.injectedReducers = {}; // Reducer registry
12 |
13 | if (module.hot) {
14 | module.hot.accept("./reducers", () => {
15 | store.replaceReducer(createReducer(store.injectedReducers));
16 | });
17 | }
18 |
19 | return store;
20 | }
21 |
--------------------------------------------------------------------------------
/Chapter05/app/utils/checkStore.js:
--------------------------------------------------------------------------------
1 | import { conformsTo, isFunction, isObject } from 'lodash';
2 | import invariant from 'invariant';
3 |
4 | export default function checkStore(store) {
5 | const shape = {
6 | dispatch: isFunction,
7 | subscribe: isFunction,
8 | getState: isFunction,
9 | replaceReducer: isFunction,
10 | runSaga: isFunction,
11 | injectedReducers: isObject,
12 | injectedSagas: isObject,
13 | };
14 | invariant(
15 | conformsTo(store, shape),
16 | '(app/utils...) injectors: Expected a valid redux store',
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/Chapter06/app/utils/checkStore.js:
--------------------------------------------------------------------------------
1 | import { conformsTo, isFunction, isObject } from 'lodash';
2 | import invariant from 'invariant';
3 |
4 | export default function checkStore(store) {
5 | const shape = {
6 | dispatch: isFunction,
7 | subscribe: isFunction,
8 | getState: isFunction,
9 | replaceReducer: isFunction,
10 | runSaga: isFunction,
11 | injectedReducers: isObject,
12 | injectedSagas: isObject,
13 | };
14 | invariant(
15 | conformsTo(store, shape),
16 | '(app/utils...) injectors: Expected a valid redux store',
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/Chapter07/app/utils/checkStore.js:
--------------------------------------------------------------------------------
1 | import { conformsTo, isFunction, isObject } from 'lodash';
2 | import invariant from 'invariant';
3 |
4 | export default function checkStore(store) {
5 | const shape = {
6 | dispatch: isFunction,
7 | subscribe: isFunction,
8 | getState: isFunction,
9 | replaceReducer: isFunction,
10 | runSaga: isFunction,
11 | injectedReducers: isObject,
12 | injectedSagas: isObject,
13 | };
14 | invariant(
15 | conformsTo(store, shape),
16 | '(app/utils...) injectors: Expected a valid redux store',
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/Chapter06/server/middlewares/addProdMiddlewares.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const express = require('express');
3 | const compression = require('compression');
4 |
5 | module.exports = function addProdMiddlewares(app, options) {
6 | const publicPath = options.publicPath || '/';
7 | const outputPath = options.outputPath || path.resolve(process.cwd(), 'build');
8 |
9 | app.use(compression());
10 | app.use(publicPath, express.static(outputPath));
11 |
12 | app.get('*', (req, res) =>
13 | res.sendFile(path.resolve(outputPath, 'index.html')),
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/Chapter07/server/middlewares/addProdMiddlewares.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const express = require('express');
3 | const compression = require('compression');
4 |
5 | module.exports = function addProdMiddlewares(app, options) {
6 | const publicPath = options.publicPath || '/';
7 | const outputPath = options.outputPath || path.resolve(process.cwd(), 'build');
8 |
9 | app.use(compression());
10 | app.use(publicPath, express.static(outputPath));
11 |
12 | app.get('*', (req, res) =>
13 | res.sendFile(path.resolve(outputPath, 'index.html')),
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/Chapter06/app/components/ToggleOption/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * ToggleOption
4 | *
5 | */
6 |
7 | import React from 'react';
8 | import PropTypes from 'prop-types';
9 | import { injectIntl, intlShape } from 'react-intl';
10 |
11 | const ToggleOption = ({ value, message, intl }) => (
12 |
13 | );
14 |
15 | ToggleOption.propTypes = {
16 | value: PropTypes.string.isRequired,
17 | message: PropTypes.object,
18 | intl: intlShape.isRequired,
19 | };
20 |
21 | export default injectIntl(ToggleOption);
22 |
--------------------------------------------------------------------------------
/Chapter07/app/components/ToggleOption/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * ToggleOption
4 | *
5 | */
6 |
7 | import React from 'react';
8 | import PropTypes from 'prop-types';
9 | import { injectIntl, intlShape } from 'react-intl';
10 |
11 | const ToggleOption = ({ value, message, intl }) => (
12 |
13 | );
14 |
15 | ToggleOption.propTypes = {
16 | value: PropTypes.string.isRequired,
17 | message: PropTypes.object,
18 | intl: intlShape.isRequired,
19 | };
20 |
21 | export default injectIntl(ToggleOption);
22 |
--------------------------------------------------------------------------------
/Chapter02/app/React/__tests__/EmailInput-test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import renderer from "react-test-renderer";
3 |
4 | import EmailInput from "../EmailInput";
5 |
6 | it("should render correctly", () => {
7 | const component = renderer.create(
5 |
8 |
14 |
15 | `;
16 |
17 | exports[`should render correctly: initial state 1`] = `
18 | Object {
19 | "value": "",
20 | }
21 | `;
22 |
23 | exports[`should render correctly: updated state 1`] = `
24 | Object {
25 | "value": "skmu@hvl.no",
26 | }
27 | `;
28 |
--------------------------------------------------------------------------------
/Chapter06/app/utils/request.js:
--------------------------------------------------------------------------------
1 | function parseJSON(response) {
2 | if (response.status === 204 || response.status === 205) {
3 | return null;
4 | }
5 | return response.json();
6 | }
7 |
8 | function checkStatus(response) {
9 | if (response.status >= 200 && response.status < 300) {
10 | return response;
11 | }
12 |
13 | const error = new Error(response.statusText);
14 | error.response = response;
15 | throw error;
16 | }
17 |
18 | export default function request(url, options) {
19 | return fetch(url, options)
20 | .then(checkStatus)
21 | .then(parseJSON);
22 | }
23 |
--------------------------------------------------------------------------------
/Chapter07/app/utils/request.js:
--------------------------------------------------------------------------------
1 | function parseJSON(response) {
2 | if (response.status === 204 || response.status === 205) {
3 | return null;
4 | }
5 | return response.json();
6 | }
7 |
8 | function checkStatus(response) {
9 | if (response.status >= 200 && response.status < 300) {
10 | return response;
11 | }
12 |
13 | const error = new Error(response.statusText);
14 | error.response = response;
15 | throw error;
16 | }
17 |
18 | export default function request(url, options) {
19 | return fetch(url, options)
20 | .then(checkStatus)
21 | .then(parseJSON);
22 | }
23 |
--------------------------------------------------------------------------------
/Chapter03/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | moduleDirectories: ["node_modules", "app"],
3 | moduleNameMapper: {
4 | ".*\\.(css|less|styl|scss|sass)$": "-
5 |
- 6 | 9 | Home 10 | 11 | 12 |
- 13 | 16 | Services 17 | 18 | 19 |
- 20 | 23 | Contact Us 24 | 25 | 26 |
- 27 | 30 | Login 31 | 32 | 33 |
-
6 |
- 7 | Facebook 8 | 9 |
- 10 | GitHub 11 | 12 |
- 13 | 14 | ResearchGate 15 | 16 | 17 |
- 18 | Twitter 19 | 20 |
16 |
,
21 | ),
22 | ).toEqual(true);
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/Chapter07/app/containers/NotFoundPage/tests/index.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Testing the NotFoundPage
3 | */
4 |
5 | import React from 'react';
6 | import { shallow } from 'enzyme';
7 | import { FormattedMessage } from 'react-intl';
8 | import NotFound from '../index';
9 |
10 | describe('
16 |
,
21 | ),
22 | ).toEqual(true);
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/Chapter08/server/logger.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | const chalk = require('chalk');
4 | const ip = require('ip');
5 |
6 | const divider = chalk.gray('\n-----------------------------------');
7 |
8 | const logger = {
9 | error: err => {
10 | console.error(chalk.red(err));
11 | },
12 |
13 | appStarted: (port, host) => {
14 | console.log(`Server started ! ${chalk.green('✓')}`);
15 |
16 | console.log(`
17 | ${chalk.bold('Access URLs:')}${divider}
18 | Localhost: ${chalk.magenta(`http://${host}:${port}`)}
19 | LAN: ${chalk.magenta(`http://${ip.address()}:${port}`)}${divider}
20 | ${chalk.blue(`Press ${chalk.italic('CTRL-C')} to stop`)}
21 | `);
22 | },
23 | };
24 |
25 | module.exports = logger;
26 |
--------------------------------------------------------------------------------
/Chapter06/app/containers/Doctor/reducer.js:
--------------------------------------------------------------------------------
1 | import { fromJS } from 'immutable';
2 | import { LOGOUT_REQUEST } from 'containers/Login/constants';
3 | import { DOCTOR_SEARCH_SUCCESS, DOCTOR_SEARCH_REQUEST } from './constants';
4 |
5 | // The initial state of the doctor
6 | const initialState = fromJS({
7 | rows: [],
8 | count: 0,
9 | totalPage: 0,
10 | currentPage: 0,
11 | });
12 |
13 | function appReducer(state = initialState, action) {
14 | switch (action.type) {
15 | case LOGOUT_REQUEST:
16 | case DOCTOR_SEARCH_REQUEST:
17 | return initialState;
18 | case DOCTOR_SEARCH_SUCCESS:
19 | return fromJS(action.doctors);
20 | default:
21 | return state;
22 | }
23 | }
24 |
25 | export default appReducer;
26 |
--------------------------------------------------------------------------------
/Chapter07/app/containers/Doctor/reducer.js:
--------------------------------------------------------------------------------
1 | import { fromJS } from 'immutable';
2 | import { LOGOUT_REQUEST } from 'containers/Login/constants';
3 | import { DOCTOR_SEARCH_SUCCESS, DOCTOR_SEARCH_REQUEST } from './constants';
4 |
5 | // The initial state of the doctor
6 | const initialState = fromJS({
7 | rows: [],
8 | count: 0,
9 | totalPage: 0,
10 | currentPage: 0,
11 | });
12 |
13 | function appReducer(state = initialState, action) {
14 | switch (action.type) {
15 | case LOGOUT_REQUEST:
16 | case DOCTOR_SEARCH_REQUEST:
17 | return initialState;
18 | case DOCTOR_SEARCH_SUCCESS:
19 | return fromJS(action.doctors);
20 | default:
21 | return state;
22 | }
23 | }
24 |
25 | export default appReducer;
26 |
--------------------------------------------------------------------------------
/Chapter03/app/containers/HomePage/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route, Link } from 'react-router-dom';
3 |
4 | const MenuLink = ({ to, ...rest }) => (
5 |
16 |
24 | );
25 |
26 | export default Homepage;
27 |
--------------------------------------------------------------------------------
/Chapter02/app/React/EmailInput.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | class EmailInput extends Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {
7 | value: ""
8 | };
9 | this.handleEmailChange = this.handleEmailChange.bind(this);
10 | }
11 |
12 | handleEmailChange(event) {
13 | this.setState({ value: event.target.value });
14 | }
15 |
16 | render() {
17 | return (
18 | This is home page our our application.
17 |-
18 |
19 |
20 |
26 |
27 | );
28 | }
29 | }
30 |
31 | export default EmailInput;
32 |
--------------------------------------------------------------------------------
/Chapter01/getting-started/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gettting-started-with-redux-ch01",
3 | "version": "1.0.0",
4 | "description": "Getting Started With Redux",
5 | "scripts": {
6 | "start": "webpack-dev-server",
7 | "build": "webpack"
8 | },
9 | "author": "Suresh KUMAR Mukhiya",
10 | "license": "MIT",
11 | "devDependencies": {
12 | "@babel/core": "7.2.0",
13 | "@babel/preset-env": "7.2.0",
14 | "@babel/preset-react": "7.0.0",
15 | "babel-core": "6.26.3",
16 | "babel-loader": "8.0.4",
17 | "babel-plugin-transform-object-rest-spread": "6.26.0",
18 | "webpack": "4.27.1",
19 | "webpack-cli": "3.1.2",
20 | "webpack-dev-server": "3.1.10"
21 | },
22 | "dependencies": {
23 | "redux": "4.0.1"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/Chapter05/app/components/H1/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 | import { enzymeFind } from 'styled-components/test-utils';
4 |
5 | import H1 from '../index';
6 |
7 | describe('', () => {
8 | it('should render a prop', () => {
9 | const id = 'testId';
10 | const wrapper = mount();
11 | const renderedComponent = enzymeFind(wrapper, H1);
12 | expect(renderedComponent.prop('id')).toEqual(id);
13 | });
14 |
15 | it('should render its text', () => {
16 | const children = 'Text';
17 | const wrapper = mount({children}
); 18 | const renderedComponent = enzymeFind(wrapper, H1); 19 | expect(renderedComponent.contains(children)).toBe(true); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /Chapter06/app/reducers.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux-immutable'; 2 | import { connectRouter } from 'connected-react-router/immutable'; 3 | import { reducer as formReducer } from 'redux-form/immutable'; 4 | 5 | import history from 'utils/history'; 6 | import globalReducer from 'containers/App/reducer'; 7 | import languageProviderReducer from 'containers/LanguageProvider/reducer'; 8 | 9 | export default function createReducer(injectedReducers = {}) { 10 | const rootReducer = combineReducers({ 11 | form: formReducer, 12 | global: globalReducer, 13 | language: languageProviderReducer, 14 | ...injectedReducers, 15 | }); 16 | 17 | const mergeWithRouterState = connectRouter(history); 18 | return mergeWithRouterState(rootReducer); 19 | } 20 | -------------------------------------------------------------------------------- /Chapter07/app/reducers.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux-immutable'; 2 | import { connectRouter } from 'connected-react-router/immutable'; 3 | import { reducer as formReducer } from 'redux-form/immutable'; 4 | 5 | import history from 'utils/history'; 6 | import globalReducer from 'containers/App/reducer'; 7 | import languageProviderReducer from 'containers/LanguageProvider/reducer'; 8 | 9 | export default function createReducer(injectedReducers = {}) { 10 | const rootReducer = combineReducers({ 11 | form: formReducer, 12 | global: globalReducer, 13 | language: languageProviderReducer, 14 | ...injectedReducers, 15 | }); 16 | 17 | const mergeWithRouterState = connectRouter(history); 18 | return mergeWithRouterState(rootReducer); 19 | } 20 | -------------------------------------------------------------------------------- /Chapter05/app/components/LoadingIndicator/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Circle from './Circle'; 4 | import Wrapper from './Wrapper'; 5 | 6 | const LoadingIndicator = () => ( 7 |{this.renderContent}
;
21 | }
22 | }
23 |
24 | Home.propTypes = {
25 | currentUser: PropTypes.object,
26 | };
27 |
28 | export default isRequired(Home);
29 |
--------------------------------------------------------------------------------
/Chapter07/app/components/Toggle/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import Select from './Select';
5 | import ToggleOption from '../ToggleOption';
6 |
7 | function Toggle(props) {
8 | let content = ;
9 |
10 | if (props.values) {
11 | content = props.values.map(value => (
12 | {this.renderContent}
;
21 | }
22 | }
23 |
24 | Home.propTypes = {
25 | currentUser: PropTypes.object,
26 | };
27 |
28 | export default isRequired(Home);
29 |
--------------------------------------------------------------------------------
/Chapter05/app/containers/HomePage/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route, Link } from 'react-router-dom';
3 |
4 | const MenuLink = ({ to, ...rest }) => (
5 |
16 |
25 | );
26 |
27 | export default Homepage;
28 |
--------------------------------------------------------------------------------
/Chapter06/app/components/Footer/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FormattedMessage } from 'react-intl';
3 |
4 | import LocaleToggle from 'containers/LocaleToggle';
5 | import Wrapper from './Wrapper';
6 | import messages from './messages';
7 |
8 | function Footer() {
9 | return (
10 | This is home page our our application.
17 |-
18 |
tag', () => {
8 | const renderedComponent = mount(
11 |
12 |
14 |
15 |
17 |
18 | S.K. Mukhiya,
22 | }}
23 | />
24 |
25 |
26 | );
27 | }
28 |
29 | export default Footer;
30 |
--------------------------------------------------------------------------------
/Chapter07/app/components/LoadingIndicator/tests/Circle.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 |
4 | import Circle from '../Circle';
5 |
6 | describe('
tag', () => {
8 | const renderedComponent = mount(
21 |
22 |
24 | ,
25 | MOUNT_NODE,
26 | );
27 | };
28 |
29 | render();
30 |
--------------------------------------------------------------------------------
/Chapter03/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | [
4 | "@babel/preset-env",
5 | {
6 | modules: false
7 | }
8 | ],
9 | "@babel/preset-react"
10 | ],
11 | plugins: [
12 | "styled-components",
13 | "@babel/plugin-proposal-class-properties",
14 | "@babel/plugin-syntax-dynamic-import"
15 | ],
16 | env: {
17 | production: {
18 | only: ["app"],
19 | plugins: [
20 | "lodash",
21 | "transform-react-remove-prop-types",
22 | "@babel/plugin-transform-react-inline-elements",
23 | "@babel/plugin-transform-react-constant-elements"
24 | ]
25 | },
26 | test: {
27 | plugins: [
28 | "@babel/plugin-transform-modules-commonjs",
29 | "dynamic-import-node"
30 | ]
31 | }
32 | }
33 | };
34 |
--------------------------------------------------------------------------------
/Chapter05/app/app.js:
--------------------------------------------------------------------------------
1 | import '@babel/polyfill';
2 |
3 | import React from 'react';
4 | import ReactDOM from 'react-dom';
5 | import { Provider } from 'react-redux';
6 | import { ConnectedRouter } from 'connected-react-router/immutable';
7 | import history from 'utils/history';
8 | import 'sanitize.css/sanitize.css';
9 |
10 | import App from 'containers/App';
11 |
12 | import configureStore from './configureStore';
13 |
14 | const initialState = {};
15 | const store = configureStore(initialState, history);
16 | const MOUNT_NODE = document.getElementById('app');
17 |
18 | const render = () => {
19 | ReactDOM.render(
20 |
21 |
22 |
24 | ,
25 | MOUNT_NODE,
26 | );
27 | };
28 |
29 | render();
30 |
--------------------------------------------------------------------------------
/Chapter06/app/components/Form/Fields/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 | import Input from '../input';
4 |
5 | describe('', () => {
6 | let rendererComponent;
7 | const name = 'hallo';
8 |
9 | beforeAll(() => {
10 | rendererComponent = mount(
11 | ,
12 | );
13 | });
14 |
15 | it('should have a child is label attribute', () => {
16 | expect(rendererComponent.find('label')).toBeDefined();
17 | });
18 |
19 | it('should not adopt an invalid attribute', () => {
20 | expect(rendererComponent.prop('hallo')).toBeUndefined();
21 | });
22 |
23 | it('should adopt a valid attribute', () => {
24 | expect(rendererComponent.find('input').prop('name')).toEqual(name);
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/Chapter07/app/components/Form/Fields/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 | import Input from '../input';
4 |
5 | describe('', () => {
6 | let rendererComponent;
7 | const name = 'hallo';
8 |
9 | beforeAll(() => {
10 | rendererComponent = mount(
11 | ,
12 | );
13 | });
14 |
15 | it('should have a child is label attribute', () => {
16 | expect(rendererComponent.find('label')).toBeDefined();
17 | });
18 |
19 | it('should not adopt an invalid attribute', () => {
20 | expect(rendererComponent.prop('hallo')).toBeUndefined();
21 | });
22 |
23 | it('should adopt a valid attribute', () => {
24 | expect(rendererComponent.find('input').prop('name')).toEqual(name);
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/Chapter06/app/components/Form/Fields/tests/search.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 | import Search from '../search';
4 |
5 | describe('
24 | ,
26 | MOUNT_NODE,
27 | );
28 | };
29 |
30 | render();
31 |
--------------------------------------------------------------------------------
/Chapter01/starter/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | [
4 | '@babel/preset-env',
5 | {
6 | modules: false,
7 | },
8 | ],
9 | '@babel/preset-react',
10 | ],
11 | plugins: [
12 | 'styled-components',
13 | '@babel/plugin-proposal-class-properties',
14 | '@babel/plugin-syntax-dynamic-import',
15 | ],
16 | env: {
17 | production: {
18 | only: ['app'],
19 | plugins: [
20 | 'lodash',
21 | 'transform-react-remove-prop-types',
22 | '@babel/plugin-transform-react-inline-elements',
23 | '@babel/plugin-transform-react-constant-elements',
24 | ],
25 | },
26 | test: {
27 | plugins: [
28 | '@babel/plugin-transform-modules-commonjs',
29 | 'dynamic-import-node',
30 | ],
31 | },
32 | },
33 | };
34 |
--------------------------------------------------------------------------------
/Chapter02/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "testing-redux-application",
3 | "version": "1.0.0",
4 | "engines": {
5 | "npm": ">=5",
6 | "node": ">=8.10.0"
7 | },
8 | "description": "Testing React and Redux applications",
9 | "main": "index.js",
10 | "author": "Suresh Kumar Mukhiya",
11 | "license": "MIT",
12 | "devDependencies": {
13 | "@babel/preset-react": "7.0.0",
14 | "babel-jest": "^23.6.0",
15 | "babel-preset-env": "^1.7.0",
16 | "babel-preset-react": "^6.24.1",
17 | "jest": "^23.6.0",
18 | "react-test-renderer": "^16.6.3",
19 | "regenerator-runtime": "^0.12.1"
20 | },
21 | "scripts": {
22 | "test": "jest"
23 | },
24 | "dependencies": {
25 | "react": "16.6.3",
26 | "react-redux": "^5.1.1",
27 | "react-router-dom": "4.3.1"
28 | },
29 | "jest": {
30 | "testEnvironment": "node"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/Chapter06/app/containers/User/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { compose } from 'redux';
3 | import { Switch, Route } from 'react-router-dom';
4 | import injectSaga from 'utils/injectSaga';
5 | import injectReducer from 'utils/injectReducer';
6 | import saga from './saga';
7 | import reducer from './reducer';
8 | import All from './All';
9 | import AddUser from './Add';
10 | import EditUser from './Edit';
11 |
12 | const User = () => (
13 |
14 |
18 | );
19 |
20 | const withSaga = injectSaga({ key: 'user', saga });
21 | const withReducer = injectReducer({ key: 'user', reducer });
22 |
23 | export default compose(
24 | withSaga,
25 | withReducer,
26 | )(User);
27 |
--------------------------------------------------------------------------------
/Chapter07/app/containers/User/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { compose } from 'redux';
3 | import { Switch, Route } from 'react-router-dom';
4 | import injectSaga from 'utils/injectSaga';
5 | import injectReducer from 'utils/injectReducer';
6 | import saga from './saga';
7 | import reducer from './reducer';
8 | import All from './All';
9 | import AddUser from './Add';
10 | import EditUser from './Edit';
11 |
12 | const User = () => (
13 |
14 |
18 | );
19 |
20 | const withSaga = injectSaga({ key: 'user', saga });
21 | const withReducer = injectReducer({ key: 'user', reducer });
22 |
23 | export default compose(
24 | withSaga,
25 | withReducer,
26 | )(User);
27 |
--------------------------------------------------------------------------------
/Chapter05/app/containers/Login/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import { compose } from 'redux';
5 | import LoginForm from './Form';
6 | import { onLoginRequest } from './actions';
7 |
8 | // eslint-disable-next-line
9 | class LoginPage extends Component {
10 | render() {
11 | return (
12 |
13 |
15 | );
16 | }
17 | }
18 |
19 | LoginPage.propTypes = {
20 | onSubmit: PropTypes.func,
21 | };
22 |
23 | export const mapDispatchToProps = dispatch => ({
24 | onSubmit: e => dispatch(onLoginRequest(e.toJS())),
25 | });
26 |
27 | const withConnect = connect(
28 | null,
29 | mapDispatchToProps,
30 | );
31 |
32 | export default compose(withConnect)(LoginPage);
33 |
--------------------------------------------------------------------------------
/Chapter05/app/containers/Register/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import { compose } from 'redux';
5 |
6 | import Form from './Form';
7 | import { onRegisterRequest } from './actions';
8 |
9 | // eslint-disable-next-line
10 | class RegisterPage extends Component {
11 | render() {
12 | return (
13 |
14 |
15 |
16 | );
17 | }
18 | }
19 |
20 | RegisterPage.propTypes = {
21 | onSubmit: PropTypes.func,
22 | };
23 |
24 | export const mapDispatchToProps = dispatch => ({
25 | onSubmit: e => dispatch(onRegisterRequest(e.toJS())),
26 | });
27 |
28 | const withConnect = connect(
29 | null,
30 | mapDispatchToProps,
31 | );
32 |
33 | export default compose(withConnect)(RegisterPage);
34 |
--------------------------------------------------------------------------------
/Chapter06/app/components/Header/tests/Logo.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 | import renderer from 'react-test-renderer';
4 | import 'jest-styled-components';
5 |
6 | import Logo from '../Logo';
7 |
8 | describe('
5 |
47 | `;
48 |
--------------------------------------------------------------------------------
/Chapter05/app/containers/HomePage/__tests__/__snapshots__/index-test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`should render correctly 1`] = `
4 | 6 | This is home page our our application. 7 |
8 |-
9 |
- 12 | 15 | About Us 16 | 17 | 18 |
- 21 | 24 | Login 25 | 26 | 27 |
- 30 | 33 | Register 34 | 35 | 36 |
- 39 | 42 | Contact 43 | 44 | 45 |
5 |
47 | `;
48 |
--------------------------------------------------------------------------------
/Chapter06/app/tests/i18n.test.js:
--------------------------------------------------------------------------------
1 | import { formatTranslationMessages } from '../i18n';
2 |
3 | jest.mock('../translations/en.json', () => ({
4 | message1: 'default message',
5 | message2: 'default message 2',
6 | }));
7 |
8 | const esTranslationMessages = {
9 | message1: 'mensaje predeterminado',
10 | message2: '',
11 | };
12 |
13 | describe('formatTranslationMessages', () => {
14 | it('should build only defaults when DEFAULT_LOCALE', () => {
15 | const result = formatTranslationMessages('en', { a: 'a' });
16 |
17 | expect(result).toEqual({ a: 'a' });
18 | });
19 |
20 | it('should combine default locale and current locale when not DEFAULT_LOCALE', () => {
21 | const result = formatTranslationMessages('', esTranslationMessages);
22 |
23 | expect(result).toEqual({
24 | message1: 'mensaje predeterminado',
25 | message2: 'default message 2',
26 | });
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/Chapter07/app/tests/i18n.test.js:
--------------------------------------------------------------------------------
1 | import { formatTranslationMessages } from '../i18n';
2 |
3 | jest.mock('../translations/en.json', () => ({
4 | message1: 'default message',
5 | message2: 'default message 2',
6 | }));
7 |
8 | const esTranslationMessages = {
9 | message1: 'mensaje predeterminado',
10 | message2: '',
11 | };
12 |
13 | describe('formatTranslationMessages', () => {
14 | it('should build only defaults when DEFAULT_LOCALE', () => {
15 | const result = formatTranslationMessages('en', { a: 'a' });
16 |
17 | expect(result).toEqual({ a: 'a' });
18 | });
19 |
20 | it('should combine default locale and current locale when not DEFAULT_LOCALE', () => {
21 | const result = formatTranslationMessages('', esTranslationMessages);
22 |
23 | expect(result).toEqual({
24 | message1: 'mensaje predeterminado',
25 | message2: 'default message 2',
26 | });
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/Chapter04/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 |
5 | // This is a custom Jest transformer turning file imports into filenames.
6 | // http://facebook.github.io/jest/docs/en/webpack.html
7 |
8 | module.exports = {
9 | process(src, filename) {
10 | const assetFilename = JSON.stringify(path.basename(filename));
11 |
12 | if (filename.match(/\.svg$/)) {
13 | return `module.exports = {
14 | __esModule: true,
15 | default: ${assetFilename},
16 | ReactComponent: (props) => ({
17 | $$typeof: Symbol.for('react.element'),
18 | type: 'svg',
19 | ref: null,
20 | key: null,
21 | props: Object.assign({}, props, {
22 | children: ${assetFilename}
23 | })
24 | }),
25 | };`;
26 | }
27 |
28 | return `module.exports = ${assetFilename};`;
29 | },
30 | };
31 |
--------------------------------------------------------------------------------
/Chapter05/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | [
4 | '@babel/preset-env',
5 | {
6 | modules: false,
7 | },
8 | ],
9 | '@babel/preset-react',
10 | ],
11 | plugins: [
12 | 'styled-components',
13 | '@babel/plugin-proposal-class-properties',
14 | '@babel/plugin-syntax-dynamic-import',
15 | ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
16 | ],
17 | env: {
18 | production: {
19 | only: ['app'],
20 | plugins: [
21 | 'lodash',
22 | 'transform-react-remove-prop-types',
23 | '@babel/plugin-transform-react-inline-elements',
24 | '@babel/plugin-transform-react-constant-elements',
25 | ],
26 | },
27 | test: {
28 | plugins: [
29 | '@babel/plugin-transform-modules-commonjs',
30 | 'dynamic-import-node',
31 | ],
32 | },
33 | },
34 | };
35 |
--------------------------------------------------------------------------------
/Chapter06/app/containers/App/selectors.js:
--------------------------------------------------------------------------------
1 | import { createSelector } from 'reselect';
2 |
3 | const selectGlobal = state => state.get('global');
4 |
5 | const makeSelectCurrentUser = () =>
6 | createSelector(
7 | selectGlobal,
8 | globalState =>
9 | globalState.get('currentUser')
10 | ? globalState.get('currentUser').toJS()
11 | : {},
12 | );
13 |
14 | const makeSelectLogedIn = () =>
15 | createSelector(
16 | selectGlobal,
17 | globalState => !!globalState.getIn(['currentUser', 'id']),
18 | );
19 |
20 | const makeSelectLoading = () =>
21 | createSelector(selectGlobal, globalState => globalState.get('loading'));
22 |
23 | const makeSelectError = () =>
24 | createSelector(selectGlobal, globalState => globalState.get('error'));
25 |
26 | export {
27 | selectGlobal,
28 | makeSelectLogedIn,
29 | makeSelectCurrentUser,
30 | makeSelectLoading,
31 | makeSelectError,
32 | };
33 |
--------------------------------------------------------------------------------
/Chapter07/app/containers/App/selectors.js:
--------------------------------------------------------------------------------
1 | import { createSelector } from 'reselect';
2 |
3 | const selectGlobal = state => state.get('global');
4 |
5 | const makeSelectCurrentUser = () =>
6 | createSelector(
7 | selectGlobal,
8 | globalState =>
9 | globalState.get('currentUser')
10 | ? globalState.get('currentUser').toJS()
11 | : {},
12 | );
13 |
14 | const makeSelectLogedIn = () =>
15 | createSelector(
16 | selectGlobal,
17 | globalState => !!globalState.getIn(['currentUser', 'id']),
18 | );
19 |
20 | const makeSelectLoading = () =>
21 | createSelector(selectGlobal, globalState => globalState.get('loading'));
22 |
23 | const makeSelectError = () =>
24 | createSelector(selectGlobal, globalState => globalState.get('error'));
25 |
26 | export {
27 | selectGlobal,
28 | makeSelectLogedIn,
29 | makeSelectCurrentUser,
30 | makeSelectLoading,
31 | makeSelectError,
32 | };
33 |
--------------------------------------------------------------------------------
/Chapter06/app/configureStore.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware, compose } from 'redux';
2 | import { fromJS } from 'immutable';
3 | import { routerMiddleware } from 'connected-react-router/immutable';
4 | import createSagaMiddleware from 'redux-saga';
5 | import createReducer from './reducers';
6 |
7 | const sagaMiddleware = createSagaMiddleware();
8 |
9 | export default function configureStore(initialState = {}, history) {
10 | const middlewares = [sagaMiddleware, routerMiddleware(history)];
11 |
12 | const enhancers = [applyMiddleware(...middlewares)];
13 |
14 | /* eslint-enable */
15 |
16 | const store = createStore(
17 | createReducer(),
18 | fromJS(initialState),
19 | compose(...enhancers),
20 | );
21 |
22 | // Extensions
23 | store.runSaga = sagaMiddleware.run;
24 | store.injectedReducers = {}; // Reducer registry
25 | store.injectedSagas = {}; // Saga registry
26 |
27 | return store;
28 | }
29 |
--------------------------------------------------------------------------------
/Chapter06/app/containers/Login/messages.js:
--------------------------------------------------------------------------------
1 | /*
2 | * LoginPage Messages
3 | *
4 | * This contains all the text for the LoginPage component.
5 | */
6 | import { defineMessages } from 'react-intl';
7 |
8 | export const scope = 'moment.containers.login';
9 |
10 | export default defineMessages({
11 | header: {
12 | id: `${scope}.header`,
13 | defaultMessage: 'Rask Lege',
14 | },
15 | labelEmail: {
16 | id: `${scope}.labelEmail`,
17 | defaultMessage: 'Email address',
18 | },
19 | labelPassword: {
20 | id: `${scope}.labelPassword`,
21 | defaultMessage: 'Password',
22 | },
23 | placeholderEmail: {
24 | id: `${scope}.placeholderEmail`,
25 | defaultMessage: 'example@domain.com',
26 | },
27 | placeholderPassword: {
28 | id: `${scope}.placeholderPassword`,
29 | defaultMessage: 'Password',
30 | },
31 | submit: {
32 | id: `${scope}.submit`,
33 | defaultMessage: 'Submit',
34 | },
35 | });
36 |
--------------------------------------------------------------------------------
/Chapter06/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | [
4 | '@babel/preset-env',
5 | {
6 | modules: false,
7 | },
8 | ],
9 | '@babel/preset-react',
10 | ],
11 | plugins: [
12 | 'styled-components',
13 | '@babel/plugin-proposal-class-properties',
14 | '@babel/plugin-syntax-dynamic-import',
15 | ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], // `style: true` for less
16 | ],
17 | env: {
18 | production: {
19 | only: ['app'],
20 | plugins: [
21 | 'lodash',
22 | 'transform-react-remove-prop-types',
23 | '@babel/plugin-transform-react-inline-elements',
24 | '@babel/plugin-transform-react-constant-elements',
25 | ],
26 | },
27 | test: {
28 | plugins: [
29 | '@babel/plugin-transform-modules-commonjs',
30 | 'dynamic-import-node',
31 | ],
32 | },
33 | },
34 | };
35 |
--------------------------------------------------------------------------------
/Chapter07/app/containers/Login/messages.js:
--------------------------------------------------------------------------------
1 | /*
2 | * LoginPage Messages
3 | *
4 | * This contains all the text for the LoginPage component.
5 | */
6 | import { defineMessages } from 'react-intl';
7 |
8 | export const scope = 'moment.containers.login';
9 |
10 | export default defineMessages({
11 | header: {
12 | id: `${scope}.header`,
13 | defaultMessage: 'Rask Lege',
14 | },
15 | labelEmail: {
16 | id: `${scope}.labelEmail`,
17 | defaultMessage: 'Email address',
18 | },
19 | labelPassword: {
20 | id: `${scope}.labelPassword`,
21 | defaultMessage: 'Password',
22 | },
23 | placeholderEmail: {
24 | id: `${scope}.placeholderEmail`,
25 | defaultMessage: 'example@domain.com',
26 | },
27 | placeholderPassword: {
28 | id: `${scope}.placeholderPassword`,
29 | defaultMessage: 'Password',
30 | },
31 | submit: {
32 | id: `${scope}.submit`,
33 | defaultMessage: 'Submit',
34 | },
35 | });
36 |
--------------------------------------------------------------------------------
/Chapter07/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | [
4 | '@babel/preset-env',
5 | {
6 | modules: false,
7 | },
8 | ],
9 | '@babel/preset-react',
10 | ],
11 | plugins: [
12 | 'styled-components',
13 | '@babel/plugin-proposal-class-properties',
14 | '@babel/plugin-syntax-dynamic-import',
15 | ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], // `style: true` for less
16 | ],
17 | env: {
18 | production: {
19 | only: ['app'],
20 | plugins: [
21 | 'lodash',
22 | 'transform-react-remove-prop-types',
23 | '@babel/plugin-transform-react-inline-elements',
24 | '@babel/plugin-transform-react-constant-elements',
25 | ],
26 | },
27 | test: {
28 | plugins: [
29 | '@babel/plugin-transform-modules-commonjs',
30 | 'dynamic-import-node',
31 | ],
32 | },
33 | },
34 | };
35 |
--------------------------------------------------------------------------------
/Chapter08/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | [
4 | '@babel/preset-env',
5 | {
6 | modules: false,
7 | },
8 | ],
9 | '@babel/preset-react',
10 | ],
11 | plugins: [
12 | 'styled-components',
13 | '@babel/plugin-proposal-class-properties',
14 | '@babel/plugin-syntax-dynamic-import',
15 | ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], // `style: true` for less
16 | ],
17 | env: {
18 | production: {
19 | only: ['app'],
20 | plugins: [
21 | 'lodash',
22 | 'transform-react-remove-prop-types',
23 | '@babel/plugin-transform-react-inline-elements',
24 | '@babel/plugin-transform-react-constant-elements',
25 | ],
26 | },
27 | test: {
28 | plugins: [
29 | '@babel/plugin-transform-modules-commonjs',
30 | 'dynamic-import-node',
31 | ],
32 | },
33 | },
34 | };
35 |
--------------------------------------------------------------------------------
/Chapter05/app/containers/App/reducer.js:
--------------------------------------------------------------------------------
1 | import { fromJS } from 'immutable';
2 | import Cookie from 'js-cookie';
3 |
4 | import {
5 | LOGIN_REQUEST,
6 | LOGIN_SUCCESS,
7 | LOGIN_FAILURE,
8 | LOGOUT_REQUEST,
9 | } from 'containers/Login/constants';
10 |
11 | // The initial state of the App
12 | const initialState = fromJS({
13 | loading: false,
14 | currentUser: {},
15 | });
16 |
17 | function appReducer(state = initialState, action) {
18 | switch (action.type) {
19 | case LOGIN_FAILURE:
20 | case LOGIN_REQUEST:
21 | case LOGOUT_REQUEST: {
22 | Cookie.remove('token');
23 | return state.set('loading', true).set('currentUser', fromJS({}));
24 | }
25 | case LOGIN_SUCCESS:
26 | Cookie.set('token', action.user.token, { expires: 7 });
27 | return state.set('loading', true).set('currentUser', fromJS(action.user));
28 | default:
29 | return state;
30 | }
31 | }
32 |
33 | export default appReducer;
34 |
--------------------------------------------------------------------------------
/Chapter06/app/containers/App/reducer.js:
--------------------------------------------------------------------------------
1 | import { fromJS } from 'immutable';
2 | import Cookie from 'js-cookie';
3 |
4 | import {
5 | LOGIN_REQUEST,
6 | LOGIN_SUCCESS,
7 | LOGIN_FAILURE,
8 | LOGOUT_REQUEST,
9 | } from 'containers/Login/constants';
10 |
11 | // The initial state of the App
12 | const initialState = fromJS({
13 | loading: false,
14 | currentUser: {},
15 | });
16 |
17 | function appReducer(state = initialState, action) {
18 | switch (action.type) {
19 | case LOGIN_FAILURE:
20 | case LOGIN_REQUEST:
21 | case LOGOUT_REQUEST: {
22 | Cookie.remove('token');
23 | return state.set('loading', true).set('currentUser', fromJS({}));
24 | }
25 | case LOGIN_SUCCESS:
26 | Cookie.set('token', action.user.token, { expires: 7 });
27 | return state.set('loading', true).set('currentUser', fromJS(action.user));
28 | default:
29 | return state;
30 | }
31 | }
32 |
33 | export default appReducer;
34 |
--------------------------------------------------------------------------------
/Chapter07/app/containers/App/reducer.js:
--------------------------------------------------------------------------------
1 | import { fromJS } from 'immutable';
2 | import Cookie from 'js-cookie';
3 |
4 | import {
5 | LOGIN_REQUEST,
6 | LOGIN_SUCCESS,
7 | LOGIN_FAILURE,
8 | LOGOUT_REQUEST,
9 | } from 'containers/Login/constants';
10 |
11 | // The initial state of the App
12 | const initialState = fromJS({
13 | loading: false,
14 | currentUser: {},
15 | });
16 |
17 | function appReducer(state = initialState, action) {
18 | switch (action.type) {
19 | case LOGIN_FAILURE:
20 | case LOGIN_REQUEST:
21 | case LOGOUT_REQUEST: {
22 | Cookie.remove('token');
23 | return state.set('loading', true).set('currentUser', fromJS({}));
24 | }
25 | case LOGIN_SUCCESS:
26 | Cookie.set('token', action.user.token, { expires: 7 });
27 | return state.set('loading', true).set('currentUser', fromJS(action.user));
28 | default:
29 | return state;
30 | }
31 | }
32 |
33 | export default appReducer;
34 |
--------------------------------------------------------------------------------
/Chapter05/app/components/Header/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import A from './A';
4 | import NavBar from './NavBar';
5 | import HeaderLink from './HeaderLink';
6 | import Logo from './Logo';
7 | import HeaderBg from './HeaderBg';
8 |
9 | class Header extends Component {
10 | get renderUnauthenticate() {
11 | return (
12 | 6 | This is home page our our application. 7 |
8 |-
9 |
- 12 | 15 | About Us 16 | 17 | 18 |
- 21 | 24 | Login 25 | 26 | 27 |
- 30 | 33 | Register 34 | 35 | 36 |
- 39 | 42 | Contact 43 | 44 | 45 |
13 | Register
14 | Login
15 |
16 | );
17 | }
18 |
19 | get renderRight() {
20 | return this.renderUnauthenticate;
21 | }
22 |
23 | render() {
24 | return (
25 |
26 |
28 |
35 |
36 | );
37 | }
38 | }
39 |
40 | export default Header;
41 |
--------------------------------------------------------------------------------
/Chapter06/server/models/index.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const mongoose = require('mongoose');
4 | const mongooseDelete = require('mongoose-delete');
5 |
6 | const uristring = process.env.MONGODB_URI || 'mongodb://localhost/rask-lege';
7 |
8 | mongoose.connect(
9 | uristring,
10 | err =>
11 | console.log(
12 | err
13 | ? `ERROR connecting to: ${uristring}. ${err}`
14 | : `Succeeded connected to: ${uristring}`,
15 | ),
16 | );
17 |
18 | const db = {};
19 |
20 | fs.readdirSync(__dirname)
21 | .filter(
22 | file =>
23 | file.indexOf('.') !== 0 &&
24 | file !== 'index.js' &&
25 | file !== 'migrations' &&
26 | file !== 'seeds.js',
27 | )
28 | .forEach(file => {
29 | // eslint-disable-next-line global-require
30 | const model = require(path.join(__dirname, file))(mongoose, mongooseDelete);
31 | db[model.collection.collectionName] = model;
32 | });
33 |
34 | module.exports = db;
35 |
--------------------------------------------------------------------------------
/Chapter07/server/models/index.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const mongoose = require('mongoose');
4 | const mongooseDelete = require('mongoose-delete');
5 |
6 | const uristring = process.env.MONGODB_URI || 'mongodb://localhost/rask-lege';
7 |
8 | mongoose.connect(
9 | uristring,
10 | err =>
11 | console.log(
12 | err
13 | ? `ERROR connecting to: ${uristring}. ${err}`
14 | : `Succeeded connected to: ${uristring}`,
15 | ),
16 | );
17 |
18 | const db = {};
19 |
20 | fs.readdirSync(__dirname)
21 | .filter(
22 | file =>
23 | file.indexOf('.') !== 0 &&
24 | file !== 'index.js' &&
25 | file !== 'migrations' &&
26 | file !== 'seeds.js',
27 | )
28 | .forEach(file => {
29 | // eslint-disable-next-line global-require
30 | const model = require(path.join(__dirname, file))(mongoose, mongooseDelete);
31 | db[model.collection.collectionName] = model;
32 | });
33 |
34 | module.exports = db;
35 |
--------------------------------------------------------------------------------
/Chapter08/server/models/index.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const mongoose = require('mongoose');
4 | const mongooseDelete = require('mongoose-delete');
5 |
6 | const uristring = process.env.MONGODB_URI || 'mongodb://localhost/rask-lege';
7 |
8 | mongoose.connect(
9 | uristring,
10 | err =>
11 | console.log(
12 | err
13 | ? `ERROR, connecting to: ${uristring}. ${err}`
14 | : `Succeeded connected to: ${uristring}`,
15 | ),
16 | );
17 |
18 | const db = {};
19 |
20 | fs.readdirSync(__dirname)
21 | .filter(
22 | file =>
23 | file.indexOf('.') !== 0 &&
24 | file !== 'index.js' &&
25 | file !== 'migrations' &&
26 | file !== 'seeds.js',
27 | )
28 | .forEach(file => {
29 | // eslint-disable-next-line global-require
30 | const model = require(path.join(__dirname, file))(mongoose, mongooseDelete);
31 | db[model.collection.collectionName] = model;
32 | });
33 |
34 | module.exports = db;
35 |
--------------------------------------------------------------------------------
/Chapter03/server/index.js:
--------------------------------------------------------------------------------
1 | /* eslint consistent-return:0 import/order:0 */
2 | const express = require('express');
3 |
4 | const logger = require('./logger');
5 | const argv = require('./argv');
6 | const port = require('./port');
7 | const setup = require('./middlewares/frontendMiddleware');
8 |
9 | const { resolve } = require('path');
10 | const app = express();
11 |
12 | setup(app, {
13 | outputPath: resolve(process.cwd(), 'build'),
14 | publicPath: '/',
15 | });
16 |
17 | const customHost = argv.host || process.env.HOST;
18 | const host = customHost || null;
19 | const prettyHost = customHost || 'localhost';
20 |
21 | app.get('*.js', (req, res, next) => {
22 | req.url = req.url + '.gz'; // eslint-disable-line
23 | res.set('Content-Encoding', 'gzip');
24 | next();
25 | });
26 |
27 | /* eslint-disable arrow-parens */
28 | app.listen(port, host, async err => {
29 | if (err) {
30 | return logger.error(err.message);
31 | }
32 |
33 | logger.appStarted(port, prettyHost);
34 | });
35 |
--------------------------------------------------------------------------------
/Chapter05/server/index.js:
--------------------------------------------------------------------------------
1 | /* eslint consistent-return:0 import/order:0 */
2 | const express = require('express');
3 |
4 | const logger = require('./logger');
5 | const argv = require('./argv');
6 | const port = require('./port');
7 | const setup = require('./middlewares/frontendMiddleware');
8 |
9 | const { resolve } = require('path');
10 | const app = express();
11 |
12 | setup(app, {
13 | outputPath: resolve(process.cwd(), 'build'),
14 | publicPath: '/',
15 | });
16 |
17 | const customHost = argv.host || process.env.HOST;
18 | const host = customHost || null;
19 | const prettyHost = customHost || 'localhost';
20 |
21 | app.get('*.js', (req, res, next) => {
22 | req.url = req.url + '.gz'; // eslint-disable-line
23 | res.set('Content-Encoding', 'gzip');
24 | next();
25 | });
26 |
27 | /* eslint-disable arrow-parens */
28 | app.listen(port, host, async err => {
29 | if (err) {
30 | return logger.error(err.message);
31 | }
32 |
33 | logger.appStarted(port, prettyHost);
34 | });
35 |
--------------------------------------------------------------------------------
29 |
30 |
33 | {this.renderRight}
34 |