removes dynamic collection routes, uses route param instead

src/components/data/edit.js

@@ -19,14 +19,14 @@ const withEditData = PassedComponent => {
     }
 
     fetchData = () => {
-      const slug = this.props.match.params.slug;
+      const { id } = this.props.match.params;
 
       const params = {
         locale: this.props.locale
       };
 
-      if (slug) {
-        api.requests.get(`${this.props.config.serverUrl}/${this.props.collection.slug}/${slug}`, params).then(
+      if (id) {
+        api.requests.get(`${this.props.config.serverUrl}/${this.props.collection.slug}/${id}`, params).then(
           res => this.setState({ data: res }),
           err => {
             console.warn(err);

src/components/layout/Sidebar/index.js

@@ -21,8 +21,8 @@ const Sidebar = props => {
       </Link>
       <span className="uppercase-label">Collections</span>
       <nav>
-        {props.collections && props.collections.map((item, i) => {
-          const href = `/collections/${item.slug}`;
+        {props.collections && Object.keys(props.collections).map((key, i) => {
+          const href = `/collections/${props.collections[key].slug}`;
           const classes = props.location.pathname.indexOf(href) > -1
             ? 'active'
             : undefined;
@@ -30,7 +30,7 @@ const Sidebar = props => {
           return (
             <Link className={classes} key={i} to={href}>
               <Arrow />
-              {props.collections[i].plural}
+              {props.collections[key].plural}
             </Link>
           );
         })}

src/components/modules/APIUrl/index.js

@@ -1,17 +1,31 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
 
 import './index.scss';
 
+const mapState = state => ({
+  locale: state.common.locale,
+  config: state.common.config
+})
+
 const APIUrl = props => {
 
-  const apiUrl = `${props.serverUrl}/${props.collectionSlug}/${props.slug ? `${props.slug}` : ''}`;
+  const { collectionSlug, id } = props.match.params;
+
+  const apiUrl = `${props.config.serverUrl}/${collectionSlug}/${id}`;
 
   return (
     <div className="api-url">
       <span className="uppercase-label">API URL</span>
-      <div className="url"><a href={apiUrl} rel="noopener noreferrer" target="_blank">{apiUrl}</a></div>
+      {id &&
+        <div className="url"><a href={apiUrl} rel="noopener noreferrer" target="_blank">{apiUrl}</a></div>
+      }
+      {!id &&
+        <div>&mdash;</div>
+      }
     </div>
   );
 };
 
-export default APIUrl;
+export default withRouter(connect(mapState)(APIUrl));

src/components/modules/Status/index.scss

@@ -32,6 +32,9 @@
   }
 
   &.error {
-    background: $error;
+
+    .status-wrap {
+      background: $error;
+    }
   }
 }

src/components/routes/Collections.js

@@ -9,28 +9,30 @@ const mapState = state => ({
 
 const CollectionRoutes = props => {
 
-  return props.collections.map((collection, i) => {
-    if (collection) {
+  return (
+    <Switch>
+      <Route path={'/collections/:collectionSlug/create'} exact
+        render={routeProps => {
+          const { collectionSlug } = routeProps.match.params;
+          const Edit = props.views[collectionSlug].Edit;
+          return <Edit {...routeProps} collection={props.collections[collectionSlug]} config={props.config} />;
+        }} />
 
-      const Edit = props.views[collection.slug].Edit;
-      const Archive = props.views[collection.slug].Archive;
+      <Route path={'/collections/:collectionSlug/:id'} exact
+        render={routeProps => {
+          const { collectionSlug } = routeProps.match.params;
+          const Edit = props.views[routeProps.match.params.collectionSlug].Edit;
+          return <Edit {...routeProps} collection={props.collections[collectionSlug]} config={props.config} />;
+        }} />
 
-      return (
-        <Switch key={i}>
-          <Route path={`/collections/${collection.slug}/create`} exact
-            render={routeProps => <Edit {...routeProps} collection={collection} config={props.config} />} />
-
-          <Route path={`/collections/${collection.slug}/:slug`}
-            render={routeProps => <Edit {...routeProps} collection={collection} config={props.config} />} />
-
-          <Route path={`/collections/${collection.slug}`} exact
-            render={routeProps => <Archive {...routeProps} collection={collection} config={props.config} />} />
-        </Switch>
-      );
-    }
-
-    return null;
-  });
+      <Route path={'/collections/:collectionSlug'} exact
+        render={routeProps => {
+          const { collectionSlug } = routeProps.match.params;
+          const Archive = props.views[routeProps.match.params.collectionSlug].Archive;
+          return <Archive {...routeProps} collection={props.collections[collectionSlug]} config={props.config} />;
+        }} />
+    </Switch>
+  );
 };
 
 export default withRouter(connect(mapState)(CollectionRoutes));