feat: added login feature which fetches current player's ID and name

src/store/index.js

@@ -1,16 +1,19 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import LZString from 'lz-string'
+import tornApi from '../tornApi'
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
 	state: {
-		apiKey: null
+		apiKey: null, // TORN API key
+		names: {}, // TORN player ID->name dictionary
+		playerId: null, // TORN player ID (which the API key belongs to)
 	},
 	mutations: {
 		init(state) {
-			if(localStorage.getItem('store')) {
+			if (localStorage.getItem('store')) {
 				const lz = localStorage.getItem('store')
 				const json = LZString.decompressFromUTF16(lz)
 				const obj = JSON.parse(json)
@@ -20,19 +23,33 @@ const store = new Vuex.Store({
 		},
 		setApiKey(state, apiKey) {
 			state.apiKey = apiKey
+		},
+		setPlayerId(state, playerId) {
+			state.playerId = playerId
+		},
+		setPlayerName(state, payload) {
+			const { player_id, name } = payload
+			state.names[player_id] = name
 		}
 	},
 	actions: {
+		async login(context, apiKey) {
+			context.commit('setApiKey', apiKey)
+			const response = await tornApi.fetchBasic(context.state.apiKey)
+			const { player_id, name } = response
+			context.commit('setPlayerId', player_id)
+			context.commit('setPlayerName', { player_id, name })
+		},
 	},
-	modules: {
-	}
 })
 
 store.subscribe((mutation, state) => {
+	console.log('[Store] Mutation', mutation)
+	console.log('[Store] Saving new state', state)
 	const json = JSON.stringify(state)
 	const lz = LZString.compressToUTF16(json)
 	localStorage.setItem('store', lz)
-	console.log(`Compressed state from ${json.length} to ${lz.length} characters.`)
+	console.log(`[Store] Compressed state from ${json.length} to ${lz.length} (${Math.round(lz.length / json.length * 100)}%) characters.`)
 })
 
 export default store

src/tornApi.js

@@ -0,0 +1,28 @@
+class TornApi {
+
+	/**
+	 * @param {String} apiKey
+	 * @returns {{}}
+	 */
+	async fetchAttacks(apiKey) {
+		if (!apiKey) return
+		console.log('[TORN API Client] Fetching attacks')
+		const res = await fetch(`https://api.torn.com/user/?selections=attacksfull&key=${apiKey}`)
+		const obj = await res.json()
+		return Object.values(obj.attacks)
+	}
+
+	/**
+	 * @param {String} apiKey
+	 * @param {Number} playerId
+	 * @returns {{ level: Number, name: String, player_id: Number }}
+	 */
+	async fetchBasic(apiKey, playerId) {
+		if (!apiKey) return
+		console.log('[TORN API Client] Fetching basic info', playerId)
+		const res = await fetch(`https://api.torn.com/user/${playerId ? playerId : ''}?selections=basic&key=${apiKey}`)
+		return res.json()
+	}
+}
+
+export default new TornApi

src/views/Home.vue

@@ -4,13 +4,14 @@
 			type="text"
 			v-model="apiKeyInput"
 		>
-		<button @click="setApiKey(apiKeyInput)">Set API key</button>
+		<button @click="login(apiKeyInput)">Set API key</button>
+		<h1>Hi, {{ names[playerId] }} [{{ playerId }}]!</h1>
 	</div>
 </template>
 
 <script>
 //import HelloWorld from '@/components/HelloWorld.vue'
-import { mapMutations } from "vuex";
+import { mapActions, mapState } from "vuex";
 
 export default {
 	name: "Home",
@@ -22,8 +23,11 @@ export default {
 			apiKeyInput: this.$store.state.apiKey,
 		};
 	},
+	computed: {
+		...mapState(["names", "playerId"])
+	},
 	methods: {
-		...mapMutations(["setApiKey"]),
+		...mapActions(["login"])
 	},
 };
 </script>