Add Vuex, and store data (#287)

package-lock.json

@@ -13760,8 +13760,7 @@
 		"vue": {
 			"version": "2.6.11",
 			"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
-			"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==",
-			"dev": true
+			"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
 		},
 		"vue-agile": {
 			"version": "1.1.3",
@@ -14042,6 +14041,11 @@
 				"smoothscroll-polyfill": "^0.4.3"
 			}
 		},
+		"vuex": {
+			"version": "3.5.1",
+			"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",
+			"integrity": "sha512-w7oJzmHQs0FM9LXodfskhw9wgKBiaB+totOdb8sNzbTB2KDCEEwEs29NzBZFh/lmEK1t5tDmM1vtsO7ubG1DFw=="
+		},
 		"watchpack": {
 			"version": "1.7.2",
 			"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",

package.json

@@ -39,10 +39,12 @@
 		"marked": "^1.1.1",
 		"material-design-icons": "^3.0.1",
 		"sweetalert2": "^9.17.1",
+		"vue": "^2.6.11",
 		"vue-agile": "^1.1.3",
 		"vue-material-design-icons": "^4.8.0",
 		"vue-moment": "^4.1.0",
 		"vue-sweetalert2": "^3.0.6",
-		"vuepress-plugin-sitemap": "^2.3.1"
+		"vuepress-plugin-sitemap": "^2.3.1",
+		"vuex": "^3.5.1"
 	}
 }

src/.vuepress/components/DownloadButtons.vue

@@ -13,10 +13,9 @@
 </template>
 
 <script>
-import axios from "axios";
 import CloudDownloadIcon from "vue-material-design-icons/CloudDownload.vue";
 import BugIcon from "vue-material-design-icons/Bug.vue";
-import { GITHUB_LATEST_API, GITHUB_LATEST_RELEASE, KANADE_LATEST } from "../constants";
+import { GITHUB_LATEST_RELEASE, KANADE_LATEST } from "../constants";
 
 export default {
 	components: {
@@ -32,10 +31,14 @@ export default {
 	},
 
 	async mounted() {
-		const { data } = await axios.get(GITHUB_LATEST_API);
+		try {
+			const { data } = await this.$store.dispatch("getStableReleaseData");
 			const apkAsset = data.assets.find((a) => a.name.includes(".apk"));
 			this.$data.tagName = data.tag_name.slice(1);
 			this.$data.browserDownloadUrl = apkAsset.browser_download_url;
+		} catch (e) {
+			console.error(e);
+		}
 	},
 
 	methods: {

src/.vuepress/components/ReleaseDate.vue

@@ -5,9 +5,6 @@
 </template>
 
 <script>
-import axios from "axios";
-import { GITHUB_LATEST_API } from "../constants";
-
 export default {
 	data() {
 		return {
@@ -17,9 +14,13 @@ export default {
 	},
 
 	async mounted() {
-		const { data } = await axios.get(GITHUB_LATEST_API);
+		try {
+			const { data } = await this.$store.dispatch("getStableReleaseData");
 			this.$data.releasePublishRelative = this.$moment(data.published_at).fromNow();
 			this.$data.releasePublishExact = this.$moment(data.published_at).toString();
+		} catch (e) {
+			console.error(e);
+		}
 	},
 };
 </script>

src/.vuepress/components/VersionTag.vue

@@ -8,9 +8,6 @@
 </template>
 
 <script>
-import axios from "axios";
-import { GITHUB_LATEST_API } from "../constants";
-
 export default {
 	props: {
 		fileName: {
@@ -25,8 +22,12 @@ export default {
 	},
 
 	async mounted() {
-		const { data } = await axios.get(GITHUB_LATEST_API);
+		try {
+			const { data } = await this.$store.dispatch("getStableReleaseData");
 			this.$data.tagName = data.tag_name.slice(1);
+		} catch (e) {
+			console.error(e);
+		}
 	},
 };
 </script>

src/.vuepress/components/WhatsNew.vue

@@ -12,9 +12,7 @@
 </template>
 
 <script>
-import axios from "axios";
 import marked from "marked";
-import { GITHUB_LATEST_API } from "../constants";
 
 export default {
 	data() {
@@ -24,8 +22,12 @@ export default {
 	},
 
 	async mounted() {
-		const { data } = await axios.get(GITHUB_LATEST_API);
+		try {
+			const { data } = await this.$store.dispatch("getStableReleaseData");
 			this.$data.whatsNew = marked(data.body);
+		} catch (e) {
+			console.error(e);
+		}
 	},
 };
 </script>

src/.vuepress/enhanceApp.js

@@ -7,6 +7,8 @@ import { VueAgile } from "vue-agile";
 import VueSweetalert2 from "vue-sweetalert2";
 import VueMoment from "vue-moment";
 
+import store from "./store";
+
 export default ({
 	Vue, // the version of Vue being used in the VuePress app
 	options, // the options for the root Vue instance
@@ -17,4 +19,5 @@ export default ({
 	Vue.component("Agile", VueAgile);
 	Vue.use(VueSweetalert2);
 	Vue.use(VueMoment);
+	Vue.mixin({ store });
 };

src/.vuepress/store/index.js

@@ -0,0 +1,63 @@
+import Vue from "vue";
+import Vuex from "vuex";
+import axios from "axios";
+
+import { GITHUB_LATEST_API } from "../constants";
+
+let call = null;
+
+Vue.use(Vuex);
+export default new Vuex.Store({
+	state: {
+		stable: {
+			updated: null,
+			data: null,
+		},
+	},
+	mutations: {
+		setStableReleaseData(state, stable) {
+			// eslint-disable-next-line no-param-reassign
+			state.stable = stable;
+		},
+	},
+	actions: {
+		getStableReleaseData({ commit }) {
+			return new Promise((resolve, reject) => {
+				const { updated } = this.state.stable;
+				const now = new Date().getTime();
+
+				if (updated != null && now - updated <= 60 * 60 * 24 * 1000) {
+                    return resolve(this.state.stable);
+				}
+
+                // Makes sure only one network call and one mutation happens
+				if (call == null) {
+					call = axios.get(GITHUB_LATEST_API).then(({ data }) => {
+                        const object = {
+                            updated: now,
+                            data,
+                        };
+                        commit("setStableReleaseData", object);
+                        call = null;
+                        return Promise.resolve(this.state.stable)
+                    }).catch((reason) => {
+                        const object = {
+                            updated: null,
+                            data: null,
+                        };
+                        commit("setStableReleaseData", object);
+                        call = null
+                        return Promise.reject(reason)
+                    });;
+				}
+
+                // Waits for network call and mutation to be done
+				return call.then((value) => {
+					return resolve(value);
+				}).catch((reason) => {
+					return reject(reason);
+				});
+			});
+		},
+	},
+});

src/.vuepress/theme/components/Home.vue

@@ -60,10 +60,8 @@
 </template>
 
 <script>
-import axios from "axios";
 import CloudDownloadIcon from "vue-material-design-icons/CloudDownload.vue";
 import BookOpenVariantIcon from "vue-material-design-icons/BookOpenVariant.vue";
-import { GITHUB_LATEST_API } from "../../constants";
 
 export default {
 	name: "Home",
@@ -101,9 +99,13 @@ export default {
 	},
 
 	async mounted() {
-		const { data } = await axios.get(GITHUB_LATEST_API);
+		try {
+			const { data } = await this.$store.dispatch("getStableReleaseData");
 			const apkAsset = data.assets.find((a) => a.name.includes(".apk"));
 			this.$data.browserDownloadUrl = apkAsset.browser_download_url;
+		} catch (e) {
+			console.error(e);
+		}
 	},
 };
 </script>