koine_neo diff

diff --git a/src/client-entry.ts b/src/client-entry.ts
index a2143df..bcac00f 100644
--- a/src/client-entry.ts
+++ b/src/client-entry.ts
@@ -1,12 +1,53 @@
 import { createApp } from "./main";
+import Vue from "vue";
+import {NavigationGuard, Route} from "vue-router";

 const { app, router, store } = createApp();

+Vue.mixin({
+    beforeRouteUpdate: <NavigationGuard> ((to, from, next) => {
+        // @ts-ignore
+        const { asyncData } = this.$options;
+        if (asyncData) {
+            asyncData({
+                // @ts-ignore
+                store: this.$store,
+                route: to
+            }).then(next).catch(next)
+        } else {
+            next()
+        }
+    })
+});
+
+
 // @ts-ignore
 if (window.__INITIAL_STATE__) {
     // @ts-ignore
     store.replaceState(window.__INITIAL_STATE__);
 }

-app.$mount("#app");
-console.log("App mounted.");
\ No newline at end of file
+router.onReady(() => {
+    router.beforeResolve(<NavigationGuard>((to, from, next) => {
+        const matched = router.getMatchedComponents(to);
+        const prevMatched = router.getMatchedComponents(from);
+        let diffed = false;
+        const activated = matched.filter((c: any, i: number) => {
+            return diffed || (diffed = (prevMatched[i] !== c))
+        });
+
+        const asyncDataHooks = activated.map((c: any) => c.asyncData).filter((_: any) => _);
+        if (!asyncDataHooks.length) {
+            return next();
+        }
+
+        Promise.all(asyncDataHooks.map((hook: any) => hook({store, route: to})))
+            .then(() => {
+                next()
+            })
+            .catch(next);
+    }));
+
+    app.$mount("#app");
+    console.log("App mounted.");
+});
\ No newline at end of file
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 6e41c8d..39f564f 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -60,6 +60,8 @@
     import {GET_TOP_3} from "../store";
     import Vue from "vue";
     import Component from "vue-class-component";
+    import {Store} from "vuex";
+    import {Route} from "vue-router";

     @Component({
         // @ts-ignore
@@ -76,16 +78,20 @@
             return this.$store.state.ranks;
         }

-        fetchRanks(): Promise<void> {
-            return this.$store.dispatch(GET_TOP_3);
+        static fetchRanks(store: Store<any>) {
+            return store.dispatch(GET_TOP_3);
         }

-        serverPrefetch(): Promise<void> {
-            return this.fetchRanks();
+        static asyncData({ store, route }: { store: Store<any>, route: Route}) {
+            return Home.fetchRanks(store);
         }

-        mounted(): void {
-            this.fetchRanks();
+        beforeMount() {
+            // @ts-ignore
+            if (this.ranks.length === 0) {
+                console.error("server side ranks is empty");
+                Home.fetchRanks(this.$store);
+            }
         }
     }
 </script>
diff --git a/src/components/Topics.vue b/src/components/Topics.vue
index c74b249..a9a3c7f 100644
--- a/src/components/Topics.vue
+++ b/src/components/Topics.vue
@@ -31,42 +31,47 @@
 <script lang="ts">
     import {GET_TOPICS} from "../store";
     import PinkPlanetButton from "./PinkPlanetButton.vue";
+    import Component from "vue-class-component";
+    import Vue from "vue";
+    import {AsyncParams} from "../AsyncParams";
+    import {Store} from "vuex";

-    export default {
-        name: "Topics",
+    @Component({
+        // @ts-ignore
+        components: {PinkPlanetButton}
+    })
+    export default class Topics extends Vue {
+        name: string = "Topics";

-        components: {PinkPlanetButton},
-
-        data: function () {
+        static data() {
             return {
                 planetDefaultImage: "/assets/planet.png",
                 planetHoverImage: "/assets/planet_full.png"
             }
-        },
+        }

-        computed: {
-            topics(this: any): [Topic] {
-                return this.$store.state.topics;
-            }
-        },
+        get topics(this: any): [Topic] {
+            return this.$store.state.topics;
+        }

-        methods: {
-            fetchTopics(this: any): Promise<void> {
-                return this.$store.dispatch(GET_TOPICS);
-            },
+        convertDate(date: Date): string {
+            const month = date.toLocaleString('it-it', { month: 'long' });
+            return month + " " + date.getFullYear();
+        }

-            convertDate(date: Date): string {
-                const month = date.toLocaleString('it-it', { month: 'long' });
-                return month + " " + date.getFullYear();
-            }
-        },
+        static fetchTopics(store: Store<any>): Promise<void> {
+            return store.dispatch(GET_TOPICS);
+        }

-        serverPrefetch(this: any): Promise<any> {
-            return this.fetchTopics();
-        },
+        static asyncData({ store, route }: AsyncParams) {
+            Topics.fetchTopics(store);
+        }

-        mounted(this: any): void {
-            this.fetchTopics();
+        beforeMount() {
+            // @ts-ignore
+            if (this.topics.length === 0) {
+                Topics.fetchTopics(this.$store);
+            }
         }
     }
 </script>
diff --git a/src/server_entry.ts b/src/server_entry.ts
index 5756121..9f2f02f 100644
--- a/src/server_entry.ts
+++ b/src/server_entry.ts
@@ -5,7 +5,8 @@ export default (context: any) => {
     // we will be returning a Promise so that the server can wait until
     // everything is ready before rendering.
     return new Promise((resolve, reject) => {
-        const { app, router, store } = createApp();
+        const {app, router, store} = createApp();
+        const s = Date.now();

         // set server-side router's location
         router.push(context.url);
@@ -15,14 +16,17 @@ export default (context: any) => {
             const matchedComponents = router.getMatchedComponents();
             // no matched routes, reject with 404
             if (!matchedComponents.length) {
-                return reject({ code: 404, url: context.url });
+                return reject({code: 404, url: context.url});
             }

-            context.rendered = () => {
+            Promise.all(matchedComponents.map(({ asyncData }: any) => asyncData && asyncData({
+                store,
+                route: router.currentRoute
+            }))).then(() => {
+                console.log(`data pre-fetch: ${Date.now() - s}ms`);
                 context.state = store.state;
-            };
-
-            resolve(app);
-        }, reject);
+                resolve(app)
+            }).catch(reject);
+        });
     });
 }
\ No newline at end of file
diff --git a/src/store.ts b/src/store.ts
index 05735dc..c478c5e 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -11,11 +11,9 @@ export const SET_TOPICS = "setTopics";
 export const GET_TOPIC_INFO = "getTopicInfo";
 export const SET_TOPIC_INFO = "setTopicInfo";

-const DEFAULT_RANK: RankedComment = {"id":"","upload_date":new Date(),"audio_format":"","author":{"user_type":"podcaster","id":"","department":"","username":""},"stars":0,"parent_topic":{"id":"","title":"","creation_date": new Date(),"description":null},"parent_podcast_author":{"user_type":"podcaster","id":"","department":"","username":""}};
-
 // FIXME: Something's wrong with Vuex initial state injection.
 const state = {
-    ranks: [DEFAULT_RANK, DEFAULT_RANK, DEFAULT_RANK],
+    ranks: [],
     topics: [],
     topic_infos: {}
 };