Use URLSearchParams instead of plain strings

4 files changed, 25 insertions, 20 deletions

diff --git a/src/App.vue b/src/App.vue
index cd38621..f138b21 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -323,8 +323,7 @@ export default defineComponent({
 			// Check if data for node-to-expand exists, getting from server if needed
 			let tolNode = this.tolMap.get(layoutNode.name)!;
 			if (!this.tolMap.has(tolNode.children[0])){
-				let urlParams = 'type=node&name=' + encodeURIComponent(layoutNode.name);
-				urlParams += '&tree=' + this.uiOpts.tree;
+				let urlParams = new URLSearchParams({type: 'node', name: layoutNode.name, tree: this.uiOpts.tree});
 				let responseObj: {[x: string]: TolNode} = await this.loadFromServer(urlParams);
 				if (responseObj == null){
 					return false;
@@ -418,8 +417,7 @@ export default defineComponent({
 			// Check if data for node-to-expand exists, getting from server if needed
 			let tolNode = this.tolMap.get(layoutNode.name)!;
 			if (!this.tolMap.has(tolNode.children[0])){
-				let urlParams = 'type=node&name=' + encodeURIComponent(layoutNode.name);
-				urlParams += '&tree=' + this.uiOpts.tree;
+				let urlParams = new URLSearchParams({type: 'node', name: layoutNode.name, tree: this.uiOpts.tree});
 				let responseObj: {[x: string]: TolNode} = await this.loadFromServer(urlParams);
 				if (responseObj == null){
 					return false;
@@ -487,8 +485,7 @@ export default defineComponent({
 				this.resetMode();
 			}
 			// Query server for tol-node info
-			let urlParams = 'type=info&name=' + encodeURIComponent(nodeName);
-			urlParams += '&tree=' + this.uiOpts.tree;
+			let urlParams = new URLSearchParams({type: 'info', name: nodeName, tree: this.uiOpts.tree});
 			let responseObj: InfoResponse = await this.loadFromServer(urlParams);
 			if (responseObj == null){
 				return;
@@ -798,7 +795,7 @@ export default defineComponent({
 			}
 		},
 		// For the loading-indicator
-		async loadFromServer(urlParams: string){ // Like queryServer(), but enables the loading indicator
+		async loadFromServer(urlParams: URLSearchParams){ // Like queryServer(), but enables the loading indicator
 			this.primeLoadInd();
 			let responseObj = await queryServer(urlParams);
 			this.endLoadInd();
@@ -892,11 +889,11 @@ export default defineComponent({
 			// Get possible target node from URL
 			let nodeName = (new URL(window.location.href)).searchParams.get('node');
 			// Query server
-			let urlParams = 'type=node';
+			let urlParams = new URLSearchParams({type: 'node', tree: this.uiOpts.tree});
 			if (nodeName != null){
-				urlParams += '&name=' + encodeURIComponent(nodeName) + '&toroot=true';
+				urlParams.append('name', encodeURIComponent(nodeName));
+				urlParams.append('toroot', 'true');
 			}
-			urlParams += '&tree=' + this.uiOpts.tree;
 			let responseObj: {[x: string]: TolNode} = await this.loadFromServer(urlParams);
 			if (responseObj == null){
 				return;
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index f350bcb..de6bc75 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -55,7 +55,8 @@ export default defineComponent({
 			suggsInput: '', // The input that resulted in the current suggestions (used to highlight matching text)
 			// For search-suggestion requests
 			lastSuggReqTime: 0, // Set when a search-suggestions request is initiated
-			pendingSuggReqParams: '', // Used by a search-suggestion requester to request with the latest user input
+			pendingSuggReqParams: null as null | URLSearchParams,
+				// Used by a search-suggestion requester to request with the latest user input
 			pendingDelayedSuggReq: 0, // Set via setTimeout() for a non-initial search-suggestions request
 			pendingSuggInput: '', // Used to remember what input triggered a suggestions request
 			// Other
@@ -123,16 +124,19 @@ export default defineComponent({
 				return;
 			}
 			// Get URL params to use for querying search-suggestions
-			let urlParams = 'type=sugg&name=' + encodeURIComponent(input.value);
-			urlParams += '&limit=' + this.uiOpts.searchSuggLimit;
-			urlParams += '&tree=' + this.uiOpts.tree;
+			let urlParams = new URLSearchParams({
+				type: 'sugg',
+				name: input.value,
+				limit: String(this.uiOpts.searchSuggLimit),
+				tree: this.uiOpts.tree,
+			});
 			// Query server, delaying/skipping if a request was recently sent
 			this.pendingSuggReqParams = urlParams;
 			this.pendingSuggInput = input.value;
 			let doReq = async () => {
 				let suggInput = this.pendingSuggInput;
 				let responseObj: SearchSuggResponse =
-					await queryServer(this.pendingSuggReqParams);
+					await queryServer(this.pendingSuggReqParams!);
 				if (responseObj == null){
 					return;
 				}
@@ -198,8 +202,12 @@ export default defineComponent({
 				return;
 			}
 			// Ask server for nodes in parent-chain, updates tolMap, then emits search event
-			let urlParams = 'type=node&toroot=true&name=' + encodeURIComponent(tolNodeName);
-			urlParams += '&tree=' + this.uiOpts.tree;
+			let urlParams = new URLSearchParams({
+				type: 'node',
+				name: tolNodeName,
+				toroot: 'true',
+				tree: this.uiOpts.tree,
+			});
 			this.$emit('net-wait'); // Allows the parent component to show a loading-indicator
 			let responseObj: {[x: string]: TolNode} = await queryServer(urlParams);
 			this.$emit('net-get');
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 9e0f2c3..02712cd 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -8,7 +8,7 @@
 				class="absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer"/>
 			<div class="absolute top-1 left-1 md:top-2 md:left-2 flex items-center">
 				<a :href="'/?node=' + encodeURIComponent(nodeName)" class="block w-8 h-8 p-[2px] hover:cursor-pointer"
-					@click.prevent="onLinkIconClick">
+					@click.prevent="onLinkIconClick" title="Copy link to this node">
 					<link-icon/>
 				</a>
 				<transition name="fadeslow">
diff --git a/src/lib.ts b/src/lib.ts
index c034a3b..ebc1666 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -8,10 +8,10 @@ import {getBreakpoint, Breakpoint, getScrollBarWidth, onTouchDevice} from './uti
 
 // For server requests
 const SERVER_URL = 'http://localhost:8000/cgi-bin/data.py'
-export async function queryServer(params: string){
+export async function queryServer(params: URLSearchParams){
 	// Construct URL
 	let url = new URL(SERVER_URL);
-	url.search = params;
+	url.search = params.toString();
 	// Query server
 	let responseObj;
 	try {