From 56470790de68f68cff7d80d99e99e226c79f13d4 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Wed, 8 Sep 2021 15:20:04 +0100
Subject: [PATCH] Convert more components to composition api

---
 src/components/SvgIcon.vue                    | 60 +++++++-------
 src/components/map/layer/MarkerSetLayer.vue   | 79 ++++++++-----------
 src/components/map/layer/PlayersLayer.vue     | 40 +++++-----
 src/components/sidebar/CollapsibleSection.vue | 21 +++--
 src/components/sidebar/ServerList.vue         | 15 ++--
 src/components/sidebar/ServerListItem.vue     | 22 +++---
 src/components/sidebar/WorldList.vue          | 30 +++----
 src/components/sidebar/WorldListItem.vue      | 23 +++---
 src/components/util/RadioList.vue             | 11 +--
 9 files changed, 144 insertions(+), 157 deletions(-)

diff --git a/src/components/SvgIcon.vue b/src/components/SvgIcon.vue
index a663a01..55c123f 100644
--- a/src/components/SvgIcon.vue
+++ b/src/components/SvgIcon.vue
@@ -15,45 +15,47 @@
   -->
 
 <template>
-  <svg :class="className" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-    <title v-if="title">{{ title }}</title>
-    <use :xlink:href="iconPath"/>
-  </svg>
+	<svg :class="className" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+		<title v-if="title">{{ title }}</title>
+		<use :xlink:href="iconPath"/>
+	</svg>
 </template>
 
 <script>
+import {computed} from "vue";
+
 export default {
-  name: 'svg-icon',
+	name: 'svg-icon',
 
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
+	props: {
+		name: {
+			type: String,
+			required: true
+		},
 
-    title: {
-      type: String,
-      default: null
-    }
-  },
+		title: {
+			type: String,
+			default: null
+		}
+	},
 
-  computed: {
-    iconPath() {
-      return `#icon--${this.name}`;
-    },
+	setup(props) {
+		const iconPath = computed(() => `#icon--${props.name}`),
+			className = computed(() => `svg-icon svg-icon--${props.name}`);
 
-    className() {
-      return 'svg-icon svg-icon--' + this.name;
-    }
-  }
+		return {
+			iconPath,
+			className
+		}
+	}
 };
 </script>
 
 <style>
-  .svg-icon {
-    pointer-events: none;
-	fill: currentColor;
-	height: 24px;
-	width: 24px;
-  }
+	.svg-icon {
+		pointer-events: none;
+		fill: currentColor;
+		height: 24px;
+		width: 24px;
+	}
 </style>
diff --git a/src/components/map/layer/MarkerSetLayer.vue b/src/components/map/layer/MarkerSetLayer.vue
index 66caf37..cf99e67 100644
--- a/src/components/map/layer/MarkerSetLayer.vue
+++ b/src/components/map/layer/MarkerSetLayer.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, computed} from "@vue/runtime-core";
+import {defineComponent, computed, onMounted, onUnmounted} from "@vue/runtime-core";
 import {useStore} from "@/store";
 import Areas from "@/components/map/vector/Areas.vue";
 import Circles from "@/components/map/vector/Circles.vue";
@@ -31,6 +31,7 @@ import Markers from "@/components/map/vector/Markers.vue";
 import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap";
 import LiveAtlasLayerGroup from "@/leaflet/layer/LiveAtlasLayerGroup";
 import {LiveAtlasMarkerSet} from "@/index";
+import {watch} from "vue";
 
 export default defineComponent({
 	components: {
@@ -63,57 +64,45 @@ export default defineComponent({
 				priority: props.markerSet.priority,
 			});
 
+		watch(props.markerSet, newValue => {
+			if(newValue && layerGroup) {
+				layerGroup.update({
+					id: props.markerSet.id,
+					minZoom: props.markerSet.minZoom,
+					maxZoom: props.markerSet.maxZoom,
+					showLabels: props.markerSet.showLabels || store.state.components.markers.showLabels,
+					priority: props.markerSet.priority,
+				});
+
+				if(newValue.hidden) {
+					props.leaflet.getLayerManager()
+						.addHiddenLayer(layerGroup, newValue.label, props.markerSet.priority);
+				} else {
+					props.leaflet.getLayerManager()
+						.addLayer(layerGroup, true, newValue.label, props.markerSet.priority);
+				}
+			}
+		}, {deep: true});
+
+		onMounted(() => {
+			if(props.markerSet.hidden) {
+				props.leaflet.getLayerManager()
+					.addHiddenLayer(layerGroup, props.markerSet.label, props.markerSet.priority);
+			} else {
+				props.leaflet.getLayerManager()
+					.addLayer(layerGroup, true, props.markerSet.label, props.markerSet.priority);
+			}
+		});
+
+		onUnmounted(() => props.leaflet.getLayerManager().removeLayer(layerGroup));
+
 		return {
 			markerSettings,
 			layerGroup,
 		}
 	},
-
-	watch: {
-		markerSet: {
-			handler(newValue) {
-				if(newValue && this.layerGroup) {
-					this.layerGroup.update({
-						id: this.markerSet.id,
-						minZoom: this.markerSet.minZoom,
-						maxZoom: this.markerSet.maxZoom,
-						showLabels: this.markerSet.showLabels || useStore().state.components.markers.showLabels,
-						priority: this.markerSet.priority,
-					});
-
-					if(newValue.hidden) {
-						this.leaflet.getLayerManager()
-							.addHiddenLayer(this.layerGroup, newValue.label, this.markerSet.priority);
-					} else {
-						this.leaflet.getLayerManager()
-							.addLayer(this.layerGroup, true, newValue.label, this.markerSet.priority);
-					}
-				}
-			},
-			deep: true,
-		}
-	},
-
-	mounted() {
-		if(this.markerSet.hidden) {
-			this.leaflet.getLayerManager()
-				.addHiddenLayer(this.layerGroup, this.markerSet.label, this.markerSet.priority);
-		} else {
-			this.leaflet.getLayerManager()
-				.addLayer(this.layerGroup, true, this.markerSet.label, this.markerSet.priority);
-		}
-	},
-
-	unmounted() {
-		this.leaflet.getLayerManager().removeLayer(this.layerGroup);
-	},
-
 	render() {
 		return null;
 	}
 })
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/map/layer/PlayersLayer.vue b/src/components/map/layer/PlayersLayer.vue
index adeb6fd..de83349 100644
--- a/src/components/map/layer/PlayersLayer.vue
+++ b/src/components/map/layer/PlayersLayer.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import PlayerMarker from "@/components/map/marker/PlayerMarker.vue";
-import {defineComponent, computed, watch} from "@vue/runtime-core";
+import {defineComponent, computed, watch, onMounted, onUnmounted} from "@vue/runtime-core";
 import {useStore} from "@/store";
 import {LayerGroup} from 'leaflet';
 import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap";
@@ -50,6 +50,23 @@ export default defineComponent({
 
 		watch(playerCount, (newValue) => playerPane.classList.toggle('no-animations', newValue > 150));
 
+		onMounted(() => {
+			if(!componentSettings.value!.hideByDefault) {
+				props.leaflet.getLayerManager().addLayer(
+					layerGroup,
+					true,
+					store.state.components.playerMarkers!.layerName,
+					componentSettings.value!.layerPriority);
+			} else {
+				props.leaflet.getLayerManager().addHiddenLayer(
+					layerGroup,
+					store.state.components.playerMarkers!.layerName,
+					componentSettings.value!.layerPriority);
+			}
+		});
+
+		onUnmounted(() => props.leaflet.getLayerManager().removeLayer(layerGroup));
+
 		if(playersAboveMarkers.value) {
 			playerPane.style.zIndex = '600';
 		}
@@ -61,27 +78,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		const store = useStore();
-
-		if(!this.componentSettings!.hideByDefault) {
-			this.leaflet.getLayerManager().addLayer(
-				this.layerGroup,
-				true,
-				store.state.components.playerMarkers!.layerName,
-				this.componentSettings!.layerPriority);
-		} else {
-			this.leaflet.getLayerManager().addHiddenLayer(
-				this.layerGroup,
-				store.state.components.playerMarkers!.layerName,
-				this.componentSettings!.layerPriority);
-		}
-	},
-
-	unmounted() {
-		this.leaflet.getLayerManager().removeLayer(this.layerGroup);
-	},
-
 	render() {
 		return null;
 	}
diff --git a/src/components/sidebar/CollapsibleSection.vue b/src/components/sidebar/CollapsibleSection.vue
index 6c52e42..0c781b5 100644
--- a/src/components/sidebar/CollapsibleSection.vue
+++ b/src/components/sidebar/CollapsibleSection.vue
@@ -39,6 +39,7 @@
 	import SvgIcon from "@/components/SvgIcon.vue";
 	import '@/assets/icons/arrow.svg';
 	import {MutationTypes} from "@/store/mutation-types";
+	import {computed} from "vue";
 
 	export default defineComponent({
 		name: 'CollapsibleSection',
@@ -50,19 +51,17 @@
 			}
 		},
 
-		computed: {
-			title(): string {
-				return useStore().state.messages.toggleTitle;
-			},
+		setup(props) {
+			const store = useStore(),
+				title = computed(() => store.state.messages.toggleTitle),
+				collapsed = computed(() => store.state.ui.sidebar.collapsedSections.has(props.name));
 
-			collapsed(): boolean {
-				return useStore().state.ui.sidebar.collapsedSections.has(this.name);
-			},
-		},
+			const toggle = () => store.commit(MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE, props.name);
 
-		methods: {
-			toggle() {
-				useStore().commit(MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE, this.name);
+			return {
+				title,
+				collapsed,
+				toggle
 			}
 		}
 	});
diff --git a/src/components/sidebar/ServerList.vue b/src/components/sidebar/ServerList.vue
index 9a15956..542a9e5 100644
--- a/src/components/sidebar/ServerList.vue
+++ b/src/components/sidebar/ServerList.vue
@@ -27,7 +27,7 @@
 
 <script lang="ts">
 import ServerListItem from './ServerListItem.vue';
-import {defineComponent} from 'vue';
+import {computed, defineComponent} from 'vue';
 import {useStore} from "@/store";
 import CollapsibleSection from "@/components/sidebar/CollapsibleSection.vue";
 import RadioList from "@/components/util/RadioList.vue";
@@ -40,13 +40,14 @@ export default defineComponent({
 		ServerListItem
 	},
 
-	computed: {
-		heading() {
-			return useStore().state.messages.serversHeading;
-		},
+	setup() {
+		const store = useStore(),
+			heading = computed(() => store.state.messages.serversHeading),
+			servers = computed(() => store.state.servers);
 
-		servers() {
-			return useStore().state.servers;
+		return {
+			heading,
+			servers
 		}
 	}
 });
diff --git a/src/components/sidebar/ServerListItem.vue b/src/components/sidebar/ServerListItem.vue
index 61cb6a5..db454e4 100644
--- a/src/components/sidebar/ServerListItem.vue
+++ b/src/components/sidebar/ServerListItem.vue
@@ -21,7 +21,7 @@
 
 <script lang="ts">
 import {useStore} from "@/store";
-import {defineComponent} from 'vue';
+import {computed, defineComponent} from 'vue';
 import {MutationTypes} from "@/store/mutation-types";
 import {LiveAtlasServerDefinition} from "@/index";
 
@@ -34,16 +34,16 @@ export default defineComponent({
 		}
 	},
 
-	computed: {
-		currentServer: {
-			get() {
-				const store = useStore();
-				return store.state.currentServer ? store.state.currentServer.id : undefined;
-			},
-			set(value: string) {
-				useStore().commit(MutationTypes.SET_CURRENT_SERVER, value);
-			}
+	setup() {
+		const store = useStore(),
+			currentServer = computed({
+				get: () => store.state.currentServer ? store.state.currentServer.id : undefined,
+				set: (value) => value && store.commit(MutationTypes.SET_CURRENT_SERVER, value)
+			})
+
+		return {
+			currentServer,
 		}
-	},
+	}
 });
 </script>
diff --git a/src/components/sidebar/WorldList.vue b/src/components/sidebar/WorldList.vue
index 09dfac6..75fb5ad 100644
--- a/src/components/sidebar/WorldList.vue
+++ b/src/components/sidebar/WorldList.vue
@@ -21,14 +21,14 @@
 			<RadioList v-if="worlds.size" class="section__content" aria-labelledby="maps-heading">
 				<WorldListItem :world="world" v-for="[name, world] in worlds" :key="`${prefix}_${currentServer}_${name}`"></WorldListItem>
 			</RadioList>
-			<div v-else class="section__content section__skeleton">{{ skeletonWorlds }}</div>
+			<div v-else class="section__content section__skeleton">{{ skeleton }}</div>
 		</template>
 	</CollapsibleSection>
 </template>
 
 <script lang="ts">
 import WorldListItem from './WorldListItem.vue';
-import {defineComponent} from 'vue';
+import {computed, defineComponent} from 'vue';
 import {useStore} from "@/store";
 import CollapsibleSection from "@/components/sidebar/CollapsibleSection.vue";
 import RadioList from "@/components/util/RadioList.vue";
@@ -48,22 +48,18 @@ export default defineComponent({
 		}
 	},
 
-	computed: {
-		heading() {
-			return useStore().state.messages.worldsHeading;
-		},
+	setup() {
+		const store = useStore(),
+			heading = computed(() => store.state.messages.worldsHeading),
+			skeleton = computed(() => store.state.messages.worldsSkeleton),
+			worlds = computed(() => store.state.worlds),
+			currentServer = computed(() => store.state.currentServer ? store.state.currentServer.id : undefined);
 
-		skeletonWorlds() {
-			return useStore().state.messages.worldsSkeleton;
-		},
-
-		worlds() {
-			return useStore().state.worlds;
-		},
-
-		currentServer() {
-			const store = useStore();
-			return store.state.currentServer ? store.state.currentServer.id : undefined;
+		return {
+			heading,
+			skeleton,
+			worlds,
+			currentServer
 		}
 	}
 });
diff --git a/src/components/sidebar/WorldListItem.vue b/src/components/sidebar/WorldListItem.vue
index f4eccc3..8591190 100644
--- a/src/components/sidebar/WorldListItem.vue
+++ b/src/components/sidebar/WorldListItem.vue
@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import {useStore} from "@/store";
-import {defineComponent} from 'vue';
+import {computed, defineComponent} from 'vue';
 import {MutationTypes} from "@/store/mutation-types";
 import SvgIcon from "@/components/SvgIcon.vue";
 import "@/assets/icons/block_world_surface.svg";
@@ -62,15 +62,18 @@ export default defineComponent({
 		}
 	},
 
-	computed: {
-		currentMap: {
-			get() {
-				const store = useStore();
-				return store.state.currentMap ? [store.state.currentWorld!.name, store.state.currentMap.name] : undefined;
-			},
-			set(value: string[]) {
-				useStore().commit(MutationTypes.SET_CURRENT_MAP, {worldName: value[0], mapName: value[1]});
-			}
+	setup() {
+		const store = useStore(),
+			currentMap = computed({
+				get: () => store.state.currentMap ? [store.state.currentWorld!.name, store.state.currentMap.name] : undefined,
+				set: (value) => value && store.commit(MutationTypes.SET_CURRENT_MAP, {
+					worldName: value[0],
+					mapName: value[1]
+				})
+			});
+
+		return {
+			currentMap
 		}
 	}
 });
diff --git a/src/components/util/RadioList.vue b/src/components/util/RadioList.vue
index d2f9102..51bbd6f 100644
--- a/src/components/util/RadioList.vue
+++ b/src/components/util/RadioList.vue
@@ -27,13 +27,14 @@ export default defineComponent({
 	name: 'RadioList',
 
 	setup() {
-	},
-
-	methods: {
-		onKeydown(e: KeyboardEvent) {
+		const onKeydown = (e: KeyboardEvent) => {
 			handleKeyboardEvent(e, Array.from((e.currentTarget as HTMLFieldSetElement).elements) as HTMLElement[])
 		}
-	}
+
+		return {
+			onKeydown
+		}
+	},
 });
 </script>