Fetching one random top story from HN and rendering it.

Author: arpitbbhayani

src/apiManager.ts

@@ -2,6 +2,7 @@ import { OfflineDictionary } from './integrations/offlineDic';
 import type {
     DefinitionProvider,
     DictionaryWord,
+    HNItem,
     PartOfSpeech,
     PartOfSpeechProvider,
     Synonym,
@@ -89,6 +90,30 @@ export default class APIManager {
         }
     }
 
+    /**
+     * Sends a request with the passed query to the chosen API and returns the Result
+     *
+     * @param query - The term you want to look up
+     * @returns The API Response of the chosen API as Promise<DictionaryWord>
+     */
+     public async requestTopHN(): Promise<HNItem> {
+        //Get the currently enabled API
+        let itemIds: Array<Number>;
+        try {
+            const url = "https://hacker-news.firebaseio.com/v0/topstories.json";
+            const response = await fetch(url);
+            itemIds = (await response.json()) as Array<Number>
+        } catch (error) {
+            return Promise.reject(error);
+        }
+
+        const itemId = itemIds[Math.floor(Math.random() * itemIds.slice(0, 15).length)]
+        const itemResponse = await fetch(`https://hacker-news.firebaseio.com/v0/item/${itemId}.json?print=pretty`);
+        const hnItem = (await itemResponse.json()) as HNItem
+        
+        return hnItem;
+    }
+
     /**
      * Sends a request with the passed query to the chosen API and returns the resulting Synonyms
      *

src/integrations/types.ts

@@ -22,6 +22,25 @@ export enum PartOfSpeech {
     Adjective,
     Adverb,
 }
+
+
+//   {
+//     "by" : "norvig",
+//     "id" : 2921983,
+//     "kids" : [ 2922097, 2922429, 2924562, 2922709, 2922573, 2922140, 2922141 ],
+//     "parent" : 2921506,
+//     "text" : "Aw shucks, guys ... you make me blush with your compliments.<p>Tell you what, Ill make a deal: I'll keep writing if you keep reading. K?",
+//     "time" : 1314211127,
+//     "type" : "comment"
+//   }
+
+export interface HNItem {
+    by: string;
+    id: Number;
+    title: string;
+    url: string;
+}
+
 export interface DictionaryWord {
     word: string;
     origin?: string;

src/ui/dictionary/dictionaryView.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type APIManager from "src/apiManager";
-  import type { DictionaryWord } from "src/integrations/types";
+  import type { DictionaryWord, HNItem } from "src/integrations/types";
   import type LocalDictionaryBuilder from "src/localDictionaryBuilder";
 
   import PhoneticComponent from "./phoneticComponent.svelte";
@@ -14,13 +14,18 @@
 
   export let query: string = "";
   let promise: Promise<DictionaryWord>;
+  let promiseTopHN: Promise<HNItem>;
 
   function search() {
     if (query.trim()) {
       promise = manager.requestDefinitions(query);
     }
   }
 
+  function fetchTopHN() {
+    promiseTopHN = manager.requestTopHN();
+  }
+
   function languageModal() {
     dispatchEvent(new Event("dictionary-open-language-switcher"));
   }
@@ -29,6 +34,10 @@
     search();
   });
 
+  addEventListener("obsidian-hackernews-fetchTopHN", () => {
+    fetchTopHN();
+  });
+
   function handleKeyDown(e: KeyboardEvent) {
     if (e.key === "Enter") {
       search();
@@ -52,6 +61,25 @@
       ><i class="searchIcon" alt="Search" /></button
     >
   </div>
+  <br />
+  <button class="dictionary-button" on:click={fetchTopHN}
+    >Fetch TopHN</button
+  >
+  {#if promiseTopHN}
+    {#await promiseTopHN}
+      <div class="center" />
+    {:then data}
+      <div class="results">
+        <div class="container">
+          <p>{ data.title }</p>
+          <p>{ data.url }</p>
+        </div>
+      </div>
+    {:catch error}
+      <ErrorComponent {error} />
+    {/await}
+  {/if}
+
   {#if promise && query.trim()}
     {#await promise}
       <div class="center">

src/ui/dictionary/dictionaryView.ts

@@ -47,6 +47,7 @@ export default class DictionaryView extends ItemView {
                 localDictionary: this.plugin.localDictionary,
             }
         });
+        dispatchEvent(new Event("obsidian-hackernews-fetchTopHN"));
         addEventListener('dictionary-open-language-switcher', () => {
             new LanguageChooser(this.app, this.plugin).open();
         });