idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 16:59:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): autoscrolling for Logs page (#1069)

Browse source 
* fix(web): autoscrolling for Logs page

* replace setTimeout with useEffect and dep
prevent duplicate log entries when toggling settings.scrollOnNewLog through clearing logs once
This commit is contained in:
martylukyy 2023-09-01 21:55:35 +02:00 • committed by GitHub
parent dbaaed0e50
commit 48e09b51dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

23
web/src/screens/Logs.tsx
View file

@ -52,9 +52,20 @@ export const Logs = () => {
const [filteredLogs, setFilteredLogs] = useState<LogEvent[]>([]); const [filteredLogs, setFilteredLogs] = useState<LogEvent[]>([]);
const [isInvalidRegex, setIsInvalidRegex] = useState(false); const [isInvalidRegex, setIsInvalidRegex] = useState(false);
const scrollToBottom = () => { useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth", block: "end", inline: "end" }); const scrollToBottom = () => {
}; if (messagesEndRef.current) {
messagesEndRef.current.scrollTop = messagesEndRef.current.scrollHeight;
}
};
if (settings.scrollOnNewLog)
scrollToBottom();
}, [filteredLogs]);
// Add a useEffect to clear logs div when settings.scrollOnNewLog changes to prevent duplicate entries.
useEffect(() => {
setLogs([]);
}, [settings.scrollOnNewLog]);
useEffect(() => { useEffect(() => {
const es = APIClient.events.logs(); const es = APIClient.events.logs();
@ -62,9 +73,6 @@ export const Logs = () => {
es.onmessage = (event) => { es.onmessage = (event) => {
const newData = JSON.parse(event.data) as LogEvent; const newData = JSON.parse(event.data) as LogEvent;
setLogs((prevState) => [...prevState, newData]); setLogs((prevState) => [...prevState, newData]);
if (settings.scrollOnNewLog)
scrollToBottom();
}; };
return () => es.close(); return () => es.close();
@ -122,7 +130,7 @@ export const Logs = () => {
<LogsDropdown /> <LogsDropdown />
</div> </div>
<div className="overflow-y-auto px-2 rounded-lg h-[60vh] min-w-full bg-gray-100 dark:bg-gray-900 overflow-auto"> <div className="overflow-y-auto px-2 rounded-lg h-[60vh] min-w-full bg-gray-100 dark:bg-gray-900 overflow-auto" ref={messagesEndRef}>
{filteredLogs.map((entry, idx) => ( {filteredLogs.map((entry, idx) => (
<div <div
key={idx} key={idx}
@ -153,7 +161,6 @@ export const Logs = () => {
</span> </span>
</div> </div>
))} ))}
<div className="mt-6" ref={messagesEndRef} />
</div> </div>
</div> </div>
</div> </div>