modifies Page.find to rely on slug instead, wires up API call to retrieve single record

src/components/data/archive.js

@@ -15,10 +15,8 @@ const withArchiveData = (PassedComponent, collection, config) => {
 
     componentDidMount() {
       api.requests.get(`${config.serverUrl}/${collection.slug}`).then(
-        res =>
-          this.setState({ data: res }),
-        err =>
-          console.warn(err)
+        res => this.setState({ data: res }),
+        err => console.warn(err)
       )
     }
 

src/components/data/edit.js

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import api from 'payload/api';
 
 const withEditData = (PassedComponent, collection, config) => {
 
@@ -11,12 +13,23 @@ const withEditData = (PassedComponent, collection, config) => {
       }
     }
 
+    componentDidMount() {
+      const slug = this.props.match.params.slug;
+
+      if (slug) {
+        api.requests.get(`${config.serverUrl}/${collection.slug}/${slug}`).then(
+          res => this.setState({ data: res }),
+          err => console.warn(err)
+        )
+      }
+    }
+
     render() {
       return <PassedComponent {...this.props} data={this.state.data } />;
     }
   }
 
-  return EditData;
+  return withRouter(EditData);
 }
 
 export default withEditData;

src/components/layout/Table/index.scss

@@ -15,7 +15,7 @@ table {
   }
 
   tbody {
-    @extend %inputShadow;
+    @extend %shadow-sm;
   }
 
   tr:nth-child(even) {

src/components/modules/APIUrl/index.js

@@ -4,12 +4,12 @@ import { Label, Input } from 'payload/components';
 
 const APIUrl = props => {
 
-  const apiUrl = `${props.serverUrl}/${props.collectionSlug}?slug=${props.slug ? `${props.slug}` : ''}`;
+  const apiUrl = `${props.serverUrl}/${props.collectionSlug}/${props.slug ? `${props.slug}` : ''}`;
 
   return (
     <div className="api-url">
       <Label className="uppercase">API URL</Label>
-      <div><a href={apiUrl}>{apiUrl}</a></div>
+      <div><a href={apiUrl} rel="noopener noreferrer" target="_blank">{apiUrl}</a></div>
       <Input type="hidden" name="slug" valueOverride={props.slug} />
     </div>
   );

src/components/modules/SearchableTable/index.js

@@ -27,7 +27,7 @@ class SearchableTable extends Component {
       return this.props.data.map(row => {
           const formattedRow = {...row};
 
-          const url = `/${this.props.collection.slug}/${row.slug}`;
+          const url = `/collections/${this.props.collection.slug}/${row.slug}`;
 
           // Link the first column
           formattedRow[this.state.columns[0].key] = <Link to={url}>{row[this.state.columns[0].key]}</Link>

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

@@ -28,10 +28,14 @@ const EditView = props => {
       <SetStepNav nav={ nav } />
       <header>
         {isEditing &&
-          <h1>Edit Page {}</h1>
+          <h1>
+            Edit {props.collection.singular} {props.data &&
+              props.data[props.collection.uid]
+            }
+          </h1>
         }
         {!isEditing &&
-          <h1>Create New Page</h1>
+          <h1>Create New {props.collection.singular}</h1>
         }
       </header>
       {props.children}

src/scss/vars.scss

@@ -52,13 +52,17 @@ $radius-sm    : 5px;
 $radius-lrg   : 10px;
 $stroke-width : 1px;
 
+%shadow-sm {
+	box-shadow: 0 2px 4px 0 rgba(0,2,4,.1),
+				0 2px 20px 0 rgba(0,2,4,.04);
+}
+
 %shadow {
 	box-shadow: 0 22px 65px rgba(0,0,0,.07);
 }
 
 %inputShadow {
-	box-shadow: 0 2px 4px 0 rgba(0,2,4,.1),
-				0 2px 20px 0 rgba(0,2,4,.04);
+  @extend %shadow-sm;
 
 	&:hover {
 		box-shadow: 0 2px 4px 0 rgba(0,2,4,.1),