revises withEditData

src/client/components/Routes.js

@@ -90,7 +90,7 @@ const Routes = () => {
                           return (
                             <Route
                               key={collection.slug}
-                              path={`${match.url}/collections/${collection.slug}/:id`}
+                              path={`${match.url}/collections/${collection.slug}/create`}
                               exact
                               render={(routeProps) => {
                                 return (
@@ -107,7 +107,7 @@ const Routes = () => {
                           return (
                             <Route
                               key={collection.slug}
-                              path={`${match.url}/collections/${collection.slug}/create`}
+                              path={`${match.url}/collections/${collection.slug}/:id`}
                               exact
                               render={(routeProps) => {
                                 return (

src/client/components/data/edit.js

@@ -1,62 +1,57 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-import api from 'payload/api';
-
-const mapState = state => ({
-  locale: state.common.locale,
-});
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useRouteMatch, useHistory } from 'react-router-dom';
+import config from 'payload-config';
+import useMountEffect from '../../hooks/useMountEffect';
+import { requests } from '../../api';
+import { useLocale } from '../utilities/Locale';
 
 const withEditData = (PassedComponent) => {
-  class EditData extends Component {
-    constructor(props) {
-      super(props);
+  const EditData = (props) => {
+    const { collection } = props;
+    const locale = useLocale();
+    const [data, setData] = useState({});
+    const match = useRouteMatch();
+    const history = useHistory();
 
-      this.state = {
-        data: {},
-      };
-    }
-
-    fetchData = () => {
-      const { id } = this.props.match.params;
+    const fetchData = () => {
+      const { id } = match.params;
 
       const params = {
-        locale: this.props.locale,
+        locale,
         'fallback-locale': 'null',
       };
 
       if (id) {
-        api.requests.get(`${this.props.config.serverUrl}/${this.props.collection.slug}/${id}`, params).then(
-          res => this.setState({ data: res }),
+        requests.get(`${config.serverUrl}/${collection.slug}/${id}`, params).then(
+          res => setData(res),
           (err) => {
             console.warn(err);
-            this.props.history.push('/not-found');
+            history.push('/not-found');
           },
         );
       }
-    }
+    };
 
-    componentDidMount() {
-      this.fetchData();
-    }
+    useMountEffect(fetchData);
+    useEffect(fetchData, [locale]);
 
-    componentDidUpdate(prevProps) {
-      if (prevProps.locale !== this.props.locale) {
-        this.fetchData();
-      }
-    }
+    return (
+      <PassedComponent
+        {...props}
+        data={data}
+      />
+    );
+  };
 
-    render() {
-      return (
-        <PassedComponent
-          {...this.props}
-          data={this.state.data}
-        />
-      );
-    }
-  }
+  EditData.propTypes = {
+    collection: PropTypes.shape({
+      slug: PropTypes.string,
+    }).isRequired,
+  };
 
-  return withRouter(connect(mapState)(EditData));
+
+  return EditData;
 };
 
 export default withEditData;

src/client/components/views/collections/Edit/index.js

@@ -1,20 +1,25 @@
-import React, { useEffect } from 'react';
-import { useStepNav } from '../../../modules/StepNav';
+import React from 'react';
+import PropTypes from 'prop-types';
+import withEditData from '../../../data/edit';
+import getSanitizedConfig from '../../../../config/getSanitizedConfig';
+import DefaultTemplate from '../../../layout/DefaultTemplate';
 
 import './index.scss';
 
-const EditView = props => {
-  const { setStepNav } = useStepNav();
+const { routes: { admin } } = getSanitizedConfig();
+
+const EditView = (props) => {
+  const { collection, data, isEditing } = props;
 
   const nav = [{
-    url: `/collections/${props.collection.slug}`,
-    label: props.collection.label
+    url: `${admin}/collections/${collection.slug}`,
+    label: collection.labels.plural,
   }];
 
-  if (props.isEditing) {
+  if (isEditing) {
     nav.push({
-      url: `/collections/${props.collection.slug}/${props.data._id}`,
-      label: props.data ? props.data[props.collection.useAsTitle] : ''
+      url: `${admin}/collections/${collection.slug}/${data._id}`,
+      label: data ? data[collection.useAsTitle] : ''
     })
   } else {
     nav.push({
@@ -22,25 +27,38 @@ const EditView = props => {
     })
   }
 
-  useEffect(() => setStepNav(nav), []);
-
   return (
-    <article className="collection-edit">
+    <DefaultTemplate
+      className="collection-edit"
+      stepNav={nav}
+    >
       <header>
-        {props.isEditing &&
+        {isEditing &&
           <h1>
-            Edit {Object.keys(props.data).length > 0 &&
-              (props.data[props.collection.useAsTitle] ? props.data[props.collection.useAsTitle] : '[Untitled]')
+            Edit {Object.keys(data).length > 0 &&
+              (data[collection.useAsTitle] ? data[collection.useAsTitle] : '[Untitled]')
             }
           </h1>
         }
-        {!props.isEditing &&
-          <h1>Create New {props.collection.singular}</h1>
+        {!isEditing &&
+          <h1>Create New {collection.labels.singular}</h1>
         }
       </header>
-      {props.children}
-    </article>
+    </DefaultTemplate>
   );
 };
 
-export default EditView;
+EditView.propTypes = {
+  collection: PropTypes.shape({
+    labels: PropTypes.shape({
+      plural: PropTypes.string,
+    }),
+    slug: PropTypes.string,
+    useAsTitle: PropTypes.string,
+  }).isRequired,
+  data: PropTypes.shape({
+    _id: PropTypes.string,
+  }).isRequired,
+};
+
+export default withEditData(EditView);

src/client/components/views/collections/List/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import getSanitizedConfig from '../../../../config/getSanitizedConfig';
 import withListData from '../../../data/list';
 import DefaultTemplate from '../../../layout/DefaultTemplate';
 import HeadingButton from '../../../modules/HeadingButton';
@@ -7,6 +8,8 @@ import SearchableTable from '../../../modules/SearchableTable';
 
 import './index.scss';
 
+const { routes: { admin } } = getSanitizedConfig();
+
 const ListView = (props) => {
   const { collection, data } = props;
 
@@ -22,7 +25,7 @@ const ListView = (props) => {
       <HeadingButton
         heading={collection.labels.plural}
         buttonLabel="Add New"
-        buttonURL={`/collections/${collection.slug}/create`}
+        buttonURL={`${admin}/collections/${collection.slug}/create`}
         buttonType="link"
       />
       <SearchableTable