move item meta data out into component

Author: chrisdwheatley

components/item-meta.js

@@ -0,0 +1,25 @@
+import { Link } from "../routes";
+
+export default ({ url, title, user, points, time_ago, id, comments_count }) => (
+  <span>
+    <a href={url}>{title}</a>
+    {" "}
+    {user &&
+      <span>
+        {points}
+        {" "}
+        points by
+        {" "}
+        <Link route="user" params={{ name: user }}><a>{user}</a></Link>
+      </span>}
+    {" "}
+    {time_ago}
+    {user &&
+      <span>
+        {" "}|{" "}
+        <Link prefetch route="comments" params={{ id }}>
+          <a>{comments_count} comments</a>
+        </Link>
+      </span>}
+  </span>
+);

package.json

@@ -5,6 +5,7 @@
   "author": "Chris Draycott-Wheatley",
   "license": "MIT",
   "scripts": {
+    "lint": "prettier pages/*.js components/*.js *.js --write",
     "dev": "node index.js",
     "build": "NODE_ENV=production next build",
     "start": "NODE_ENV=production node index.js"

pages/comments.js

@@ -1,6 +1,7 @@
 import fetch from "isomorphic-fetch";
 import Link from "next/link";
 import Navigation from "../components/navigation";
+import ItemMeta from "../components/item-meta";
 
 function commentThread(comments) {
   const thread = [];
@@ -24,33 +25,12 @@ function commentThread(comments) {
 }
 
 const Comments = ({ data }) => {
-  const {
-    comments_count,
-    id,
-    points,
-    time_ago,
-    title,
-    user
-  } = data;
   return (
     <div>
       <Navigation />
       <div>
-        {data.title}
-        {" "}
-        <span>
-          {points}
-          {" "}
-          points by
-          {" "}
-          <Link route="user" params={{ name: user }}><a>{user}</a></Link>
-          {" "}
-          {time_ago}
-          {" "}
-          |
-          {" "}
-          {comments_count} comments
-        </span> <ul>{commentThread(data.comments)}</ul>
+        <ItemMeta {...data} />
+        <ul>{commentThread(data.comments)}</ul>
       </div>
     </div>
   );

pages/index.js

@@ -1,44 +1,17 @@
 import fetch from "isomorphic-fetch";
 import { Link } from "../routes";
 import Navigation from "../components/navigation";
+import ItemMeta from "../components/item-meta";
 
 const Listing = ({ data }) => (
   <div>
     <Navigation />
     <ul>
-      {data.map(({
-        comments_count,
-        id,
-        points,
-        time_ago,
-        title,
-        url,
-        user
-      }, index) => (
-        <li key={id}>
+      {data.map((item, index) => (
+        <li key={item.id}>
           {index + 1}
           {" "}
-          <a href={url}>{title}</a>
-          {" "}
-          <span>
-            {user &&
-              <span>
-                {points}
-                {" "}
-                points by
-                {" "}
-                <Link route="user" params={{ name: user }}><a>{user}</a></Link>
-              </span>}
-            {" "}
-            {time_ago}
-            {user &&
-              <span>
-                {" "}|{" "}
-                <Link prefetch route="comments" params={{ id }}>
-                  <a>{comments_count} comments</a>
-                </Link>
-              </span>}
-          </span>
+          <ItemMeta {...item} />
         </li>
       ))}
     </ul>