fix: убрал лишние запросы на бэк, список можно обновлять вручную
This commit is contained in:
parent
b9722e1df2
commit
23babed196
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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'}}/>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue