glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-05-15 10:53:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

Make ApiUri persistent

Browse Source
This commit is contained in:
glax 2025-05-08 05:23:31 +02:00
parent 6173d16edc
commit 3ad7fbfad2
3 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
tranga-website/src/App.tsx
View File

@ -3,7 +3,7 @@ import './App.css'
import Settings from "./Settings.tsx"; import Settings from "./Settings.tsx";
import Header from "./Header.tsx"; import Header from "./Header.tsx";
import {Badge, Box, Button, Card, CardContent, CardCover, Typography} from "@mui/joy"; import {Badge, Box, Button, Card, CardContent, CardCover, Typography} from "@mui/joy";
import {useState} from "react"; import {useEffect, useState} from "react";
import {ApiUriContext} from "./api/fetchApi.tsx"; import {ApiUriContext} from "./api/fetchApi.tsx";
import Search from './Components/Search.tsx'; import Search from './Components/Search.tsx';
import MangaList from "./Components/MangaList.tsx"; import MangaList from "./Components/MangaList.tsx";
@ -14,7 +14,13 @@ export default function App () {
const [showSearch, setShowSearch] = useState<boolean>(false); const [showSearch, setShowSearch] = useState<boolean>(false);
const [apiConnected, setApiConnected] = useState<boolean>(false); const [apiConnected, setApiConnected] = useState<boolean>(false);
const [apiUri, setApiUri] = useState<string>(window.location.href.substring(0, window.location.href.lastIndexOf("/"))); const apiUriStr = localStorage.getItem("apiUri") ?? window.location.href.substring(0, window.location.href.lastIndexOf("/"));
const [apiUri, setApiUri] = useState<string>(apiUriStr);
useEffect(() => {
localStorage.setItem("apiUri", apiUri);
}, [apiUri]);
return ( return (
<ApiUriContext.Provider value={apiUri}> <ApiUriContext.Provider value={apiUri}>

13
tranga-website/src/Components/MangaList.tsx
View File

@ -17,7 +17,7 @@ export default function MangaList({connected, children}: {connected: boolean, ch
if(!connected) if(!connected)
return; return;
GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob).then((jl) => setJobList(jl as IDownloadAvailableChaptersJob[])); GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob).then((jl) => setJobList(jl as IDownloadAvailableChaptersJob[]));
},[apiUri]); },[apiUri,connected]);
const deleteJob = useCallback((jobId: string) => { const deleteJob = useCallback((jobId: string) => {
DeleteJob(apiUri, jobId).finally(() => getJobList()); DeleteJob(apiUri, jobId).finally(() => getJobList());
@ -27,17 +27,24 @@ export default function MangaList({connected, children}: {connected: boolean, ch
getJobList(); getJobList();
}, [apiUri]); }, [apiUri]);
const timerRef = React.useRef<ReturnType<typeof setInterval>>(undefined);
useEffect(() => { useEffect(() => {
updateTimer();
getJobList();
}, [connected]);
const timerRef = React.useRef<ReturnType<typeof setInterval>>(undefined);
const updateTimer = () => {
if(!connected){ if(!connected){
console.debug("Clear timer");
clearTimeout(timerRef.current); clearTimeout(timerRef.current);
return; return;
}else{ }else{
console.debug("Add timer");
timerRef.current = setInterval(() => { timerRef.current = setInterval(() => {
getJobList(); getJobList();
}, 2000); }, 2000);
} }
}, [connected,]); }
return( return(
<Stack direction="row" spacing={1} flexWrap={"wrap"}> <Stack direction="row" spacing={1} flexWrap={"wrap"}>

4
tranga-website/src/Settings.tsx
View File

@ -44,6 +44,7 @@ export default function Settings({open, setOpen, setApiUri, setConnected}:{open:
const [apiUriAccordionOpen, setApiUriAccordionOpen] = React.useState(true); const [apiUriAccordionOpen, setApiUriAccordionOpen] = React.useState(true);
const [checking, setChecking] = useState(false); const [checking, setChecking] = useState(false);
useEffect(() => { useEffect(() => {
OnCheckConnection(apiUri); OnCheckConnection(apiUri);
}, []); }, []);
@ -57,10 +58,13 @@ export default function Settings({open, setOpen, setApiUri, setConnected}:{open:
} }
const OnCheckConnection = (uri: string) => { const OnCheckConnection = (uri: string) => {
console.log("Checking connection...");
setChecking(true); setChecking(true);
checkConnection(uri) checkConnection(uri)
.then((result) => { .then((result) => {
setConnected(result); setConnected(result);
if(result)
console.log("Connected!");
setApiUriAccordionOpen(!result); setApiUriAccordionOpen(!result);
setApiUriColor(result ? "success" : "danger"); setApiUriColor(result ? "success" : "danger");
if(result) if(result)