Webui starting to work a bit better

Makefile

@@ -5,7 +5,12 @@ all: sign-release sign-debug
 @PHONY: webui-dev
 webui-dev:
 	cd crates/librqbit/webui && \
-	tsc --watch
+	npm run dev
+
+@PHONY: webui-build
+webui-build:
+	cd crates/librqbit/webui && \
+	npm run build
 
 @PHONY: clean
 clean:

crates/librqbit/src/http_api.rs

@@ -57,7 +57,8 @@ impl HttpApi {
                     "GET /torrents/{index}/peer_stats": "Per peer stats",
                     // This is kind of not secure as it just reads any local file that it has access to,
                     // or any URL, but whatever, ok for our purposes / threat model.
-                    "POST /torrents": "Add a torrent here. magnet: or http:// or a local file."
+                    "POST /torrents": "Add a torrent here. magnet: or http:// or a local file.",
+                    "GET /web/": "Web UI",
                 },
                 "server": "rqbit",
             }))

crates/librqbit/webui/src/index.tsx

@@ -1,25 +1,33 @@
-import { Fragment, createContext, useContext, useEffect, useRef, useState } from 'react';
+import { StrictMode, createContext, memo, useContext, useEffect, useRef, useState } from 'react';
-import * as ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 // Define API URL and base path
 const apiUrl = (window.origin === 'null' || window.origin === 'http://localhost:3031') ? 'http://localhost:3030' : '';
 
 interface ErrorType {
-	status: number,
+    id?: number,
-	statusText: number,
+    method?: string,
-	body: number,
+    path?: string,
+    status?: number,
+    statusText?: string,
+    text: string,
 };
 
-let defaultContext: {
+interface ContextType {
-	setError: any,
+    setCloseableError: (error: ErrorType) => void,
-} = {
+    setOtherError: (error: ErrorType) => void,
-	setError: null,
+    makeRequest: (method: string, path: string, data: any, showError: boolean) => Promise<any>,
-};
+    requests: {
+        getTorrentDetails: any,
+        getTorrentStats: any,
+    },
+    refreshTorrents: () => void,
+}
 
-const AppContext = createContext(defaultContext);
+const AppContext = createContext<ContextType>(null);
 
 // Interface for the Torrent API response
-interface Torrent {
+interface TorrentId {
     id: number;
     info_hash: string;
 }
@@ -71,68 +79,6 @@ interface TorrentStats {
     } | null;
 }
 
-
-// Interface for the API error response
-interface ApiError {
-	status: number;
-	statusText: string;
-	body: string;
-}
-
-// Helper function for making API requests (async/await)
-async function makeRequest(method: string, path: string, data?: any): Promise<any> {
-	const url = apiUrl + path;
-	const options: RequestInit = {
-		method,
-		headers: {
-			'Accept': 'application/json',
-		},
-		body: data,
-	};
-
-	try {
-		const response = await fetch(url, options);
-		if (!response.ok) {
-			const errorBody = await response.text();
-			try {
-				const json = JSON.parse(errorBody);
-				displayApiError({
-					status: response.status,
-					statusText: response.statusText,
-					body: json.human_readable !== undefined ? json.human_readable : errorBody,
-				});
-			} catch (e) {
-				displayApiError({
-					status: response.status,
-					statusText: response.statusText,
-					body: errorBody,
-				});
-			}
-			return Promise.reject(errorBody);
-		}
-		const result = await response.json();
-		return result;
-	} catch (error) {
-		console.error(error);
-		displayApiError({
-			status: error.status,
-			statusText: error.statusText,
-			body: error.toString(),
-		});
-		return Promise.reject(`Error: ${error.message}`);
-	}
-}
-
-// Function to get detailed information about a torrent (async/await)
-async function getTorrentDetails(index: number): Promise<TorrentDetails> {
-	return makeRequest('GET', `/torrents/${index}`);
-}
-
-// Function to get detailed statistics about a torrent (async/await)
-async function getTorrentStats(index: number): Promise<TorrentStats> {
-	return makeRequest('GET', `/torrents/${index}/stats`);
-}
-
 function TorrentRow({ detailsResponse, statsResponse }) {
     const totalBytes = statsResponse.snapshot.total_bytes;
     const downloadedBytes = statsResponse.snapshot.have_bytes;
@@ -140,7 +86,6 @@ function TorrentRow({ detailsResponse, statsResponse }) {
 
     return (
         <div className="torrent-row d-flex flex-row p-3 bg-light rounded mb-3">
-			{/* Create and render columns */}
             <Column label="Name" value={getLargestFileName(detailsResponse)} />
             <Column label="Size" value={`${formatBytesToGB(totalBytes)} GB`} />
             <ColumnWithProgressBar label="Progress" percentage={downloadPercentage} />
@@ -151,7 +96,6 @@ function TorrentRow({ detailsResponse, statsResponse }) {
     );
 }
 
-// Define a Preact component for a column
 const Column = ({ label, value }) => (
     <div className={`column-${label.toLowerCase().replace(" ", "-")} me-3 p-2`}>
         <p className="font-weight-bold">{label}</p>
@@ -159,7 +103,6 @@ const Column = ({ label, value }) => (
     </div>
 );
 
-// Define a Preact component for a column with a progress bar
 const ColumnWithProgressBar = ({ label, percentage }) => (
     <div className="column-progress me-3 p-2">
         <p className="font-weight-bold">{label}</p>
@@ -170,7 +113,7 @@ const ColumnWithProgressBar = ({ label, percentage }) => (
     </div >
 );
 
-const DeferredTorrent = ({ torrent }) => {
+const Torrent = ({ torrent }) => {
     const defaultDetails: TorrentDetails = {
         files: []
     };
@@ -214,109 +157,261 @@ const DeferredTorrent = ({ torrent }) => {
     const [detailsResponse, updateDetailsResponse] = useState(defaultDetails);
     const [statsResponse, updateStatsResponse] = useState(defaultStats);
 
+    let ctx = useContext(AppContext);
+
     const update = async () => {
-		let a = getTorrentDetails(torrent.id).then((details) => {
+        return await Promise.all([
+            ctx.requests.getTorrentDetails(torrent.id).then((details) => {
                 updateDetailsResponse(details);
-		});
+                return details;
-		let b = getTorrentStats(torrent.id).then((stats) => {
+            }),
+            ctx.requests.getTorrentStats(torrent.id).then((stats) => {
                 updateStatsResponse(stats);
-		});
+                return stats;
-		await Promise.all([a, b]);
+            })
-		setTimeout(update, 500);
+        ]).then(([_, stats]) => {
+            return torrentIsDone(stats) ? 10000 : 500;
+        }, (e) => {
+            return 5000;
+        })
     };
 
     useEffect(() => {
-		let timer = setTimeout(update, 0);
+        let clear = customSetInterval(update, 0);
-		return () => clearTimeout(timer);
+        return clear;
     }, []);
 
     return <TorrentRow detailsResponse={detailsResponse} statsResponse={statsResponse} />
 }
 
-var globalCtx = null;
+const Spinner = () => (
-
+    <div className="spinner-border" role="status">
-const TorrentsList = () => {
+        <span className="sr-only">Loading...</span>
-	const [torrents, updateTorrents] = useState([]);
+    </div>
-	globalCtx = useContext(AppContext);
+)
-	const update = async () => {
-		let response = await makeRequest('GET', '/torrents');
-		updateTorrents(response.torrents);
-		setTimeout(update, 500);
-	};
-
-	useEffect(() => {
-		let timer = setTimeout(update, 0);
-		return () => clearTimeout(timer);
-	}, []);
-
-	let torrentsComponents = torrents.map((t: Torrent) =>
-		<DeferredTorrent key={t.id} torrent={t} />
-	);
 
+const TorrentsList = (props: { torrents: Array<TorrentId>, loading: boolean }) => {
+    if (props.torrents === null && props.loading) {
+        return <Spinner />
+    }
+    let torrents = props.torrents === null ? [] : props.torrents;
+    if (torrents.length === 0) {
+        return (
+            <div className="text-center">
+                <p>No existing torrents found. Add them through buttons below.</p>
+            </div>
+        )
+    }
     return (
         <div>
-			{torrentsComponents}
+            {torrents.map((t: TorrentId) =>
+                <Torrent key={t.id} torrent={t} />
+            )}
         </div>
     )
 };
 
 const Root = () => {
-	const [error, setError] = useState(null);
+    const [closeableError, setCloseableError] = useState<ErrorType>(null);
+    const [otherError, setOtherError] = useState<ErrorType>(null);
+
+    const [torrents, setTorrents] = useState<Array<TorrentId>>(null);
+    const [torrentsLoading, setTorrentsLoading] = useState(false);
+
+    const makeRequest = async (method: string, path: string, data: any, showError: boolean): Promise<any> => {
+        console.log(method, path);
+        const url = apiUrl + path;
+        const options: RequestInit = {
+            method,
+            headers: {
+                'Accept': 'application/json',
+            },
+            body: data,
+        };
+
+        const maybeShowError = (e: ErrorType) => {
+            if (showError) {
+                setCloseableError(e);
+            }
+        }
+
+        let error: ErrorType = {
+            method: method,
+            path: path,
+            text: ''
+        };
+
+        let response: Response;
+
+        try {
+            response = await fetch(url, options);
+        } catch (e) {
+            error.text = 'unknown error: ' + e.toString();
+            maybeShowError(error);
+            return Promise.reject(error);
+        }
+
+        error.status = response.status;
+        error.statusText = response.statusText;
+
+        if (!response.ok) {
+            const errorBody = await response.text();
+            try {
+                const json = JSON.parse(errorBody);
+                error.text = json.human_readable !== undefined ? json.human_readable : JSON.stringify(json, null, 2);
+            } catch (e) {
+                error.text = errorBody;
+            }
+            maybeShowError(error);
+            return Promise.reject(error);
+        }
+        const result = await response.json();
+        return result;
+    }
+
+    const requests = {
+        getTorrentDetails: (index: number): Promise<TorrentDetails> => {
+            return makeRequest('GET', `/torrents/${index}`, null, false);
+        },
+        getTorrentStats: (index: number): Promise<TorrentStats> => {
+            return makeRequest('GET', `/torrents/${index}/stats`, null, false);
+        }
+    };
+
+    const refreshTorrents = async () => {
+        setTorrentsLoading(true);
+        let torrents: { torrents: Array<TorrentId> } = await makeRequest('GET', '/torrents', null, false).finally(() => setTorrentsLoading(false));
+        setTorrents(torrents.torrents);
+        return torrents;
+    };
+
+    useEffect(() => {
+        let interval = 500;
+        let clear = customSetInterval(async () => {
+            try {
+                await refreshTorrents();
+                setOtherError(null);
+                return interval;
+            } catch (e) {
+                setOtherError(e);
+                console.error(e);
+                return 5000;
+            }
+        }, interval);
+        return clear;
+    }, []);
+
+    const context: ContextType = {
+        setCloseableError,
+        setOtherError,
+        makeRequest,
+        requests,
+        refreshTorrents,
+    }
+
+    return <AppContext.Provider value={context}>
+        <RootContent closeableError={closeableError} otherError={otherError} torrents={torrents} torrentsLoading={torrentsLoading} />
+    </AppContext.Provider >
+}
+
+const Error = (props: { error: ErrorType, remove?: () => void }) => {
+    let { error, remove } = props;
 
-	const Error = ({ error }) => {
     if (error == null) {
         return null;
     }
 
-		let ctx = useContext(AppContext);
+    return (<div className="alert alert-danger fade show" role="alert">
-
+        {error.method && (
-		return (<div className="alert alert-danger alert-dismissible fade show" role="alert">
+            <strong>Error calling {error.method} {error.path}: </strong>
-			<strong>Error ${error.status}:</strong> {error.statusText}<br />
+        )}
-			{error.body}
+        {error.status && (
-			<button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close" onClick={() => ctx.setError(null)}>Close</button>
+            <strong>{error.status} {error.statusText}: </strong>
+        )}
+        {error.text}
+        {
+            remove && (
+                <button type="button" className="close" data-dismiss="alert" aria-label="Close" onClick={remove}>
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            )
+        }
     </div >);
 };
 
-	const FileInput = () => {
+const MagnetInput = () => {
-		const inputRef = useRef();
+    let ctx = useContext(AppContext);
 
-		const inputOnChange = (e) => {
+    // Function to add a torrent from a magnet link
-			let file = e.target.files[0];
+    async function addTorrentFromMagnet(): Promise<void> {
-			makeRequest('POST', '/torrents?overwrite=true', file);
+        const magnetLink = prompt('Enter magnet link:');
-			//			e.target.clear();
+        if (magnetLink) {
+            await ctx.makeRequest('POST', '/torrents?overwrite=true', magnetLink, true);
+            ctx.refreshTorrents();
+        }
     }
 
-		const onClick = (e) => {
+    return <button id="add-magnet-button" className="btn btn-primary mr-2" onClick={addTorrentFromMagnet}>Add Torrent from Magnet Link</button>
+};
+
+const FileInput = () => {
+    const inputRef = useRef<HTMLInputElement>();
+
+    let ctx = useContext(AppContext);
+
+    const inputOnChange = async (e) => {
+        let file = e.target.files[0];
+        await ctx.makeRequest('POST', '/torrents?overwrite=true', file, true);
+        ctx.refreshTorrents();
+    }
+
+    const onClick = () => {
         inputRef.current.click();
     }
 
-		return (<div>
+    return (<>
-			<input type="file" ref={inputRef} id="file-input" accept=".torrent" onChange={inputOnChange} style={{ display: 'none' }} />
+        <input type="file" ref={inputRef} id="file-input" accept=".torrent" onChange={inputOnChange} className='d-none' />
         <button id="upload-file-button" className="btn btn-secondary" onClick={onClick}>Upload .torrent File</button>
-		</div>);
+    </>);
 };
 
 const Buttons = () => {
     return (
         <div id="buttons-container" className="mt-3">
-				<button id="add-magnet-button" className="btn btn-primary mr-2" onClick={addTorrentFromMagnet}>Add Torrent from Magnet Link</button>
+            <MagnetInput />
             <FileInput />
         </div>
     );
+};
+
+const LastErrors = (props: { lastErrors: Array<ErrorType> }) => {
+    return <div>
+        {props.lastErrors.map((e: ErrorType) => (
+            <div className="alert alert-primary" role="alert"></div>
+        ))}
+    </div>
 }
 
-	return <AppContext.Provider value={{ setError: setError }}>
+const RootContent = (props: { closeableError: ErrorType, otherError: ErrorType, torrents: Array<TorrentId>, torrentsLoading: boolean }) => {
-		<Error error={error} />
+    let ctx = useContext(AppContext);
-		<TorrentsList />
+    return <>
+        <Error error={props.closeableError} remove={() => ctx.setCloseableError(null)} />
+        <Error error={props.otherError} />
+        <TorrentsList torrents={props.torrents} loading={props.torrentsLoading} />
         <Buttons />
-	</AppContext.Provider >
+    </>
+};
+
+function torrentIsDone(stats: TorrentStats): boolean {
+    return stats.snapshot.have_bytes == stats.snapshot.total_bytes;
 }
 
 // Render function to display all torrents
 async function displayTorrents() {
     // Get the torrents container
     const torrentsContainer = document.getElementById('output');
-	ReactDOM.render(<Root />, torrentsContainer);
+    const RootMemo = memo(Root, (prev, next) => true);
+    ReactDOM.createRoot(torrentsContainer).render(<StrictMode><RootMemo /></StrictMode>);
 }
 
 // Function to format bytes to GB
@@ -343,9 +438,29 @@ function getCompletionETA(stats: TorrentStats): string {
     }
 }
 
-// Helper function to display API errors in an alert
+function customSetInterval(asyncCallback: any, interval: number) {
-function displayApiError(error: ApiError): void {
+    let timeoutId: number;
-	globalCtx.setError(error);
+    let currentInterval: number = interval;
+
+    const executeCallback = async () => {
+        currentInterval = await asyncCallback();
+        if (currentInterval === null || currentInterval === undefined) {
+            throw 'asyncCallback returned null or undefined';
+        }
+        scheduleNext();
+    }
+
+    let scheduleNext = () => {
+        timeoutId = setTimeout(executeCallback, currentInterval);
+    }
+
+    scheduleNext();
+
+    let clearCustomInterval = () => {
+        clearTimeout(timeoutId);
+    }
+
+    return clearCustomInterval;
 }
 
 // List all torrents on page load and set up auto-refresh
@@ -353,33 +468,5 @@ async function init(): Promise<void> {
     await displayTorrents();
 }
 
-// Function to add a torrent from a magnet link
-async function addTorrentFromMagnet(): Promise<void> {
-	const magnetLink = prompt('Enter magnet link:');
-	if (magnetLink) {
-		await makeRequest('POST', '/torrents?overwrite=true', magnetLink);
-		//		await displayTorrents(); // Refresh the torrent list after adding a new torrent
-	}
-}
-
-// Function to handle file input change
-async function handleFileInputChange(): Promise<void> {
-	const fileInput = document.getElementById('file-input') as HTMLInputElement;
-	const file = fileInput.files?.[0];
-	if (file) {
-		await makeRequest('POST', '/torrents?overwrite=true', file);
-		//		await displayTorrents(); // Refresh the torrent list after adding a new torrent
-	}
-}
-
-// Update the event listener for the file input button
-const fileInputButton = document.getElementById('upload-file-button');
-fileInputButton?.addEventListener('click', () => {
-	const fileInput = document.getElementById('file-input') as HTMLInputElement;
-	fileInput.click();
-});
-
-document.getElementById('file-input')?.addEventListener('change', handleFileInputChange);
-
 // Call init function on page load
 document.addEventListener('DOMContentLoaded', init);

crates/librqbit/webui/src/style.css

@@ -1,82 +0,0 @@
-:root {
-	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-	line-height: 1.5;
-	font-weight: 400;
-
-	color: #222;
-	background-color: #ffffff;
-
-	font-synthesis: none;
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-text-size-adjust: 100%;
-}
-
-body {
-	margin: 0;
-	display: flex;
-	align-items: center;
-	min-height: 100vh;
-}
-
-#app {
-	max-width: 1280px;
-	margin: 0 auto;
-	text-align: center;
-}
-
-img {
-	margin-bottom: 1.5rem;
-}
-
-img:hover {
-	filter: drop-shadow(0 0 2em #673ab8aa);
-}
-
-section {
-	margin-top: 5rem;
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-	column-gap: 1.5rem;
-}
-
-.resource {
-	padding: 0.75rem 1.5rem;
-	border-radius: 0.5rem;
-	text-align: left;
-	text-decoration: none;
-	color: #222;
-	background-color: #f1f1f1;
-	border: 1px solid transparent;
-}
-
-.resource:hover {
-	border: 1px solid #000;
-	box-shadow: 0 25px 50px -12px #673ab888;
-}
-
-@media (max-width: 639px) {
-	#app {
-		margin: 2rem;
-	}
-	section {
-		margin-top: 5rem;
-		grid-template-columns: 1fr;
-		row-gap: 1rem;
-	}
-}
-
-@media (prefers-color-scheme: dark) {
-	:root {
-		color: #ccc;
-		background-color: #1a1a1a;
-	}
-	.resource {
-		color: #ccc;
-		background-color: #161616;
-	}
-	.resource:hover {
-		border: 1px solid #bbb;
-	}
-}