27 |
28 |
29 |
52 |
62 |
63 |
64 |
65 | {this.props.children}
66 |
67 |
68 | );
69 | }
70 | }
71 |
72 | export const mapStateToProps = state => ({
73 | user: getUser(state),
74 | });
75 |
76 | export const mapDispatchToProps = dispatch => ({
77 | logout: payload => dispatch(logout('auth', payload)),
78 | });
79 |
80 | export default connect(mapStateToProps, mapDispatchToProps)(App);
81 |
--------------------------------------------------------------------------------
/client/src/components/Auth/Login.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { replace } from 'react-router-redux';
4 | import { SubmissionError } from 'redux-form';
5 |
6 | import { CardSingle } from '../UI';
7 | import LoginForm from './LoginForm';
8 | import { login } from '../../store/auth';
9 |
10 | export class Login extends Component {
11 | componentWillMount() {
12 | localStorage.clear();
13 | }
14 |
15 | onSubmit = values => this.props.login(values)
16 | .then(this.props.redirect)
17 | .catch(({ message }) => {
18 | throw new SubmissionError({ _error: message });
19 | });
20 |
21 | render() {
22 | return (
23 | Login
25 |
21 | {resourceList.data.map(category =>
22 |
37 | );
38 | }
39 | }
40 |
41 | export default withResourceList('categories')(CategoryList);
42 |
--------------------------------------------------------------------------------
/client/src/components/Categories/index.js:
--------------------------------------------------------------------------------
1 | export CategoryList from './CategoryList';
2 |
--------------------------------------------------------------------------------
/client/src/components/Customers/CustomerEdit.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { push } from 'react-router-redux';
3 | import { connect } from 'react-redux';
4 |
5 | import { ErrorAlert, Loading, EditHeader } from '../UI';
6 | import { withResource } from '../../hocs';
7 | import CustomerForm from './CustomerForm';
8 | import { getMany, fetchList } from '../../store/api';
9 |
10 | export class CustomerEdit extends Component {
11 | componentWillMount() {
12 | const { params, fetchResource } = this.props;
13 | if (params.id) {
14 | fetchResource({ id: params.id });
15 | }
16 | }
17 |
18 | render() {
19 | const { isNew, error, loading, resource, onSubmit } = this.props;
20 |
21 | if (error) {
22 | return (
23 |
,
30 | )}
31 |
31 | { isNew ? 'New Customer' : resource.company_name }
32 |
34 | );
35 | }
36 | }
37 |
38 | export const mapStateToProps = (state, props) => ({
39 | roles: getMany(state)
40 | });
41 |
42 | export const mapDispatchToProps = dispatch => ({
43 | redirectToIndex: () => dispatch(push('/customers'))
44 | });
45 |
46 | export default connect(mapStateToProps, mapDispatchToProps)(
47 | withResource('customers')(CustomerEdit),
48 | );
49 |
--------------------------------------------------------------------------------
/client/src/components/Customers/CustomerForm.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { isEmpty } from 'lodash';
3 | import { Field, reduxForm } from 'redux-form';
4 | import { Button, Form } from 'reactstrap';
5 |
6 | import { InputField, MultiselectField, required } from '../../forms';
7 |
8 | class CustomerForm extends Component {
9 | render() {
10 | const { handleSubmit, pristine, reset, submitting } = this.props;
11 |
12 | return (
13 |
75 | );
76 | }
77 | }
78 |
79 | const validate = (values) => {
80 | const errors = required(values, 'email');
81 | return errors;
82 | };
83 |
84 | export default reduxForm({
85 | enableReinitialize: true,
86 | form: 'customer',
87 | validate,
88 | })(CustomerForm);
89 |
--------------------------------------------------------------------------------
/client/src/components/Customers/CustomerList.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { Link } from 'react-router';
3 | import { find, keyBy } from 'lodash';
4 | import { Button } from 'reactstrap';
5 |
6 | import { ListTable } from '../UI';
7 | import { withResourceList } from '../../hocs';
8 | import CustomerListFilter from './CustomerListFilter';
9 |
10 | const formatDate = date => (new Date(date)).toLocaleString();
11 |
12 | export class CustomerList extends Component {
13 | componentWillMount() {
14 | const { resourceList } = this.props;
15 | this.props.fetchResourceList({ sort: '-companyName', ...resourceList.params });
16 | }
17 |
18 | render() {
19 | const { onFilter } = this.props;
20 | const columns = [
21 | {
22 | attribute: 'companyName',
23 | header: 'Company Name',
24 | rowRender: customer => {customer.companyName},
25 | sortable: true,
26 | },
27 | {
28 | attribute: 'contactName',
29 | header: 'Contact Name',
30 | rowRender: customer => {customer.contactName},
31 | sortable: true,
32 | },
33 | {
34 | attribute: 'createdAt',
35 | header: 'Created At',
36 | rowRender: customer => formatDate(customer.confirmedAt),
37 | sortable: true,
38 | }
39 | ];
40 |
41 | return (
42 |
43 |
44 |
45 |
47 |
48 |
49 |
51 | );
52 | }
53 | }
54 |
55 | export const mapStateToProps = state => ({
56 | filter: get(state, 'form.customerListFilter.values') || {}
57 | });
58 |
59 | export default withResourceList('customers')(CustomerList);
60 |
--------------------------------------------------------------------------------
/client/src/components/Customers/CustomerListFilter.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { isEmpty } from 'lodash';
3 | import { Field, reduxForm } from 'redux-form';
4 | import { Form, Row, Col } from 'reactstrap';
5 |
6 | import { InputField, SelectField } from '../../forms';
7 |
8 | class CustomerListFilter extends Component {
9 | render() {
10 | const { handleSubmit, onSubmit } = this.props;
11 |
12 | const submitOnChange = () => setTimeout(() => handleSubmit(onSubmit)(), 0);
13 |
14 |
15 | return (
16 |
28 | );
29 | }
30 | }
31 |
32 | export default reduxForm({
33 | form: 'customerListFilter',
34 | destroyOnUnmount: false,
35 | })(CustomerListFilter);
36 |
--------------------------------------------------------------------------------
/client/src/components/Customers/index.js:
--------------------------------------------------------------------------------
1 | export CustomerList from './CustomerList';
2 | export CustomerEdit from './CustomerEdit';
3 |
--------------------------------------------------------------------------------
/client/src/components/Dashboard.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Link } from 'react-router';
3 | import { connect } from 'react-redux';
4 | import { get } from 'lodash';
5 |
6 | import { fetchList, getList, getMap } from '../store/api';
7 |
8 | const formatDate = date => (new Date(date)).toLocaleString();
9 |
10 | export class Dashobard extends Component {
11 | componentWillMount() {
12 | this.props.fetchPostsList();
13 | }
14 |
15 | getCategoryForPost(post) {
16 | const categoryId = String(get(post, 'category.id'));
17 | return this.props.categoriesById[categoryId] || {};
18 | }
19 |
20 | render() {
21 | const { postsList } = this.props;
22 |
23 | return (
24 |
25 |
35 | );
36 | }
37 | }
38 |
39 | export const mapStateToProps = state => ({
40 | postsList: getList(state, 'posts', 'latestPosts'),
41 | categoriesById: getMap(state, 'categories'),
42 | });
43 |
44 | export const mapDispatchToProps = dispatch => ({
45 | fetchPostsList: () => dispatch(fetchList(
46 | 'posts',
47 | { include: 'category', page: { size: 5 }, sort: '-createdAt' },
48 | { list: 'latestPosts' },
49 | )),
50 | });
51 |
52 | export default connect(mapStateToProps, mapDispatchToProps)(Dashobard);
53 |
--------------------------------------------------------------------------------
/client/src/components/Orders/OrderEdit.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { push } from 'react-router-redux';
3 | import { connect } from 'react-redux';
4 | import { get, find, omit } from 'lodash';
5 |
6 | import { ErrorAlert, Loading, EditHeader } from '../UI';
7 | import { withResource } from '../../hocs';
8 | import OrderForm from './OrderForm';
9 | import {
10 | fetchList,
11 | getMany,
12 | } from '../../store/api';
13 |
14 | export class OrderEdit extends Component {
15 | componentWillMount() {
16 | const { params, fetchResource } = this.props;
17 |
18 | if (params.id) {
19 | fetchResource({ id: params.id });
20 | }
21 | }
22 |
23 | render() {
24 | const { isNew, error, loading, resource, onSubmit, orders } = this.props;
25 |
26 | if (error) {
27 | return (Latest posts
26 | {postsList.empty && postsList.loading &&Loading...
} 27 | {postsList.data.map(post => 28 |
29 | {post.title}
30 | ({this.getCategoryForPost(post).name})
31 | {formatDate(post.createdAt)}
32 |
,
33 | )}
34 |
36 | { isNew ? 'New Order' : resource.title }
37 |
39 | );
40 | }
41 | }
42 |
43 | export const mapStateToProps = (state, props) => ({
44 | categories: getMany(state, 'orders'),
45 | });
46 |
47 | export const mapDispatchToProps = dispatch => ({
48 | redirectToIndex: () => dispatch(push('/orders')),
49 | });
50 |
51 | export default connect(mapStateToProps, mapDispatchToProps)(
52 | withResource('orders')(OrderEdit),
53 | );
54 |
--------------------------------------------------------------------------------
/client/src/components/Orders/OrderForm.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { isEmpty } from 'lodash';
3 | import { Field, reduxForm } from 'redux-form';
4 | import { Button, Form, Col, Row } from 'reactstrap';
5 |
6 | import { InputField, required } from '../../forms';
7 |
8 | class OrderForm extends Component {
9 | render() {
10 | const { handleSubmit, onSubmit, onDelete, reset, isNew, submitSucceeded } = this.props;
11 |
12 | if (isNew && submitSucceeded) {
13 | setTimeout(() => reset());
14 | }
15 |
16 | const submitOnChange = () => {
17 | if (!isNew) {
18 | setTimeout(() => handleSubmit(onSubmit)(), 0);
19 | }
20 | };
21 |
22 | return (
23 |
66 | );
67 | }
68 | }
69 |
70 | export default reduxForm({
71 | enableReinitialize: true,
72 | form: 'order',
73 | })(OrderForm);
74 |
--------------------------------------------------------------------------------
/client/src/components/Orders/OrderList.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { Link } from 'react-router';
3 | import { connect } from 'react-redux';
4 | import { get, find, keyBy } from 'lodash';
5 | import { Button } from 'reactstrap';
6 |
7 | import { fetchList, getMap, getMany } from '../../store/api';
8 | import { withResourceList } from '../../hocs';
9 | import { ListHeader, ListTable } from '../UI';
10 |
11 | const formatDate = date => (new Date(date)).toLocaleString();
12 |
13 | export class OrderList extends Component {
14 | componentWillMount() {
15 | const {resourceList} = this.props;
16 | this.props.fetchResourceList({sort: '-orderDate', ...resourceList.params});
17 | }
18 |
19 | render() {
20 | const { resourceList, onFilter, categories } = this.props;
21 | const columns = [
22 | {
23 | attribute: 'order_date',
24 | header: 'Order date',
25 | minWidth: '50px',
26 | rowRender: order => formatDate(order.orderDate),
27 | },
28 | {
29 | attribute: 'shippedDate',
30 | header: 'Shipped date',
31 | rowRender: order => formatDate(order.shippedDate),
32 | sortable: true,
33 | },
34 | {
35 | attribute: 'shipAddress',
36 | header: 'Ship address',
37 | rowRender: order => order.shipAddress,
38 | sortable: true,
39 | },
40 | {
41 | attribute: 'shipCity',
42 | header: 'Ship city',
43 | rowRender: order => order.shipCity,
44 | sortable: true,
45 | },
46 | {
47 | attribute: 'shipRegion',
48 | header: 'Ship region',
49 | rowRender: order => order.shipRegion,
50 | sortable: true,
51 | },
52 | ];
53 |
54 | return (
55 |
56 |
57 |
59 | );
60 | }
61 | }
62 |
63 | export const mapStateToProps = state => ({
64 | ordersById: getMap(state, 'orders'),
65 | orders: getMany(state, 'orders'),
66 | });
67 |
68 | export const mapDispatchToProps = dispatch => ({
69 | fetchOrders: () => dispatch(fetchList('orders', { page: { size: 999 } })),
70 | });
71 |
72 | export default connect(mapStateToProps, mapDispatchToProps)(
73 | withResourceList('orders')(OrderList),
74 | );
75 |
--------------------------------------------------------------------------------
/client/src/components/Orders/index.js:
--------------------------------------------------------------------------------
1 | export OrderList from './OrderList';
2 | export OrderEdit from './OrderEdit';
3 |
--------------------------------------------------------------------------------
/client/src/components/Posts/PostEdit.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { push } from 'react-router-redux';
3 | import { connect } from 'react-redux';
4 |
5 | import { ErrorAlert, Loading, EditHeader } from '../UI';
6 | import { withResource } from '../../hocs';
7 | import PostForm from './PostForm';
8 | import {
9 | fetchList,
10 | getMany,
11 | } from '../../store/api';
12 |
13 | export class PostEdit extends Component {
14 | componentWillMount() {
15 | const { params, fetchResource, fetchCategories } = this.props;
16 |
17 | fetchCategories();
18 |
19 | if (params.id) {
20 | fetchResource({ id: params.id, include: 'category' });
21 | }
22 | }
23 |
24 | render() {
25 | const { isNew, error, loading, resource, onSubmit, categories } = this.props;
26 |
27 | if (error) {
28 | return (
37 | { isNew ? 'New Post' : resource.title }
38 |
40 | );
41 | }
42 | }
43 |
44 | export const mapStateToProps = (state, props) => ({
45 | categories: getMany(state, 'categories'),
46 | });
47 |
48 | export const mapDispatchToProps = dispatch => ({
49 | fetchCategories: () => dispatch(fetchList('categories', { page: { limit: 999 } })),
50 | redirectToIndex: () => dispatch(push('/posts')),
51 | });
52 |
53 | export default connect(mapStateToProps, mapDispatchToProps)(
54 | withResource('posts')(PostEdit),
55 | );
56 |
--------------------------------------------------------------------------------
/client/src/components/Posts/PostForm.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { Field, FieldArray, formValueSelector, reduxForm } from 'redux-form';
4 | import { Button, Form, FormFeedback, Col, Row } from 'reactstrap';
5 |
6 | import { InputField, TextArea, SelectField, required } from '../../forms';
7 |
8 | export const PostFormPart = ({ values, part }) => {
9 | switch (values.type) {
10 | case 'image':
11 | return (
12 |
13 | 
14 |
26 | );
27 | case 'text':
28 | return (
29 | {values.description}
15 |
43 | {fields.map((part, index) =>
44 | {error} }
57 |
58 |
59 |
60 | );
61 |
62 | export class PostForm extends Component {
63 | render() {
64 | const { parts, categories, handleSubmit, pristine, reset, submitting } = this.props;
65 |
66 | const categoriesOptions = [{
67 | id: '',
68 | name: '-- select category --',
69 | }].concat(categories.map(category => ({
70 | id: category.id,
71 | name: category.name,
72 | })));
73 |
74 | return (
75 |
95 | );
96 | }
97 | }
98 |
99 | const validate = (values) => {
100 | const errors = required(values,
101 | 'title',
102 | 'category.id',
103 | );
104 | return errors;
105 | };
106 |
107 | const selector = formValueSelector('post');
108 |
109 | export const mapStateToProps = state => ({
110 | parts: selector(state, 'parts'),
111 | });
112 |
113 | export default reduxForm({
114 | enableReinitialize: true,
115 | form: 'post',
116 | validate,
117 | })(
118 | connect(mapStateToProps)(PostForm),
119 | );
120 |
--------------------------------------------------------------------------------
/client/src/components/Posts/PostList.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Link } from 'react-router';
3 | import { connect } from 'react-redux';
4 | import { get } from 'lodash';
5 | import { Button } from 'reactstrap';
6 |
7 | import { fetchList, getMap, getMany } from '../../store/api';
8 | import { withResourceList } from '../../hocs';
9 | import { ListTable } from '../UI';
10 | import PostListFilter from './PostListFilter';
11 |
12 | const formatDate = date => (new Date(date)).toLocaleString();
13 |
14 | export class PostList extends Component {
15 | componentWillMount() {
16 | const { resourceList } = this.props;
17 | this.props.fetchResourceList({ sort: '-createdAt', ...resourceList.params, include: 'category' });
18 | this.props.fetchCategories();
19 | }
20 |
21 | getCategoryForPost(post) {
22 | const categoryId = String(get(post, 'category.id'));
23 | return this.props.categoriesById[categoryId] || {};
24 | }
25 |
26 | render() {
27 | const { resourceList, onFilter, categories } = this.props;
28 |
29 | const columns = [
30 | {
31 | header: 'Category',
32 | minWidth: '50px',
33 | rowRender: post => this.getCategoryForPost(post).name,
34 | },
35 | {
36 | attribute: 'title',
37 | header: 'Title',
38 | rowRender: post => {post.title},
39 | sortable: true,
40 | },
41 | {
42 | attribute: 'createdAt',
43 | header: 'Created At',
44 | rowRender: post => formatDate(post.createdAt),
45 | sortable: true,
46 | },
47 | ];
48 |
49 | return (
50 |
45 |
46 |
47 |
54 |
,
55 | )}
56 | {error && 46 |
51 |
52 |
53 |
57 |
58 |
59 |
61 | );
62 | }
63 | }
64 |
65 | export const mapStateToProps = state => ({
66 | filter: get(state, 'form.postListFilter.values') || {},
67 | categoriesById: getMap(state, 'categories'),
68 | categories: getMany(state, 'categories'),
69 | });
70 |
71 | export const mapDispatchToProps = dispatch => ({
72 | fetchCategories: () => dispatch(fetchList('categories', { page: { size: 999 } })),
73 | });
74 |
75 | export default connect(mapStateToProps, mapDispatchToProps)(
76 | withResourceList('posts')(PostList),
77 | );
78 |
--------------------------------------------------------------------------------
/client/src/components/Posts/PostListFilter.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Field, reduxForm } from 'redux-form';
3 | import { Form, Row, Col } from 'reactstrap';
4 |
5 | import { InputField, SelectField } from '../../forms';
6 |
7 | class PostListFilter extends Component {
8 | render() {
9 | const { handleSubmit, onSubmit, categories } = this.props;
10 |
11 | const submitOnChange = () => setTimeout(() => handleSubmit(onSubmit)(), 0);
12 |
13 | const categoriesOptions = [{
14 | id: '',
15 | name: 'All categories',
16 | }].concat(categories.map(category => ({
17 | id: category.id,
18 | name: category.name,
19 | })));
20 |
21 | return (
22 |
43 | );
44 | }
45 | }
46 |
47 | export default reduxForm({
48 | form: 'postListFilter',
49 | destroyOnUnmount: false,
50 | })(PostListFilter);
51 |
--------------------------------------------------------------------------------
/client/src/components/Posts/index.js:
--------------------------------------------------------------------------------
1 | export PostEdit from './PostEdit';
2 | export PostList from './PostList';
3 |
--------------------------------------------------------------------------------
/client/src/components/Products/ProductEdit.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { push } from 'react-router-redux';
3 | import { connect } from 'react-redux';
4 |
5 | import { ErrorAlert, Loading, EditHeader } from '../UI';
6 | import { withResource } from '../../hocs';
7 | import ProductForm from './ProductForm';
8 | import { getMany, fetchList } from '../../store/api';
9 |
10 | export class ProductEdit extends Component {
11 | componentWillMount() {
12 | const { params, fetchResource } = this.props;
13 |
14 | if (params.id) {
15 | fetchResource({ id: params.id });
16 | }
17 | }
18 |
19 | render() {
20 | const { isNew, error, loading, resource, onSubmit } = this.props;
21 |
22 | if (error) {
23 | return (
32 | { isNew ? 'New Product' : resource.productName }
33 |
35 | );
36 | }
37 | }
38 |
39 |
40 | export const mapDispatchToProps = dispatch => ({
41 | redirectToIndex: () => dispatch(push('/products')),
42 | });
43 |
44 | export default connect(null, mapDispatchToProps)(
45 | withResource('products')(ProductEdit),
46 | );
47 |
--------------------------------------------------------------------------------
/client/src/components/Products/ProductForm.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { isEmpty } from 'lodash';
3 | import { Field, reduxForm } from 'redux-form';
4 | import { Button, Form } from 'reactstrap';
5 |
6 | import { InputField, MultiselectField, required } from '../../forms';
7 |
8 | class ProductForm extends Component {
9 | render() {
10 | const { handleSubmit, pristine, reset, submitting } = this.props;
11 |
12 | return (
13 |
26 | );
27 | }
28 | }
29 |
30 | const validate = (values) => {
31 | const errors = required(values, 'productName');
32 | return errors;
33 | };
34 |
35 | export default reduxForm({
36 | enableReinitialize: true,
37 | form: 'product',
38 | validate,
39 | })(ProductForm);
40 |
--------------------------------------------------------------------------------
/client/src/components/Products/ProductList.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { Link } from 'react-router';
3 | import { find, keyBy } from 'lodash';
4 |
5 | import { ListTable } from '../UI';
6 | import { withResourceList } from '../../hocs';
7 | import { Button } from 'reactstrap';
8 |
9 | const formatDate = date => (new Date(date)).toLocaleString();
10 |
11 | export class ProductList extends Component {
12 | componentWillMount() {
13 | const { resourceList } = this.props;
14 | this.props.fetchResourceList({ sort: '-createdAt', ...resourceList.params });
15 | }
16 |
17 | render() {
18 | const columns = [
19 | {
20 | attribute: 'productName',
21 | header: 'Name',
22 | rowRender: product => {product.productName},
23 | sortable: true,
24 | },
25 | {
26 | attribute: 'createdAt',
27 | header: 'Created At',
28 | rowRender: product => formatDate(product.createdAt),
29 | sortable: true,
30 | }
31 | ];
32 |
33 | return (
34 |
35 |
36 |
38 | );
39 | }
40 | }
41 |
42 | export default withResourceList('products')(ProductList);
43 |
--------------------------------------------------------------------------------
/client/src/components/Products/index.js:
--------------------------------------------------------------------------------
1 | export ProductList from './ProductList';
2 | export ProductEdit from './ProductEdit';
3 |
--------------------------------------------------------------------------------
/client/src/components/Routes.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import { Router, Route, IndexRoute } from 'react-router';
5 | import { UserAuthWrapper } from 'redux-auth-wrapper';
6 |
7 | import { getUser } from '../store/auth';
8 | import App from './App';
9 | import Dashboard from './Dashboard';
10 | import { PostList, PostEdit } from './Posts';
11 | import { CategoryList } from './Categories';
12 | import { UserList, UserEdit } from './Users';
13 | import { CustomerList, CustomerEdit } from './Customers';
14 | import { Login } from './Auth';
15 | import { OrderList, OrderEdit } from './Orders';
16 | import { ProductList, ProductEdit } from './Products';
17 |
18 | const UserIsAuthenticated = UserAuthWrapper({ authSelector: getUser });
19 | const UserIsAdmin = UserAuthWrapper({
20 | authSelector: getUser,
21 | predicate: user => user.roles.includes('admin'),
22 | });
23 |
24 | export class Routes extends PureComponent {
25 | static propTypes = {
26 | history: PropTypes.object,
27 | };
28 |
29 | render() {
30 | const { history } = this.props;
31 |
32 | return (
33 |
6 | { children }
7 | { !isNew && X }
8 |
9 | );
10 |
--------------------------------------------------------------------------------
/client/src/components/UI/ErrorAlert.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Alert } from 'reactstrap';
3 |
4 | const ErrorAlert = ({ message }) =>
30 |
31 |
32 |
59 |
63 |
64 |
65 | );
66 | };
67 |
--------------------------------------------------------------------------------
/client/src/components/UI/Loading.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Loading = () => (| 39 | {column.header} 40 | {column.sortable && !sorted(column.attribute) && } 41 | {column.sortable && sorted(column.attribute) && !sortedAsc && } 42 | {column.sortable && sorted(column.attribute) && sortedAsc && } 43 | | , 44 | )} 45 |
|---|
| 52 | {column.rowRender ? column.rowRender(item) : item[column.attribute]} 53 | | , 54 | )} 55 |
Loading...
);
4 |
5 | export default Loading;
6 |
--------------------------------------------------------------------------------
/client/src/components/UI/Pagination.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createUltimatePagination, ITEM_TYPES } from 'react-ultimate-pagination';
3 | import { Input, Label } from 'reactstrap';
4 |
5 | const WrapperComponent = ({ children }) => (
6 | - {children}
54 |
70 | );
71 | };
72 |
--------------------------------------------------------------------------------
/client/src/components/UI/index.js:
--------------------------------------------------------------------------------
1 | export CardSingle from './CardSingle';
2 | export EditHeader from './EditHeader';
3 | export ErrorAlert from './ErrorAlert';
4 | export ListTable from './ListTable';
5 | export Loading from './Loading';
6 | export Pagination from './Pagination';
7 |
--------------------------------------------------------------------------------
/client/src/components/Users/UserEdit.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { push } from 'react-router-redux';
3 | import { connect } from 'react-redux';
4 |
5 | import { ErrorAlert, Loading, EditHeader } from '../UI';
6 | import { withResource } from '../../hocs';
7 | import UserForm from './UserForm';
8 | import { getMany, fetchList } from '../../store/api';
9 |
10 | export class UserEdit extends Component {
11 | componentWillMount() {
12 | const { params, fetchResource, fetchRoles } = this.props;
13 |
14 | fetchRoles();
15 |
16 | if (params.id) {
17 | fetchResource({ id: params.id });
18 | }
19 | }
20 |
21 | render() {
22 | const { isNew, error, loading, resource, onSubmit, roles } = this.props;
23 |
24 | if (error) {
25 | return (
34 | { isNew ? 'New User' : resource.email }
35 |
36 |
37 | );
38 | }
39 | }
40 |
41 | export const mapStateToProps = (state, props) => ({
42 | roles: getMany(state, 'roles'),
43 | });
44 |
45 | export const mapDispatchToProps = dispatch => ({
46 | fetchRoles: () => dispatch(fetchList('roles', { page: { limit: 999 } })),
47 | redirectToIndex: () => dispatch(push('/users')),
48 | });
49 |
50 | export default connect(mapStateToProps, mapDispatchToProps)(
51 | withResource('users')(UserEdit),
52 | );
53 |
--------------------------------------------------------------------------------
/client/src/components/Users/UserForm.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Field, reduxForm } from 'redux-form';
3 | import { Button, Form } from 'reactstrap';
4 |
5 | import { InputField, MultiselectField, required } from '../../forms';
6 |
7 | class UserForm extends Component {
8 | render() {
9 | const { roles, handleSubmit, pristine, reset, submitting } = this.props;
10 |
11 | const rolesOptions = [{
12 | id: '',
13 | name: '-- select role --',
14 | }].concat(roles.map(role => ({
15 | id: role.name,
16 | name: role.name,
17 | })));
18 |
19 | return (
20 |
41 | );
42 | }
43 | }
44 |
45 | const validate = (values) => {
46 | const errors = required(values, 'email');
47 | return errors;
48 | };
49 |
50 | export default reduxForm({
51 | enableReinitialize: true,
52 | form: 'user',
53 | validate,
54 | })(UserForm);
55 |
--------------------------------------------------------------------------------
/client/src/components/Users/UserList.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Link } from 'react-router';
3 |
4 | import { ListTable } from '../UI';
5 | import { withResourceList } from '../../hocs';
6 |
7 | const formatDate = date => (new Date(date)).toLocaleString();
8 |
9 | export class UserList extends Component {
10 | componentWillMount() {
11 | const { resourceList } = this.props;
12 | this.props.fetchResourceList({ sort: '-createdAt', ...resourceList.params });
13 | }
14 |
15 | render() {
16 | const columns = [
17 | {
18 | attribute: 'email',
19 | header: 'Email',
20 | rowRender: user => {user.email},
21 | sortable: true,
22 | },
23 | {
24 | attribute: 'createdAt',
25 | header: 'Created At',
26 | rowRender: user => formatDate(user.confirmedAt),
27 | sortable: true,
28 | },
29 | {
30 | attribute: 'role',
31 | header: 'Role',
32 | rowRender: user => user.roles.join(),
33 | },
34 | ];
35 |
36 | return (
37 | Loading ...
15 | <% for (var key in htmlWebpackPlugin.files.js) { %>
16 |