fix: убрал лишние запросы на бэк, список можно обновлять вручную

This commit is contained in:
Dhaverd 2026-06-30 17:36:34 +08:00
parent b9722e1df2
commit 23babed196
2 changed files with 46 additions and 2 deletions

View File

@ -1,4 +1,5 @@
.search-container { .search-container {
display: flex;
width: 100%; width: 100%;
padding-right: 10px; padding-right: 10px;
padding-left: 10px; padding-left: 10px;

View File

@ -1,7 +1,7 @@
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import '../assets/styles/home.css'; import '../assets/styles/home.css';
import { import {
Box, Box, Button,
Divider, Fab, Divider, Fab,
TextField, TextField,
ThemeProvider, Typography, ThemeProvider, Typography,
@ -15,17 +15,20 @@ import ItemList from "~/components/itemList";
import ItemDialog from "~/components/itemDialog"; import ItemDialog from "~/components/itemDialog";
import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag'; import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag';
import ReportDialog from "~/components/reportDialog"; import ReportDialog from "~/components/reportDialog";
import LoopIcon from '@mui/icons-material/Loop';
export default function Home() { export default function Home() {
const outerTheme = useTheme(); const outerTheme = useTheme();
const [searchText, setSearchText] = useState(''); const [searchText, setSearchText] = useState('');
const [isFetchingList, setIsFetchingList] = useState(false); const [isFetchingList, setIsFetchingList] = useState(false);
const [totalBlacklistItems, setTotalBlacklistItems] = useState<BlacklistItem[]>([]);
const [blacklistItems, setBlacklistItems] = useState<BlacklistItem[]>([]); const [blacklistItems, setBlacklistItems] = useState<BlacklistItem[]>([]);
const [showDialog, setShowDialog] = useState(false); const [showDialog, setShowDialog] = useState(false);
const [currentDialogBlacklistItem, setCurrentDialogBlacklistItem] = useState<BlacklistItem|null>(null); const [currentDialogBlacklistItem, setCurrentDialogBlacklistItem] = useState<BlacklistItem|null>(null);
const [fabIsHovered, setFabIsHovered] = useState(false); const [fabIsHovered, setFabIsHovered] = useState(false);
const [showReportDialog, setReportShowDialog] = useState(false); const [showReportDialog, setReportShowDialog] = useState(false);
const [triggerUpdate, setTriggerUpdate] = useState(0);
useEffect(() => { useEffect(() => {
let isIgnore = false; let isIgnore = false;
@ -34,6 +37,7 @@ export default function Home() {
if (!isIgnore) { if (!isIgnore) {
if (res instanceof Array){ if (res instanceof Array){
setBlacklistItems(res); setBlacklistItems(res);
setTotalBlacklistItems(res);
} else if (res instanceof ResponseError) { } else if (res instanceof ResponseError) {
// TODO error handler // TODO error handler
console.log(res); console.log(res);
@ -44,7 +48,19 @@ export default function Home() {
return () => { return () => {
isIgnore = true; // При следующем изменении someValue старый запрос будет проигнорирован isIgnore = true; // При следующем изменении someValue старый запрос будет проигнорирован
}; };
}, [searchText, showReportDialog]); }, [triggerUpdate, showReportDialog]);
useEffect(() => {
if (searchText !== ""){
setIsFetchingList(true);
let result = search(searchText);
console.log(result);
setBlacklistItems(result);
setIsFetchingList(false);
} else {
setBlacklistItems(totalBlacklistItems);
}
}, [searchText]);
function handleSearch(text: string) { function handleSearch(text: string) {
setSearchText(text); setSearchText(text);
@ -67,6 +83,24 @@ export default function Home() {
setReportShowDialog(false); setReportShowDialog(false);
}; };
const sync = () => {
setSearchText('');
setTriggerUpdate(triggerUpdate + 1)
};
const search = (searchString: string) => {
searchString = searchString.toLowerCase();
return totalBlacklistItems.filter((item) => {
return item.link.toLowerCase().includes(searchString)
|| item.nicknames.some((nickname) => {
return nickname.toLowerCase().includes(searchString)
})
|| item.comments.some((comment) => {
return comment.toLowerCase().includes(searchString)
});
});
};
return ( return (
<ThemeProvider theme={customTheme(outerTheme)}> <ThemeProvider theme={customTheme(outerTheme)}>
<div className="bg-dark"> <div className="bg-dark">
@ -79,6 +113,15 @@ export default function Home() {
onChange={(e) => handleSearch(e.target.value)} onChange={(e) => handleSearch(e.target.value)}
fullWidth fullWidth
/> />
<Button
variant="outlined"
sx={{ marginLeft: '10px' }}
onClick={() => {
sync();
}}
>
<LoopIcon/>
</Button>
</div> </div>
<div style={{justifyItems: 'center'}}> <div style={{justifyItems: 'center'}}>
<Divider sx={{marginTop: '10px', marginBottom: '10px'}}/> <Divider sx={{marginTop: '10px', marginBottom: '10px'}}/>