refactor: move saving logic to useSaveToServer hook

tiddly-gittly · Jan 10, 2024 · 779caa5 · 779caa5
1 parent c0d3db9
commit 779caa5
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 33 deletions.
diff --git a/src/popup/Form.tsx b/src/popup/Form.tsx
@@ -1,10 +1,12 @@
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 import isEqual from 'fast-deep-equal';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Select from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import { ToastContainer } from 'react-toastify';
+import { useAddTiddlerToServer } from '../shared/hooks/useAddTiddlerToServer';
+import { useAvailableTags } from '../shared/hooks/useAvailableTags';
 import { usePreferenceStore } from '../shared/preferences/store';
 import { Asset } from './AssetTable';
 import { useMessagingForm } from './hooks/useMessaging';
@@ -18,18 +20,34 @@ export function Form(props: { assets: Asset[]; content: IContent; selectedConten
   const [title, setTitle] = useState('');
   const [inManualSelectMode, setInManualSelectMode] = useState(false);
   const { defaultTagsForContent, defaultTagsForAssets } = usePreferenceStore();
+  /**
+   * A list of available servers for autocomplete
+   */
+  const { activeServers, onlineServers, setActiveServers } = useAddTiddlerToServer();
+  const activeServerOptionsForSelectUI = useMemo(
+    () =>
+      activeServers.map(item => ({
+        value: item.id,
+        label: item.name || item.uri,
+      })),
+    [activeServers],
+  );
+  const availableServerOptions = useMemo(
+    () => onlineServers.map(item => ({ value: item.id, label: item.name || item.uri })),
+    [onlineServers],
+  );
+  const availableTagOptions = useAvailableTags();
   /** selected tags */
   const [tagsForContent, setTagsForContent] = useState<string[]>(defaultTagsForContent);
   const [tagsForAssets, setTagsForAssets] = useState<string[]>(defaultTagsForAssets);
-  const { saving, setUrl, activeServerOptionsForSelectUI, availableServerOptions, availableTagOptions, setActiveServers, saveClipOfCurrentSelectedContent, handleBookmark } =
-    useSaveToServer(
-      assets,
-      content,
-      selectedContentKey,
-      tagsForContent,
-      tagsForAssets,
-      title,
-    );
+  const { saving, setUrl, saveClipOfCurrentSelectedContent, handleBookmark } = useSaveToServer(
+    assets,
+    content,
+    selectedContentKey,
+    tagsForContent,
+    tagsForAssets,
+    title,
+  );
   // if inManualSelectMode, don't set content from article, we will get content from user selection
   const { setArticle } = useSetContentFromArticle(setContent, setTitle, inManualSelectMode);
   const { handleManualSelect, handleGetReadability, handleGetSelectedHTML } = useMessagingForm({ setArticle, setUrl, setContent });

diff --git a/src/popup/hooks/useSaveToServer.ts b/src/popup/hooks/useSaveToServer.ts
@@ -4,7 +4,6 @@ import { useCallback, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 import delay from 'tiny-delay';
 import { useAddTiddlerToServer } from '../../shared/hooks/useAddTiddlerToServer';
-import { useAvailableTags } from '../../shared/hooks/useAvailableTags';
 import { getAssetSafeTitle } from '../../utils';
 import { Asset } from '../AssetTable';
 import { useContentToSave } from './useContentToSave';
@@ -14,24 +13,7 @@ export function useSaveToServer(assets: Asset[], content: IContent, selectedCont
   const [saving, setSaving] = useState(false);
   const [url, setUrl] = useState('');
 
-  const { activeServers, onlineServers, setActiveServers, addTiddlerToAllActiveServers } = useAddTiddlerToServer();
-
-  const activeServerOptionsForSelectUI = useMemo(
-    () =>
-      activeServers.map(item => ({
-        value: item.id,
-        label: item.name || item.uri,
-      })),
-    [activeServers],
-  );
-  /**
-   * A list of available servers for autocomplete
-   */
-  const availableServerOptions = useMemo(
-    () => onlineServers.map(item => ({ value: item.id, label: item.name || item.uri })),
-    [onlineServers],
-  );
-  const availableTagOptions = useAvailableTags();
+  const { addTiddlerToAllActiveServers } = useAddTiddlerToServer();
 
   const assetsToSave = useMemo(
     () => assets.filter(item => item.isToSave).map(item => ({ ...item, title: getAssetSafeTitle(title, item) })),
@@ -107,10 +89,6 @@ export function useSaveToServer(assets: Asset[], content: IContent, selectedCont
   return {
     saving,
     setUrl,
-    activeServerOptionsForSelectUI,
-    availableServerOptions,
-    availableTagOptions,
-    setActiveServers,
     saveClipOfCurrentSelectedContent,
     handleBookmark,
   };