From 5627d6930b7c5b0f3843542e59e212ff45a6bd25 Mon Sep 17 00:00:00 2001
From: Pylogmon <pylogmon@outlook.com>
Date: Sun, 23 Jun 2024 21:50:34 +0800
Subject: [PATCH] feat: impl multiple instance for collection

---
 src/services/collection/anki/Config.jsx       | 34 ++++++++++++++++--
 src/services/collection/eudic/Config.jsx      | 35 +++++++++++++++++--
 src/services/collection/eudic/index.jsx       | 10 ++----
 src/window/Config/pages/History/index.jsx     | 32 ++++++++++++-----
 .../Service/Collection/ServiceItem/index.jsx  |  2 +-
 .../Config/pages/Service/Collection/index.jsx |  2 +-
 .../Translate/components/TargetArea/index.jsx | 29 ++++++++++-----
 7 files changed, 111 insertions(+), 33 deletions(-)

diff --git a/src/services/collection/anki/Config.jsx b/src/services/collection/anki/Config.jsx
index e13876cb41..88a9de057d 100644
--- a/src/services/collection/anki/Config.jsx
+++ b/src/services/collection/anki/Config.jsx
@@ -1,3 +1,4 @@
+import { INSTANCE_NAME_CONFIG_KEY } from '../../../utils/service_instance';
 import { Button, Input } from '@nextui-org/react';
 import toast, { Toaster } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -10,9 +11,17 @@ import { collection } from './index';
 
 export function Config(props) {
     const [isLoading, setIsLoading] = useState(false);
-    const { updateServiceList, onClose } = props;
-    const [ankiConfig, setAnkiConfig] = useConfig('anki', { port: 8765 }, { sync: false });
     const { t } = useTranslation();
+    const { instanceKey, updateServiceList, onClose } = props;
+    const [ankiConfig, setAnkiConfig] = useConfig(
+        instanceKey,
+        {
+            [INSTANCE_NAME_CONFIG_KEY]: t('services.collection.anki.title'),
+            port: 8765,
+        },
+        { sync: false }
+    );
+
     const toastStyle = useToastStyle();
 
     return (
@@ -27,7 +36,7 @@ export function Config(props) {
                             () => {
                                 setIsLoading(false);
                                 setAnkiConfig(ankiConfig, true);
-                                updateServiceList('anki');
+                                updateServiceList(instanceKey);
                                 onClose();
                             },
                             (e) => {
@@ -37,6 +46,25 @@ export function Config(props) {
                         );
                     }}
                 >
+                    <div className='config-item'>
+                        <Input
+                            label={t('services.instance_name')}
+                            labelPlacement='outside-left'
+                            value={ankiConfig[INSTANCE_NAME_CONFIG_KEY]}
+                            variant='bordered'
+                            classNames={{
+                                base: 'justify-between',
+                                label: 'text-[length:--nextui-font-size-medium]',
+                                mainWrapper: 'max-w-[50%]',
+                            }}
+                            onValueChange={(value) => {
+                                setAnkiConfig({
+                                    ...ankiConfig,
+                                    [INSTANCE_NAME_CONFIG_KEY]: value,
+                                });
+                            }}
+                        />
+                    </div>
                     <div className={'config-item'}>
                         <h3 className='my-auto'>{t('services.help')}</h3>
                         <Button
diff --git a/src/services/collection/eudic/Config.jsx b/src/services/collection/eudic/Config.jsx
index b1472af800..63630abe87 100644
--- a/src/services/collection/eudic/Config.jsx
+++ b/src/services/collection/eudic/Config.jsx
@@ -1,3 +1,4 @@
+import { INSTANCE_NAME_CONFIG_KEY } from '../../../utils/service_instance';
 import { Button, Input } from '@nextui-org/react';
 import toast, { Toaster } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -10,9 +11,18 @@ import { collection } from './index';
 
 export function Config(props) {
     const [isLoading, setIsLoading] = useState(false);
-    const { updateServiceList, onClose } = props;
-    const [config, setConfig] = useConfig('eudic', { name: 'pot', token: '' }, { sync: false });
+    const { instanceKey, updateServiceList, onClose } = props;
     const { t } = useTranslation();
+    const [config, setConfig] = useConfig(
+        instanceKey,
+        {
+            [INSTANCE_NAME_CONFIG_KEY]: t('services.collection.eudic.title'),
+            name: 'pot',
+            token: '',
+        },
+        { sync: false }
+    );
+
     const toastStyle = useToastStyle();
 
     return (
@@ -27,7 +37,7 @@ export function Config(props) {
                             () => {
                                 setIsLoading(false);
                                 setConfig(config, true);
-                                updateServiceList('eudic');
+                                updateServiceList(instanceKey);
                                 onClose();
                             },
                             (e) => {
@@ -37,6 +47,25 @@ export function Config(props) {
                         );
                     }}
                 >
+                    <div className='config-item'>
+                        <Input
+                            label={t('services.instance_name')}
+                            labelPlacement='outside-left'
+                            value={config[INSTANCE_NAME_CONFIG_KEY]}
+                            variant='bordered'
+                            classNames={{
+                                base: 'justify-between',
+                                label: 'text-[length:--nextui-font-size-medium]',
+                                mainWrapper: 'max-w-[50%]',
+                            }}
+                            onValueChange={(value) => {
+                                setConfig({
+                                    ...config,
+                                    [INSTANCE_NAME_CONFIG_KEY]: value,
+                                });
+                            }}
+                        />
+                    </div>
                     <div className={'config-item'}>
                         <h3 className='my-auto'>{t('services.help')}</h3>
                         <Button
diff --git a/src/services/collection/eudic/index.jsx b/src/services/collection/eudic/index.jsx
index 0bb7f42f09..e18cb30409 100644
--- a/src/services/collection/eudic/index.jsx
+++ b/src/services/collection/eudic/index.jsx
@@ -1,15 +1,9 @@
 import { fetch, Body } from '@tauri-apps/api/http';
-import { store } from '../../../utils/store';
 
 export async function collection(source, target, options = {}) {
     const { config } = options;
-
-    let eudicConfig = (await store.get('eudic')) ?? {};
-    if (config !== undefined) {
-        eudicConfig = config;
-    }
-    const name = eudicConfig['name'] ?? 'pot';
-    const token = eudicConfig['token'] ?? '';
+    const name = config['name'] ?? 'pot';
+    const token = config['token'] ?? '';
 
     let categoryId = await checkCategory(name, token);
     return await addWordToCategory(categoryId, source, token);
diff --git a/src/window/Config/pages/History/index.jsx b/src/window/Config/pages/History/index.jsx
index 19e3b5f70d..b1ff10f915 100644
--- a/src/window/Config/pages/History/index.jsx
+++ b/src/window/Config/pages/History/index.jsx
@@ -17,7 +17,13 @@ import { useConfig, useToastStyle } from '../../../../hooks';
 import { LanguageFlag } from '../../../../utils/language';
 import { store } from '../../../../utils/store';
 import { osType } from '../../../../utils/env';
-import { ServiceSourceType, ServiceType, whetherAvailableService } from '../../../../utils/service_instance';
+import {
+    ServiceSourceType,
+    ServiceType,
+    getServiceName,
+    getServiceSouceType,
+    whetherAvailableService,
+} from '../../../../utils/service_instance';
 
 export default function History() {
     const [collectionServiceList] = useConfig('collection_service_list', []);
@@ -274,19 +280,22 @@ export default function History() {
                                         </Button>
                                         <ButtonGroup>
                                             {collectionServiceList &&
-                                                collectionServiceList.map((serviceName) => {
+                                                collectionServiceList.map((instanceKey) => {
                                                     return (
                                                         <Button
-                                                            key={serviceName}
+                                                            key={instanceKey}
                                                             isIconOnly
                                                             variant='light'
                                                             onPress={async () => {
-                                                                if (serviceName.startsWith('plugin')) {
+                                                                if (
+                                                                    getServiceSouceType(instanceKey) ===
+                                                                    ServiceSourceType.PLUGIN
+                                                                ) {
                                                                     const pluginConfig =
-                                                                        (await store.get(serviceName)) ?? {};
+                                                                        (await store.get(instanceKey)) ?? {};
                                                                     let [func, utils] = await invoke_plugin(
                                                                         'collection',
-                                                                        serviceName
+                                                                        getServiceName(instanceKey)
                                                                     );
                                                                     func(selectedItem.text, selectedItem.result, {
                                                                         config: pluginConfig,
@@ -307,10 +316,17 @@ export default function History() {
                                                                         }
                                                                     );
                                                                 } else {
-                                                                    builtinCollectionServices[serviceName]
+                                                                    const instanceConfig =
+                                                                        (await store.get(instanceKey)) ?? {};
+                                                                    builtinCollectionServices[
+                                                                        getServiceName(instanceKey)
+                                                                    ]
                                                                         .collection(
                                                                             selectedItem.text,
-                                                                            selectedItem.result
+                                                                            selectedItem.result,
+                                                                            {
+                                                                                config: instanceConfig,
+                                                                            }
                                                                         )
                                                                         .then(
                                                                             (_) => {
diff --git a/src/window/Config/pages/Service/Collection/ServiceItem/index.jsx b/src/window/Config/pages/Service/Collection/ServiceItem/index.jsx
index d088e3a9ec..6bb7ce4669 100644
--- a/src/window/Config/pages/Service/Collection/ServiceItem/index.jsx
+++ b/src/window/Config/pages/Service/Collection/ServiceItem/index.jsx
@@ -86,7 +86,7 @@ export default function ServiceItem(props) {
                         variant='light'
                         color='danger'
                         onPress={() => {
-                            deleteService(name);
+                            deleteServiceInstance(serviceInstanceKey);
                         }}
                     >
                         <MdDeleteOutline className='text-2xl' />
diff --git a/src/window/Config/pages/Service/Collection/index.jsx b/src/window/Config/pages/Service/Collection/index.jsx
index c30fccae27..0eb36afa85 100644
--- a/src/window/Config/pages/Service/Collection/index.jsx
+++ b/src/window/Config/pages/Service/Collection/index.jsx
@@ -39,7 +39,7 @@ export default function Collection(props) {
         setCollectionServiceInstanceList(items);
     };
 
-    const deleteService = (instanceKey) => {
+    const deleteServiceInstance = (instanceKey) => {
         setCollectionServiceInstanceList(collectionServiceInstanceList.filter((x) => x !== instanceKey));
         deleteKey(instanceKey);
     };
diff --git a/src/window/Translate/components/TargetArea/index.jsx b/src/window/Translate/components/TargetArea/index.jsx
index 287215af3a..014bb915ff 100644
--- a/src/window/Translate/components/TargetArea/index.jsx
+++ b/src/window/Translate/components/TargetArea/index.jsx
@@ -792,19 +792,23 @@ export default function TargetArea(props) {
                             </Tooltip>
                             {/* available collection service instance */}
                             {collectionServiceList &&
-                                collectionServiceList.map((collectionServiceName) => {
+                                collectionServiceList.map((collectionServiceInstanceName) => {
                                     return (
                                         <Button
-                                            key={collectionServiceName}
+                                            key={collectionServiceInstanceName}
                                             isIconOnly
                                             variant='light'
                                             size='sm'
                                             onPress={async () => {
-                                                if (collectionServiceName.startsWith('plugin')) {
-                                                    const pluginConfig = (await store.get(collectionServiceName)) ?? {};
+                                                if (
+                                                    getServiceSouceType(collectionServiceInstanceName) ===
+                                                    ServiceSourceType.PLUGIN
+                                                ) {
+                                                    const pluginConfig =
+                                                        serviceInstanceConfigMap[collectionServiceInstanceName];
                                                     let [func, utils] = await invoke_plugin(
                                                         'collection',
-                                                        collectionServiceName
+                                                        getServiceName(collectionServiceInstanceName)
                                                     );
                                                     func(sourceText.trim(), result.toString(), {
                                                         config: pluginConfig,
@@ -820,7 +824,9 @@ export default function TargetArea(props) {
                                                         }
                                                     );
                                                 } else {
-                                                    builtinCollectionServices[collectionServiceName]
+                                                    const instanceConfig =
+                                                        serviceInstanceConfigMap[collectionServiceInstanceName];
+                                                    builtinCollectionServices[collectionServiceInstanceName]
                                                         .collection(sourceText, result)
                                                         .then(
                                                             (_) => {
@@ -837,9 +843,14 @@ export default function TargetArea(props) {
                                         >
                                             <img
                                                 src={
-                                                    collectionServiceName.startsWith('plugin')
-                                                        ? pluginList['collection'][collectionServiceName].icon
-                                                        : builtinCollectionServices[collectionServiceName].info.icon
+                                                    getServiceSouceType(collectionServiceInstanceName) ===
+                                                    ServiceSourceType.PLUGIN
+                                                        ? pluginList['collection'][
+                                                              getServiceName(collectionServiceInstanceName)
+                                                          ].icon
+                                                        : builtinCollectionServices[
+                                                              getServiceName(collectionServiceInstanceName)
+                                                          ].info.icon
                                                 }
                                                 className='h-[16px] w-[16px]'
                                             />