tag', () => {
8 | const renderedComponent = shallow( tag', () => {
8 | const renderedComponent = shallow( tag', () => {
8 | const renderedComponent = shallow(React.js Boilerplate
10 |
11 |
12 |
13 | If you're seeing this message, that means JavaScript has been disabled on your browser , please enable JS to make this app work.
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/app/containers/RepoListItem/tests/IssueIcon.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import renderer from 'react-test-renderer';
4 | import 'jest-styled-components';
5 |
6 | import IssueIcon from '../IssueIcon';
7 |
8 | describe('
26 | Max Stoiber,
30 | }}
31 | />
32 | ,
33 | ),
34 | ).toBe(true);
35 | });
36 | });
37 |
--------------------------------------------------------------------------------
/app/components/Header/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FormattedMessage } from 'react-intl';
3 |
4 | import A from './A';
5 | import Img from './Img';
6 | import NavBar from './NavBar';
7 | import HeaderLink from './HeaderLink';
8 | import Banner from './banner.jpg';
9 | import messages from './messages';
10 |
11 | /* eslint-disable react/prefer-stateless-function */
12 | class Header extends React.Component {
13 | render() {
14 | return (
15 |
16 |
17 |
19 |
20 |
21 |
23 |
24 |
26 |
27 |
29 |
30 |
20 | {Children.toArray(props.children)}
21 |
22 | );
23 |
24 | // If the Button has a handleRoute prop, we want to render a button
25 | if (props.handleRoute) {
26 | button = (
27 |
28 | {Children.toArray(props.children)}
29 |
30 | );
31 | }
32 |
33 | return {button} ;
34 | }
35 |
36 | Button.propTypes = {
37 | handleRoute: PropTypes.func,
38 | href: PropTypes.string,
39 | onClick: PropTypes.func,
40 | children: PropTypes.node.isRequired,
41 | };
42 |
43 | export default Button;
44 |
--------------------------------------------------------------------------------
/app/utils/injectReducer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import hoistNonReactStatics from 'hoist-non-react-statics';
4 |
5 | import getInjectors from './reducerInjectors';
6 |
7 | /**
8 | * Dynamically injects a reducer
9 | *
10 | * @param {string} key A key of the reducer
11 | * @param {function} reducer A reducer that will be injected
12 | *
13 | */
14 | export default ({ key, reducer }) => WrappedComponent => {
15 | class ReducerInjector extends React.Component {
16 | static WrappedComponent = WrappedComponent;
17 | static contextTypes = {
18 | store: PropTypes.object.isRequired,
19 | };
20 | static displayName = `withReducer(${WrappedComponent.displayName ||
21 | WrappedComponent.name ||
22 | 'Component'})`;
23 |
24 | componentWillMount() {
25 | const { injectReducer } = this.injectors;
26 |
27 | injectReducer(key, reducer);
28 | }
29 |
30 | injectors = getInjectors(this.context.store);
31 |
32 | render() {
33 | return
', () => {
8 | it('should render the component if no items are passed', () => {
9 | const renderedComponent = shallow(
);
10 | expect(renderedComponent.find(ListItem)).toBeDefined();
11 | });
12 |
13 | it('should pass all items props to rendered component', () => {
14 | const items = [{ id: 1, name: 'Hello' }, { id: 2, name: 'World' }];
15 |
16 | const component = ({ item }) => {item.name} ; // eslint-disable-line react/prop-types
17 |
18 | const renderedComponent = shallow(
19 |
,
20 | );
21 | expect(renderedComponent.find(component)).toHaveLength(2);
22 | expect(
23 | renderedComponent
24 | .find(component)
25 | .at(0)
26 | .prop('item'),
27 | ).toBe(items[0]);
28 | expect(
29 | renderedComponent
30 | .find(component)
31 | .at(1)
32 | .prop('item'),
33 | ).toBe(items[1]);
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reactron",
3 | "productName": "Reactron",
4 | "version": "1.0.8",
5 | "description": "Reactron Desktop App",
6 | "license": "Apache-2.0",
7 | "copyright": "Manish Jangir",
8 | "author": {
9 | "name": "Manish Jangir",
10 | "email": "mjangir70@gmail.com"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "https://github.com/mjangir/reactron.git"
15 | },
16 | "bugs": {
17 | "url": "https://github.com/mjangir/reactron/issues"
18 | },
19 | "main": "./electron/main.prod.js",
20 | "keywords": [
21 | "Reactron",
22 | "react with electron",
23 | "electron",
24 | "electron boilerplate",
25 | "react electron"
26 | ],
27 | "scripts": {
28 | "electron-rebuild": "cross-env BABEL_ENV=electron node -r babel-register ../internals/scripts/electron-rebuild.js",
29 | "postinstall": "npm run electron-rebuild"
30 | },
31 | "dependencies": {
32 | "@sentry/electron": "^0.9.0",
33 | "auto-launch": "^5.0.5",
34 | "electron-is-dev": "^0.3.0",
35 | "electron-log": "^2.2.17",
36 | "electron-settings": "^3.2.0",
37 | "electron-updater": "^3.1.2",
38 | "electron-window-state": "^5.0.1"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/app/components/ToggleOption/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow, mount } from 'enzyme';
3 | import { IntlProvider, defineMessages } from 'react-intl';
4 |
5 | import ToggleOption from '../index';
6 |
7 | describe('
18 | ,
20 | );
21 | expect(
22 | renderedComponent.contains(
23 |
31 | ,
33 | );
34 | expect(renderedComponent.text()).toBe('de');
35 | });
36 | });
37 |
--------------------------------------------------------------------------------
/app/utils/reducerInjectors.js:
--------------------------------------------------------------------------------
1 | import invariant from 'invariant';
2 | import isEmpty from 'lodash/isEmpty';
3 | import isFunction from 'lodash/isFunction';
4 | import isString from 'lodash/isString';
5 |
6 | import checkStore from './checkStore';
7 | import createReducer from '../reducers';
8 |
9 | export function injectReducerFactory(store, isValid) {
10 | return function injectReducer(key, reducer) {
11 | if (!isValid) checkStore(store);
12 |
13 | invariant(
14 | isString(key) && !isEmpty(key) && isFunction(reducer),
15 | '(app/utils...) injectReducer: Expected `reducer` to be a reducer function',
16 | );
17 |
18 | // Check `store.injectedReducers[key] === reducer` for hot reloading when a key is the same but a reducer is different
19 | if (
20 | Reflect.has(store.injectedReducers, key) &&
21 | store.injectedReducers[key] === reducer
22 | )
23 | return;
24 |
25 | store.injectedReducers[key] = reducer; // eslint-disable-line no-param-reassign
26 | store.replaceReducer(createReducer(store.injectedReducers));
27 | };
28 | }
29 |
30 | export default function getInjectors(store) {
31 | checkStore(store);
32 |
33 | return {
34 | injectReducer: injectReducerFactory(store, true),
35 | };
36 | }
37 |
--------------------------------------------------------------------------------
/internals/templates/utils/reducerInjectors.js:
--------------------------------------------------------------------------------
1 | import invariant from 'invariant';
2 | import isEmpty from 'lodash/isEmpty';
3 | import isFunction from 'lodash/isFunction';
4 | import isString from 'lodash/isString';
5 |
6 | import checkStore from './checkStore';
7 | import createReducer from '../reducers';
8 |
9 | export function injectReducerFactory(store, isValid) {
10 | return function injectReducer(key, reducer) {
11 | if (!isValid) checkStore(store);
12 |
13 | invariant(
14 | isString(key) && !isEmpty(key) && isFunction(reducer),
15 | '(app/utils...) injectReducer: Expected `reducer` to be a reducer function',
16 | );
17 |
18 | // Check `store.injectedReducers[key] === reducer` for hot reloading when a key is the same but a reducer is different
19 | if (
20 | Reflect.has(store.injectedReducers, key) &&
21 | store.injectedReducers[key] === reducer
22 | )
23 | return;
24 |
25 | store.injectedReducers[key] = reducer; // eslint-disable-line no-param-reassign
26 | store.replaceReducer(createReducer(store.injectedReducers));
27 | };
28 | }
29 |
30 | export default function getInjectors(store) {
31 | checkStore(store);
32 |
33 | return {
34 | injectReducer: injectReducerFactory(store, true),
35 | };
36 | }
37 |
--------------------------------------------------------------------------------
/app/containers/LanguageProvider/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | *
3 | * LanguageProvider
4 | *
5 | * this component connects the redux state language locale to the
6 | * IntlProvider component and i18n messages (loaded from `app/translations`)
7 | */
8 |
9 | import React from 'react';
10 | import PropTypes from 'prop-types';
11 | import { connect } from 'react-redux';
12 | import { createSelector } from 'reselect';
13 | import { IntlProvider } from 'react-intl';
14 |
15 | import { makeSelectLocale } from './selectors';
16 |
17 | export class LanguageProvider extends React.PureComponent {
18 | // eslint-disable-line react/prefer-stateless-function
19 | render() {
20 | return (
21 |
26 | {React.Children.only(this.props.children)}
27 |
28 | );
29 | }
30 | }
31 |
32 | LanguageProvider.propTypes = {
33 | locale: PropTypes.string,
34 | messages: PropTypes.object,
35 | children: PropTypes.element.isRequired,
36 | };
37 |
38 | const mapStateToProps = createSelector(makeSelectLocale(), locale => ({
39 | locale,
40 | }));
41 |
42 | export default connect(mapStateToProps)(LanguageProvider);
43 |
--------------------------------------------------------------------------------
/app/utils/electronSystemUtil.js:
--------------------------------------------------------------------------------
1 | import { remote } from 'electron';
2 | import os from 'os';
3 |
4 | const { app } = remote;
5 |
6 | let instance = null;
7 |
8 | class SystemUtil {
9 | constructor() {
10 | if (instance) {
11 | return instance;
12 | }
13 | instance = this;
14 |
15 | this.connectivityERR = [
16 | 'ERR_INTERNET_DISCONNECTED',
17 | 'ERR_PROXY_CONNECTION_FAILED',
18 | 'ERR_CONNECTION_RESET',
19 | 'ERR_NOT_CONNECTED',
20 | 'ERR_NAME_NOT_RESOLVED',
21 | 'ERR_NETWORK_CHANGED',
22 | ];
23 | this.userAgent = null;
24 |
25 | return instance;
26 | }
27 |
28 | getOS() {
29 | if (os.platform() === 'darwin') {
30 | return 'Mac';
31 | }
32 | if (os.platform() === 'linux') {
33 | return 'Linux';
34 | }
35 | if (os.platform() === 'win32' || os.platform() === 'win64') {
36 | if (parseFloat(os.release()) < 6.2) {
37 | return 'Windows 7';
38 | }
39 | return 'Windows 10';
40 | }
41 | return null;
42 | }
43 |
44 | setUserAgent(webViewUserAgent) {
45 | this.userAgent = `Reactron/${app.getVersion()} ${webViewUserAgent}`;
46 | }
47 |
48 | getUserAgent() {
49 | return this.userAgent;
50 | }
51 | }
52 |
53 | export default new SystemUtil();
54 |
--------------------------------------------------------------------------------
/app/components/Header/tests/Img.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 Img from '../Img';
7 |
8 | describe('
23 | ,
25 | );
26 | expect(
27 | renderedComponent.contains(
28 | -- )).toBe(true);
36 | expect(renderedComponent.find('option').length).toBe(1);
37 | });
38 | });
39 |
--------------------------------------------------------------------------------
/app/containers/HomePage/saga.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Gets the repositories of the user from Github
3 | */
4 |
5 | import { call, put, select, takeLatest } from 'redux-saga/effects';
6 | import { LOAD_REPOS } from 'containers/App/constants';
7 | import { reposLoaded, repoLoadingError } from 'containers/App/actions';
8 |
9 | import request from 'utils/request';
10 | import { makeSelectUsername } from 'containers/HomePage/selectors';
11 |
12 | /**
13 | * Github repos request/response handler
14 | */
15 | export function* getRepos() {
16 | // Select username from store
17 | const username = yield select(makeSelectUsername());
18 | const requestURL = `https://api.github.com/users/${username}/repos?type=all&sort=updated`;
19 |
20 | try {
21 | // Call our request helper (see 'utils/request')
22 | const repos = yield call(request, requestURL);
23 | yield put(reposLoaded(repos, username));
24 | } catch (err) {
25 | yield put(repoLoadingError(err));
26 | }
27 | }
28 |
29 | /**
30 | * Root saga manages watcher lifecycle
31 | */
32 | export default function* githubData() {
33 | // Watches for LOAD_REPOS actions and calls getRepos when one comes in.
34 | // By using `takeLatest` only the result of the latest API call is applied.
35 | // It returns task descriptor (just like fork) so we can continue execution
36 | // It will be cancelled automatically on component unmount
37 | yield takeLatest(LOAD_REPOS, getRepos);
38 | }
39 |
--------------------------------------------------------------------------------
/appveyor.yml:
--------------------------------------------------------------------------------
1 | # http://www.appveyor.com/docs/appveyor-yml
2 |
3 | # Set build version format here instead of in the admin panel
4 | version: "{build}"
5 |
6 | # Do not build on gh tags
7 | skip_tags: true
8 |
9 | # Test against these versions of Node.js
10 | environment:
11 |
12 | matrix:
13 | # Node versions to run
14 | - nodejs_version: 9
15 | - nodejs_version: 8
16 |
17 | # Fix line endings in Windows. (runs before repo cloning)
18 | init:
19 | - git config --global core.autocrlf input
20 |
21 | # Install scripts--runs after repo cloning
22 | install:
23 | # Install chrome
24 | - choco install -y googlechrome --ignore-checksums
25 | # Install the latest stable version of Node
26 | - ps: Install-Product node $env:nodejs_version
27 | - set PATH=%APPDATA%\yarn;%PATH%
28 | - yarn
29 |
30 | # Disable automatic builds
31 | build: off
32 |
33 | # Post-install test scripts
34 | test_script:
35 | # Output debugging info
36 | - node --version
37 | - node ./internals/scripts/generate-templates-for-linting
38 | # run tests and run build
39 | - yarn run test
40 | - yarn run build
41 |
42 | # Cache node_modules for faster builds
43 | cache:
44 | - "%LOCALAPPDATA%\\Yarn"
45 | - node_modules -> package.json
46 |
47 | # remove, as appveyor doesn't support secure variables on pr builds
48 | # so `COVERALLS_REPO_TOKEN` cannot be set, without hard-coding in this file
49 | #on_success:
50 | #- yarn run coveralls
51 |
--------------------------------------------------------------------------------
/internals/templates/containers/LanguageProvider/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | *
3 | * LanguageProvider
4 | *
5 | * this component connects the redux state language locale to the
6 | * IntlProvider component and i18n messages (loaded from `app/translations`)
7 | */
8 |
9 | import React from 'react';
10 | import PropTypes from 'prop-types';
11 | import { connect } from 'react-redux';
12 | import { createSelector } from 'reselect';
13 | import { IntlProvider } from 'react-intl';
14 |
15 | import { makeSelectLocale } from './selectors';
16 |
17 | export class LanguageProvider extends React.PureComponent {
18 | // eslint-disable-line react/prefer-stateless-function
19 | render() {
20 | return (
21 |
26 | {React.Children.only(this.props.children)}
27 |
28 | );
29 | }
30 | }
31 |
32 | LanguageProvider.propTypes = {
33 | locale: PropTypes.string,
34 | messages: PropTypes.object,
35 | children: PropTypes.element.isRequired,
36 | };
37 |
38 | const mapStateToProps = createSelector(makeSelectLocale(), locale => ({
39 | locale,
40 | }));
41 |
42 | function mapDispatchToProps(dispatch) {
43 | return {
44 | dispatch,
45 | };
46 | }
47 |
48 | export default connect(
49 | mapStateToProps,
50 | mapDispatchToProps,
51 | )(LanguageProvider);
52 |
--------------------------------------------------------------------------------
/internals/webpack/webpack.dll.babel.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WEBPACK DLL GENERATOR
3 | *
4 | * This profile is used to cache webpack's module
5 | * contexts for external library and framework type
6 | * dependencies which will usually not change often enough
7 | * to warrant building them from scratch every time we use
8 | * the webpack process.
9 | */
10 |
11 | const { join } = require('path');
12 | const defaults = require('lodash/defaultsDeep');
13 | const webpack = require('webpack');
14 | const pkg = require(join(process.cwd(), 'package.json'));
15 | const { dllPlugin } = require('../config');
16 |
17 | if (!pkg.dllPlugin) {
18 | process.exit(0);
19 | }
20 |
21 | const dllConfig = defaults(pkg.dllPlugin, dllPlugin.defaults);
22 | const outputPath = join(process.cwd(), dllConfig.path);
23 |
24 | module.exports = require('./webpack.base.babel')({
25 | mode: 'development',
26 | context: process.cwd(),
27 | entry: dllConfig.dlls ? dllConfig.dlls : dllPlugin.entry(pkg),
28 | optimization: {
29 | minimize: false,
30 | },
31 | devtool: 'eval',
32 | output: {
33 | filename: '[name].dll.js',
34 | path: outputPath,
35 | library: '[name]',
36 | libraryTarget: 'var',
37 | },
38 | plugins: [
39 | new webpack.DllPlugin({
40 | name: '[name]',
41 | path: join(outputPath, '[name].json'),
42 | }),
43 | ],
44 | performance: {
45 | hints: false,
46 | },
47 | target: 'electron-renderer',
48 | });
49 |
--------------------------------------------------------------------------------
/app/containers/LocaleToggle/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | *
3 | * LanguageToggle
4 | *
5 | */
6 |
7 | import React from 'react';
8 | import PropTypes from 'prop-types';
9 | import { connect } from 'react-redux';
10 | import { createSelector } from 'reselect';
11 |
12 | import Toggle from 'components/Toggle';
13 | import Wrapper from './Wrapper';
14 | import messages from './messages';
15 | import { appLocales } from '../../i18n';
16 | import { changeLocale } from '../LanguageProvider/actions';
17 | import { makeSelectLocale } from '../LanguageProvider/selectors';
18 |
19 | export class LocaleToggle extends React.PureComponent {
20 | // eslint-disable-line react/prefer-stateless-function
21 | render() {
22 | return (
23 |
24 |
31 | );
32 | }
33 | }
34 |
35 | LocaleToggle.propTypes = {
36 | onLocaleToggle: PropTypes.func,
37 | locale: PropTypes.string,
38 | };
39 |
40 | const mapStateToProps = createSelector(makeSelectLocale(), locale => ({
41 | locale,
42 | }));
43 |
44 | export function mapDispatchToProps(dispatch) {
45 | return {
46 | onLocaleToggle: evt => dispatch(changeLocale(evt.target.value)),
47 | dispatch,
48 | };
49 | }
50 |
51 | export default connect(
52 | mapStateToProps,
53 | mapDispatchToProps,
54 | )(LocaleToggle);
55 |
--------------------------------------------------------------------------------
/app/components/Img/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import Img from '../index';
5 |
6 | const src = 'test.png';
7 | const alt = 'test';
8 | const renderComponent = (props = {}) =>
9 | shallow(
33 |
37 |
39 |
40 |
41 |
46 |
47 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/internals/templates/i18n.js:
--------------------------------------------------------------------------------
1 | /**
2 | * i18n.js
3 | *
4 | * This will setup the i18n language files and locale data for your app.
5 | *
6 | * IMPORTANT: This file is used by the internal build
7 | * script `extract-intl`, and must use CommonJS module syntax
8 | * You CANNOT use import/export in this file.
9 | */
10 | const addLocaleData = require('react-intl').addLocaleData; //eslint-disable-line
11 | const enLocaleData = require('react-intl/locale-data/en');
12 |
13 | const enTranslationMessages = require('./translations/en.json');
14 |
15 | addLocaleData(enLocaleData);
16 |
17 | const DEFAULT_LOCALE = 'en';
18 |
19 | // prettier-ignore
20 | const appLocales = [
21 | 'en',
22 | ];
23 |
24 | const formatTranslationMessages = (locale, messages) => {
25 | const defaultFormattedMessages =
26 | locale !== DEFAULT_LOCALE
27 | ? formatTranslationMessages(DEFAULT_LOCALE, enTranslationMessages)
28 | : {};
29 | const flattenFormattedMessages = (formattedMessages, key) => {
30 | const formattedMessage =
31 | !messages[key] && locale !== DEFAULT_LOCALE
32 | ? defaultFormattedMessages[key]
33 | : messages[key];
34 | return Object.assign(formattedMessages, { [key]: formattedMessage });
35 | };
36 | return Object.keys(messages).reduce(flattenFormattedMessages, {});
37 | };
38 |
39 | const translationMessages = {
40 | en: formatTranslationMessages('en', enTranslationMessages),
41 | };
42 |
43 | exports.appLocales = appLocales;
44 | exports.formatTranslationMessages = formatTranslationMessages;
45 | exports.translationMessages = translationMessages;
46 | exports.DEFAULT_LOCALE = DEFAULT_LOCALE;
47 |
--------------------------------------------------------------------------------
/internals/scripts/dependencies.js:
--------------------------------------------------------------------------------
1 | // No need to build the DLL in production
2 | if (process.env.NODE_ENV === 'production') {
3 | process.exit(0);
4 | }
5 |
6 | require('shelljs/global');
7 |
8 | const path = require('path');
9 | const fs = require('fs');
10 | const exists = fs.existsSync;
11 | const writeFile = fs.writeFileSync;
12 |
13 | const defaults = require('lodash/defaultsDeep');
14 | const pkg = require(path.join(process.cwd(), 'package.json'));
15 | const config = require('../config');
16 | const dllConfig = defaults(pkg.dllPlugin, config.dllPlugin.defaults);
17 | const outputPath = path.join(process.cwd(), dllConfig.path);
18 | const dllManifestPath = path.join(outputPath, 'package.json');
19 |
20 | /**
21 | * I use node_modules/react-boilerplate-dlls by default just because
22 | * it isn't going to be version controlled and babel wont try to parse it.
23 | */
24 | mkdir('-p', outputPath);
25 |
26 | echo('Building the Webpack DLL...');
27 |
28 | /**
29 | * Create a manifest so npm install doesn't warn us
30 | */
31 | if (!exists(dllManifestPath)) {
32 | writeFile(
33 | dllManifestPath,
34 | JSON.stringify(
35 | defaults({
36 | name: 'react-boilerplate-dlls',
37 | private: true,
38 | author: pkg.author,
39 | repository: pkg.repository,
40 | version: pkg.version,
41 | }),
42 | null,
43 | 2,
44 | ),
45 | 'utf8',
46 | );
47 | }
48 |
49 | // the BUILDING_DLL env var is set to avoid confusing the development environment
50 | exec(
51 | 'cross-env BUILDING_DLL=true webpack --display-chunks --color --config internals/webpack/webpack.dll.babel.js --hide-modules',
52 | );
53 |
--------------------------------------------------------------------------------
/app/components/A/tests/index.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Testing our link component
3 | */
4 |
5 | import React from 'react';
6 | import { shallow } from 'enzyme';
7 |
8 | import A from '../index';
9 |
10 | const href = 'http://mxstbr.com/';
11 | const children = Test ;
12 | const renderComponent = (props = {}) =>
13 | shallow(
14 |
15 | {children}
16 | ,
17 | );
18 |
19 | describe(' tag', () => {
21 | const renderedComponent = renderComponent();
22 | expect(renderedComponent.type()).toEqual('a');
23 | });
24 |
25 | it('should have an href attribute', () => {
26 | const renderedComponent = renderComponent();
27 | expect(renderedComponent.prop('href')).toEqual(href);
28 | });
29 |
30 | it('should have children', () => {
31 | const renderedComponent = renderComponent();
32 | expect(renderedComponent.contains(children)).toEqual(true);
33 | });
34 |
35 | it('should have a className attribute', () => {
36 | const className = 'test';
37 | const renderedComponent = renderComponent({ className });
38 | expect(renderedComponent.find('a').hasClass(className)).toEqual(true);
39 | });
40 |
41 | it('should adopt a target attribute', () => {
42 | const target = '_blank';
43 | const renderedComponent = renderComponent({ target });
44 | expect(renderedComponent.prop('target')).toEqual(target);
45 | });
46 |
47 | it('should adopt a type attribute', () => {
48 | const type = 'text/html';
49 | const renderedComponent = renderComponent({ type });
50 | expect(renderedComponent.prop('type')).toEqual(type);
51 | });
52 | });
53 |
--------------------------------------------------------------------------------
/app/utils/injectSaga.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import hoistNonReactStatics from 'hoist-non-react-statics';
4 |
5 | import getInjectors from './sagaInjectors';
6 |
7 | /**
8 | * Dynamically injects a saga, passes component's props as saga arguments
9 | *
10 | * @param {string} key A key of the saga
11 | * @param {function} saga A root saga that will be injected
12 | * @param {string} [mode] By default (constants.RESTART_ON_REMOUNT) the saga will be started on component mount and
13 | * cancelled with `task.cancel()` on component un-mount for improved performance. Another two options:
14 | * - constants.DAEMON—starts the saga on component mount and never cancels it or starts again,
15 | * - constants.ONCE_TILL_UNMOUNT—behaves like 'RESTART_ON_REMOUNT' but never runs it again.
16 | *
17 | */
18 | export default ({ key, saga, mode }) => WrappedComponent => {
19 | class InjectSaga extends React.Component {
20 | static WrappedComponent = WrappedComponent;
21 | static contextTypes = {
22 | store: PropTypes.object.isRequired,
23 | };
24 | static displayName = `withSaga(${WrappedComponent.displayName ||
25 | WrappedComponent.name ||
26 | 'Component'})`;
27 |
28 | componentWillMount() {
29 | const { injectSaga } = this.injectors;
30 |
31 | injectSaga(key, { saga, mode }, this.props);
32 | }
33 |
34 | componentWillUnmount() {
35 | const { ejectSaga } = this.injectors;
36 |
37 | ejectSaga(key);
38 | }
39 |
40 | injectors = getInjectors(this.context.store);
41 |
42 | render() {
43 | return Test ;
23 | const renderedComponent = shallow(
24 |
25 | {children}
26 | ,
27 | );
28 | expect(renderedComponent.contains(children)).toBe(true);
29 | });
30 | });
31 |
32 | describe('
42 |
43 |
45 | ,
46 | );
47 | expect(
48 | renderedComponent.contains(
49 | React.js Boilerplate
22 |
23 |
24 |
25 | If you're seeing this message, that means JavaScript has been disabled on your browser , please enable JS to make this app work.
26 |
27 |
28 |
29 |
30 |
29 | {{#if wantHeaders}}
30 |
31 | {{properCase name}}
32 |
37 | {{/if}}
38 | {{#if wantMessages}}
39 |
42 | );
43 | }
44 | }
45 |
46 | {{ properCase name }}.propTypes = {
47 | dispatch: PropTypes.func.isRequired,
48 | };
49 |
50 | {{#if wantActionsAndReducer}}
51 | const mapStateToProps = createStructuredSelector({
52 | {{name}}: makeSelect{{properCase name}}(),
53 | });
54 | {{/if}}
55 |
56 | function mapDispatchToProps(dispatch) {
57 | return {
58 | dispatch,
59 | };
60 | }
61 |
62 | {{#if wantActionsAndReducer}}
63 | export default connect(mapStateToProps, mapDispatchToProps)({{ properCase name }});
64 | {{else}}
65 | export default connect(null, mapDispatchToProps)({{ properCase name }});
66 | {{/if}}
67 |
--------------------------------------------------------------------------------
/internals/webpack/webpack.main.prod.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import webpack from 'webpack';
3 | import UglifyJSPlugin from 'uglifyjs-webpack-plugin';
4 | import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
5 | import baseConfig from './webpack.base.babel';
6 |
7 | export default baseConfig({
8 | devtool: 'source-map',
9 |
10 | mode: 'production',
11 |
12 | target: 'electron-main',
13 |
14 | entry: path.resolve(process.cwd(), 'app/electron/main.dev.js'),
15 |
16 | output: {
17 | path: path.resolve(process.cwd(), 'app/electron/'),
18 | filename: './main.prod.js',
19 | },
20 |
21 | optimization: {
22 | minimizer: [
23 | new UglifyJSPlugin({
24 | parallel: true,
25 | sourceMap: true,
26 | cache: true,
27 | }),
28 | ],
29 | },
30 |
31 | plugins: [
32 | new BundleAnalyzerPlugin({
33 | analyzerMode:
34 | process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
35 | openAnalyzer: process.env.OPEN_ANALYZER === 'true',
36 | }),
37 |
38 | /**
39 | * Create global constants which can be configured at compile time.
40 | *
41 | * Useful for allowing different behaviour between development builds and
42 | * release builds
43 | *
44 | * NODE_ENV should be production so that modules do not perform certain
45 | * development checks
46 | */
47 | new webpack.EnvironmentPlugin({
48 | NODE_ENV: 'production',
49 | DEBUG_PROD: false,
50 | START_MINIMIZED: false,
51 | }),
52 | ],
53 |
54 | /**
55 | * Disables webpack processing of __dirname and __filename.
56 | * If you run the bundle in node.js it falls back to these values of node.js.
57 | * https://github.com/webpack/webpack/issues/2010
58 | */
59 | node: {
60 | __dirname: false,
61 | __filename: false,
62 | },
63 | });
64 |
--------------------------------------------------------------------------------
/app/i18n.js:
--------------------------------------------------------------------------------
1 | /**
2 | * i18n.js
3 | *
4 | * This will setup the i18n language files and locale data for your app.
5 | *
6 | * IMPORTANT: This file is used by the internal build
7 | * script `extract-intl`, and must use CommonJS module syntax
8 | * You CANNOT use import/export in this file.
9 | */
10 | const addLocaleData = require('react-intl').addLocaleData; //eslint-disable-line
11 | const enLocaleData = require('react-intl/locale-data/en');
12 | const deLocaleData = require('react-intl/locale-data/de');
13 |
14 | const enTranslationMessages = require('./translations/en.json');
15 | const deTranslationMessages = require('./translations/de.json');
16 |
17 | addLocaleData(enLocaleData);
18 | addLocaleData(deLocaleData);
19 |
20 | const DEFAULT_LOCALE = 'en';
21 |
22 | // prettier-ignore
23 | const appLocales = [
24 | 'en',
25 | 'de',
26 | ];
27 |
28 | const formatTranslationMessages = (locale, messages) => {
29 | const defaultFormattedMessages =
30 | locale !== DEFAULT_LOCALE
31 | ? formatTranslationMessages(DEFAULT_LOCALE, enTranslationMessages)
32 | : {};
33 | const flattenFormattedMessages = (formattedMessages, key) => {
34 | const formattedMessage =
35 | !messages[key] && locale !== DEFAULT_LOCALE
36 | ? defaultFormattedMessages[key]
37 | : messages[key];
38 | return Object.assign(formattedMessages, { [key]: formattedMessage });
39 | };
40 | return Object.keys(messages).reduce(flattenFormattedMessages, {});
41 | };
42 |
43 | const translationMessages = {
44 | en: formatTranslationMessages('en', enTranslationMessages),
45 | de: formatTranslationMessages('de', deTranslationMessages),
46 | };
47 |
48 | exports.appLocales = appLocales;
49 | exports.formatTranslationMessages = formatTranslationMessages;
50 | exports.translationMessages = translationMessages;
51 | exports.DEFAULT_LOCALE = DEFAULT_LOCALE;
52 |
--------------------------------------------------------------------------------
/app/utils/tests/injectReducer.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Test injectors
3 | */
4 |
5 | import { memoryHistory } from 'react-router-dom';
6 | import { shallow } from 'enzyme';
7 | import React from 'react';
8 | import identity from 'lodash/identity';
9 |
10 | import configureStore from '../../configureStore';
11 | import injectReducer from '../injectReducer';
12 | import * as reducerInjectors from '../reducerInjectors';
13 |
14 | // Fixtures
15 | const Component = () => null;
16 |
17 | const reducer = identity;
18 |
19 | describe('injectReducer decorator', () => {
20 | let store;
21 | let injectors;
22 | let ComponentWithReducer;
23 |
24 | beforeAll(() => {
25 | reducerInjectors.default = jest.fn().mockImplementation(() => injectors);
26 | });
27 |
28 | beforeEach(() => {
29 | store = configureStore({}, memoryHistory);
30 | injectors = {
31 | injectReducer: jest.fn(),
32 | };
33 | ComponentWithReducer = injectReducer({ key: 'test', reducer })(Component);
34 | reducerInjectors.default.mockClear();
35 | });
36 |
37 | it('should inject a given reducer', () => {
38 | shallow(
34 |
35 | {nameprefix + item.name}
36 |
37 |
38 |
41 |
42 | );
43 |
44 | // Render the content into a list item
45 | return
2 |
3 |
4 | #######################################################################
5 | # GENERAL #
6 | #######################################################################
7 |
8 | # Make apache follow sym links to files
9 | Options +FollowSymLinks
10 | # If somebody opens a folder, hide all files from the resulting folder list
11 | IndexIgnore */*
12 |
13 |
14 | #######################################################################
15 | # REWRITING #
16 | #######################################################################
17 |
18 | # Enable rewriting
19 | RewriteEngine On
20 |
21 | # If its not HTTPS
22 | RewriteCond %{HTTPS} off
23 |
24 | # Comment out the RewriteCond above, and uncomment the RewriteCond below if you're using a load balancer (e.g. CloudFlare) for SSL
25 | # RewriteCond %{HTTP:X-Forwarded-Proto} !https
26 |
27 | # Redirect to the same URL with https://, ignoring all further rules if this one is in effect
28 | RewriteRule ^(.*) https://%{HTTP_HOST}/$1 [R,L]
29 |
30 | # If we get to here, it means we are on https://
31 |
32 | # If the file with the specified name in the browser doesn't exist
33 | RewriteCond %{REQUEST_FILENAME} !-f
34 |
35 | # and the directory with the specified name in the browser doesn't exist
36 | RewriteCond %{REQUEST_FILENAME} !-d
37 |
38 | # and we are not opening the root already (otherwise we get a redirect loop)
39 | RewriteCond %{REQUEST_FILENAME} !\/$
40 |
41 | # Rewrite all requests to the root
42 | RewriteRule ^(.*) /
43 |
44 |
45 |
46 |
47 | # Do not cache sw.js, required for offline-first updates.
48 |
49 | Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
50 | Header set Pragma "no-cache"
51 |
52 |
53 |
--------------------------------------------------------------------------------
/app/components/ReposList/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import { shallow, mount } from 'enzyme';
2 | import React from 'react';
3 | import { IntlProvider } from 'react-intl';
4 |
5 | import RepoListItem from 'containers/RepoListItem';
6 | import List from 'components/List';
7 | import LoadingIndicator from 'components/LoadingIndicator';
8 | import ReposList from '../index';
9 |
10 | describe('
),
15 | ).toEqual(true);
16 | });
17 |
18 | it('should render an error if loading failed', () => {
19 | const renderedComponent = mount(
20 |
21 | ,
23 | );
24 | expect(renderedComponent.text()).toMatch(/Something went wrong/);
25 | });
26 |
27 | it('should render the repositories if loading was successful', () => {
28 | const repos = [
29 | {
30 | owner: {
31 | login: 'mxstbr',
32 | },
33 | html_url: 'https://github.com/react-boilerplate/react-boilerplate',
34 | name: 'react-boilerplate',
35 | open_issues_count: 20,
36 | full_name: 'react-boilerplate/react-boilerplate',
37 | },
38 | ];
39 | const renderedComponent = shallow(
40 |
,
46 | ),
47 | ).toEqual(true);
48 | });
49 |
50 | it('should not render anything if nothing interesting is provided', () => {
51 | const renderedComponent = shallow(
52 | Test ;
13 | const renderComponent = (props = {}) =>
14 | mount(
15 |
16 | {children}
17 | ,
18 | );
19 |
20 | describe(' tag if no route is specified', () => {
22 | const renderedComponent = renderComponent({ href });
23 | expect(renderedComponent.find('a').length).toEqual(1);
24 | });
25 |
26 | it('should render a tag to change route if the handleRoute prop is specified', () => {
27 | const renderedComponent = renderComponent({ handleRoute });
28 | expect(renderedComponent.find('button').length).toEqual(1);
29 | });
30 |
31 | it('should have children', () => {
32 | const renderedComponent = renderComponent();
33 | expect(renderedComponent.contains(children)).toEqual(true);
34 | });
35 |
36 | it('should handle click events', () => {
37 | const onClickSpy = jest.fn();
38 | const renderedComponent = renderComponent({ onClick: onClickSpy });
39 | renderedComponent.find('a').simulate('click');
40 | expect(onClickSpy).toHaveBeenCalled();
41 | });
42 |
43 | it('should have a className attribute', () => {
44 | const renderedComponent = renderComponent();
45 | expect(renderedComponent.find('a').prop('className')).toBeDefined();
46 | });
47 |
48 | it('should not adopt a type attribute when rendering an tag', () => {
49 | const type = 'text/html';
50 | const renderedComponent = renderComponent({ href, type });
51 | expect(renderedComponent.find('a').prop('type')).toBeUndefined();
52 | });
53 |
54 | it('should not adopt a type attribute when rendering a button', () => {
55 | const type = 'submit';
56 | const renderedComponent = renderComponent({ handleRoute, type });
57 | expect(renderedComponent.find('button').prop('type')).toBeUndefined();
58 | });
59 | });
60 |
--------------------------------------------------------------------------------
/app/containers/LocaleToggle/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Provider } from 'react-redux';
3 | import { browserHistory } from 'react-router-dom';
4 | import { shallow, mount } from 'enzyme';
5 |
6 | import LocaleToggle, { mapDispatchToProps } from '../index';
7 | import { changeLocale } from '../../LanguageProvider/actions';
8 | import LanguageProvider from '../../LanguageProvider';
9 |
10 | import configureStore from '../../../configureStore';
11 | import { translationMessages } from '../../../i18n';
12 |
13 | describe('
23 |
24 |
26 | ,
27 | );
28 | expect(renderedComponent.contains(
34 |
35 |
37 | ,
38 | );
39 | expect(renderedComponent.contains(en )).toBe(
40 | true,
41 | );
42 | });
43 |
44 | describe('mapDispatchToProps', () => {
45 | describe('onLocaleToggle', () => {
46 | it('should be injected', () => {
47 | const dispatch = jest.fn();
48 | const result = mapDispatchToProps(dispatch);
49 | expect(result.onLocaleToggle).toBeDefined();
50 | });
51 |
52 | it('should dispatch changeLocale when called', () => {
53 | const dispatch = jest.fn();
54 | const result = mapDispatchToProps(dispatch);
55 | const locale = 'de';
56 | const evt = { target: { value: locale } };
57 | result.onLocaleToggle(evt);
58 | expect(dispatch).toHaveBeenCalledWith(changeLocale(locale));
59 | });
60 | });
61 | });
62 | });
63 |
--------------------------------------------------------------------------------
/app/containers/RepoListItem/tests/index.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Test the repo list item
3 | */
4 |
5 | import React from 'react';
6 | import { shallow, render } from 'enzyme';
7 | import { IntlProvider } from 'react-intl';
8 |
9 | import ListItem from 'components/ListItem';
10 | import { RepoListItem } from '../index';
11 |
12 | const renderComponent = (props = {}) =>
13 | render(
14 |
15 | ,
17 | );
18 |
19 | describe('
15 | `;
16 |
--------------------------------------------------------------------------------
/app/components/ListItem/Wrapper.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | const Wrapper = styled.li`
4 | width: 100%;
5 | height: 3em;
6 | display: flex;
7 | align-items: center;
8 | position: relative;
9 | border-top: 1px solid #eee;
10 |
11 | &:first-child {
12 | border-top: none;
13 | }
14 | `;
15 |
16 | export default Wrapper;
17 |
--------------------------------------------------------------------------------
/app/components/Header/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import Header from '../index';
5 |
6 | describe('