fix: follow react hooks rules ESLint

Author: Constrat

src/components/OperationCard.tsx

@@ -2,6 +2,7 @@ import { Button, Card, Elevation, H4, H5, Icon, Tag } from '@blueprintjs/core'
 import { Tooltip2 } from '@blueprintjs/popover2'
 
 import clsx from 'clsx'
+import { useAtomValue } from 'jotai'
 import { CopilotInfoStatusEnum } from 'maa-copilot-client'
 import { copyShortCode, handleLazyDownloadJSON } from 'services/operation'
 
@@ -11,9 +12,9 @@ import { OperationRating } from 'components/viewer/OperationRating'
 import { OpDifficulty, Operation } from 'models/operation'
 
 import { useLevels } from '../apis/level'
-import { useTranslation } from '../i18n/i18n'
+import { languageAtom, useTranslation } from '../i18n/i18n'
 import { createCustomLevel, findLevelByStageName } from '../models/level'
-import { useLocalizedOperatorName } from '../models/operator'
+import { getLocalizedOperatorName } from '../models/operator'
 import { Paragraphs } from './Paragraphs'
 import { ReLinkDiv } from './ReLinkDiv'
 import { UserName } from './UserName'
@@ -246,13 +247,14 @@ export const OperationCard = ({ operation }: { operation: Operation }) => {
 
 const OperatorTags = ({ operation }: { operation: Operation }) => {
   const t = useTranslation()
+  const language = useAtomValue(languageAtom)
   const { opers, groups } = operation.parsedContent
 
   return opers?.length || groups?.length ? (
     <div>
       {opers?.map(({ name, skill }, index) => (
         <Tag key={index} className="mr-2 last:mr-0 mb-1 last:mb-0">
-          {`${useLocalizedOperatorName(name)} ${skill ?? 1}`}
+          {`${getLocalizedOperatorName(name, language)} ${skill ?? 1}`}
         </Tag>
       ))}
       {groups?.map(({ name, opers }, index) => (
@@ -264,7 +266,7 @@ const OperatorTags = ({ operation }: { operation: Operation }) => {
             opers
               ?.map(
                 ({ name, skill }) =>
-                  `${useLocalizedOperatorName(name)} ${skill ?? 1}`,
+                  `${getLocalizedOperatorName(name, language)} ${skill ?? 1}`,
               )
               .join(', ') || t.components.OperationCard.no_operators
           }

src/components/OperatorFilter.tsx

@@ -9,8 +9,7 @@ import {
 } from '@blueprintjs/core'
 
 import clsx from 'clsx'
-import { getDefaultStore, useAtom } from 'jotai'
-import { useAtomValue } from 'jotai'
+import { getDefaultStore, useAtom, useAtomValue } from 'jotai'
 import { compact } from 'lodash-es'
 import { FC, useEffect, useMemo, useState } from 'react'
 

src/components/editor/operator/EditorOperatorItem.tsx

@@ -1,11 +1,16 @@
 import { Card, Elevation, Icon } from '@blueprintjs/core'
 
 import clsx from 'clsx'
+import { useAtomValue } from 'jotai'
 
 import type { CopilotDocV1 } from 'models/copilot.schema'
 
-import { useTranslation } from '../../../i18n/i18n'
-import { OPERATORS, getSkillUsageTitle, useLocalizedOperatorName } from '../../../models/operator'
+import { languageAtom, useTranslation } from '../../../i18n/i18n'
+import {
+  OPERATORS,
+  getLocalizedOperatorName,
+  getSkillUsageTitle,
+} from '../../../models/operator'
 import { SortableItemProps } from '../../dnd'
 import { CardDeleteOption, CardEditOption } from '../CardOptions'
 import { OperatorAvatar } from './EditorOperator'
@@ -27,7 +32,7 @@ export const EditorOperatorItem = ({
   listeners,
 }: EditorOperatorItemProps) => {
   const t = useTranslation()
-
+  const language = useAtomValue(languageAtom)
   const id = OPERATORS.find(({ name }) => name === operator.name)?.id
   const skillUsage = getSkillUsageTitle(
     operator.skillUsage as CopilotDocV1.SkillUsageType,
@@ -52,7 +57,9 @@ export const EditorOperatorItem = ({
       />
       <OperatorAvatar id={id} size="large" />
       <div className="ml-4 flex-grow">
-        <h3 className="font-bold leading-none mb-1">{useLocalizedOperatorName(operator.name)}</h3>
+        <h3 className="font-bold leading-none mb-1">
+          {getLocalizedOperatorName(operator.name, language)}
+        </h3>
         <div className="text-gray-400 text-xs">
           {t.components.editor.operator.EditorOperatorItem.skill_number({
             count: operator.skill,

src/components/editor/operator/sheet/SheetGroup.tsx

@@ -4,7 +4,7 @@ import { useAtomValue } from 'jotai'
 import { FC, useMemo, useState } from 'react'
 
 import { AppToaster } from 'components/Toaster'
-import { OPERATORS, PROFESSIONS, useLocalizedOperatorName } from 'models/operator'
+import { OPERATORS, PROFESSIONS } from 'models/operator'
 import { favGroupAtom } from 'store/useFavGroups'
 
 import { useTranslation } from '../../../../i18n/i18n'

src/components/editor/operator/sheet/sheetGroup/OperatorInGroupItem.tsx

@@ -2,10 +2,11 @@ import { Card } from '@blueprintjs/core'
 
 import { FC } from 'react'
 
+import { useLocalizedOperatorName } from 'models/operator'
+
 import { OperatorAvatar } from '../../EditorOperator'
 import { Operator } from '../../EditorSheet'
 import { SkillAboutTrigger } from '../SheetOperatorSkillAbout'
-import { useLocalizedOperatorName } from 'models/operator'
 
 export interface OperatorInGroupItemProp {
   operatorInfo: Operator

src/components/editor/operator/sheet/sheetGroup/SheetOperatorEditor.tsx

@@ -11,6 +11,7 @@ import {
 import { Popover2 } from '@blueprintjs/popover2'
 
 import clsx from 'clsx'
+import { useAtomValue } from 'jotai'
 import {
   DetailedHTMLProps,
   Dispatch,
@@ -21,7 +22,9 @@ import {
   useState,
 } from 'react'
 
-import { useTranslation } from '../../../../../i18n/i18n'
+import { getLocalizedOperatorName } from 'models/operator'
+
+import { languageAtom, useTranslation } from '../../../../../i18n/i18n'
 import { OperatorAvatar } from '../../EditorOperator'
 import { Group } from '../../EditorSheet'
 import {
@@ -31,7 +34,6 @@ import {
 import { OperatorNoData } from '../SheetNoneData'
 import { useSheet } from '../SheetProvider'
 import { CollapseButton } from './CollapseButton'
-import { useLocalizedOperatorName } from 'models/operator'
 
 export interface SheetOperatorEditorProp extends SheetOperatorEditorFormProp {}
 
@@ -307,6 +309,8 @@ const OperatorSelectorItem: FC<{
   groupName?: OperatorInSheetOperatorEditor['groupName']
   opers: Group['opers']
 }> = ({ selectedOperators, setSelectedOperators, groupName, opers }) => {
+  const language = useAtomValue(languageAtom)
+
   return (
     <div className="flex flex-wrap">
       {opers?.map(({ name }) => {
@@ -334,7 +338,7 @@ const OperatorSelectorItem: FC<{
           >
             <OperatorAvatar name={name} size="large" />
             <p className="mt-1 font-bold leading-tight text-center break-words">
-              {useLocalizedOperatorName(name)}
+              {getLocalizedOperatorName(name, language)}
             </p>
           </Card>
         )

src/components/editor/operator/sheet/sheetOperator/SheetOperatorItem.tsx

@@ -8,14 +8,14 @@ import { FC } from 'react'
 
 import { AppToaster } from 'components/Toaster'
 import { CopilotDocV1 } from 'models/copilot.schema'
+import { useLocalizedOperatorName } from 'models/operator'
 import { ignoreKeyDic } from 'store/useFavGroups'
 import { favOperatorAtom } from 'store/useFavOperators'
 
 import { useTranslation } from '../../../../../i18n/i18n'
 import { OperatorAvatar } from '../../EditorOperator'
 import { SkillAboutTrigger } from '../SheetOperatorSkillAbout'
 import { useSheet } from '../SheetProvider'
-import { useLocalizedOperatorName } from 'models/operator'
 
 export interface SheetOperatorItemProp {
   name: string
@@ -173,13 +173,19 @@ export const SheetOperatorItem: FC<SheetOperatorItemProp> = ({ name }) => {
         />
       )}
       {grouped && (
-        <span className="text-xs font-bold mt-1">
-          <Icon icon="warning-sign" size={15} />
-          {
-            t.components.editor.operator.sheet.sheetOperator.SheetOperatorItem
-              .in_group
-          }
-        </span>
+        <div className={clsx('flex mt-1 text-gray-500 items-center text-xs')}>
+          <Icon
+            icon="warning-sign"
+            size={12}
+            className="flex items-center mr-1"
+          />
+          <p className="font-semibold">
+            {
+              t.components.editor.operator.sheet.sheetOperator.SheetOperatorItem
+                .in_group
+            }
+          </p>
+        </div>
       )}
     </Card>
   )