Implement solution.

Author: alexanderson1993

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+build

package-lock.json

@@ -0,0 +1,24 @@
+{
+  "name": "hn-typescript",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack-dev-server",
+    "start": "webpack-dev-server",
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "Alex Anderson",
+  "license": "ISC",
+  "devDependencies": {
+    "css-loader": "^4.3.0",
+    "html-webpack-plugin": "^4.5.0",
+    "style-loader": "^1.2.1",
+    "ts-loader": "^8.0.4",
+    "typescript": "^4.0.3",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
+  }
+}

package.json

@@ -0,0 +1,66 @@
+const TOP_POSTS_URL = "https://hacker-news.firebaseio.com/v0/topstories.json";
+const NEW_POSTS_URL = "https://hacker-news.firebaseio.com/v0/newstories.json";
+const USER_URL_BASE = "https://hacker-news.firebaseio.com/v0/user/";
+const STORY_URL_BASE = "https://hacker-news.firebaseio.com/v0/item/";
+
+function getStoryUrl(story: number) {
+  return `${STORY_URL_BASE}${story}.json`;
+}
+function getUserUrl(username: string) {
+  return `${USER_URL_BASE}${username}.json`;
+}
+
+export interface Story {
+  by: string;
+  descendants: number;
+  id: number;
+  kids: number[];
+  score: number;
+  time: number;
+  title: string;
+  text: string;
+  type: "story" | "comment" | "job" | "poll";
+  url: string;
+}
+
+export interface User {
+  about: string;
+  created: number;
+  delay: number;
+  id: string;
+  karma: number;
+  submitted: number[];
+}
+
+let itemCache: { [itemId: number]: Story } = {};
+
+export async function getItem(id: number): Promise<Story> {
+  if (itemCache[id]) return itemCache[id];
+  const item = await (await fetch(getStoryUrl(id))).json();
+  itemCache[id] = item;
+  return item;
+}
+
+export async function getStories(which: "top" | "new") {
+  const url = which === "top" ? TOP_POSTS_URL : NEW_POSTS_URL;
+
+  const postIDs: number[] = await (await fetch(url)).json();
+
+  return Promise.all(postIDs.slice(0, 30).map(getItem));
+}
+
+export async function getComments(storyId: number) {
+  const story = await getItem(storyId);
+
+  const comments = story.kids.slice(0, 30).map((id) => getItem);
+  return Promise.all(comments);
+}
+
+let userCache: { [username: string]: User } = {};
+
+export async function getUser(username: string) {
+  if (userCache[username]) return userCache[username];
+  const user: User = await (await fetch(getUserUrl(username))).json();
+  userCache[username] = user;
+  return user;
+}

src/api.ts

@@ -0,0 +1,67 @@
+import { getStories, getUser, getItem, Story, User } from "./api";
+import { createStory } from "./createStory";
+import { renderUser } from "./renderUser";
+import { renderLoader } from "./renderLoader";
+import { renderComments } from "./renderComments";
+
+// This replaces browser routes
+let contentState: "top" | "new" | "user" | "comments" = "top";
+let username: string;
+let storyId: number;
+
+async function renderPage(mainContent: HTMLElement) {
+  mainContent.innerHTML = "";
+  mainContent.appendChild(renderLoader());
+
+  if (contentState === "top" || contentState === "new") {
+    const stories = await renderStories(contentState);
+    mainContent.innerHTML = "";
+    const postsContainer = document.createElement("ul");
+    mainContent.appendChild(postsContainer);
+    stories.forEach((story) => {
+      if (story) {
+        postsContainer.appendChild(story);
+      }
+    });
+  }
+
+  if (contentState === "user") {
+    mainContent.innerHTML = "";
+    mainContent.appendChild(await renderUser(username));
+  }
+  if (contentState === "comments") {
+    mainContent.innerHTML = "";
+    mainContent.appendChild(await renderComments(storyId));
+  }
+}
+
+async function renderStories(which: "top" | "new") {
+  const posts = await getStories(which);
+  const stories = posts.map(createStory);
+  return stories;
+}
+export function renderContent(mainContent: HTMLElement) {
+  renderPage(mainContent);
+
+  document.addEventListener("topLink", () => {
+    contentState = "top";
+    renderPage(mainContent);
+  });
+  document.addEventListener("newLink", () => {
+    contentState = "new";
+    renderPage(mainContent);
+  });
+
+  document.addEventListener("comments", (event) => {
+    const { story } = (event as CustomEvent<{ story: number }>).detail;
+    contentState = "comments";
+    storyId = story;
+    renderPage(mainContent);
+  });
+  document.addEventListener("user", (event) => {
+    const { user } = (event as CustomEvent<{ user: string }>).detail;
+    contentState = "user";
+    username = user;
+    renderPage(mainContent);
+  });
+}

src/content.ts

@@ -0,0 +1,50 @@
+import { Story } from "./api";
+import { formatDate } from "./utils/formatDate";
+
+export function createStory(story: Story) {
+  if (!story.url || !story.title) return;
+  const storyWrapper = document.createElement("li");
+  storyWrapper.classList.add("post");
+  const title = document.createElement("a");
+  title.classList.add("link");
+  title.href = story.url;
+  title.innerText = story.title;
+  storyWrapper.appendChild(title);
+
+  const tagline = document.createElement("p");
+  tagline.classList.add("meta-info");
+  tagline.appendChild(document.createTextNode("by "));
+
+  const authorLink = document.createElement("a");
+  authorLink.href = "#";
+  authorLink.addEventListener("click", () => {
+    document.dispatchEvent(
+      new CustomEvent<{ user: string }>("user", { detail: { user: story.by } })
+    );
+  });
+  authorLink.innerText = story.by;
+  tagline.appendChild(authorLink);
+
+  tagline.appendChild(
+    document.createTextNode(
+      ` on ${formatDate(new Date(story.time * 1000))} with `
+    )
+  );
+
+  const commentCount = document.createElement("a");
+  commentCount.href = "#";
+  commentCount.innerText = story.descendants?.toString() ?? "0";
+  commentCount.addEventListener("click", () => {
+    document.dispatchEvent(
+      new CustomEvent<{ story: number }>("comments", {
+        detail: { story: story.id },
+      })
+    );
+  });
+  tagline.appendChild(commentCount);
+
+  tagline.appendChild(document.createTextNode(" comments"));
+
+  storyWrapper.appendChild(tagline);
+  return storyWrapper;
+}

src/createStory.ts

@@ -0,0 +1,12 @@
+import { init } from "./init";
+import { renderLayout } from "./layout";
+import { renderContent } from "./content";
+import "./style.css";
+
+const root = init();
+
+const { layout, mainContent } = renderLayout();
+
+root.appendChild(layout);
+
+renderContent(mainContent);

src/index.ts

@@ -0,0 +1,6 @@
+export function init() {
+  const div = document.createElement("div");
+  div.id = "app";
+  document.body.appendChild(div);
+  return div;
+}

src/init.ts

@@ -0,0 +1,74 @@
+let colorMode = "light";
+
+export function renderLayout() {
+  const layout = document.createElement("div");
+  layout.id = "layout";
+  layout.classList.add("container");
+
+  const nav = document.createElement("nav");
+  nav.classList.add("row");
+  nav.classList.add("space-between");
+  layout.appendChild(nav);
+
+  const navList = document.createElement("ul");
+  navList.classList.add("row");
+  navList.classList.add("nav");
+  nav.appendChild(navList);
+
+  const topItem = document.createElement("li");
+  navList.appendChild(topItem);
+  const topLink = document.createElement("a");
+  topLink.innerText = "Top";
+  topLink.classList.add("active");
+  topLink.classList.add("nav-link");
+  topLink.href = "#";
+  topLink.addEventListener("click", () =>
+    document.dispatchEvent(new Event("topLink"))
+  );
+  topItem.appendChild(topLink);
+
+  const newItem = document.createElement("li");
+  navList.appendChild(newItem);
+  const newLink = document.createElement("a");
+  newLink.innerText = "New";
+  newLink.classList.add("nav-link");
+  newLink.href = "#";
+  newLink.addEventListener("click", () =>
+    document.dispatchEvent(new Event("newLink"))
+  );
+  newItem.appendChild(newLink);
+
+  const darkModeToggle = document.createElement("button");
+  darkModeToggle.innerText = "🔦";
+  darkModeToggle.classList.add("btn-clear");
+  darkModeToggle.style.fontSize = "30px";
+
+  darkModeToggle.addEventListener("click", () => {
+    if (colorMode === "light") {
+      colorMode = "dark";
+      document.body.classList.add("dark");
+      darkModeToggle.innerText = "💡";
+    } else {
+      colorMode = "light";
+      document.body.classList.remove("dark");
+      darkModeToggle.innerText = "🔦";
+    }
+  });
+
+  nav.appendChild(darkModeToggle);
+
+  const mainContent = document.createElement("main");
+  layout.appendChild(mainContent);
+
+  // Add event listeners for updating our styles
+  document.addEventListener("topLink", () => {
+    newLink.classList.remove("active");
+    topLink.classList.add("active");
+  });
+  document.addEventListener("newLink", () => {
+    newLink.classList.add("active");
+    topLink.classList.remove("active");
+  });
+
+  return { layout, mainContent };
+}

src/layout.ts

@@ -0,0 +1,56 @@
+import { getItem } from "./api";
+import { createStory } from "./createStory";
+import { formatDate } from "./utils/formatDate";
+
+export async function renderComments(storyId: number) {
+  const story = await getItem(storyId);
+  const commentsContainer = document.createElement("div");
+  commentsContainer.classList.add("comments-container");
+
+  const storyMarkup = createStory(story);
+
+  if (storyMarkup) {
+    commentsContainer.appendChild(storyMarkup);
+  }
+
+  const comments = await Promise.all(
+    story.kids.slice(0, 30).map(renderComment)
+  );
+
+  comments.forEach((comment) => {
+    commentsContainer.appendChild(comment);
+  });
+  return commentsContainer;
+}
+
+async function renderComment(id: number) {
+  const story = await getItem(id);
+  const commentContainer = document.createElement("div");
+  commentContainer.classList.add("comment");
+
+  const commentTagline = document.createElement("p");
+  commentTagline.classList.add("meta-info");
+  commentTagline.appendChild(document.createTextNode("by "));
+
+  const authorLink = document.createElement("a");
+  authorLink.href = "#";
+  authorLink.addEventListener("click", () => {
+    document.dispatchEvent(
+      new CustomEvent<{ user: string }>("user", { detail: { user: story.by } })
+    );
+  });
+  authorLink.innerText = story.by;
+  commentTagline.appendChild(authorLink);
+
+  commentTagline.appendChild(
+    document.createTextNode(` on ${formatDate(new Date(story.time * 1000))}`)
+  );
+  commentContainer.appendChild(commentTagline);
+
+  const comment = document.createElement("div");
+  comment.classList.add("comment-text");
+  comment.innerHTML = story.text;
+  commentContainer.appendChild(comment);
+
+  return commentContainer;
+}