Fix loading single resource

Author: tb

client/src/api/client.js

@@ -66,8 +66,14 @@ export const normalizeResponse = (response) => {
     }));
 };
 
-export const normalizeErrors = (response) => {
-  throw get(response, 'response.data.errors')
+export const normalizeEndpointError = (err) => {
+  const error = get(err, 'response.data.errors[0]');
+  // eslint-disable-next-line  no-throw-literal
+  throw { message: error.detail || error.title || err.message };
+};
+
+export const normalizeErrors = (err) => {
+  throw get(err, 'response.data.errors')
     .reduce((errors, error) => {
       const attribute = /\/data\/[a-z]*\/(.*)$/.exec(get(error, 'source.pointer'))[1];
       set(errors, attribute.split('/'), error.title);

client/src/components/Auth/Login.js

@@ -8,14 +8,15 @@ import LoginForm from './LoginForm';
 import { login } from '../../store/auth';
 
 export class Login extends Component {
+  // eslint-disable-next-line class-methods-use-this
   componentWillMount() {
     localStorage.clear();
   }
 
   onSubmit = values => this.props.login(values)
     .then(this.props.redirect)
-    .catch(({ response }) => {
-      throw new SubmissionError({ _error: response.data.errors.join() });
+    .catch(({ message }) => {
+      throw new SubmissionError({ _error: message });
     });
 
   render() {

client/src/components/Categories/CategoryList.js

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { find, keyBy } from 'lodash';
 
+import { Loading } from '../UI';
 import { withResourceList } from '../../hocs';
 import CategoryForm from './CategoryForm';
 
@@ -12,6 +13,10 @@ export class CategoryList extends Component {
   render() {
     const { resourceList, onSubmit, onDelete } = this.props;
 
+    if (resourceList.empty && resourceList.loading) {
+      return (<Loading />);
+    }
+
     return (
       <div>
         {resourceList.data.map(category =>
@@ -24,7 +29,6 @@ export class CategoryList extends Component {
             />
           </div>,
         )}
-        {resourceList.empty && resourceList.loading && <p>Loading...</p>}
         <CategoryForm
           isNew={true}
           form="category-new"

client/src/components/Posts/PostEdit.js

@@ -3,7 +3,7 @@ import { push } from 'react-router-redux';
 import { connect } from 'react-redux';
 import { get, find, omit } from 'lodash';
 
-import { EditHeader } from '../UI';
+import { ErrorAlert, Loading, EditHeader } from '../UI';
 import { withResource } from '../../hocs';
 import PostForm from './PostForm';
 import {
@@ -23,7 +23,15 @@ export class PostEdit extends Component {
   }
 
   render() {
-    const { isNew, resource, onSubmit, categories } = this.props;
+    const { isNew, error, loading, resource, onSubmit, categories } = this.props;
+
+    if (error) {
+      return (<ErrorAlert {...error} />);
+    }
+
+    if (loading) {
+      return (<Loading/>);
+    }
 
     return (
       <div>

client/src/components/UI/ErrorAlert.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Alert } from 'reactstrap';
+
+const ErrorAlert = ({ message }) => <Alert color="danger">{message}</Alert>;
+
+export default ErrorAlert;

client/src/components/UI/ListTable.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Table } from 'reactstrap';
 
-import { Pagination } from './';
+import { Loading, Pagination } from './';
 
 const columnKey = (column, postfix) => `${column.accessor || column.header}-${postfix}`;
 
@@ -20,6 +20,11 @@ export default (props) => {
     }
   };
 
+
+  if (resourceList.empty && resourceList.loading) {
+    return (<Loading />);
+  }
+
   return (
     <div>
       <Table>
@@ -51,14 +56,11 @@ export default (props) => {
         )}
         </tbody>
       </Table>
-
       <Pagination
         resourceList={resourceList}
         onPageNumber={onPageNumber}
         onPageSize={onPageSize}>
       </Pagination>
-
-      {resourceList.empty && resourceList.loading && <p>Loading...</p>}
     </div>
   );
 };

client/src/components/UI/Loading.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Loading = () => (<div>Loading...</div>);
+
+export default Loading;

client/src/components/UI/index.js

@@ -1,4 +1,6 @@
 export CardSingle from './CardSingle';
 export EditHeader from './EditHeader';
+export ErrorAlert from './ErrorAlert';
 export ListTable from './ListTable';
+export Loading from './Loading';
 export Pagination from './Pagination';

client/src/components/Users/UserEdit.js

@@ -3,7 +3,7 @@ import { push } from 'react-router-redux';
 import { connect } from 'react-redux';
 import { get, find, omit } from 'lodash';
 
-import { EditHeader } from '../UI';
+import { ErrorAlert, Loading, EditHeader } from '../UI';
 import { withResource } from '../../hocs';
 import UserForm from './UserForm';
 
@@ -17,7 +17,15 @@ export class UserEdit extends Component {
   }
 
   render() {
-    const { isNew, resource, onSubmit } = this.props;
+    const { isNew, error, loading, resource, onSubmit } = this.props;
+
+    if (error) {
+      return (<ErrorAlert {...error} />);
+    }
+
+    if (loading) {
+      return (<Loading />);
+    }
 
     return (
       <div>

client/src/hocs/withResource.js

@@ -11,6 +11,7 @@ import {
   updateResource,
   deleteResource,
   getOne,
+  getError,
 } from '../store/api';
 
 const withResource = (resourceType, resourceMeta) => (WrappedComponent) => {
@@ -33,14 +34,20 @@ const withResource = (resourceType, resourceMeta) => (WrappedComponent) => {
 
   const mapStateToProps = (state, props) => ({
     isNew: !props.params.id,
+    loading: props.params.id && !getOne(state, resourceType, props.params.id),
+    error: props.params.id && getError(state, resourceType),
     resource: getOne(state, resourceType, props.params.id),
   });
 
   const mapDispatchToProps = dispatch => ({
-    fetchResource: (payload, meta) => dispatch(fetchOne(resourceType, payload, { ...resourceMeta, ...meta })),
-    createResource: (payload, meta) => dispatch(createResource(resourceType, payload, { ...resourceMeta, ...meta })),
-    updateResource: (payload, meta) => dispatch(updateResource(resourceType, payload, { ...resourceMeta, ...meta })),
-    deleteResource: (payload, meta) => dispatch(deleteResource(resourceType, payload, { ...resourceMeta, ...meta })),
+    fetchResource: (payload, meta) =>
+      dispatch(fetchOne(resourceType, payload, { ...resourceMeta, ...meta })),
+    createResource: (payload, meta) =>
+      dispatch(createResource(resourceType, payload, { ...resourceMeta, ...meta })),
+    updateResource: (payload, meta) =>
+      dispatch(updateResource(resourceType, payload, { ...resourceMeta, ...meta })),
+    deleteResource: (payload, meta) =>
+      dispatch(deleteResource(resourceType, payload, { ...resourceMeta, ...meta })),
   });
 
   return connect(mapStateToProps, mapDispatchToProps)(enhance(WrappedComponent));