From c28190316f200c2a4a14f233af5974ad833374b3 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Mon, 23 Jun 2025 16:34:00 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(ratio-sync):=20reset=20pagin?=
 =?UTF-8?q?ation=20when=20filter/search=20changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a `useEffect` hook in `UpstreamRatioSync.js` to automatically set
`currentPage` to `1` whenever `ratioTypeFilter` or `searchKeyword`
updates.
This prevents the table from appearing empty when users switch to the
“model_price” (fixed price) filter or perform a new search while on a
later page.

Additional changes:
- Import `useEffect` from React.

This enhancement delivers a smoother UX by ensuring the first page of
results is always shown after any filtering action.
---
 web/src/pages/Setting/Ratio/ModelSettingsVisualEditor.js | 1 +
 web/src/pages/Setting/Ratio/UpstreamRatioSync.js         | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/Setting/Ratio/ModelSettingsVisualEditor.js b/web/src/pages/Setting/Ratio/ModelSettingsVisualEditor.js
index ca3e396d..b897968f 100644
--- a/web/src/pages/Setting/Ratio/ModelSettingsVisualEditor.js
+++ b/web/src/pages/Setting/Ratio/ModelSettingsVisualEditor.js
@@ -455,6 +455,7 @@ export default function ModelSettingsVisualEditor(props) {
               setCurrentPage(1);
             }}
             style={{ width: 200 }}
+            showClear
           />
           <Checkbox
             checked={conflictOnly}
diff --git a/web/src/pages/Setting/Ratio/UpstreamRatioSync.js b/web/src/pages/Setting/Ratio/UpstreamRatioSync.js
index 656e31ae..2dd6a009 100644
--- a/web/src/pages/Setting/Ratio/UpstreamRatioSync.js
+++ b/web/src/pages/Setting/Ratio/UpstreamRatioSync.js
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import {
   Button,
   Table,
@@ -58,6 +58,10 @@ export default function UpstreamRatioSync(props) {
 
   const channelSelectorRef = React.useRef(null);
 
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [ratioTypeFilter, searchKeyword]);
+
   const fetchAllChannels = async () => {
     setLoading(true);
     try {