content Cards refactor

example/config.yml

@@ -17,7 +17,7 @@ collections: # A list of collections the CMS should be able to edit
     meta:
       - {label: "Publish Date", name: "date", widget: "datetime", format: "YYYY-MM-DD hh:mma"}
       - {label: "SEO Description", name: "description", widget: "text"}
-    card: {type: "media", media: "image", text: "title"}
+    card: {type: "image", image: "image", text: "title"}
 
   - name: "faq" # Used in routes, ie.: /admin/collections/:slug/edit
     label: "FAQ" # Used in the UI, ie.: "New Post"

src/components/Cards.js

@@ -1,10 +1,10 @@
 import UnknownCard from './Cards/UnknownCard';
-import MediaCard from './Cards/MediaCard';
+import ImageCard from './Cards/ImageCard';
 import AlltypeCard from './Cards/AlltypeCard';
 
 const Cards = {
   _unknown: UnknownCard,
-  media: MediaCard,
+  image: ImageCard,
   alltype: AlltypeCard
 };
 

src/components/Cards/ImageCard.js

@@ -0,0 +1,22 @@
+import React, { PropTypes } from 'react';
+import { Card } from '../UI';
+
+export default function ImageCard({ onClick, image, text }) {
+  return (
+    <Card onClick={onClick}>
+      <img src={image} />
+      <h1>{text}</h1>
+    </Card>
+  );
+}
+
+ImageCard.propTypes = {
+  image: PropTypes.string.isRequired,
+
+  onClick: PropTypes.func,
+  text: PropTypes.string.isRequired
+};
+
+ImageCard.defaultProps = {
+  onClick: function() {},
+};

src/components/Cards/MediaCard.js

@@ -1,16 +0,0 @@
-import React, { PropTypes } from 'react';
-import { Card } from '../UI';
-
-export default function MediaCard({ onClick, media, text }) {
-  return (
-    <Card onClick={onClick}>
-      <img src={media} />
-      <h1>{text}</h1>
-    </Card>
-  );
-}
-
-MediaCard.propTypes = {
-  media: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired
-};

src/components/EntryListing.js

@@ -58,7 +58,7 @@ export default class EntryListing extends React.Component {
       collection: collection,
       onClick: browserHistory.push.bind(this, link),
       text: entry.getIn(['data', collection.getIn(['card', 'text'])]),
-      media: entry.getIn(['data', collection.getIn(['card', 'media'])]),
+      image: entry.getIn(['data', collection.getIn(['card', 'image'])]),
     });
   }
 
@@ -67,7 +67,7 @@ export default class EntryListing extends React.Component {
     const name = collection.get('name');
 
     return <div>
-      <h2>Listing entries!</h2>
+      <h2>Listing {name}</h2>
       <div ref={(c) => this._entries = c}>
         {entries.map((entry) => {
           const path = `/collections/${name}/entries/${entry.get('slug')}`;

src/containers/CollectionPage.js

@@ -30,13 +30,6 @@ class DashboardPage extends React.Component {
 
     return <div>
       <h1>Dashboard</h1>
-      <div>
-        {collections.map((collection) => (
-          <div key={collection.get('name')}>
-            <Link to={`/collections/${collection.get('name')}`}>{collection.get('name')}</Link>
-          </div>
-        )).toArray()}
-      </div>
       <div>
         {entries ? <EntryListing collection={collection} entries={entries}/> : 'Loading entries...'}
       </div>