From 983530cffd27a6c633ea91e9ce910779043c7c6a Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Wed, 6 Jul 2022 17:29:21 +1000 Subject: Use URLSearchParams instead of plain strings --- src/App.vue | 17 +++++++---------- src/components/SearchModal.vue | 22 +++++++++++++++------- src/components/TileInfoModal.vue | 2 +- src/lib.ts | 4 ++-- 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"/>
+ @click.prevent="onLinkIconClick" title="Copy link to this node"> 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 { -- cgit v1.2.3