fix(eslint): resolve react-hooks violations

Author: NekoAria

src/components/Article/ActionButtons.jsx

@@ -18,7 +18,7 @@ import {
   IconStarFill,
 } from "@arco-design/web-react/icon"
 import { useStore } from "@nanostores/react"
-import { memo, useEffect, useState } from "react"
+import { memo, useState } from "react"
 
 import ArticleTOC from "./ArticleTOC"
 
@@ -99,6 +99,13 @@ const ActionButtons = () => {
 
   const [dropdownVisible, setDropdownVisible] = useState(false)
   const [isFetchedOriginal, setIsFetchedOriginal] = useState(false)
+  const [lastActiveContentId, setLastActiveContentId] = useState(activeContent?.id)
+
+  if (activeContent?.id !== lastActiveContentId) {
+    setLastActiveContentId(activeContent?.id)
+    setIsFetchedOriginal(false)
+  }
+
   const hasHeadings = headings.length > 0
 
   const {
@@ -396,10 +403,6 @@ const ActionButtons = () => {
     ),
   }
 
-  useEffect(() => {
-    setIsFetchedOriginal(false)
-  }, [activeContent])
-
   return (
     <div className={`action-buttons ${isBelowMedium ? "mobile" : ""}`}>
       {isBelowMedium ? (

src/components/Article/SearchAndSortBar.jsx

@@ -41,21 +41,13 @@ const handleFilterTypeChange = (value) => {
   setFilterType(value)
 }
 
-const SearchModal = memo(({ initialValue, visible, onCancel, onConfirm }) => {
+const SearchModal = memo(({ value, visible, onCancel, onConfirm, onChange }) => {
   const { filterType } = useStore(contentState)
   const { polyglot } = useStore(polyglotState)
   const tooltipLines = polyglot.t("search.tooltip").split("\n")
 
-  const [inputValue, setInputValue] = useState(initialValue)
-
-  useEffect(() => {
-    if (visible) {
-      setInputValue(initialValue)
-    }
-  }, [initialValue, visible])
-
   const handleConfirm = () => {
-    onConfirm(inputValue)
+    onConfirm(value)
   }
 
   const handleKeyDown = (event) => {
@@ -83,7 +75,7 @@ const SearchModal = memo(({ initialValue, visible, onCancel, onConfirm }) => {
         <Input.Search
           allowClear
           placeholder={polyglot.t("search.placeholder")}
-          value={inputValue}
+          value={value}
           addBefore={
             <Select
               style={{ width: "auto" }}
@@ -117,7 +109,7 @@ const SearchModal = memo(({ initialValue, visible, onCancel, onConfirm }) => {
               <IconQuestionCircle />
             </Tooltip>
           }
-          onChange={setInputValue}
+          onChange={onChange}
           onKeyDown={handleKeyDown}
         />
       </div>
@@ -297,9 +289,10 @@ const SearchAndSortBar = () => {
         </CustomTooltip>
       </div>
       <SearchModal
-        initialValue={modalInputValue}
+        value={modalInputValue}
         visible={searchModalVisible}
         onCancel={closeSearchModal}
+        onChange={setModalInputValue}
         onConfirm={handleConfirmSearch}
       />
     </div>

src/components/Article/SidebarTrigger.jsx

@@ -1,17 +1,23 @@
 import { Button, Drawer } from "@arco-design/web-react"
 import { IconMenu } from "@arco-design/web-react/icon"
-import { useEffect, useState } from "react"
+import { useStore } from "@nanostores/react"
+import { atom } from "nanostores"
+import { useEffect } from "react"
 import { useLocation } from "react-router"
 
 import Sidebar from "@/components/Sidebar/Sidebar"
 import useScreenWidth from "@/hooks/useScreenWidth"
 import "./SidebarTrigger.css"
+import createSetter from "@/utils/nanostores"
+
+const sidebarVisibleState = atom(false)
+const setSidebarVisible = createSetter(sidebarVisibleState)
 
 export default function SidebarTrigger() {
   const currentPath = useLocation().pathname
   const { isBelowLarge } = useScreenWidth()
 
-  const [sidebarVisible, setSidebarVisible] = useState(false)
+  const sidebarVisible = useStore(sidebarVisibleState)
 
   useEffect(() => {
     if (!isBelowLarge) {

src/components/Content/ContentContext.jsx

@@ -71,7 +71,7 @@ export const ContextProvider = ({ children }) => {
         }
       }, ANIMATION_DURATION_MS)
     },
-    [polyglot, handleEntryStatusUpdate, markReadBy, location.pathname],
+    [polyglot, handleEntryStatusUpdate, markReadBy, location.pathname, navigate],
   )
 
   const value = useMemo(

src/components/Settings/FeedList.jsx

@@ -14,7 +14,7 @@ import {
 import { IconDelete, IconEdit, IconQuestionCircle, IconRefresh } from "@arco-design/web-react/icon"
 import { useStore } from "@nanostores/react"
 import { atom, computed } from "nanostores"
-import { Fragment, useEffect, useState } from "react"
+import { Fragment, useEffect, useMemo, useState } from "react"
 import { useNavigate } from "react-router"
 
 import { refreshAllFeed, updateFeed } from "@/apis"
@@ -359,6 +359,7 @@ const FeedList = () => {
 
   const [bulkUpdateModalVisible, setBulkUpdateModalVisible] = useState(false)
   const [bulkOperationsModalVisible, setBulkOperationsModalVisible] = useState(false)
+  const [currentPage, setCurrentPage] = useState(1)
   const [refreshModalVisible, setRefreshModalVisible] = useState(false)
   const [editFeedModalVisible, setEditFeedModalVisible] = useState(false)
   const [feedForm] = Form.useForm()
@@ -506,28 +507,21 @@ const FeedList = () => {
     },
   ].filter(Boolean)
 
-  const [pagination, setPagination] = useState({
-    showJumper: true,
-    showTotal: true,
-    total: tableData.length,
-    pageSize: 15,
-    current: 1,
-    sizeCanChange: false,
-  })
-
-  const handleTableChange = (pagination) => {
-    setPagination((prev) => ({
-      ...prev,
-      current: pagination.current,
-    }))
-  }
-
-  useEffect(() => {
-    setPagination((prev) => ({
-      ...prev,
+  const pagination = useMemo(
+    () => ({
+      showJumper: true,
+      showTotal: true,
       total: tableData.length,
-    }))
-  }, [tableData.length])
+      pageSize: 15,
+      current: currentPage,
+      sizeCanChange: false,
+    }),
+    [tableData.length, currentPage],
+  )
+
+  const handleTableChange = (newPagination) => {
+    setCurrentPage(newPagination.current)
+  }
 
   return (
     <>

src/components/Sidebar/Sidebar.jsx

@@ -30,7 +30,7 @@ import {
 } from "@arco-design/web-react/icon"
 import { useStore } from "@nanostores/react"
 import classNames from "classnames"
-import { useEffect, useMemo, useRef, useState } from "react"
+import { useMemo, useRef, useState } from "react"
 import { useLocation, useNavigate } from "react-router"
 import SimpleBar from "simplebar-react"
 import { Virtualizer } from "virtua"
@@ -580,12 +580,10 @@ const updateAllEntriesAsRead = () => {
 }
 
 const Sidebar = () => {
-  const { homePage } = useStore(settingsState)
   const { isCoreDataReady } = useStore(dataState)
   const { polyglot } = useStore(polyglotState)
   const expandedCategories = useStore(expandedCategoriesState)
 
-  const [selectedKeys, setSelectedKeys] = useState([`/${homePage}`])
   const [categoryModalVisible, setCategoryModalVisible] = useState(false)
   const [feedModalVisible, setFeedModalVisible] = useState(false)
   const [selectedCategory, setSelectedCategory] = useState(null)
@@ -598,14 +596,11 @@ const Sidebar = () => {
 
   const location = useLocation()
   const currentPath = location.pathname
+  const selectedKeys = useMemo(() => [currentPath], [currentPath])
 
   const { fetchCounters } = useAppData()
   const { infoFrom, infoId } = useStore(contentState)
 
-  useEffect(() => {
-    setSelectedKeys([currentPath])
-  }, [currentPath])
-
   const handleEditCategory = (category) => {
     setSelectedCategory(category)
     setCategoryModalVisible(true)

src/components/ui/FeedIcon.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react"
+import { useRef, useState } from "react"
 
 import useFeedIcons from "@/hooks/useFeedIcons"
 import { updateFeedIcon } from "@/store/feedIconsState"
@@ -15,43 +15,47 @@ const FeedIcon = ({ feed, className = "feed-icon" }) => {
   const { icon_id: iconId } = feed.icon
   const fallbackIconURL = getFallbackIconURL(feed)
 
-  const [iconURL, setIconURL] = useState(iconId === 0 ? fallbackIconURL : DEFAULT_ICON_URL)
+  const [useFallback, setUseFallback] = useState(false)
   const [fallbackFailed, setFallbackFailed] = useState(false)
 
   const imgRef = useRef(null)
 
   const fetchedIcon = useFeedIcons(iconId, feed)
   const fetchedIconURL = fetchedIcon?.url
 
-  useEffect(() => {
-    if (fetchedIconURL) {
-      setIconURL(fetchedIconURL)
-    } else if (iconId === 0 && !fallbackFailed) {
-      setIconURL(fallbackIconURL)
+  const iconURL = (() => {
+    if (fallbackFailed) {
+      return DEFAULT_ICON_URL
     }
-  }, [fetchedIconURL, iconId, fallbackFailed, fallbackIconURL])
+    if (fetchedIconURL && !useFallback) {
+      return fetchedIconURL
+    }
+    if (iconId === 0 || useFallback) {
+      return fallbackIconURL
+    }
+    return DEFAULT_ICON_URL
+  })()
 
   const handleImageLoad = () => {
     if (imgRef.current) {
       const { naturalWidth, naturalHeight } = imgRef.current
       if (naturalWidth > 200 && naturalHeight > 200 && fetchedIcon.width === null) {
         updateFeedIcon(iconId, { width: naturalWidth, height: naturalHeight })
       }
-      if ((naturalWidth !== naturalHeight || naturalWidth === 0) && !fallbackFailed) {
-        setIconURL(fallbackIconURL)
+      if ((naturalWidth !== naturalHeight || naturalWidth === 0) && !useFallback) {
+        setUseFallback(true)
       }
     }
   }
 
   const handleError = () => {
     if (iconURL === fallbackIconURL && !fallbackFailed) {
       setFallbackFailed(true)
-      setIconURL(DEFAULT_ICON_URL)
       return
     }
 
-    if (!fallbackFailed) {
-      setIconURL(fallbackIconURL)
+    if (!fallbackFailed && !useFallback) {
+      setUseFallback(true)
     }
   }
 

src/hooks/useKeyHandlers.js

@@ -12,7 +12,6 @@ import {
   filteredEntriesState,
   nextContentState,
   prevContentState,
-  setActiveContent,
 } from "@/store/contentState"
 import { ANIMATION_DURATION_MS } from "@/utils/constants"
 import { extractImageSources } from "@/utils/images"
@@ -69,6 +68,7 @@ const useKeyHandlers = () => {
     }
 
   const exitDetailView = withActiveContent(
+    // eslint-disable-next-line react-hooks/refs
     withPhotoSliderCheck(() => {
       closeActiveContent()
       if (entryListRef.current) {
@@ -77,6 +77,7 @@ const useKeyHandlers = () => {
     }),
   )
 
+  // eslint-disable-next-line react-hooks/refs
   const navigateToPreviousArticle = withPhotoSliderCheck(() => {
     if (prevContent) {
       handleEntryClick(prevContent)
@@ -86,6 +87,7 @@ const useKeyHandlers = () => {
     }
   })
 
+  // eslint-disable-next-line react-hooks/refs
   const navigateToNextArticle = withPhotoSliderCheck(() => {
     if (nextContent) {
       handleEntryClick(nextContent)
@@ -95,6 +97,7 @@ const useKeyHandlers = () => {
     }
   })
 
+  // eslint-disable-next-line react-hooks/refs
   const navigateToAdjacentUnreadArticle = withPhotoSliderCheck((direction) => {
     const adjacentUnreadEntry = findAdjacentUnreadEntry(
       activeEntryIndex,

src/pages/Login.jsx

@@ -12,8 +12,8 @@ import useForm from "@arco-design/web-react/es/Form/useForm"
 import { IconHome, IconLock, IconUser } from "@arco-design/web-react/icon"
 import { useStore } from "@nanostores/react"
 import { ofetch } from "ofetch"
-import { useEffect, useState } from "react"
-import { Navigate, useLocation, useNavigate } from "react-router"
+import { useEffect, useMemo, useState } from "react"
+import { Navigate, useLocation, useNavigate, useSearchParams } from "react-router"
 
 import useLanguage, { polyglotState } from "@/hooks/useLanguage"
 import useTheme from "@/hooks/useTheme"
@@ -34,7 +34,10 @@ const Login = () => {
 
   const [loginForm] = useForm()
   const [loading, setLoading] = useState(false)
-  const [authMethod, setAuthMethod] = useState("token")
+
+  const [searchParams] = useSearchParams()
+  const urlParamsObj = useMemo(() => Object.fromEntries(searchParams), [])
+  const [authMethod, setAuthMethod] = useState(urlParamsObj.username ? "user" : "token")
   /* token or user */
   const location = useLocation()
   const navigate = useNavigate()
@@ -83,9 +86,6 @@ const Login = () => {
     const url = new URL(globalThis.location.href)
     const { server, token, username, password } = Object.fromEntries(url.searchParams)
     if (server) {
-      if (username) {
-        setAuthMethod("user")
-      }
       loginForm.setFieldsValue({ server, token, username, password })
       loginForm.submit()
     }