gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added propTypes + some code refactoring to fix eslint errors

Browse Source
This commit is contained in:
Andrey Okonetchnikov 2016-10-11 11:33:56 +02:00
parent 4da6c9708a
commit 0688a9c5ab
1 changed files with 58 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/containers/App.js
View File

@ -1,7 +1,10 @@
import React from 'react';
import React, { PropTypes } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import pluralize from 'pluralize';
import { connect } from 'react-redux';
import { Layout, Panel, NavDrawer, Navigation, Link } from 'react-toolbox';
import { Layout, Panel, NavDrawer } from 'react-toolbox/lib/layout';
import { Navigation } from 'react-toolbox/lib/navigation';
import { Link } from 'react-toolbox/lib/link';
import { loadConfig } from '../actions/config';
import { loginUser } from '../actions/auth';
import { currentBackend } from '../backends/backend';
@ -11,7 +14,7 @@ import {
HELP,
runCommand,
navigateToCollection,
createNewEntryInCollection
createNewEntryInCollection,
} from '../actions/findbar';
import AppHeader from '../components/AppHeader/AppHeader';
import { Loader } from '../components/UI/index';
@ -19,31 +22,37 @@ import styles from './App.css';
class App extends React.Component {
static propTypes = {
auth: ImmutablePropTypes.map,
children: PropTypes.node,
config: ImmutablePropTypes.map,
collections: ImmutablePropTypes.orderedMap,
createNewEntryInCollection: PropTypes.func.isRequired,
dispatch: PropTypes.func.isRequired,
navigateToCollection: PropTypes.func.isRequired,
user: ImmutablePropTypes.map,
runCommand: PropTypes.func.isRequired,
};
static configError(config) {
return (<div>
<h1>Error loading the CMS configuration</h1>
<div>
<p>The <code>config.yml</code> file could not be loaded or failed to parse properly.</p>
<p><strong>Error message:</strong> {config.get('error')}</p>
</div>
</div>);
}
state = {
navDrawerIsVisible: true
navDrawerIsVisible: true,
};
componentDidMount() {
this.props.dispatch(loadConfig());
}
configError(config) {
return <div>
<h1>Error loading the CMS configuration</h1>
<div>
<p>The "config.yml" file could not be loaded or failed to parse properly.</p>
<p><strong>Error message:</strong> {config.get('error')}</p>
</div>
</div>;
}
configLoading() {
return <div>
<Loader active>Loading configuration...</Loader>
</div>;
}
handleLogin(credentials) {
this.props.dispatch(loginUser(credentials));
}
@ -56,13 +65,17 @@ class App extends React.Component {
return <div><h1>Waiting for backend...</h1></div>;
}
return <div>
{React.createElement(backend.authComponent(), {
onLogin: this.handleLogin.bind(this),
error: auth && auth.get('error'),
isFetching: auth && auth.get('isFetching')
})}
</div>;
return (
<div>
{
React.createElement(backend.authComponent(), {
onLogin: this.handleLogin.bind(this),
error: auth && auth.get('error'),
isFetching: auth && auth.get('isFetching'),
})
}
</div>
);
}
generateFindBarCommands() {
@ -70,22 +83,22 @@ class App extends React.Component {
const commands = [];
const defaultCommands = [];
this.props.collections.forEach(collection => {
this.props.collections.forEach((collection) => {
commands.push({
id: `show_${collection.get('name')}`,
pattern: `Show ${pluralize(collection.get('label'))}`,
id: `show_${ collection.get('name') }`,
pattern: `Show ${ pluralize(collection.get('label')) }`,
type: SHOW_COLLECTION,
payload: { collectionName: collection.get('name') }
payload: { collectionName: collection.get('name') },
});
if (defaultCommands.length < 5) defaultCommands.push(`show_${collection.get('name')}`);
if (defaultCommands.length < 5) defaultCommands.push(`show_${ collection.get('name') }`);
if (collection.get('create') === true) {
commands.push({
id: `create_${collection.get('name')}`,
pattern: `Create new ${pluralize(collection.get('label'), 1)}(:itemName as ${pluralize(collection.get('label'), 1)} Name)`,
id: `create_${ collection.get('name') }`,
pattern: `Create new ${ pluralize(collection.get('label'), 1) }(:itemName as ${ pluralize(collection.get('label'), 1) } Name)`,
type: CREATE_COLLECTION,
payload: { collectionName: collection.get('name') }
payload: { collectionName: collection.get('name') },
});
}
});
@ -98,7 +111,7 @@ class App extends React.Component {
toggleNavDrawer = () => {
this.setState({
navDrawerIsVisible: !this.state.navDrawerIsVisible
navDrawerIsVisible: !this.state.navDrawerIsVisible,
});
};
@ -109,9 +122,9 @@ class App extends React.Component {
config,
children,
collections,
runCommand,
navigateToCollection,
createNewEntryInCollection
runCommand, // eslint-disable-line
navigateToCollection, // eslint-disable-line
createNewEntryInCollection, // eslint-disable-line
} = this.props;
if (config === null) {
@ -119,11 +132,11 @@ class App extends React.Component {
}
if (config.get('error')) {
return this.configError(config);
return App.configError(config);
}
if (config.get('isFetching')) {
return this.configLoading();
return <Loader active>Loading configuration...</Loader>;
}
if (user == null) {
@ -142,12 +155,12 @@ class App extends React.Component {
>
<nav className={styles.nav}>
<h1 className={styles.heading}>Collections</h1>
<Navigation type='vertical'>
<Navigation type="vertical">
{
collections.valueSeq().map(collection =>
<Link
key={collection.get('name')}
onClick={navigateToCollection.bind(this, collection.get('name'))}
onClick={navigateToCollection.bind(this, collection.get('name'))} // eslint-disable-line
>
{collection.get('label')}
</Link>
@ -192,7 +205,7 @@ function mapDispatchToProps(dispatch) {
},
createNewEntryInCollection: (collectionName) => {
dispatch(createNewEntryInCollection(collectionName));
}
},
};
}