lint-fix: make eslint happy

.editorconfig

@@ -6,6 +6,7 @@ indent_style = space
 indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
+end_of_line = lf
 
 [*.{js,ts,jsx,tsx,css,json,md,mdx,yml,yaml}]
 indent_size = 2

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint"
+  ]
+}

src/components/FactItem.tsx

@@ -19,8 +19,12 @@ export const FactItem: FCC<{
       className,
     )}
   >
-    {icon && <Icon icon={icon} className="mr-2 text-zinc-500 dark:text-slate-100" />}
-    <div className="text-sm mr-2 text-zinc-500 dark:text-slate-100">{title}</div>
+    {icon && (
+      <Icon icon={icon} className="mr-2 text-zinc-500 dark:text-slate-100" />
+    )}
+    <div className="text-sm mr-2 text-zinc-500 dark:text-slate-100">
+      {title}
+    </div>
     {children}
   </div>
 )

src/components/HelperText.tsx

@@ -22,7 +22,12 @@ export const HelperText: FCC<{
   }
 
   return (
-    <div className={clsx('flex text-gray-600 dark:text-zinc-400 text-xs items-center', className)}>
+    <div
+      className={clsx(
+        'flex text-gray-600 dark:text-zinc-400 text-xs items-center',
+        className,
+      )}
+    >
       <Icon icon="info-sign" size={12} className="mr-1.5" />
       <div>{child()}</div>
     </div>

src/components/OperationCard.tsx

@@ -20,12 +20,11 @@ export const NeoOperationCard = ({ operation }: { operation: Operation }) => {
   const { data: levels } = useLevels()
 
   return (
-    <Card
-      interactive={true}
-      elevation={Elevation.TWO}
-      className="relative"
-    >
-      <ReLink search={{ op: operation.id }} className="no-underline h-full flex flex-col gap-2">
+    <Card interactive={true} elevation={Elevation.TWO} className="relative">
+      <ReLink
+        search={{ op: operation.id }}
+        className="no-underline h-full flex flex-col gap-2"
+      >
         <div className="flex">
           <Tooltip2
             content={operation.parsedContent.doc.title}

src/components/Paragraphs.tsx

@@ -20,7 +20,7 @@ export const Paragraphs: FC<{
     const { height } = paragraphElementRef.current.getBoundingClientRect()
 
     setExceededLimitHeight(height > limitHeight)
-  }, [paragraphElementRef.current, limitHeight])
+  }, [limitHeight])
 
   const mask = exceededLimitHeight
     ? 'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) calc(100% - 2rem), rgba(0,0,0,0) 100%)'
@@ -40,9 +40,7 @@ export const Paragraphs: FC<{
       }}
     >
       <div ref={paragraphElementRef}>
-        {paragraphs?.map((paragraph, index) => (
-          <p key={index}>{paragraph}</p>
-        ))}
+        {paragraphs?.map((paragraph, index) => <p key={index}>{paragraph}</p>)}
       </div>
     </div>
   )

src/components/Suspensable.tsx

@@ -24,6 +24,7 @@ export const Suspensable: FCC<SuspensableProps> = ({
   useEffect(() => {
     resetError.current?.()
     resetError.current = undefined
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, retryDeps)
 
   return (

src/components/ThemeSwitchButton.tsx

@@ -1,16 +1,16 @@
 import { Button } from '@blueprintjs/core'
 
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 const themeMedia = window.matchMedia('(prefers-color-scheme: light)')
 
 export const ThemeSwitchButton = () => {
   const [theme, setTheme] = useState(localStorage.getItem('theme') || '')
-  const handleThemeSwitch = () => {
+  const handleThemeSwitch = useCallback(() => {
     const isCurrentDark = theme === 'dark'
     setTheme(isCurrentDark ? 'light' : 'dark')
     localStorage.setItem('theme', isCurrentDark ? 'light' : 'dark')
-  }
+  }, [theme])
   useEffect(() => {
     if (!themeMedia.matches && !localStorage.getItem('theme')) {
       handleThemeSwitch()
@@ -23,7 +23,7 @@ export const ThemeSwitchButton = () => {
       document.body.classList.remove('bp4-dark')
       document.body.classList.remove('dark')
     }
-  }, [theme])
+  }, [theme, handleThemeSwitch])
   return (
     <Button
       onClick={handleThemeSwitch}

src/components/account/EditDialog.tsx

@@ -92,7 +92,7 @@ const InfoPanel = ({ onClose }) => {
 
   useEffect(() => {
     reset(auth)
-  }, [auth])
+  }, [auth, reset])
 
   const globalError = (errors as FieldErrors<{ global: void }>).global?.message
 

src/components/announcement/AnnPanel.tsx

@@ -43,7 +43,7 @@ export const AnnPanel: FC<AnnPanelProps> = ({ className }) => {
       setDisplaySections(freshSections)
       setLastNoticed(Date.now())
     }
-  }, [announcement])
+  }, [announcement, lastNoticed, setLastNoticed])
 
   return (
     <>
@@ -60,9 +60,9 @@ export const AnnPanel: FC<AnnPanelProps> = ({ className }) => {
         <div className="flex">
           {announcement && (
             <ul className="grow list-disc pl-4">
-              {announcement?.sections.slice(0, 3).map(({ title }) => (
-                <li key={title}>{title}</li>
-              ))}
+              {announcement?.sections
+                .slice(0, 3)
+                .map(({ title }) => <li key={title}>{title}</li>)}
             </ul>
           )}
           {!announcement && error && (

src/components/editor/EditorFieldProps.tsx

@@ -48,10 +48,8 @@ type PathOfType<T, P extends Path<T> | ArrayPath<T>, U> = P extends any
  * }
  * ```
  */
-export interface EditorFieldProps<
-  TFieldValues extends FieldValues,
-  TType = any,
-> extends UseControllerProps<
+export interface EditorFieldProps<TFieldValues extends FieldValues, TType = any>
+  extends UseControllerProps<
     TFieldValues,
     // the Cast here is a workaround for the fact that TS cannot correctly recognize
     // that the result of PathOfType is assignable to FieldPath<TFieldValues>

src/components/editor/NumericInput2.tsx

@@ -3,6 +3,7 @@ import {
   NumericInput,
   NumericInputProps,
 } from '@blueprintjs/core'
+
 import { useRef, useState } from 'react'
 
 type MixedNumericInputProps = HTMLInputProps & NumericInputProps

src/components/editor/OperationEditor.tsx

@@ -276,7 +276,7 @@ export const OperationEditor: FC<OperationEditorProps> = ({
         )
       }
     }
-  }, [stageName, levels])
+  }, [stageName, levels, getValues, setValue])
 
   const globalError = (errors as FieldErrors<{ global: void }>).global?.message
 

src/components/editor/action/EditorActionAdd.tsx

@@ -90,12 +90,15 @@ export const EditorActionAdd = ({
     [levels, stageName],
   )
 
-  const resettingValues: DeepPartial<CopilotDocV1.Action> = {
-    ...defaultAction,
-    // to prevent layout jumping, we persist the action type on reset
-    type,
-    ...(type === 'MoveCamera' ? defaultMoveCameraAction : null),
-  }
+  const resettingValues: DeepPartial<CopilotDocV1.Action> = useMemo(
+    () => ({
+      ...defaultAction,
+      // to prevent layout jumping, we persist the action type on reset
+      type,
+      ...(type === 'MoveCamera' ? defaultMoveCameraAction : null),
+    }),
+    [type],
+  )
 
   useEffect(() => {
     if (editingAction) {
@@ -154,13 +157,13 @@ export const EditorActionAdd = ({
     } else {
       reset(resettingValues)
     }
-  }, [editingAction])
+  }, [editingAction, reset, resettingValues, setValue])
 
   useEffect(() => {
     if (type === 'MoveCamera') {
       reset(resettingValues)
     }
-  }, [type])
+  }, [type, reset, resettingValues])
 
   useEffect(() => {
     setValue(
@@ -169,7 +172,7 @@ export const EditorActionAdd = ({
         ? (editingAction as CopilotDocV1.ActionSkillUsage)?.skillTimes ?? 1
         : undefined,
     )
-  }, [skillUsage])
+  }, [skillUsage, editingAction, setValue])
 
   const onSubmit = handleSubmit((values) => {
     if ('name' in values) {

src/components/editor/floatingMap/FloatingMap.tsx

@@ -70,7 +70,7 @@ export function FloatingMap() {
       x: clamp(cfg.x, 0, windowWidth - cfg.width),
       y: clamp(cfg.y, 0, windowHeight - cfg.height),
     }))
-  }, [windowWidth, windowHeight])
+  }, [setConfig, windowWidth, windowHeight])
 
   const [iframeWindow, setIframeWindow] = useState<Window | null | undefined>()
   const [mapStatus, setMapStatus] = useState(MapStatus.Loading)
@@ -81,7 +81,7 @@ export function FloatingMap() {
     // when level changes, the iframe should reload
     setMapStatus(MapStatus.Loading)
     setConfig((cfg) => ({ ...cfg, level }))
-  }, [level])
+  }, [setConfig, level])
 
   const setMapState = useCallback(() => {
     if (iframeWindow) {
@@ -136,7 +136,7 @@ export function FloatingMap() {
       toggleIframePointerEvents(false)
       setConfig((cfg) => ({ ...cfg, x, y }))
     },
-    [toggleIframePointerEvents],
+    [setConfig, toggleIframePointerEvents],
   )
 
   const onResizeStartHandler = useCallback(() => {
@@ -153,7 +153,7 @@ export function FloatingMap() {
         height: parseFloat(ref.style.height),
       }))
     },
-    [toggleIframePointerEvents],
+    [setConfig, toggleIframePointerEvents],
   )
 
   return createPortal(

src/components/editor/operator/EditorOperator.tsx

@@ -11,7 +11,7 @@ import { CopilotDocV1 } from '../../../models/copilot.schema'
 import { OPERATORS } from '../../../models/operator'
 import { Suggest } from '../../Suggest'
 
-type OperatorInfo = typeof OPERATORS[number]
+type OperatorInfo = (typeof OPERATORS)[number]
 type PerformerItem = OperatorInfo | CopilotDocV1.Group
 
 const isOperator = (item: PerformerItem): item is OperatorInfo =>

src/components/editor/operator/EditorPerformerAdd.tsx

@@ -51,31 +51,34 @@ export const EditorPerformerAdd: FC<EditorPerformerAddProps> = ({
     performerSelectItems.find((item) => item.value === mode) ||
     performerSelectItems[0]
 
-  const selector = (
-    <>
-      添加
-      <Select2<PerformerSelectItem>
-        filterable={false}
-        items={performerSelectItems}
-        className="ml-1"
-        onItemSelect={(e) => onModeChange(e.value)}
-        itemRenderer={(action, { handleClick, handleFocus }) => (
-          <MenuItem
-            key={action.value}
-            selected={action.value === mode}
-            onClick={handleClick}
-            onFocus={handleFocus}
-            text={action.label}
+  const selector = useMemo(
+    () => (
+      <>
+        添加
+        <Select2<PerformerSelectItem>
+          filterable={false}
+          items={performerSelectItems}
+          className="ml-1"
+          onItemSelect={(e) => onModeChange(e.value)}
+          itemRenderer={(action, { handleClick, handleFocus }) => (
+            <MenuItem
+              key={action.value}
+              selected={action.value === mode}
+              onClick={handleClick}
+              onFocus={handleFocus}
+              text={action.label}
+            />
+          )}
+        >
+          <Button
+            large
+            text={selectedItem.label}
+            rightIcon="double-caret-vertical"
           />
-        )}
-      >
-        <Button
-          large
-          text={selectedItem.label}
-          rightIcon="double-caret-vertical"
-        />
-      </Select2>
-    </>
+        </Select2>
+      </>
+    ),
+    [mode, onModeChange, selectedItem],
   )
 
   const child = useMemo(() => {
@@ -95,7 +98,16 @@ export const EditorPerformerAdd: FC<EditorPerformerAddProps> = ({
         categorySelector={selector}
       />
     )
-  }, [mode, submitOperator, submitGroup])
+  }, [
+    mode,
+    submitOperator,
+    submitGroup,
+    group,
+    groups,
+    onCancel,
+    operator,
+    selector,
+  ])
 
   return <Card className="mb-8 pt-4">{child}</Card>
 }

src/components/editor/operator/EditorPerformerOperator.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@blueprintjs/core'
 
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import { SubmitHandler, UseFormSetError, useForm } from 'react-hook-form'
 
 import { CardTitle } from 'components/CardTitle'
@@ -52,9 +52,14 @@ export const EditorPerformerOperator = ({
     watch,
   } = useForm<EditorOperatorFormValues>()
 
-  const findGroupByOperator = (operator?: CopilotDocV1.Operator) =>
-    operator &&
-    groups.find((group) => group.opers?.find((op) => op._id === operator._id))
+  const findGroupByOperator = useCallback(
+    (operator?: CopilotDocV1.Operator) =>
+      operator &&
+      groups.find((group) =>
+        group.opers?.find((op) => op._id === operator._id),
+      ),
+    [groups],
+  )
 
   // when the outside operator changes, reset the entire form
   useEffect(() => {
@@ -65,12 +70,12 @@ export const EditorPerformerOperator = ({
       },
       { keepDefaultValues: true },
     )
-  }, [reset, operator])
+  }, [reset, operator, findGroupByOperator])
 
   // when groups change (meaning the operator's ownership may have changed from outside), update the groupName
   useEffect(() => {
     setValue('groupName', findGroupByOperator(getValues())?.name)
-  }, [reset, getValues, groups])
+  }, [reset, getValues, groups, findGroupByOperator, setValue])
 
   const skillUsage = watch('skillUsage')
   useEffect(() => {
@@ -80,7 +85,7 @@ export const EditorPerformerOperator = ({
         ? operator?.skillTimes ?? 1
         : undefined,
     )
-  }, [skillUsage, setValue])
+  }, [skillUsage, setValue, operator])
 
   const onSubmit: SubmitHandler<EditorOperatorFormValues> = (values) => {
     values.name = values.name.trim()