add lint for react (#17)

glowingjade · Oct 14, 2024 · 1621dfc · 1621dfc
1 parent 22a77c9
commit 1621dfc
Show file tree

Hide file tree

Showing 8 changed files with 1,212 additions and 1,941 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -20,6 +20,8 @@ const config = {
     'plugin:import/recommended',
     'plugin:import/typescript',
     'prettier',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
   ],
   rules: {
     '@typescript-eslint/no-empty-function': 'off',
@@ -33,6 +35,7 @@ const config = {
     '@typescript-eslint/no-floating-promises': 'off',
     '@typescript-eslint/no-unnecessary-condition': 'off',
     '@typescript-eslint/no-misused-promises': 'off',
+    'react/react-in-jsx-scope': 'off',
 
     'import/no-unresolved': 'off',
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,8 +29,11 @@
     "@typescript-eslint/parser": "5.29.0",
     "builtin-modules": "3.3.0",
     "esbuild": "0.17.3",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "jest": "^29.7.0",
     "obsidian": "latest",
     "prettier": "^3.3.3",

diff --git a/src/components/chat-view/Chat.tsx b/src/components/chat-view/Chat.tsx
@@ -16,7 +16,6 @@ import { APPLY_VIEW_TYPE } from '../../constants'
 import { useApp } from '../../contexts/app-context'
 import { useLLM } from '../../contexts/llm-context'
 import { useSettings } from '../../contexts/settings-context'
-import useDebounce from '../../hooks/use-debounce'
 import { useChatHistory } from '../../hooks/useChatHistory'
 import { OpenSettingsModal } from '../../OpenSettingsModal'
 import { ChatMessage, ChatUserMessage } from '../../types/chat'
@@ -282,15 +281,14 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
     (blockToApply: string, chatMessages: ChatMessage[]) => {
       applyMutation.mutate({ blockToApply, chatMessages })
     },
-    [applyMutation.mutate],
+    [applyMutation],
   )
 
   useEffect(() => {
     setFocusedMessageId(inputMessage.id)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const debouncedChatMessages = useDebounce(chatMessages, 300)
-
   useEffect(() => {
     const updateConversationAsync = async () => {
       try {
@@ -303,7 +301,7 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
       }
     }
     updateConversationAsync()
-  }, [debouncedChatMessages, currentConversationId])
+  }, [currentConversationId, chatMessages, createOrUpdateConversation])
 
   // Updates the currentFile of the focused message (input or chat history)
   // This happens when active file changes or focused message changes
@@ -481,6 +479,7 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
             />
           ) : (
             <ReactMarkdownItem
+              key={message.id}
               index={index}
               chatMessages={chatMessages}
               handleApply={handleApply}
@@ -551,4 +550,6 @@ function ReactMarkdownItem({
   )
 }
 
+Chat.displayName = 'Chat'
+
 export default Chat
diff --git a/src/components/chat-view/chat-input/ChatUserInput.tsx b/src/components/chat-view/chat-input/ChatUserInput.tsx
@@ -93,6 +93,7 @@ const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
       if (message) {
         updaterRef.current?.update(message)
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     const searchFilesByQuery = useCallback(
@@ -205,4 +206,6 @@ const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
   },
 )
 
+ChatUserInput.displayName = 'ChatUserInput'
+
 export default ChatUserInput
diff --git a/src/contexts/dark-mode-context.tsx b/src/contexts/dark-mode-context.tsx
@@ -27,6 +27,7 @@ export function DarkModeProvider({ children }: { children: ReactNode }) {
     handleDarkMode()
     app.workspace.on('css-change', handleDarkMode)
     return () => app.workspace.off('css-change', handleDarkMode)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return (

diff --git a/src/hooks/use-debounce.ts b/src/hooks/use-debounce.ts
diff --git a/src/hooks/useChatHistory.ts b/src/hooks/useChatHistory.ts
@@ -144,56 +144,59 @@ export function useChatHistory() {
   )
   const [chatList, setChatList] = useState<ChatConversationMeta[]>([])
 
-  const fetchChatList = async () => {
+  const fetchChatList = useCallback(async () => {
     const list = await chatConversationManager.getChatList()
     setChatList(list)
-  }
+  }, [chatConversationManager])
 
   useEffect(() => {
     void fetchChatList()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const createOrUpdateConversation = useCallback(
-    debounce(
-      async (id: string, messages: ChatMessage[]): Promise<void> => {
-        const conversation =
-          (await chatConversationManager.findChatConversation(id)) ??
-          (await chatConversationManager.createChatConversation(id))
+  const createOrUpdateConversation = useMemo(
+    () =>
+      debounce(
+        async (id: string, messages: ChatMessage[]): Promise<void> => {
+          console.log('createOrUpdateConversation', id, messages)
+          const conversation =
+            (await chatConversationManager.findChatConversation(id)) ??
+            (await chatConversationManager.createChatConversation(id))
 
-        const serializedMessages = messages.map(serializeChatMessage)
-        if (isEqual(conversation.messages, serializedMessages)) {
-          return
-        }
+          const serializedMessages = messages.map(serializeChatMessage)
+          if (isEqual(conversation.messages, serializedMessages)) {
+            return
+          }
 
-        const firstUserMessage = messages.find((v) => v.role === 'user')
+          const firstUserMessage = messages.find((v) => v.role === 'user')
 
-        await chatConversationManager.saveChatConversation({
-          ...conversation,
-          title: firstUserMessage?.content
-            ? editorStateToPlainText(firstUserMessage.content).substring(
-                0,
-                20,
-              ) || 'New Chat'
-            : 'New Chat',
-          messages: serializedMessages,
-          updatedAt: Date.now(),
-        })
-        await fetchChatList()
-      },
-      300,
-      {
-        maxWait: 1000,
-      },
-    ),
-    [chatConversationManager],
+          await chatConversationManager.saveChatConversation({
+            ...conversation,
+            title: firstUserMessage?.content
+              ? editorStateToPlainText(firstUserMessage.content).substring(
+                  0,
+                  20,
+                ) || 'New Chat'
+              : 'New Chat',
+            messages: serializedMessages,
+            updatedAt: Date.now(),
+          })
+          await fetchChatList()
+        },
+        300,
+        {
+          maxWait: 1000,
+        },
+      ),
+    [chatConversationManager, fetchChatList],
   )
 
   const deleteConversation = useCallback(
     async (id: string): Promise<void> => {
       await chatConversationManager.deleteChatConversation(id)
       await fetchChatList()
     },
-    [chatConversationManager],
+    [chatConversationManager, fetchChatList],
   )
 
   const getChatMessagesById = useCallback(