Merge pull request #6 from AJRedDevil/indexdb-dynamic-data

Indexdb dynamic data
AjanShrestha · Jan 2, 2020 · bf8ec2e · bf8ec2e
2 parents 8158131 + f5499c2
commit bf8ec2e
Show file tree

Hide file tree

Showing 5 changed files with 408 additions and 40 deletions.
diff --git a/public/index.html b/public/index.html
@@ -114,6 +114,8 @@ <h5 class="text-center mdl-color-text--primary">Share your Moments</h5>
   <script defer src="/src/js/material.min.js"></script>
   <script src="/src/js/promise.js"></script>
   <script src="/src/js/fetch.js"></script>
+  <script src="/src/js/idb.js"></script>
+  <script src="/src/js/utility.js"></script>
   <script src="/src/js/app.js"></script>
   <script src="/src/js/feed.js"></script>
 </body>

diff --git a/public/src/js/feed.js b/public/src/js/feed.js
@@ -57,23 +57,24 @@ function clearCards() {
   }
 }
 
-function createCard() {
+function createCard(data) {
   var cardWrapper = document.createElement('div');
-  cardWrapper.className = 'shared-moment-card mdl-card mdl-shadow--2dp';
+  cardWrapper.className =
+    'shared-moment-card mdl-cardnep-aus.jpg mdl-shadow--2dp';
   var cardTitle = document.createElement('div');
   cardTitle.className = 'mdl-card__title';
-  cardTitle.style.backgroundImage = 'url("/src/images/sf-boat.jpg")';
+  cardTitle.style.backgroundImage = `url(${data.image})`;
   cardTitle.style.backgroundSize = 'cover';
   cardTitle.style.height = '180px';
   cardWrapper.appendChild(cardTitle);
   var cardTitleTextElement = document.createElement('h2');
   cardTitleTextElement.className = 'mdl-card__title-text';
-  cardTitleTextElement.textContent = 'San Francisco Trip';
+  cardTitleTextElement.textContent = data.title;
   cardTitleTextElement.style.color = 'white';
   cardTitle.appendChild(cardTitleTextElement);
   var cardSupportingText = document.createElement('div');
   cardSupportingText.className = 'mdl-card__supporting-text';
-  cardSupportingText.textContent = 'In San Francisco';
+  cardSupportingText.textContent = data.location;
   cardSupportingText.style.textAlign = 'center';
   // var cardSaveButon = document.createElement('button');
   // cardSaveButon.textContent = 'Save';
@@ -84,40 +85,40 @@ function createCard() {
   sharedMomentsArea.appendChild(cardWrapper);
 }
 
-const url = 'https://httpbin.org/post';
+function extractArray(data) {
+  const dataArray = [];
+  for (let key in data) {
+    dataArray.push(data[key]);
+  }
+  return dataArray;
+}
+
+function updateUI(data) {
+  extractArray(data).forEach(datum => {
+    createCard(datum);
+  });
+}
+
+const url = 'https://pwagram-e7d99.firebaseio.com/posts.json';
 let networkDataReceived = false;
 
-fetch(url, {
-  method: 'POST',
-  headers: {
-    'Content-Type': 'application/json',
-    Accept: 'application/JSON',
-  },
-  body: JSON.stringify({message: 'Some message'}),
-})
+fetch(url)
   .then(function(res) {
     return res.json();
   })
   .then(function(data) {
     networkDataReceived = true;
-    console.log(`From web ${data}`);
+    console.log(`From web ${JSON.stringify(data)}`);
     clearCards();
-    createCard();
+    updateUI(data);
   });
 
-if ('caches' in window) {
-  caches
-    .match(url)
-    .then(res => {
-      if (res) {
-        return res.json();
-      }
-    })
-    .then(data => {
-      console.log(`From cache ${data}`);
-      if (!networkDataReceived) {
-        clearCards();
-        createCard();
-      }
-    });
+if ('indexedDB' in window) {
+  readAllData('posts').then(data => {
+    if (!networkDataReceived) {
+      console.log(`From cache ${JSON.stringify(data)}`);
+      clearCards();
+      updateUI(data);
+    }
+  });
 }