Added Infinite Scrolling

- Added Infinite Loading - Added Lockdown days - Added Ordinalize & other filters - Tweaked few UIs - Did some wimhoff's refreshments
sarojbelbase · Jun 29, 2020 · 8a8b8fb · 8a8b8fb · vercel · Jun 29, 2020
1 parent c93995a
commit 8a8b8fb
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
 	"name": "covidnepal",
 	"description": "yet another look at covid-19 cases in nepal",
 	"author": "sidbelbase",
-	"version": "1.0.7",
+	"version": "1.0.8",
 	"private": true,
 	"scripts": {
 		"start": "vue-cli-service serve",
@@ -16,6 +16,7 @@
 		"popper.js": "^1.16.1",
 		"register-service-worker": "^1.7.1",
 		"vue": "^2.6.11",
+		"vue-infinite-loading": "^2.4.5",
 		"vue-router": "^3.2.0",
 		"vuex": "^3.4.0"
 	},
@@ -27,5 +28,9 @@
 		"@vue/cli-service": "~4.4.0",
 		"vue-template-compiler": "^2.6.11"
 	},
-	"browserslist": [ "> 1%", "last 2 versions", "not dead" ]
+	"browserslist": [
+		"> 1%",
+		"last 2 versions",
+		"not dead"
+	]
 }
diff --git a/src/components/global.vue b/src/components/global.vue
@@ -85,7 +85,7 @@
           <div class="col-lg-6">
             <div class="col-12">
               <div class="d-sm-flex justify-content-between align-items-center mb-3">
-                <h3 class="covid-text">Today</h3>
+                <h3 class="covid-text">{{ global.updated | dayify }}</h3>
               </div>
             </div>
             <div class="card mb-4 p-3 neu">
@@ -174,7 +174,6 @@
 
 <script>
 import axios from "axios";
-import moment from "moment";
 
 export default {
   name: "index",

diff --git a/src/components/local.vue b/src/components/local.vue
@@ -6,7 +6,14 @@
     <div class="homepage" v-else>
       <div class="container">
         <div class="d-sm-flex justify-content-between align-items-center mb-4">
-          <h3 class="covid-text mb-0 pt-4">Overview</h3>
+          <h3 class="covid-text mb-0 pt-4">
+            <span>Overview</span>
+            <span
+              class="text-muted h5 font-weight-bold ml-1"
+              title="Since Lockdown"
+            >&bull; {{this.lockdownday | ordinalize }} Day</span>
+          </h3>
+
           <span class="covid-text text-uppercase small font-weight-bold">
             <span class="m-1">
               <ion-icon name="refresh" class="small bolder"></ion-icon>
@@ -148,7 +155,7 @@
           <div class="col-lg-6 col-md-6">
             <div class="d-sm-flex justify-content-between align-items-center mb-4">
               <h3 class="covid-text mb-0">
-                <span class="mr-1">Today</span>
+                <span class="mr-1">{{ local.updated_at | dayify }}</span>
               </h3>
             </div>
             <div class="card mb-4 neu p-3">
@@ -206,7 +213,6 @@
 
 <script>
 import axios from "axios";
-import moment from "moment";
 
 export default {
   name: "local",

diff --git a/src/components/news.vue b/src/components/news.vue
@@ -20,11 +20,7 @@
           <span>Updated {{ news[0].updated_at | humanize }}</span>
         </span>
       </div>
-      <div
-        class="col-md-4 col-sm-6 col-xl-3 p-3"
-        v-for="(thenews, index) in news"
-        :key="index"
-      >
+      <div class="col-md-4 col-sm-6 col-xl-3 p-3" v-for="(thenews, index) in news" :key="index">
         <div class="card neu news-card">
           <img :src="thenews.image_url" class="card-img-top news-image" alt="thenews.title" />
           <div class="card-body">
@@ -38,38 +34,80 @@
           </div>
         </div>
       </div>
+      <infinite-loading spinner="waveDots" @infinite="infiniteHandler">
+        <div class="text-info h4 text-center my-3" slot="no-more">You have travelled way too far.</div>
+        <div class="text-warning h4 text-center my-3" slot="no-results">No updates.</div>
+        <div class="text-danger h4 text-center my-3" slot="error">Couldn't get what you wanted :(</div>
+      </infinite-loading>
     </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
-import moment from "moment";
 
 export default {
   name: "news",
   data() {
     return {
       news: [],
-      loading: true
+      limit: 24,
+      start: 0,
+      page: 1,
+      loading: true,
+      url: "https://nepalcorona.info/api/v1/news"
     };
   },
-  beforeCreate() {
-    this.loading = true;
-  },
   created() {
     axios
-      .get("https://nepalcorona.info/api/v1/news")
+      .get(this.url, {
+        params: {
+          page: this.page,
+          start: this.start,
+          limit: this.limit
+        }
+      })
       .then(response => {
-        this.news = response.data.data.sort((a, b) =>
-          a.created_at < b.created_at ? 1 : -1
-        );
-        this.loading = false;
+        if (response.data.data.length > 0) {
+          this.news = response.data.data;
+          this.loading = false;
+        } else {
+          console.log("Didn't found any updates.");
+        }
       })
       .catch(error => {
         console.log(error);
         this.loading = true;
       });
+  },
+  methods: {
+    infiniteHandler: function($state) {
+      this.page += 1;
+      this.start += 24;
+
+      axios
+        .get(this.url, {
+          params: {
+            page: this.page,
+            start: this.start,
+            limit: this.limit
+          }
+        })
+        .then(response => {
+          if (response.data.data.length > 0) {
+            response.data.data.forEach(article => this.news.push(article));
+            this.loading = false;
+            $state.loaded();
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          $state.error();
+        });
+    }
+  },
+  beforeCreate() {
+    this.loading = true;
   }
 };
 </script>

diff --git a/src/components/provincedetail.vue b/src/components/provincedetail.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="main-content" v-else>
       <div class="d-sm-flex justify-content-between align-items-center mb-4">
-        <h3 class="covid-text mb-0 pt-4">{{ province.name }}</h3>
+        <h3 class="covid-text font-weight-bold pt-4">{{ province.name }}</h3>
         <span class="covid-text text-uppercase small font-weight-bold">
           <span class="m-1">
             <ion-icon name="refresh" class="small bolder"></ion-icon>
@@ -83,7 +83,13 @@
       <div class="row">
         <div class="col-12">
           <div class="d-sm-flex justify-content-between align-items-center mb-4">
-            <h4 class="covid-text">Details</h4>
+            <h4 class="covid-text">
+              <span class="mr-1 font-weight-bold">Details</span>
+              <span
+                class="text-muted small font-weight-bold"
+                title="Since Lockdown"
+              >&bull; {{this.lockdownday | ordinalize }} Day</span>
+            </h4>
           </div>
         </div>
       </div>
@@ -199,7 +205,7 @@
 <script>
 import districts from "@/components/districts";
 import axios from "axios";
-import moment from "moment";
+
 export default {
   name: "provincedetail",
   components: {

diff --git a/src/main.js b/src/main.js
@@ -1,12 +1,14 @@
 import Vue from "vue";
+import store from './store'
 import app from "./app.vue";
 import router from "./router";
-import store from './store'
+import moment from "moment";
+import InfiniteLoading from 'vue-infinite-loading';
 import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap/dist/js/bootstrap.js";
 import './reg-service-worker'
-import moment from "moment";
 
+Vue.use(InfiniteLoading, {});
 Vue.config.productionTip = false;
 Vue.config.ignoredElements = ['ion-icon'];
 
@@ -22,6 +24,26 @@ Vue.filter("humanize", givendate => {
   return moment(givendate).fromNow()
 });
 
+Vue.filter("ordinalize", givennumber => {
+  const suffix = ["th", "st", "nd", "rd"]
+  let thenumber = givennumber % 100;
+  return givennumber + (suffix[(thenumber - 20) % 10] || suffix[thenumber] || suffix[0]);
+});
+
+
+Vue.filter("dayify", givendate => {
+  const date = moment(givendate)
+  return (moment().diff(date, 'days') >= 2) ? date.fromNow() : date.calendar().split(' ')[0]
+});
+
+Vue.mixin({
+  data: () => {
+    return {
+      lockdownday: moment().diff('2020-03-24T00:00:00.000Z', 'days')
+    }
+  }
+})
+
 new Vue({
   router,
   store,

diff --git a/yarn.lock b/yarn.lock
@@ -7499,6 +7499,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-infinite-loading@^2.4.5:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/vue-infinite-loading/-/vue-infinite-loading-2.4.5.tgz#cc20fd40af7f20188006443c99b60470cf1de1b3"
+  integrity sha512-xhq95Mxun060bRnsOoLE2Be6BR7jYwuC89kDe18+GmCLVrRA/dU0jrGb12Xu6NjmKs+iTW0AA6saSEmEW4cR7g==
+
 vue-loader@^15.9.2:
   version "15.9.3"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.3.tgz#0de35d9e555d3ed53969516cac5ce25531299dda"