Refactor state.currentServer to contain the server config instead of just the ID. Abstract API away from actions.

src/App.vue

@@ -29,6 +29,7 @@ import {useStore} from "@/store";
 import {ActionTypes} from "@/store/action-types";
 import {parseUrl} from '@/util';
 import {MutationTypes} from "@/store/mutation-types";
+import {LiveAtlasServerDefinition} from "@/index";
 
 export default defineComponent({
 	name: 'App',
@@ -62,7 +63,7 @@ export default defineComponent({
 						return;
 					}
 
-					const error = `Failed to load server configuration for '${store.state.currentServer}'`;
+					const error = `Failed to load server configuration for '${store.state.currentServer.id}'`;
 					console.error(`${error}:`, e);
 					window.showSplashError(`${error}\n${e}`, false, ++configAttempts.value);
 					setTimeout(() => loadConfiguration(), 1000);
@@ -125,16 +126,20 @@ export default defineComponent({
 
 		watch(title, (title) => document.title = title);
 		watch(currentUrl, (url) => window.history.replaceState({}, '', url));
-		watch(currentServer, (newServer) => {
+		watch(currentServer, (newServer: LiveAtlasServerDefinition) => {
 			window.showSplash();
 			stopUpdates();
 
+			if(!newServer) {
+				return;
+			}
+
 			//Cleanup
 			store.commit(MutationTypes.CLEAR_PLAYERS, undefined);
 			store.commit(MutationTypes.CLEAR_CURRENT_MAP, undefined);
 			store.commit(MutationTypes.CLEAR_PARSED_URL, undefined);
 
-			window.history.replaceState({}, '', newServer);
+			window.history.replaceState({}, '', newServer.id);
 			loadConfiguration();
 		});
 		watch(configurationHash, (newHash, oldHash) => {

src/components/sidebar/ServerListItem.vue

@@ -15,8 +15,8 @@
   -->
 
 <template>
-	<li :class="{'server': true, 'server--selected': server.id === currentServer}">
-		<button type="button" :class="{'active': server.id === currentServer}"
+	<li :class="{'server': true, 'server--selected': server.id === currentServer.id}">
+		<button type="button" :class="{'active': server.id === currentServer.id}"
 			:title="server.label || server.id" @click="setCurrentServer(server.id)">{{ server.label || server.id }}
 		</button>
 	</li>
@@ -38,7 +38,7 @@ export default defineComponent({
 	},
 
 	computed: {
-		currentServer(): string | undefined {
+		currentServer(): LiveAtlasServerDefinition | undefined {
 			return useStore().state.currentServer;
 		}
 	},

src/store/actions.ts

@@ -18,7 +18,6 @@ import {MutationTypes} from "@/store/mutation-types";
 import {ActionContext, ActionTree} from "vuex";
 import {State} from "@/store/state";
 import {ActionTypes} from "@/store/action-types";
-import API from '@/api';
 import {Mutations} from "@/store/mutations";
 import {
 	DynmapAreaUpdate, DynmapCircleUpdate,
@@ -28,6 +27,7 @@ import {
 	DynmapPlayer, DynmapTileUpdate,
 	DynmapUpdateResponse, DynmapWorld
 } from "@/dynmap";
+import {getAPI} from "@/util";
 
 type AugmentedActionContext = {
 	commit<K extends keyof Mutations>(
@@ -81,7 +81,7 @@ export const actions: ActionTree<State, State> & Actions = {
 		//Clear any existing has to avoid triggering a second config load, after this load changes the hash
 		commit(MutationTypes.CLEAR_CONFIGURATION_HASH, undefined);
 
-		const config = await API.getConfiguration();
+		const config = await getAPI().getConfiguration();
 
 		commit(MutationTypes.SET_CONFIGURATION, config.config);
 		commit(MutationTypes.SET_MESSAGES, config.messages);
@@ -150,7 +150,7 @@ export const actions: ActionTree<State, State> & Actions = {
 			return Promise.reject("No current world");
 		}
 
-		const update = await API.getUpdate(state.updateRequestId, state.currentWorld.name, state.updateTimestamp.valueOf())
+		const update =await getAPI().getUpdate(state.updateRequestId, state.currentWorld.name, state.updateTimestamp.valueOf());
 
 		commit(MutationTypes.SET_WORLD_STATE, update.worldState);
 		commit(MutationTypes.SET_UPDATE_TIMESTAMP, new Date(update.timestamp));
@@ -195,7 +195,7 @@ export const actions: ActionTree<State, State> & Actions = {
 			throw new Error("No current world");
 		}
 
-		const markerSets = await API.getMarkerSets(state.currentWorld.name)
+		const markerSets = await getAPI().getMarkerSets(state.currentWorld.name)
 		commit(MutationTypes.SET_MARKER_SETS, markerSets);
 
 		return markerSets;
@@ -262,6 +262,6 @@ export const actions: ActionTree<State, State> & Actions = {
 	},
 
 	async [ActionTypes.SEND_CHAT_MESSAGE]({commit, state}, message: string): Promise<void> {
-		await API.sendChatMessage(message);
+		await getAPI().sendChatMessage(message);
 	},
 }

src/store/getters.ts

@@ -81,6 +81,6 @@ export const getters: GetterTree<State, State> & Getters = {
 			throw RangeError("No current server");
 		}
 
-		return state.servers.get(state.currentServer) as LiveAtlasDynmapServerDefinition;
+		return state.currentServer as LiveAtlasDynmapServerDefinition;
 	},
 }

src/store/mutations.ts

@@ -90,7 +90,7 @@ export const mutations: MutationTree<State> & Mutations = {
 	[MutationTypes.SET_SERVERS](state: State, config: Map<string, LiveAtlasServerDefinition>) {
 		state.servers = config;
 
-		if(state.currentServer && !state.servers.has(state.currentServer)) {
+		if(state.currentServer && !state.servers.has(state.currentServer.id)) {
 			state.currentServer = undefined;
 		}
 	},
@@ -395,7 +395,7 @@ export const mutations: MutationTree<State> & Mutations = {
 			throw new RangeError(`Unknown server ${serverName}`);
 		}
 
-		state.currentServer = serverName;
+		state.currentServer = state.servers.get(serverName);
 	},
 
 	//Sets the currently active map/world

src/store/state.ts

@@ -51,7 +51,7 @@ export type State = {
 	followTarget?: DynmapPlayer;
 	panTarget?: DynmapPlayer;
 
-	currentServer?: string;
+	currentServer?: LiveAtlasServerDefinition;
 	currentWorldState: DynmapWorldState;
 	currentWorld?: DynmapWorld;
 	currentMap?: DynmapWorldMap;

src/util.ts

@@ -14,7 +14,8 @@
  *    limitations under the License.
  */
 
-import {DynmapPlayer} from "@/dynmap";
+import API from '@/api';
+import {DynmapPlayer, DynmapUrlConfig} from "@/dynmap";
 import {useStore} from "@/store";
 import {LiveAtlasDynmapServerDefinition, LiveAtlasServerDefinition} from "@/index";
 import ConfigurationError from "@/errors/ConfigurationError";
@@ -317,3 +318,13 @@ export const validateConfiguration = (): Map<string, LiveAtlasServerDefinition>
 
 	return validateDynmapConfiguration(window.config?.url || null);
 };
+
+export const getAPI = () => {
+	const store = useStore();
+
+	if(!store.state.currentServer) {
+		throw new RangeError("No current server");
+	}
+
+	return API;
+}