fetching top story periodically.

 - clearing interval when view is destroyed
 - debouncing the API calls

Author: arpitbbhayani

src/apiManager.ts

@@ -107,10 +107,10 @@ export default class APIManager {
             return Promise.reject(error);
         }
 
-        const itemId = itemIds[Math.floor(Math.random() * itemIds.slice(0, 15).length)]
+        const itemId = itemIds[Math.floor(Math.random() * itemIds.slice(0, 25).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;
     }
 

src/ui/dictionary/dictionaryView.svelte

@@ -12,16 +12,16 @@
 
   export let query: string = "";
   let promise: Promise<DictionaryWord>;
-  let promiseTopHN: Promise<HNItem>;
+  let dataHN: HNItem;
 
   function search() {
     if (query.trim()) {
       promise = manager.requestDefinitions(query);
     }
   }
 
-  function fetchTopHN() {
-    promiseTopHN = manager.requestTopHN();
+  async function fetchTopHN() {
+    dataHN = await manager.requestTopHN();
   }
 
   function languageModal() {
@@ -44,22 +44,16 @@
 </script>
 
 <div class="main">
-  {#if promiseTopHN}
-    {#await promiseTopHN}
-      <div class="center" />
-    {:then data}
-      <div class="results">
-        <div class="container">
-          <a href="{ data.url }" target="_blank" class="hn-link">{ data.title }</a>
-          <br />
-          <p class="hn-read">
-            <a href="{ data.url }" target="_blank">Read more →</a>
-          </p>
-        </div>
+  {#if dataHN}
+    <div class="results">
+      <div class="container">
+        <a href="{ dataHN.url }" target="_blank" class="hn-link">{ dataHN.title }</a>
+        <br />
+        <p class="hn-read">
+          <a href="{ dataHN.url }" target="_blank">Read more →</a>
+        </p>
       </div>
-    {:catch error}
-      <ErrorComponent {error} />
-    {/await}
+    </div>
   {/if}
 </div>
 

src/ui/dictionary/dictionaryView.ts

@@ -1,6 +1,6 @@
 import type DictionaryPlugin from "src/main";
 
-import { ItemView, WorkspaceLeaf } from "obsidian";
+import { ItemView, WorkspaceLeaf, debounce } from "obsidian";
 import { VIEW_TYPE, VIEW_DISPLAY_TEXT, VIEW_ICON } from "src/_constants";
 import DictionaryComponent from "./dictionaryView.svelte";
 import LanguageChooser from "src/ui/modals/languageChooser";
@@ -9,6 +9,7 @@ export default class DictionaryView extends ItemView {
 
     plugin: DictionaryPlugin;
     private _view: DictionaryComponent;
+    clock: NodeJS.Timeout;
 
     constructor(leaf: WorkspaceLeaf, plugin: DictionaryPlugin) {
         super(leaf);
@@ -35,6 +36,7 @@ export default class DictionaryView extends ItemView {
     }
 
     onClose(): Promise<void> {
+        clearInterval(this.clock)
         this._view.$destroy();
         return super.onClose();
     }
@@ -47,7 +49,9 @@ export default class DictionaryView extends ItemView {
                 localDictionary: this.plugin.localDictionary,
             }
         });
-        dispatchEvent(new Event("obsidian-hackernews-fetchTopHN"));
+        this.clock = setInterval(debounce(() => {
+            dispatchEvent(new Event('obsidian-hackernews-fetchTopHN'))
+        }, 60 * 1000), 1000, true)
         addEventListener('dictionary-open-language-switcher', () => {
             new LanguageChooser(this.app, this.plugin).open();
         });