From 42e71df3c65f8cffab4fdcf18f6deb7d7aac417d Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sun, 4 Jun 2023 14:03:28 +0200
Subject: [PATCH] feat: initial use of cache api

---
 src/components/Library.astro | 30 ++++++++++++++++++++++++++++++
 src/pages/index.astro        |  3 +++
 2 files changed, 33 insertions(+)
 create mode 100644 src/components/Library.astro

diff --git a/src/components/Library.astro b/src/components/Library.astro
new file mode 100644
index 0000000..55761ed
--- /dev/null
+++ b/src/components/Library.astro
@@ -0,0 +1,30 @@
+<div id="library"></div>
+
+<script>
+  const cache = await caches.open('cozy-reader');
+  const url = new URL(window.location.href);
+  console.log('client script loaded', url);
+  const response = await cache.match(url)
+  if (response) {
+    console.log('cache hit', response);
+  } else {
+    console.log('cache miss');
+    await cache.add(url);
+  }
+
+  const cachedResponses = await cache.keys();
+  console.log(cachedResponses);
+
+  const library = document.getElementById('library');
+  const list = document.createElement('ul');
+  cachedResponses.forEach(response => {
+    const {url} = response;
+    const link = document.createElement('a');
+    link.innerText = url;
+    link.href = url;
+    const item = document.createElement('li');
+    item.appendChild(link);
+    list?.appendChild(item);
+  })
+  library?.appendChild(list);
+</script>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 59577ea..c2cf81c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,6 +3,7 @@ import { extract } from "@extractus/article-extractor";
 import AddressBar from "../components/AddressBar.astro";
 import Post from "../components/Post.astro";
 import Layout from "../layouts/Layout.astro";
+import Library from "../components/Library.astro";
 
 const params = Astro.url.searchParams;
 const url = params.get('url') || '';
@@ -16,8 +17,10 @@ try {
     content: "<p>The article extractor did not get any result.</p>",
   };
 }
+
 ---
 <Layout title={url !== "" ?  article?.title : "Your modern-day reading assistant"}>
   <AddressBar url={url} />
+  <Library />
   {url && <Post article={article} />}
 </Layout>