leyoda/rqbit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Strict typescript

Browse source
This commit is contained in:
Igor Katson 2023-12-02 14:49:44 +00:00
parent 21b644e394
commit a2bb1220a9
No known key found for this signature in database
GPG key ID: B4EC22B66D61A3F5
5 changed files with 78 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

2
crates/librqbit/webui/src/api-types.ts
View file

@ -112,7 +112,7 @@ export interface RqbitAPI {
listOnly?: boolean, listOnly?: boolean,
selectedFiles?: Array<number>, selectedFiles?: Array<number>,
unpopularTorrent?: boolean, unpopularTorrent?: boolean,
initialPeers?: Array<string>, initialPeers?: Array<string> | null,
}) => Promise<AddTorrentResponse>; }) => Promise<AddTorrentResponse>;
pause: (index: number) => Promise<void>; pause: (index: number) => Promise<void>;

2
crates/librqbit/webui/src/api.ts → crates/librqbit/webui/src/http-api.ts
View file

@ -59,7 +59,7 @@ export const API: RqbitAPI = {
listOnly?: boolean, listOnly?: boolean,
selectedFiles?: Array<number>, selectedFiles?: Array<number>,
unpopularTorrent?: boolean, unpopularTorrent?: boolean,
initialPeers?: Array<string>, initialPeers?: Array<string> | null,
}): Promise<AddTorrentResponse> => { }): Promise<AddTorrentResponse> => {
opts = opts || {}; opts = opts || {};
let url = '/torrents?&overwrite=true'; let url = '/torrents?&overwrite=true';

4
crates/librqbit/webui/src/main.tsx
View file

@ -1,9 +1,9 @@
import { StrictMode } from "react"; import { StrictMode } from "react";
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import { RqbitWebUI } from "./rqbit-web"; import { RqbitWebUI } from "./rqbit-web";
import { API } from "./api"; import { API } from "./http-api";
globalThis.API = API; globalThis.API = API;
const torrentsContainer = document.getElementById('app'); const torrentsContainer = document.getElementById('app') as HTMLInputElement;
ReactDOM.createRoot(torrentsContainer).render(<StrictMode><RqbitWebUI /></StrictMode >); ReactDOM.createRoot(torrentsContainer).render(<StrictMode><RqbitWebUI /></StrictMode >);

116
crates/librqbit/webui/src/rqbit-web.tsx
View file

@ -1,6 +1,6 @@
import { createContext, useContext, useEffect, useRef, useState } from 'react'; import { MouseEventHandler, RefObject, createContext, useContext, useEffect, useRef, useState } from 'react';
import { ProgressBar, Button, Container, Row, Col, Alert, Modal, Form, Spinner } from 'react-bootstrap'; import { ProgressBar, Button, Container, Row, Col, Alert, Modal, Form, Spinner } from 'react-bootstrap';
import { AddTorrentResponse, TorrentDetails, TorrentId, TorrentStats, ErrorDetails as ApiErrorDetails, STATE_INITIALIZING, STATE_LIVE, STATE_PAUSED, STATE_ERROR, RqbitAPI } from './api-types'; import { AddTorrentResponse, TorrentDetails, TorrentId, TorrentStats, ErrorDetails as ApiErrorDetails, STATE_INITIALIZING, STATE_LIVE, STATE_PAUSED, STATE_ERROR, RqbitAPI, ErrorDetails } from './api-types';
declare const API: RqbitAPI; declare const API: RqbitAPI;
@ -10,12 +10,15 @@ interface Error {
} }
interface ContextType { interface ContextType {
setCloseableError: (error: Error) => void, setCloseableError: (error: Error | null) => void,
refreshTorrents: () => void, refreshTorrents: () => void,
} }
const AppContext = createContext<ContextType>(null); const AppContext = createContext<ContextType>({
const RefreshTorrentStatsContext = createContext<{ refresh: () => void }>(null); setCloseableError: (_) => { },
refreshTorrents: () => { },
});
const RefreshTorrentStatsContext = createContext({ refresh: () => { } });
const IconButton: React.FC<{ const IconButton: React.FC<{
className: string, className: string,
@ -23,7 +26,7 @@ const IconButton: React.FC<{
disabled?: boolean, disabled?: boolean,
color?: string, color?: string,
}> = ({ className, onClick, disabled, color }) => { }> = ({ className, onClick, disabled, color }) => {
const onClickStopPropagation = (e) => { const onClickStopPropagation: MouseEventHandler<HTMLAnchorElement> = (e) => {
e.stopPropagation(); e.stopPropagation();
if (disabled) { if (disabled) {
return; return;
@ -33,12 +36,16 @@ const IconButton: React.FC<{
return <a className={`bi ${className} p-1`} onClick={onClickStopPropagation} href='#'></a> return <a className={`bi ${className} p-1`} onClick={onClickStopPropagation} href='#'></a>
} }
const DeleteTorrentModal = ({ id, show, onHide }) => { const DeleteTorrentModal: React.FC<{
id: number,
show: boolean,
onHide: () => void
}> = ({ id, show, onHide }) => {
if (!show) { if (!show) {
return null; return null;
} }
const [deleteFiles, setDeleteFiles] = useState(false); const [deleteFiles, setDeleteFiles] = useState(false);
const [error, setError] = useState<Error>(null); const [error, setError] = useState<Error | null>(null);
const [deleting, setDeleting] = useState(false); const [deleting, setDeleting] = useState(false);
const ctx = useContext(AppContext); const ctx = useContext(AppContext);
@ -152,7 +159,9 @@ const TorrentActions: React.FC<{
} }
const TorrentRow: React.FC<{ const TorrentRow: React.FC<{
id: number, detailsResponse: TorrentDetails, statsResponse: TorrentStats id: number,
detailsResponse: TorrentDetails | null,
statsResponse: TorrentStats | null
}> = ({ id, detailsResponse, statsResponse }) => { }> = ({ id, detailsResponse, statsResponse }) => {
const state = statsResponse?.state ?? ""; const state = statsResponse?.state ?? "";
const error = statsResponse?.error; const error = statsResponse?.error;
@ -182,7 +191,7 @@ const TorrentRow: React.FC<{
case STATE_ERROR: return 'Error'; case STATE_ERROR: return 'Error';
} }
return statsResponse.live?.download_speed.human_readable ?? "N/A"; return statsResponse?.live?.download_speed.human_readable ?? "N/A";
} }
let classNames = []; let classNames = [];
@ -242,9 +251,12 @@ const Column: React.FC<{
</Col> </Col>
); );
const Torrent = ({ id, torrent }) => { const Torrent: React.FC<{
const [detailsResponse, updateDetailsResponse] = useState<TorrentDetails>(null); id: number,
const [statsResponse, updateStatsResponse] = useState<TorrentStats>(null); torrent: TorrentId
}> = ({ id, torrent }) => {
const [detailsResponse, updateDetailsResponse] = useState<TorrentDetails | null>(null);
const [statsResponse, updateStatsResponse] = useState<TorrentStats | null>(null);
const [forceStatsRefresh, setForceStatsRefresh] = useState(0); const [forceStatsRefresh, setForceStatsRefresh] = useState(0);
const forceStatsRefreshCallback = () => { const forceStatsRefreshCallback = () => {
@ -288,7 +300,7 @@ const Torrent = ({ id, torrent }) => {
</RefreshTorrentStatsContext.Provider > </RefreshTorrentStatsContext.Provider >
} }
const TorrentsList = (props: { torrents: Array<TorrentId>, loading: boolean }) => { const TorrentsList = (props: { torrents: Array<TorrentId> | null, loading: boolean }) => {
if (props.torrents === null && props.loading) { if (props.torrents === null && props.loading) {
return <Spinner /> return <Spinner />
} }
@ -310,10 +322,10 @@ const TorrentsList = (props: { torrents: Array<TorrentId>, loading: boolean }) =
}; };
export const RqbitWebUI = () => { export const RqbitWebUI = () => {
const [closeableError, setCloseableError] = useState<Error>(null); const [closeableError, setCloseableError] = useState<Error | null>(null);
const [otherError, setOtherError] = useState<Error>(null); const [otherError, setOtherError] = useState<Error | null>(null);
const [torrents, setTorrents] = useState<Array<TorrentId>>(null); const [torrents, setTorrents] = useState<Array<TorrentId> | null>(null);
const [torrentsLoading, setTorrentsLoading] = useState(false); const [torrentsLoading, setTorrentsLoading] = useState(false);
const refreshTorrents = async () => { const refreshTorrents = async () => {
@ -351,7 +363,7 @@ export const RqbitWebUI = () => {
</AppContext.Provider > </AppContext.Provider >
} }
const ErrorDetails = (props: { details: ApiErrorDetails }) => { const ErrorDetails = (props: { details: ApiErrorDetails | null | undefined }) => {
let { details } = props; let { details } = props;
if (!details) { if (!details) {
return null; return null;
@ -363,7 +375,7 @@ const ErrorDetails = (props: { details: ApiErrorDetails }) => {
} }
const ErrorComponent = (props: { error: Error, remove?: () => void }) => { const ErrorComponent = (props: { error: Error | null, remove?: () => void }) => {
let { error, remove } = props; let { error, remove } = props;
if (error == null) { if (error == null) {
@ -377,13 +389,16 @@ const ErrorComponent = (props: { error: Error, remove?: () => void }) => {
</Alert>); </Alert>);
}; };
const UploadButton = ({ buttonText, onClick, data, resetData, variant }) => { const UploadButton: React.FC<{
buttonText: string,
onClick: () => void,
data: string | File | null,
resetData: () => void,
variant: string,
}> = ({ buttonText, onClick, data, resetData, variant }) => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [listTorrentResponse, setListTorrentResponse] = useState<AddTorrentResponse>(null); const [listTorrentResponse, setListTorrentResponse] = useState<AddTorrentResponse | null>(null);
const [listTorrentError, setListTorrentError] = useState<Error>(null); const [listTorrentError, setListTorrentError] = useState<Error | null>(null);
const ctx = useContext(AppContext);
const showModal = data !== null || listTorrentError !== null;
// Get the torrent file list if there's data. // Get the torrent file list if there's data.
useEffect(() => { useEffect(() => {
@ -397,7 +412,7 @@ const UploadButton = ({ buttonText, onClick, data, resetData, variant }) => {
const response = await API.uploadTorrent(data, { listOnly: true }); const response = await API.uploadTorrent(data, { listOnly: true });
setListTorrentResponse(response); setListTorrentResponse(response);
} catch (e) { } catch (e) {
setListTorrentError({ text: 'Error listing torrent files', details: e }); setListTorrentError({ text: 'Error listing torrent files', details: e as ErrorDetails });
} finally { } finally {
setLoading(false); setLoading(false);
} }
@ -418,14 +433,13 @@ const UploadButton = ({ buttonText, onClick, data, resetData, variant }) => {
{buttonText} {buttonText}
</Button> </Button>
<FileSelectionModal {data && <FileSelectionModal
show={showModal}
onHide={clear} onHide={clear}
listTorrentError={listTorrentError} listTorrentError={listTorrentError}
listTorrentResponse={listTorrentResponse} listTorrentResponse={listTorrentResponse}
data={data} data={data}
listTorrentLoading={loading} listTorrentLoading={loading}
/> />}
</> </>
); );
}; };
@ -463,9 +477,9 @@ const UrlPromptModal: React.FC<{
} }
const MagnetInput = () => { const MagnetInput = () => {
let [magnet, setMagnet] = useState(null); let [magnet, setMagnet] = useState<string | null>(null);
let [showModal, setShowModal] = useState(null); let [showModal, setShowModal] = useState(false);
const onClick = () => { const onClick = () => {
const m = prompt('Enter magnet link or HTTP(s) URL'); const m = prompt('Enter magnet link or HTTP(s) URL');
@ -487,11 +501,11 @@ const MagnetInput = () => {
<UrlPromptModal <UrlPromptModal
show={showModal} show={showModal}
setUrl={(url) => { setUrl={(url) => {
setShowModal(null); setShowModal(false);
setMagnet(url); setMagnet(url);
}} }}
cancel={() => { cancel={() => {
setShowModal(null); setShowModal(false);
setMagnet(null); setMagnet(null);
}} /> }} />
</> </>
@ -499,20 +513,29 @@ const MagnetInput = () => {
}; };
const FileInput = () => { const FileInput = () => {
const inputRef = useRef<HTMLInputElement>(); const inputRef = useRef<HTMLInputElement>() as RefObject<HTMLInputElement>;
const [file, setFile] = useState(null); const [file, setFile] = useState<File | null>(null);
const onFileChange = async () => { const onFileChange = async () => {
if (!inputRef?.current?.files) {
return;
}
const file = inputRef.current.files[0]; const file = inputRef.current.files[0];
setFile(file); setFile(file);
}; };
const reset = () => { const reset = () => {
if (!inputRef?.current) {
return;
}
inputRef.current.value = ''; inputRef.current.value = '';
setFile(null); setFile(null);
} }
const onClick = () => { const onClick = () => {
if (!inputRef?.current) {
return;
}
inputRef.current.click(); inputRef.current.click();
} }
@ -531,18 +554,17 @@ const FileInput = () => {
}; };
const FileSelectionModal = (props: { const FileSelectionModal = (props: {
show: boolean,
onHide: () => void, onHide: () => void,
listTorrentResponse: AddTorrentResponse, listTorrentResponse: AddTorrentResponse | null,
listTorrentError: Error, listTorrentError: Error | null,
listTorrentLoading: boolean, listTorrentLoading: boolean,
data: string | File, data: string | File,
}) => { }) => {
let { show, onHide, listTorrentResponse, listTorrentError, listTorrentLoading, data } = props; let { onHide, listTorrentResponse, listTorrentError, listTorrentLoading, data } = props;
const [selectedFiles, setSelectedFiles] = useState([]); const [selectedFiles, setSelectedFiles] = useState<number[]>([]);
const [uploading, setUploading] = useState(false); const [uploading, setUploading] = useState(false);
const [uploadError, setUploadError] = useState<Error>(null); const [uploadError, setUploadError] = useState<Error | null>(null);
const [unpopularTorrent, setUnpopularTorrent] = useState(false); const [unpopularTorrent, setUnpopularTorrent] = useState(false);
const ctx = useContext(AppContext); const ctx = useContext(AppContext);
@ -566,6 +588,9 @@ const FileSelectionModal = (props: {
}; };
const handleUpload = async () => { const handleUpload = async () => {
if (!listTorrentResponse) {
return;
}
setUploading(true); setUploading(true);
let initialPeers = listTorrentResponse.seen_peers ? listTorrentResponse.seen_peers.slice(0, 32) : null; let initialPeers = listTorrentResponse.seen_peers ? listTorrentResponse.seen_peers.slice(0, 32) : null;
API.uploadTorrent(data, { selectedFiles, unpopularTorrent, initialPeers }).then(() => { API.uploadTorrent(data, { selectedFiles, unpopularTorrent, initialPeers }).then(() => {
@ -616,7 +641,7 @@ const FileSelectionModal = (props: {
}; };
return ( return (
<Modal show={show} onHide={clear} size='lg'> <Modal show onHide={clear} size='lg'>
<Modal.Header closeButton> <Modal.Header closeButton>
<Modal.Title>Add torrent</Modal.Title> <Modal.Title>Add torrent</Modal.Title>
</Modal.Header> </Modal.Header>
@ -646,7 +671,12 @@ const Buttons = () => {
); );
}; };
const RootContent = (props: { closeableError: ApiErrorDetails, otherError: ApiErrorDetails, torrents: Array<TorrentId>, torrentsLoading: boolean }) => { const RootContent = (props: {
closeableError: ApiErrorDetails | null,
otherError: ApiErrorDetails | null,
torrents: Array<TorrentId> | null,
torrentsLoading: boolean
}) => {
let ctx = useContext(AppContext); let ctx = useContext(AppContext);
return <Container> return <Container>
<ErrorComponent error={props.closeableError} remove={() => ctx.setCloseableError(null)} /> <ErrorComponent error={props.closeableError} remove={() => ctx.setCloseableError(null)} />

2
crates/librqbit/webui/tsconfig.json
View file

@ -6,9 +6,9 @@
"noEmit": true, "noEmit": true,
"allowJs": true, "allowJs": true,
"checkJs": true, "checkJs": true,
/* Preact Config */
"jsx": "react-jsx", "jsx": "react-jsx",
"skipLibCheck": true, "skipLibCheck": true,
"strict": true,
}, },
"include": [ "include": [
"node_modules/vite/client.d.ts", "node_modules/vite/client.d.ts",