FindHackerNewsComments/script.js at master · DanielDe/FindHackerNewsComments · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/* global chrome */

const MONTH_NAMES = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

const relativeDateString = date => {
  const NUM_MILLISECONDS_IN_AN_HOUR = 60 * 60 * 1000;
  const NUM_MILLISECONDS_IN_A_DAY = 24 * NUM_MILLISECONDS_IN_AN_HOUR;

  const oneDayAgo = new Date(Date.now() - NUM_MILLISECONDS_IN_A_DAY);
  const oneWeekAgo = new Date(Date.now() - 7 * NUM_MILLISECONDS_IN_A_DAY);

  if (date > oneDayAgo) {
    const numHoursAgo = Math.round(
      (new Date() - date) / NUM_MILLISECONDS_IN_AN_HOUR
    );
    return `${numHoursAgo} hour${numHoursAgo === 1 ? "" : "s"} ago`;
  } else if (date > oneWeekAgo) {
    const numDaysAgo = Math.round(
      (new Date() - date) / NUM_MILLISECONDS_IN_A_DAY
    );
    return `${numDaysAgo} day${numDaysAgo === 1 ? "" : "s"} ago`;
  } else {
    return `${
      MONTH_NAMES[date.getMonth()]
    } ${date.getDate()}, ${date.getFullYear()}`;
  }
};

const createResultElement = hit => {
  const resultDiv = document.createElement("div");
  resultDiv.classList.add("result");

  const url = `https://news.ycombinator.com/item?id=${hit.objectID}`;
  const pointsText = `${hit.points} point${hit.points === 1 ? "" : "s"}`;
  const dateText = relativeDateString(new Date(hit.created_at));
  const commentsText = `${hit.num_comments} comment${
    hit.num_comments === 1 ? "" : "s"
  }`;

  resultDiv.innerHTML = `
    <a href="${url}" target="_blank">
      <div class="result__title">${hit.title}</div>
      <div class="result__metadata-container">
        <div class="result__points">${pointsText}</div>
        <div class="result__metadata-separator">|</div>
        <div class="result__date">${dateText}</div>
        <div class="result__metadata-separator">|</div>
        <div class="result__comments">${commentsText}</div>
      </div>
    </a>
  `;

  return resultDiv;
};

chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
  const container = document.getElementById("results-container");

  if (!tabs[0]) {
    container.textContent = "Couldn't load URL of current tab";
    return;
  }

  fetch(
    `https://hn.algolia.com/api/v1/search?query=${encodeURIComponent(
      tabs[0].url
    )}`
  )
    .then(response => response.json())
    .then(response => {
      console.log("response = ", response.hits);
      container.innerHTML = "";

      const stories = response.hits.filter(hit => hit["_tags"][0] === "story");

      if (stories.length > 0) {
        stories
          .map(createResultElement)
          .forEach(resultsDiv => container.appendChild(resultsDiv));
      } else {
        container.textContent = "No results";
      }
    })
    .catch(() => {
      container.textContent =
        "An error occurred when trying to fetch the HN API.";
    });
});