feat: collapse the original

Author: geekdada

package.json

@@ -35,6 +35,7 @@
     "@types/pino": "^6.3.4",
     "@types/rangy": "^0.0.33",
     "@types/react": "^17.0.0",
+    "@types/react-collapse": "^5.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
@@ -74,6 +75,7 @@
     "rangy": "^1.3.0",
     "react": "^17.0.1",
     "react-clipboard.js": "^2.0.16",
+    "react-collapse": "^5.1.0",
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3",
     "react-hot-loader": "^4.13.0",

src/common/api.ts

@@ -1,13 +1,13 @@
 import axios from 'axios'
 
-import { TranslateResult } from './types'
+import { APIRegions, TranslateResult } from './types'
 
 class Client {
   axios = axios.create({
-    baseURL: 'https://a-translator-api.nerdynerd.org',
+    baseURL: this.getAPI(),
   })
 
-  constructor(private apiToken: string) {
+  constructor(private apiToken: string, private region: APIRegions) {
     this.axios.interceptors.response.use(
       function (response) {
         return response
@@ -34,6 +34,17 @@ class Client {
 
     return this.axios.post('/v2/translate', form).then((res) => res.data)
   }
+
+  private getAPI(): string {
+    switch (this.region) {
+      case 'global':
+        return 'https://a-translator-api.nerdynerd.org'
+      case 'dev':
+        return 'http://localhost:1337'
+      default:
+        return 'https://a-translator-api.nerdynerd.org'
+    }
+  }
 }
 
 export default Client

src/common/types.ts

@@ -1,6 +1,7 @@
 export interface Config {
   token: string
   targetLang: SupportLanguages
+  region: APIRegions
 }
 
 export type SupportLanguages =
@@ -16,6 +17,8 @@ export type SupportLanguages =
   | 'PL'
   | 'RU'
 
+export type APIRegions = 'default' | 'global' | 'dev'
+
 export type TranslateResult = {
   translations: Array<{
     detected_source_language: SupportLanguages

src/pages/Background/common/server.ts

@@ -19,7 +19,7 @@ const onTranslate: Handler<{
     })
 
     const config: Config = await cc(chrome.storage.sync, 'get')
-    const client = new Client(config.token)
+    const client = new Client(config.token, config.region)
 
     if (process.env.USE_MOCK_TRANSLATE === 'true') {
       resolve({

src/pages/Content/components/TranslationItem.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import Clipboard from 'react-clipboard.js'
 import { useSnackbar } from 'notistack'
+import { Collapse } from 'react-collapse'
 
 import logger from '../../../common/logger'
 import { TranslateResult } from '../../../common/types'
@@ -17,6 +18,7 @@ const TranslationItem: React.FC<{
   const config = useConfig()
   const [loading, setLoading] = useState(true)
   const [result, setResult] = useState<string>()
+  const [collapse, setCollapse] = useState(true)
   const { enqueueSnackbar } = useSnackbar()
 
   const findOriginal = () => {
@@ -67,13 +69,14 @@ const TranslationItem: React.FC<{
   return (
     <div className="ate_TranslationItem">
       <div className="ate_TranslationItem__upper">
-        <div>
-          {job.text.length > 100 ? (
-            <div>{job.text.substring(0, 100)}...</div>
-          ) : (
+        <div
+          className="ate_TranslationItem__original"
+          onClick={() => setCollapse((prev) => !prev)}>
+          <Collapse isOpened={!collapse}>
             <div>{job.text}</div>
-          )}
+          </Collapse>
         </div>
+
         {loading ? (
           <div className="ate_TranslationItem__result">翻译中…</div>
         ) : undefined}

src/pages/Content/styles/components/TranslationItem.scss

@@ -11,6 +11,17 @@
       @apply space-x-2
     }
   }
+  &__original {
+    @apply bg-gray-50 hover:bg-gray-100 p-3 rounded cursor-pointer;
+
+    .ReactCollapse--collapse {
+      min-height: 36px;
+      will-change: height;
+      transition-property: height;
+
+      @apply ease-in-out duration-300;
+    }
+  }
   &__result {
     @apply rounded bg-yellow-50 p-3;
   }

src/pages/Options/Options.tsx

@@ -9,20 +9,22 @@ import { Global } from '@emotion/react'
 import cc from 'chrome-call'
 
 import Client from '../../common/api'
-import { Config } from '../../common/types'
+import { APIRegions, Config } from '../../common/types'
 
 import OptionSection from './components/OptionSection'
 
 const Options: React.FC = () => {
   const [targetLang, setTargetLang] = useState('ZH')
   const [token, setToken] = useState('')
+  const [region, setRegion] = useState<APIRegions>('default')
 
   const onSubmit: FormEventHandler = (e) => {
     e.preventDefault()
     ;(async () => {
       await cc(chrome.storage.sync, 'set', {
         targetLang,
         token,
+        region,
       })
 
       window.alert('保存成功')
@@ -37,7 +39,7 @@ const Options: React.FC = () => {
       return
     }
 
-    const client = new Client(token)
+    const client = new Client(token, region)
 
     client
       .translate('This is a test message.', 'ZH')
@@ -53,6 +55,7 @@ const Options: React.FC = () => {
     cc(chrome.storage.sync, 'get').then((config: Config) => {
       setTargetLang(config.targetLang)
       setToken(config.token)
+      setRegion(config.region)
     })
   }, [])
 
@@ -90,7 +93,7 @@ const Options: React.FC = () => {
             <OptionSection title={'目标语言'}>
               <select
                 tw="px-4 py-3 rounded-md"
-                name="target-language"
+                name="target-lang"
                 value={targetLang}
                 onChange={(e) => setTargetLang(e.target.value)}>
                 <option value="ZH">中文</option>
@@ -118,6 +121,20 @@ const Options: React.FC = () => {
                 onChange={(e) => setToken(e.target.value)}
               />
             </OptionSection>
+
+            <OptionSection title={'API Region'}>
+              <select
+                tw="px-4 py-3 rounded-md"
+                name="region"
+                value={region}
+                onChange={(e) => setRegion(e.target.value as APIRegions)}>
+                <option value="default">默认</option>
+                <option value="global">全球（非亚洲地区）</option>
+                {process.env.NODE_ENV !== 'production' ? (
+                  <option value="dev">DEV</option>
+                ) : undefined}
+              </select>
+            </OptionSection>
           </div>
 
           <div tw="p-5 space-x-4 justify-self-end">

yarn.lock

@@ -1531,6 +1531,13 @@
   resolved "https://registry.yarnpkg.com/@types/rangy/-/rangy-0.0.33.tgz#9f1afff01b4ba840360713a2c2ef3a36e7d49576"
   integrity sha512-j2lhwVgbxZORhiB7yP+cly6+ow75MYmyHIkkSBwDl7XzrO5TMUECKkXqCf0pZVDjW5TgulIvhKg7SyEWSSgzmA==
 
+"@types/react-collapse@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-collapse/-/react-collapse-5.0.0.tgz#ffe6173db457b4b147319e1bd522b5b9d3d68fac"
+  integrity sha512-iM5QPtS0JVbL5TWm8vilaG4iYiQIFSSqXDHcRUA50qBLSgC0GURk7VZYmgo6u4YF0LnpvKBQYRhPv1ut9DukIg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^17.0.0":
   version "17.0.0"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.0.tgz#b3b691eb956c4b3401777ee67b900cb28415d95a"
@@ -6314,6 +6321,11 @@ react-clipboard.js@^2.0.16:
     clipboard "^2.0.0"
     prop-types "^15.5.0"
 
+react-collapse@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/react-collapse/-/react-collapse-5.1.0.tgz#36f69ecb0fe797f976aaf5e4f2b2c248d2760140"
+  integrity sha512-5v0ywsn9HjiR/odNzbRDs0RZfrnbdSippJebWOBCFFDA12Vx8DddrbI4qWVf1P2wTiVagrpcSy07AU0b6+gM9Q==
+
 react-dom@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"