initial application logic

Author: chrisdwheatley

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.next

components/navigation.js

@@ -0,0 +1,20 @@
+import { Link } from "../routes";
+
+export default () => (
+  <div>
+    <Link prefetch route="home"><a>HN</a></Link> |{" "}
+    <Link prefetch route="index" params={{ type: "new" }}><a>New</a></Link>
+    {" "}
+    |
+    {" "}
+    <Link prefetch route="index" params={{ type: "show" }}><a>Show</a></Link>
+    {" "}
+    |
+    {" "}
+    <Link prefetch route="index" params={{ type: "ask" }}><a>Ask</a></Link>
+    {" "}
+    |
+    {" "}
+    <Link prefetch route="index" params={{ type: "jobs" }}><a>Jobs</a></Link>
+  </div>
+);

index.js

@@ -0,0 +1,10 @@
+const { createServer } = require("http");
+const next = require("next");
+const routes = require("./routes");
+
+const app = next({ dev: process.env.NODE_ENV !== "production" });
+const handler = routes.getRequestHandler(app);
+
+app.prepare().then(() => {
+  createServer(handler).listen(3000);
+});

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "nextjs-hn",
+  "version": "0.1.0",
+  "description": "Hacker News Progressive Web App using Next.js",
+  "author": "Chris Draycott-Wheatley",
+  "license": "MIT",
+  "scripts": {
+    "dev": "node index.js",
+    "build": "NODE_ENV=production next build",
+    "start": "NODE_ENV=production node index.js"
+  },
+  "dependencies": {
+    "isomorphic-fetch": "^2.2.1",
+    "next": "^2.0.1",
+    "next-routes": "^1.0.24",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
+  },
+  "devDependencies": {
+    "prettier": "^0.22.0"
+  }
+}

pages/comments.js

@@ -0,0 +1,65 @@
+import fetch from "isomorphic-fetch";
+import Link from "next/link";
+import Navigation from "../components/navigation";
+
+function commentThread(comments) {
+  const thread = [];
+
+  comments.map(item => {
+    thread.push(
+      <div key={item.id} style={{ marginLeft: `${item.level}0px` }}>
+        <li>
+          {item.user} {item.time_ago}
+          <span dangerouslySetInnerHTML={{ __html: item.content }} />
+        </li>
+      </div>
+    );
+
+    if (item.comments && item.comments.length) {
+      thread.push(commentThread(item.comments));
+    }
+  });
+
+  return thread;
+}
+
+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>
+      </div>
+    </div>
+  );
+};
+
+Comments.getInitialProps = async ({ query: { id } }) => {
+  const res = await fetch(`https://node-hnapi.herokuapp.com/item/${id}`);
+  const json = await res.json();
+  return { data: json };
+};
+
+export default Comments;

pages/index.js

@@ -0,0 +1,62 @@
+import fetch from "isomorphic-fetch";
+import { Link } from "../routes";
+import Navigation from "../components/navigation";
+
+const Listing = ({ data }) => (
+  <div>
+    <Navigation />
+    <ul>
+      {data.map(({
+        comments_count,
+        id,
+        points,
+        time_ago,
+        title,
+        url,
+        user
+      }, index) => (
+        <li key={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>
+        </li>
+      ))}
+    </ul>
+  </div>
+);
+
+Listing.getInitialProps = async ({ query: { type } }) => {
+  const allowed = ["news", "new", "show", "ask", "jobs"];
+  if (!type || !allowed.includes(type)) {
+    type = "news";
+  }
+  if (type === "new") {
+    type = "newest";
+  }
+
+  const res = await fetch(`https://node-hnapi.herokuapp.com/${type}`);
+  const json = await res.json();
+  return { data: json };
+};
+
+export default Listing;

pages/user.js

@@ -0,0 +1,24 @@
+import fetch from "isomorphic-fetch";
+import Link from "next/link";
+import Navigation from "../components/navigation";
+
+const User = ({ data: { about, created, id, karma } }) => (
+  <div>
+    <Navigation />
+    <div>user: {id}</div>
+    <div>created: {created}</div>
+    <div>karma: {karma}</div>
+    <div>about: <span dangerouslySetInnerHTML={{ __html: about }} /></div>
+  </div>
+);
+
+User.getInitialProps = async ({ query: { name } }) => {
+  const res = await fetch(`https://node-hnapi.herokuapp.com/user/${name}`);
+  const json = await res.json();
+  if (json.error) {
+    throw new Error(json.error);
+  }
+  return { data: json };
+};
+
+export default User;

routes.js

@@ -0,0 +1,8 @@
+const nextRoutes = require("next-routes");
+
+const routes = (module.exports = nextRoutes());
+
+routes.add("home", "/", "index");
+routes.add("index", "/:type");
+routes.add("comments", "/item/:id");
+routes.add("user", "/user/:name");