feat: add error message when server is not connected

fixes #8

src/i18n/en-UK/translation.json

@@ -47,6 +47,7 @@
   "Error": {
     "WebServer403": "错误403：你需要允许太微服务器执行任意筛选器",
     "WebServerCORS": "错误CORS：你的浏览器擅自把请求改为了HTTPS，导致请求失败",
-    "WebServerUnknown": "错误：未知的请求错误"
+    "WebServerUnknown": "错误：未知的请求错误",
+    "GetUserName": "Error: Get user name"
   }
 }

src/i18n/zh-Hans/translation.json

@@ -47,6 +47,7 @@
   "Error": {
     "WebServer403": "Error403: You need to enable server AllowAllExternalFilters",
     "WebServerCORS": "ErrorCORS: Your browsr turn request to HTTPS cuase it failed",
-    "WebServerUnknown": "Error: Unknown request error"
+    "WebServerUnknown": "Error: Unknown request error",
+    "GetUserName": "错误：获取用户名"
   }
 }

src/popup/Form.tsx

@@ -23,7 +23,7 @@ export function Form(props: { assets: Asset[]; content: IContent; selectedConten
   /**
    * A list of available servers for autocomplete
    */
-  const { activeServers, onlineServers, setActiveServers } = useAddTiddlerToServer();
+  const { activeServers, onlineServers, setActiveServers, checkConnectionAndGetUsername } = useAddTiddlerToServer();
   const activeServerOptionsForSelectUI = useMemo(
     () =>
       activeServers.map(item => ({

src/shared/hooks/useAddTiddlerToServer.ts

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
 import { IServerStatus } from 'tiddlywiki';
 import type { ITiddlerFieldsParam } from 'tw5-typed';
 import { Writable } from 'type-fest';
@@ -30,27 +31,38 @@ export function useAddTiddlerToServer() {
     },
   );
 
-  const getusername = async (server: IServerInfo) => {
-    const baseURL = new URL('status', addProtocolToUrl(server.uri));
+  const checkConnectionAndGetUsername = useCallback(async (server: IServerInfo) => {
+    const statusUrl = new URL(
+      `status`,
+      addProtocolToUrl(server.uri),
+    );
+    let response: Response;
     try {
-      const data = await fetch(baseURL);
-      const { username } = await data.json() as IServerStatus;
-      return username;
+      response = await fetch(statusUrl);
     } catch (error) {
-      // 即使报错, 控制台也看不到, 因为点击保存后窗口就关闭了, 也许可以使用notify
-      console.error('[获取用户名]:', error);
+      throw new Error(`${t('Disconnected')} ${(error as Error).message}`);
     }
-  };
+    if (!response.ok) {
+      throw new Error(`${t('Disconnected')} ${response.statusText}`);
+    }
+    try {
+      const status = await response.json() as IServerStatus;
+      return status.username;
+    } catch (error) {
+      throw new Error(`${t('Error.GetUserName')} ${(error as Error).message}`);
+    }
+  }, [t]);
 
   const addTiddlerToServer = useCallback(
     async (server: IServerInfo, tiddler: ITiddlerToAdd): Promise<void> => {
       const putTiddlerUrl = new URL(
         `recipes/default/tiddlers/${tiddler.title as string}`,
         addProtocolToUrl(server.uri),
       );
-      const username = await getusername(server);
 
       try {
+        const username = await checkConnectionAndGetUsername(server);
+
         tiddler.created = toTWUTCString(new Date());
         tiddler.creator = username ?? t('TWCollector');
         tiddler.modifier = username ?? t('TWCollector');
@@ -66,12 +78,12 @@ export function useAddTiddlerToServer() {
           body: JSON.stringify({ title: tiddler.title, fields: tiddler }),
         });
       } catch (error) {
-        console.error(
-          `${server.name} ${t('Log.SaveFailed')} Error: ${(error as Error).message}`,
-        );
+        const message = `${server.name} ${t('Log.SaveFailed')} Error: ${(error as Error).message}`;
+        toast(message);
+        console.error(message, error);
       }
     },
-    [t],
+    [checkConnectionAndGetUsername, t],
   );
   const addTiddlerToAllActiveServers = useCallback(
     async (newTiddler: ITiddlerToAdd) => {
@@ -91,6 +103,7 @@ export function useAddTiddlerToServer() {
     setActiveServers,
     addTiddlerToServer,
     addTiddlerToAllActiveServers,
+    checkConnectionAndGetUsername,
   };
 }
 

src/shared/hooks/useAvailableTags.ts

@@ -4,16 +4,26 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import type { ITiddlerFields } from 'tw5-typed';
 import { addProtocolToUrl } from '../../utils';
-import { useServerStore } from '../server';
+import { useAddTiddlerToServer } from './useAddTiddlerToServer';
 
 export function useAvailableTags() {
-  const activeServers = useServerStore(({ servers }) => Object.values(servers).filter(server => server.active));
+  const { activeServers, checkConnectionAndGetUsername } = useAddTiddlerToServer();
+
   /** fetched all tags from active servers */
   const [availableTagOptions, setAvailableTagOptions] = useState<Array<{ label: string; value: string }>>([]);
   useEffect(() => {
+    // FIXME: activeServers change cause this hook render 6 times
     if (availableTagOptions.length > 0) return;
-    const getTagsTask = activeServers.map(item => item.uri).map(async serverUriBase => {
-      const url = new URL('/recipes/default/tiddlers.json?filter=[tags[]]', addProtocolToUrl(serverUriBase));
+    const getTagsTask = activeServers.map(async server => {
+      const url = new URL('/recipes/default/tiddlers.json?filter=[tags[]]', addProtocolToUrl(server.uri));
+      try {
+        await checkConnectionAndGetUsername(server);
+      } catch (error) {
+        const message = `${server.name} ${(error as Error).message}`;
+        toast(message);
+        console.error(message, error);
+        return [];
+      }
       try {
         // FIXME: will auto become https and cause CORS error
         const response = await fetch(url);
@@ -50,6 +60,6 @@ export function useAvailableTags() {
       if (tagsFromServer.length === 0) return;
       setAvailableTagOptions(tagsFromServer);
     });
-  }, [activeServers, availableTagOptions.length]);
+  }, [activeServers, availableTagOptions.length, checkConnectionAndGetUsername]);
   return availableTagOptions;
 }