From c8672fc4eb0e8c1adce09279281c673682ae85ed Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sun, 4 Jun 2023 14:56:04 +0200
Subject: [PATCH] feat: render cached post to page

---
 README.md                    |  6 +++---
 src/components/Library.astro | 35 ++++++++++++++++++++++++++++-------
 src/components/post.astro    |  4 ++--
 src/pages/index.astro        |  2 +-
 4 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index d004758..86cd9f8 100644
--- a/README.md
+++ b/README.md
@@ -10,9 +10,9 @@ Cozy is your modern-day reading assistant.
 ## Roadmap
 | Feature | Status |
 | --- | --- |
-| Remove distractions| Done |
-| Save to a Reading Library | In-Progress |
-| PWA: Offline access to library | |
+| Remove distractions| ✅ DONE |
+| Save to a Reading Library | ✅ DONE |
+| PWA: Offline access to library | 🛠️ In-progress |
 | AI insights | |
 | Browser Extensions | |
 
diff --git a/src/components/Library.astro b/src/components/Library.astro
index 55761ed..f9aa478 100644
--- a/src/components/Library.astro
+++ b/src/components/Library.astro
@@ -1,20 +1,26 @@
+---
+export interface Props {
+  postDivSelector: string
+}
+
+const {postDivSelector} = Astro.props;
+---
 <div id="library"></div>
 
+<input value={postDivSelector} name="postDivSelector" id="postDivSelector" hidden />
+
 <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');
+  if (!response) {
     await cache.add(url);
   }
 
-  const cachedResponses = await cache.keys();
-  console.log(cachedResponses);
+  const postDivSelector = document.getElementById('postDivSelector') as HTMLInputElement;
+  const postDiv = document.querySelector(postDivSelector?.value);
 
+  const cachedResponses = await cache.keys();
   const library = document.getElementById('library');
   const list = document.createElement('ul');
   cachedResponses.forEach(response => {
@@ -22,6 +28,21 @@
     const link = document.createElement('a');
     link.innerText = url;
     link.href = url;
+    link.onclick = async (e) => {
+      e.preventDefault();
+      const fullResponse = await cache.match(url)
+      fullResponse?.text().then(data => {
+        const html = document.createElement('html');
+        html.innerHTML = data;
+        const body = html.querySelector('body');
+        const newPost = body?.querySelector('#post');
+        console.log(body?.querySelector('#post'));
+        if (postDiv && newPost?.innerHTML) {
+          postDiv.innerHTML = (newPost.innerHTML)
+        }
+      });
+
+    }
     const item = document.createElement('li');
     item.appendChild(link);
     list?.appendChild(item);
diff --git a/src/components/post.astro b/src/components/post.astro
index 2e3dcf6..7e39808 100644
--- a/src/components/post.astro
+++ b/src/components/post.astro
@@ -11,7 +11,7 @@ const datePublished =
 
 {
   article && (
-    <div class="post">
+    <div id="post">
       {article.source && <span class="source">{article.source}</span>}
       {article.title && <h1 class="title">{article.title}</h1>}
       {(article.author || datePublished) && (
@@ -26,7 +26,7 @@ const datePublished =
 }
 
 <style is:inline>
-  div.post {
+  div#post {
     max-width: 600px;
     margin: 1em auto;
     padding: 1em;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c2cf81c..54684ad 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -21,6 +21,6 @@ try {
 ---
 <Layout title={url !== "" ?  article?.title : "Your modern-day reading assistant"}>
   <AddressBar url={url} />
-  <Library />
+  <Library postDivSelector="#post" />
   {url && <Post article={article} />}
 </Layout>