diff --git a/app/assets/styles/home.css b/app/assets/styles/home.css index 96a6473..bb727a1 100644 --- a/app/assets/styles/home.css +++ b/app/assets/styles/home.css @@ -1,4 +1,5 @@ .search-container { + display: flex; width: 100%; padding-right: 10px; padding-left: 10px; diff --git a/app/routes/home.tsx b/app/routes/home.tsx index 5e5d20b..94f574b 100644 --- a/app/routes/home.tsx +++ b/app/routes/home.tsx @@ -1,7 +1,7 @@ import {useEffect, useState} from "react"; import '../assets/styles/home.css'; import { - Box, + Box, Button, Divider, Fab, TextField, ThemeProvider, Typography, @@ -15,17 +15,20 @@ import ItemList from "~/components/itemList"; import ItemDialog from "~/components/itemDialog"; import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag'; import ReportDialog from "~/components/reportDialog"; +import LoopIcon from '@mui/icons-material/Loop'; export default function Home() { const outerTheme = useTheme(); const [searchText, setSearchText] = useState(''); const [isFetchingList, setIsFetchingList] = useState(false); + const [totalBlacklistItems, setTotalBlacklistItems] = useState([]); const [blacklistItems, setBlacklistItems] = useState([]); const [showDialog, setShowDialog] = useState(false); const [currentDialogBlacklistItem, setCurrentDialogBlacklistItem] = useState(null); const [fabIsHovered, setFabIsHovered] = useState(false); const [showReportDialog, setReportShowDialog] = useState(false); + const [triggerUpdate, setTriggerUpdate] = useState(0); useEffect(() => { let isIgnore = false; @@ -34,6 +37,7 @@ export default function Home() { if (!isIgnore) { if (res instanceof Array){ setBlacklistItems(res); + setTotalBlacklistItems(res); } else if (res instanceof ResponseError) { // TODO error handler console.log(res); @@ -44,7 +48,19 @@ export default function Home() { return () => { 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) { setSearchText(text); @@ -67,6 +83,24 @@ export default function Home() { 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 (
@@ -79,6 +113,15 @@ export default function Home() { onChange={(e) => handleSearch(e.target.value)} fullWidth /> +