Should encode proxy name in switch proxy API call url

ref #619

2 files changed, 20 insertions, 24 deletions

diff --git a/src/api/proxies.ts b/src/api/proxies.ts
index e11fd9e..69100c0 100644
--- a/src/api/proxies.ts
+++ b/src/api/proxies.ts
@@ -1,4 +1,7 @@
+import { ClashAPIConfig } from '$src/types';
+
 import { getURLAndInit } from '../misc/request-helper';
+
 const endpoint = '/proxies';
 
 /*
@@ -13,16 +16,21 @@ $ curl "http://127.0.0.1:8080/proxies/GLOBAL" -XPUT -d '{ "name": "Proxy" }' -i
 HTTP/1.1 204 No Content
 */
 
-export async function fetchProxies(config) {
+export async function fetchProxies(config: ClashAPIConfig) {
   const { url, init } = getURLAndInit(config);
   const res = await fetch(url + endpoint, init);
   return await res.json();
 }
 
-export async function requestToSwitchProxy(apiConfig, name1, name2) {
-  const body = { name: name2 };
+export async function requestToSwitchProxy(
+  apiConfig: ClashAPIConfig,
+  groupName: string,
+  name: string
+) {
+  const body = { name };
   const { url, init } = getURLAndInit(apiConfig);
-  const fullURL = `${url}${endpoint}/${name1}`;
+  const group = encodeURIComponent(groupName);
+  const fullURL = `${url}${endpoint}/${group}`;
   return await fetch(fullURL, {
     ...init,
     method: 'PUT',
@@ -31,8 +39,8 @@ export async function requestToSwitchProxy(apiConfig, name1, name2) {
 }
 
 export async function requestDelayForProxy(
-  apiConfig,
-  name,
+  apiConfig: ClashAPIConfig,
+  name: string,
   latencyTestUrl = 'http://www.gstatic.com/generate_204'
 ) {
   const { url, init } = getURLAndInit(apiConfig);
@@ -41,7 +49,7 @@ export async function requestDelayForProxy(
   return await fetch(fullURL, init);
 }
 
-export async function fetchProviderProxies(config) {
+export async function fetchProviderProxies(config: ClashAPIConfig) {
   const { url, init } = getURLAndInit(config);
   const res = await fetch(url + '/providers/proxies', init);
   if (res.status === 404) {
@@ -50,13 +58,13 @@ export async function fetchProviderProxies(config) {
   return await res.json();
 }
 
-export async function updateProviderByName(config, name) {
+export async function updateProviderByName(config: ClashAPIConfig, name: string) {
   const { url, init } = getURLAndInit(config);
   const options = { ...init, method: 'PUT' };
   return await fetch(url + '/providers/proxies/' + name, options);
 }
 
-export async function healthcheckProviderByName(config, name) {
+export async function healthcheckProviderByName(config: ClashAPIConfig, name: string) {
   const { url, init } = getURLAndInit(config);
   const options = { ...init, method: 'GET' };
   return await fetch(url + '/providers/proxies/' + name + '/healthcheck', options);
diff --git a/src/components/proxies/Proxy.tsx b/src/components/proxies/Proxy.tsx
index 051d2e2..8cc668f 100644
--- a/src/components/proxies/Proxy.tsx
+++ b/src/components/proxies/Proxy.tsx
@@ -22,11 +22,7 @@ const colorMap = {
   na: '#909399',
 };
 
-function getLabelColor({
-  number,
-}: {
-  number?: number;
-} = {}) {
+function getLabelColor({ number }: { number?: number } = {}) {
   if (number === 0) {
     return colorMap.na;
   } else if (number < 200) {
@@ -39,12 +35,7 @@ function getLabelColor({
   return colorMap.na;
 }
 
-function getProxyDotStyle(
-  latency: {
-    number?: number;
-  },
-  proxyType: string
-) {
+function getProxyDotStyle(latency: { number?: number }, proxyType: string) {
   if (NonProxyTypes.indexOf(proxyType) > -1) {
     return { border: '1px dotted #777' };
   }
@@ -76,10 +67,7 @@ function ProxySmallImpl({ now, name, proxy, latency, isSelectable, onClick }: Pr
   }, [name, onClick, isSelectable]);
 
   const className = useMemo(() => {
-    return cx(s0.proxySmall, {
-      [s0.now]: now,
-      [s0.selectable]: isSelectable,
-    });
+    return cx(s0.proxySmall, { [s0.now]: now, [s0.selectable]: isSelectable });
   }, [isSelectable, now]);
 
   const handleKeyDown = React.useCallback(