From 05bbd68b9f9cb0536dad045548b5052ff4a2e13a Mon Sep 17 00:00:00 2001
From: Sangeeth Sudheer <sangeethmanayil@outlook.com>
Date: Sat, 18 Jan 2020 00:10:29 +0530
Subject: [PATCH 1/3] 09-fetching-data: adds lesson and api lib

---
 app/src/lib/api.js          |  17 ++
 lessons/09-fetching-data.md | 316 ++++++++++++++++++++++++++++++++++++
 2 files changed, 333 insertions(+)
 create mode 100644 app/src/lib/api.js
 create mode 100644 lessons/09-fetching-data.md

diff --git a/app/src/lib/api.js b/app/src/lib/api.js
new file mode 100644
index 0000000..e0ca56b
--- /dev/null
+++ b/app/src/lib/api.js
@@ -0,0 +1,17 @@
+const baseURL = 'https://hacker-news.firebaseio.com/v0';
+
+const fetchItem = id => {
+  return fetch(`${baseURL}/item/${id}.json`).then(res => res.json());
+}
+
+const getTopStories = () => {
+  return fetch(baseURL + '/topstories.json').then(res => res.json());
+};
+
+export const getPaginatedTopStories = async (page = 1, count = 10) => {
+  const allTopStories = await getTopStories();
+
+  const idsToFetch = allTopStories.slice((page - 1) * count, page * count);
+
+  return Promise.all(idsToFetch.map(fetchItem));
+};
diff --git a/lessons/09-fetching-data.md b/lessons/09-fetching-data.md
new file mode 100644
index 0000000..fe8a979
--- /dev/null
+++ b/lessons/09-fetching-data.md
@@ -0,0 +1,316 @@
+# Lesson 8
+
+In this lesson, we'll connect to the publicly available HackerNews API and load real data onto our news list. We'll also implement the `<Paginator>` component, which will be linked to our router. There's quite a lot of stuff in this lesson so hop in.
+
+## Fetching data
+
+We'll first implement some convenient functions that'll use the Fetch API to get the data we need. We'll create these in `src/lib/api.js`:
+
+```javascript
+const baseURL = 'https://hacker-news.firebaseio.com/v0';
+
+const fetchItem = id => {
+  return fetch(`${baseURL}/item/${id}.json`).then(res => res.json());
+};
+
+const getTopStories = () => {
+  return fetch(baseURL + '/topstories.json').then(res => res.json());
+};
+
+export const getPaginatedTopStories = async (page = 1, count = 10) => {
+  const allTopStories = await getTopStories();
+
+  const idsToFetch = allTopStories.slice((page - 1) * count, page * count);
+
+  return Promise.all(idsToFetch.map(fetchItem));
+};
+```
+
+While you could handcraft these APIs yourself, that's not really necessary. The goal is to show how we can get the data loaded into our components for rendering. The functions implemented above are pretty straightforward, although we could've certainly optimized many things around:
+
+- `getTopStories`: fetches IDs of the top stories. About 500 of them by default.
+- `fetchItem`: given an ID, gets the JSON representation of a news item.
+- `getPaginatedTopStories`: combines above two functions to get us an array of items for a given page number.
+
+## Adding dynamic params to our routes
+
+We'll do a little refactoring of our routes. What we want to do now is:
+
+1. If user visits `/`, redirect to `/top`
+2. If user visits `/top/2`, load data for page 2.
+
+So, we'll let our routes indicate part of our state.
+
+`vue-router` allows us to define dynamic components in our routes:
+
+```javascript
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    redirect: { name: 'top' }
+  },
+  {
+    path: '/top/:page?',
+    name: 'top',
+    component: Home
+  },
+  {
+    path: '/new',
+    name: 'new',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: About
+  }
+];
+```
+
+As you can see above, we can indicate dynamic components of a route with `:param` syntax. We can access this from our components via the `this.$route.params` object. For the `:page` param above, that'd be `this.$route.params.page`.
+
+The other cool thing about this is that `$route.params` is reactive! As we'll see later, we'd be able to re-fetch the data when the param changes as a result of us clicking within our paginator component.
+
+Let's also make a small change in the `components/NavBar.vue` file so that "Top" link gets active state correctly:
+
+```html
+<router-link tag="li" :to="{ name: 'top' }">Top</router-link>
+```
+
+## Passing down the fetched data
+
+Let's go to `views/Home.vue` and make some changes:
+
+```vue
+<template>
+  <div>
+    <Paginator :currentPage="currentPage" :totalPages="totalPages" />
+    <NewsList :items="items" />
+  </div>
+</template>
+
+<script>
+import Paginator from '@/components/Paginator.vue';
+import NewsList from '@/components/NewsList.vue';
+
+export default {
+  name: 'home',
+  components: {
+    NewsList,
+    Paginator
+  },
+
+  data() {
+    return {
+      items: []
+    };
+  },
+
+  watch: {
+    currentPage: {
+      immediate: true,
+      handler() {
+        this.fetchStories();
+      }
+    }
+  },
+
+  methods: {
+    async fetchStories() {}
+  },
+
+  computed: {
+    currentPage() {
+      return +this.$route.params.page || 1;
+    },
+
+    totalPages() {
+      return this.items.length || 0;
+    }
+  }
+};
+</script>
+```
+
+Let's go over the changes. `<Paginator>` would need the current page we're at and the total number of pages. We create two computed properties: `currentPage` and `totalPages` that does this. As mentioned before, we can access the current page by `this.$route.params.page`. This will be a string value which we convert to number by using the unary `+` operator. If this param isn't present, we default to 1.
+
+`totalPages` is straightforward. We just return the length of the `items` data property.
+
+We also create a dummy method called `fetchStories` which we'll populate later.
+
+We use a watcher to notify whenever the `currentPage` computed property changes. `immediate: true` runs the `handler` function once at the beginning when the component is mounted, otherwise, it only gets run when the value of reactive property changes later. As you can see, it simply calls the `this.fetchStories` method which will make the API call and sets the `this.items` property. Let's code that up:
+
+```javascript
+import { getPaginatedTopStories } from '@/lib/api';
+
+// ..
+
+async fetchStories() {
+  const items = await getPaginatedTopStories(this.currentPage, 20);
+
+  this.items = items.map(item => ({
+    title: item.title,
+    author: item.by,
+    upvotes: item.score,
+    timestamp: new Date(item.time * 1000).toUTCString(),
+    commentCount: (item.kids || []).length
+  }));
+}
+```
+
+Nothing too complicated. Although, we're mapping over the items we receive into the format we're expecting when we pass it down to `<NewsList>`. Alright, try saving and reload. You should see actual data being fetched and rendered! Alright! 🙌 We're not done yet, we need to implement `<Paginator>`.
+
+## Building `<Paginator>`
+
+Remember, we're determining the current page state via router params. So, when someone clicks the Next/Previous buttons, we basically need to change the route. The reactivity takes care of the rest.
+
+You have two choices here:
+
+1. Use `<router-link>` for the prev/next buttons and simply pass a `params` property with `page: currentPage - 1` and `page: currentPage + 1` respectievely.
+2. Use the `this.$router.push()` function to do it imperatively from within a method. It accepts a route object, just like `<router-link>`. Give it a shot on your own. Take a peek at the below implementation for some inspiration.
+
+```vue
+<template>
+  <div class="paginator">
+    <div class="controls">
+      <span class="prev" @click="prevPage()">&lt; prev</span>
+      <span v-if="!totalPages">...</span>
+      <span v-else class="marker">{{ currentPage }} / {{ totalPages }}</span>
+      <span class="next" @click="nextPage()">next &gt;</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    currentPage: Number,
+    totalPages: Number
+  },
+
+  methods: {
+    prevPage() {
+      this.$router.push({
+        name: 'top',
+        params: {
+          page: this.currentPage - 1 >= 1 ? this.currentPage - 1 : 1
+        }
+      });
+    },
+
+    nextPage() {
+      this.$router.push({
+        name: 'top',
+        params: {
+          page:
+            this.currentPage + 1 <= this.totalPages
+              ? this.currentPage + 1
+              : this.totalPages
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.paginator {
+  background: white;
+  position: sticky;
+  top: 0;
+}
+
+.controls {
+  font-size: 1.2rem;
+  color: #555;
+  text-align: center;
+  padding: 10px 20px;
+  box-shadow: 0 1px 2px #ccc;
+  user-select: none;
+}
+
+.prev,
+.next {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.prev {
+  margin-right: 10px;
+}
+
+.next {
+  margin-left: 10px;
+}
+</style>
+```
+
+Try it out. You should now see that clicking the prev/next buttons would not only change the route, but also fetch data for the page you're viewing. Neato!
+
+## Improvising
+
+Let's add the popular `date-fns` package to format the timestamp value we receive into a more, human-readable string:
+
+```sh
+yarn add date-fns
+```
+
+Open `components/NewsListItem.vue`:
+
+```diff
+<template>
+  <div class="news-item">
+    <div class="upvotes">
+      <span>{{ upvotes }}</span>
+    </div>
+    <div class="info">
+      <h2 class="title">
+        {{ title }}
+      </h2>
+      <div class="meta">
+        <div class="by">{{ author }}</div>
++        <div class="timestamp">{{ ago }}</div>
+        <div class="comments">{{ numComments }} comments</div>
+      </div>
+    </div>
+    <div class="favorite">
+      <button>♥︎</button>
+    </div>
+  </div>
+</template>
+
+<script>
++ import formatDistanceStrict from 'date-fns/formatDistanceStrict';
+
+export default {
+  props: {
+    title: String,
+    author: String,
+    numComments: Number,
+    upvotes: Number,
+    timestamp: Date
+  },
+
++  computed: {
++    ago() {
++      return formatDistanceStrict(this.timestamp, new Date(), {
++        includeSeconds: true,
++        addSuffix: true
++      });
++    }
++  }
+}
+</script>
+```
+
+## What next?
+
+Nice. You have a working HackerNews clone written in Vue.js. You could do so much more:
+
+1. Add a user view, item view with comment threads
+2. Link to the actual post via the `url` from item response
+3. Load data more efficiently: you could use the firebase SDK for realtime updates and cache already seen item responses so that you don't have to re-fetch them.
+4. Make it a PWA!
+
+There's also lot more to learn about Vue.js. Check the excellent Vue.js docs: https://vuejs.org/

From 05eea8a712b083bd39022aee47b5f0e214bdda80 Mon Sep 17 00:00:00 2001
From: Sangeeth Sudheer <sangeethmanayil@outlook.com>
Date: Sun, 19 Jan 2020 10:08:59 +0530
Subject: [PATCH 2/3] Fixes lesson 9 heading

---
 lessons/09-fetching-data.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lessons/09-fetching-data.md b/lessons/09-fetching-data.md
index fe8a979..5dcfe25 100644
--- a/lessons/09-fetching-data.md
+++ b/lessons/09-fetching-data.md
@@ -1,4 +1,4 @@
-# Lesson 8
+# Lesson 9
 
 In this lesson, we'll connect to the publicly available HackerNews API and load real data onto our news list. We'll also implement the `<Paginator>` component, which will be linked to our router. There's quite a lot of stuff in this lesson so hop in.
 

From 235005081a5c1dfba48e08a8c8c7de5b306fe3f8 Mon Sep 17 00:00:00 2001
From: Sangeeth Sudheer <sangeethmanayil@outlook.com>
Date: Sat, 18 Jan 2020 00:10:56 +0530
Subject: [PATCH 3/3] 09-fetching-data: adds app changes

---
 app/package.json                    |   1 +
 app/src/components/NavBar.vue       |   2 +-
 app/src/components/NewsList.vue     |  32 +++--
 app/src/components/NewsListItem.vue |  25 +++-
 app/src/components/Paginator.vue    |  73 ++++++++++
 app/src/router/index.js             |   8 ++
 app/src/views/Home.vue              | 199 +++++++---------------------
 app/yarn.lock                       |   5 +
 8 files changed, 174 insertions(+), 171 deletions(-)

diff --git a/app/package.json b/app/package.json
index 8b6a8d0..664592c 100644
--- a/app/package.json
+++ b/app/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.4",
+    "date-fns": "^2.9.0",
     "vue": "^2.6.11",
     "vue-router": "^3.1.3",
     "vue-simple-spinner": "^1.2.8"
diff --git a/app/src/components/NavBar.vue b/app/src/components/NavBar.vue
index 3240387..c6c17cd 100644
--- a/app/src/components/NavBar.vue
+++ b/app/src/components/NavBar.vue
@@ -5,7 +5,7 @@
     </div>
 
     <ul class="navbar-links">
-      <router-link tag="li" :to="{ name: 'home' }" exact>Top</router-link>
+      <router-link tag="li" :to="{ name: 'top' }">Top</router-link>
       <router-link tag="li" :to="{ name: 'new' }">New</router-link>
       <router-link tag="li" :to="{ name: 'about' }">About</router-link>
     </ul>
diff --git a/app/src/components/NewsList.vue b/app/src/components/NewsList.vue
index 127101c..6b191d5 100644
--- a/app/src/components/NewsList.vue
+++ b/app/src/components/NewsList.vue
@@ -1,16 +1,18 @@
 <template>
-  <div class="news-list">
-    <VueSimpleSpinner v-if="items.length === 0" line-fg-color="#F66605" />
-    <NewsListItem
-      v-else
-      v-for="item of items"
-      :key="item.title"
-      :title="item.title"
-      :numComments="item.commentCount"
-      :author="item.author"
-      :upvotes="item.upvotes"
-      :timestamp="new Date(item.timestamp)"
-    />
+  <div>
+    <VueSimpleSpinner class="spinner" v-if="items.length === 0" line-fg-color="#F66605" />
+    <div class="news-list" v-else>
+      <NewsListItem
+        v-for="item of items"
+        :key="item.title"
+        :title="item.title"
+        :numComments="item.commentCount"
+        :author="item.author"
+        :upvotes="item.upvotes"
+        :timestamp="new Date(item.timestamp)"
+        :url="item.url"
+      />
+    </div>
   </div>
 </template>
 
@@ -32,10 +34,14 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .news-list {
   width: 80%;
   margin: 20px auto 0;
   box-shadow: 0 0.6px 1.5px rgba(0, 0, 0, 0.018), 0 7px 12px rgba(0, 0, 0, 0.08);
 }
+
+.spinner {
+  margin-top: 50px;
+}
 </style>
diff --git a/app/src/components/NewsListItem.vue b/app/src/components/NewsListItem.vue
index 07311be..49ccd58 100644
--- a/app/src/components/NewsListItem.vue
+++ b/app/src/components/NewsListItem.vue
@@ -4,10 +4,12 @@
       <span>{{ upvotes }}</span>
     </div>
     <div class="info">
-      <h2 class="title">{{ title }}</h2>
+      <h2 class="title">
+        <a :href="https://github.com/url">{{ title }}</a>
+      </h2>
       <div class="meta">
         <div class="by">{{ author }}</div>
-        <div class="timestamp">{{ timestamp }}</div>
+        <div class="timestamp">{{ ago }}</div>
         <div class="comments">{{ numComments }} comments</div>
       </div>
     </div>
@@ -18,13 +20,25 @@
 </template>
 
 <script>
+import formatDistanceStrict from 'date-fns/formatDistanceStrict';
+
 export default {
   props: {
     title: String,
     author: String,
     numComments: Number,
     upvotes: Number,
-    timestamp: Date
+    timestamp: Date,
+    url: String
+  },
+
+  computed: {
+    ago() {
+      return formatDistanceStrict(this.timestamp, new Date(), {
+        includeSeconds: true,
+        addSuffix: true
+      });
+    }
   }
 }
 </script>
@@ -58,6 +72,11 @@ export default {
   color: #333;
 }
 
+.title a {
+  text-decoration: none;
+  color: inherit;
+}
+
 .meta {
   color: #888;
   font-size: 0.8em;
diff --git a/app/src/components/Paginator.vue b/app/src/components/Paginator.vue
index e69de29..a0c4e47 100644
--- a/app/src/components/Paginator.vue
+++ b/app/src/components/Paginator.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="paginator">
+    <div class="controls">
+      <span class="prev" @click="prevPage()">&lt; prev</span>
+      <span v-if="!totalPages">...</span>
+      <span v-else class="marker">{{ currentPage }} / {{ totalPages }}</span>
+      <span class="next" @click="nextPage()">next &gt;</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    currentPage: Number,
+    totalPages: Number
+  },
+
+  methods: {
+    prevPage() {
+      this.$router.push({
+        name: 'top',
+        params: {
+          page: this.currentPage - 1 >= 1 ? this.currentPage - 1 : 1
+        }
+      });
+    },
+
+    nextPage() {
+      this.$router.push({
+        name: 'top',
+        params: {
+          page:
+            this.currentPage + 1 <= this.totalPages
+              ? this.currentPage + 1
+              : this.totalPages
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.paginator {
+  background: white;
+  position: sticky;
+  top: 0;
+}
+
+.controls {
+  font-size: 1.2rem;
+  color: #555;
+  text-align: center;
+  padding: 10px 20px;
+  box-shadow: 0 1px 2px #ccc;
+  user-select: none;
+}
+
+.prev,
+.next {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.prev {
+  margin-right: 10px;
+}
+
+.next {
+  margin-left: 10px;
+}
+</style>
diff --git a/app/src/router/index.js b/app/src/router/index.js
index 59b0282..7579266 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -10,6 +10,14 @@ const routes = [
   {
     path: '/',
     name: 'home',
+    redirect: { name: 'top' }
+  },
+  {
+    path: '/top/:page?',
+    params: {
+      page: 1
+    },
+    name: 'top',
     component: Home
   },
   {
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 6f32aa6..fee2853 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -1,170 +1,61 @@
 <template>
-  <NewsList v-bind:items="items" />
+  <div>
+    <Paginator :currentPage="currentPage" :totalPages="totalPages" />
+    <NewsList :items="items" />
+  </div>
 </template>
 
 <script>
+import { getPaginatedTopStories } from '@/lib/api';
+
+import Paginator from '@/components/Paginator.vue';
 import NewsList from '@/components/NewsList.vue';
 
 export default {
   name: 'home',
   components: {
-    NewsList
+    NewsList,
+    Paginator
   },
+
   data() {
     return {
-      items: [
-        {
-          title: 'Thank HN: You helped me get a new job',
-          author: 'atum47',
-          upvotes: 941,
-          timestamp: '2019-08-09T05:18:28.802Z',
-          commentCount: 357
-        },
-        {
-          title:
-            'Patch Critical Cryptographic Vulnerability in Microsoft Windows [pdf] (media.defense.gov)',
-          author: 'Moral_',
-          upvotes: 610,
-          timestamp: '2019-07-05T01:40:47.265Z',
-          commentCount: 344
-        },
-        {
-          title:
-            'DevDegree: Work at Shopify and get a free CS degree in parallel (devdegree.ca)',
-          author: 'PandawanFr',
-          upvotes: 190,
-          timestamp: '2019-08-01T19:59:59.050Z',
-          commentCount: 9
-        },
-        {
-          title: 'Hipmunk Says Goodbye (hipmunk.com)',
-          author: 'ienjoythebeach',
-          upvotes: 516,
-          timestamp: '2019-09-20T21:49:18.323Z',
-          commentCount: 112
-        },
-        {
-          title:
-            'Apple can be sued by app developers “on a monopsony theory.” (npr.org)',
-          author: 'moorage',
-          upvotes: 36,
-          timestamp: '2019-09-20T12:20:19.440Z',
-          commentCount: 315
-        },
-        {
-          title: 'Bug #915: Solved (nedbatchelder.com)',
-          author: 'ingve',
-          upvotes: 273,
-          timestamp: '2019-06-05T00:20:03.958Z',
-          commentCount: 134
-        },
-        {
-          title: 'Show HN: A pure reference counting GC in Go (github.com)',
-          author: 'sendilkumarn',
-          upvotes: 17,
-          timestamp: '2019-08-12T06:52:43.795Z',
-          commentCount: 425
-        },
-        {
-          title:
-            'Stripe can make automatic LLCs but a wire transfer from Citi nearly ended me (abe-winter.github.io)',
-          author: 'awinter-py',
-          upvotes: 259,
-          timestamp: '2019-07-10T19:43:22.348Z',
-          commentCount: 143
-        },
-        {
-          title:
-            'Show HN: An open-source distributed graph database written in C++ (github.com)',
-          author: 'jamie-vesoft',
-          upvotes: 66,
-          timestamp: '2019-07-30T19:21:12.041Z',
-          commentCount: 156
-        },
-        {
-          title: 'NOBUS (Nobody but Us) (en.wikipedia.org)',
-          author: 'apsec112',
-          upvotes: 107,
-          timestamp: '2019-07-21T22:47:48.729Z',
-          commentCount: 72
-        },
-        {
-          title: 'Working for someone vs. doing your own thing (tik.dev)',
-          author: 'thakobyan',
-          upvotes: 242,
-          timestamp: '2019-07-18T15:02:51.680Z',
-          commentCount: 62
-        },
-        {
-          title: 'Nobody Cares (2011) (a16z.com)',
-          author: 'prostoalex',
-          upvotes: 70,
-          timestamp: '2019-08-22T12:13:36.419Z',
-          commentCount: 301
-        },
-        {
-          title:
-            'Get Me Off Your Fucking Mailing List [pdf] (scs.stanford.edu)',
-          author: 'af16090',
-          upvotes: 83,
-          timestamp: '2019-06-08T19:49:47.661Z',
-          commentCount: 227
-        },
-        {
-          title:
-            'Reusable vs. Re-editable Code (2018) [pdf] (hal.archives-ouvertes.fr)',
-          author: 'akkartik',
-          upvotes: 16,
-          timestamp: '2019-08-18T04:36:18.428Z',
-          commentCount: 214
-        },
-        {
-          title:
-            'Thinking Fast and Slow, Deep Learning, and AI [video] (lexfridman.com)',
-          author: 'AlanTuring',
-          upvotes: 201,
-          timestamp: '2019-05-31T15:56:19.346Z',
-          commentCount: 114
-        },
-        {
-          title:
-            'How the U.S. military thinks about AI [audio] (changelog.com)',
-          author: 'killjoywashere',
-          upvotes: 32,
-          timestamp: '2019-06-30T23:20:07.371Z',
-          commentCount: 363
-        },
-        {
-          title: 'How to Make a Raspberry Pi VPN Server (electromaker.io)',
-          author: 'FoxMulder23',
-          upvotes: 170,
-          timestamp: '2019-08-02T21:40:47.105Z',
-          commentCount: 253
-        },
-        {
-          title: 'Real-Time Ray-Tracing in WebGPU (maierfelix.github.io)',
-          author: 'Schampu',
-          upvotes: 94,
-          timestamp: '2019-08-18T05:25:49.419Z',
-          commentCount: 367
-        },
-        {
-          title:
-            "Life's clockwork: Scientist shows how molecular engines keep us ticking (phys.org)",
-          author: 'lelf',
-          upvotes: 6,
-          timestamp: '2019-07-23T20:32:41.394Z',
-          commentCount: 229
-        },
-        {
-          title: 'Video Gaming Will Take Over (matthewball.vc)',
-          author: 'thesauri',
-          upvotes: 125,
-          timestamp: '2019-07-30T07:33:48.879Z',
-          commentCount: 247
-        }
-      ]
+      items: []
     };
+  },
+
+  watch: {
+    currentPage: {
+      immediate: true,
+      handler() {
+        this.fetchStories();
+      }
+    }
+  },
+
+  methods: {
+    async fetchStories() {
+      const items = await getPaginatedTopStories(this.currentPage, 20);
+
+      this.items = items.map(item => ({
+        title: item.title,
+        author: item.by,
+        upvotes: item.score,
+        timestamp: new Date(item.time * 1000).toUTCString(),
+        url: item.url,
+        commentCount: (item.kids || []).length
+      }));
+    }
+  },
+
+  computed: {
+    currentPage() {
+      return +this.$route.params.page || 1;
+    },
+
+    totalPages() {
+      return this.items.length || 0;
+    }
   }
 };
 </script>
diff --git a/app/yarn.lock b/app/yarn.lock
index c1b186a..0673e94 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -2640,6 +2640,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.9.0.tgz#d0b175a5c37ed5f17b97e2272bbc1fa5aec677d2"
+  integrity sha512-khbFLu/MlzLjEzy9Gh8oY1hNt/Dvxw3J6Rbc28cVoYWQaC1S3YI4xwkF9ZWcjDLscbZlY9hISMr66RFzZagLsA==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"