50fc7f2f01
* add tailwindcss * add header component with logo and add torrent buttons * remove bootstrap from few files replace it with tailwindcss classes, add card which diplay all nessesarry information about torrent and current state * Add modal component and reorganize components folder * add useModal hook to render modal though react portal, remove UrlPromptModal and replace it with useModal. * add taliwindcss to Desctop app * removed bootstrap from deleteTorrentModal replace it with useModal * replacing bootstrap with useModal * saving * Saving * Header and cards now look good * Modals still broken... * still doesnt work * Finally it scrolls * Continuing to fix bugs * Continuing to fix bugs * Aler * Getting better * Desktop doesnt work with tailwind somehow * Desktop now works with tailwind * Styles fully work * (De)select all buttons * fix alert styles * Animate progress bar * Progress bar + error colors * Fix error message * Torrent status icon (#56) * add statusIcon component to display icon of the torrent status * change props name and remove isDownloading variable * Tweak styles for icon * Tweak styles * Update styles --------- Co-authored-by: Artur Lozovski <arccik@gmail.com>
72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { ReactNode, useContext, useEffect, useState } from "react";
|
|
import {
|
|
AddTorrentResponse,
|
|
ErrorDetails as ApiErrorDetails,
|
|
} from "../../api-types";
|
|
import { APIContext } from "../../context";
|
|
import { ErrorWithLabel } from "../../rqbit-web";
|
|
import { FileSelectionModal } from "../modal/FileSelectionModal";
|
|
import { Button } from "./Button";
|
|
|
|
export const UploadButton: React.FC<{
|
|
onClick: () => void;
|
|
data: string | File | null;
|
|
resetData: () => void;
|
|
children: ReactNode;
|
|
className?: string;
|
|
}> = ({ onClick, data, resetData, children, className }) => {
|
|
const [loading, setLoading] = useState(false);
|
|
const [listTorrentResponse, setListTorrentResponse] =
|
|
useState<AddTorrentResponse | null>(null);
|
|
const [listTorrentError, setListTorrentError] =
|
|
useState<ErrorWithLabel | null>(null);
|
|
const API = useContext(APIContext);
|
|
|
|
// Get the torrent file list if there's data.
|
|
useEffect(() => {
|
|
if (data === null) {
|
|
return;
|
|
}
|
|
|
|
let t = setTimeout(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const response = await API.uploadTorrent(data, { list_only: true });
|
|
setListTorrentResponse(response);
|
|
} catch (e) {
|
|
setListTorrentError({
|
|
text: "Error listing torrent files",
|
|
details: e as ApiErrorDetails,
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, 0);
|
|
return () => clearTimeout(t);
|
|
}, [data]);
|
|
|
|
const clear = () => {
|
|
resetData();
|
|
setListTorrentError(null);
|
|
setListTorrentResponse(null);
|
|
setLoading(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Button onClick={onClick} className={className}>
|
|
{children}
|
|
</Button>
|
|
|
|
{data && (
|
|
<FileSelectionModal
|
|
onHide={clear}
|
|
listTorrentError={listTorrentError}
|
|
listTorrentResponse={listTorrentResponse}
|
|
data={data}
|
|
listTorrentLoading={loading}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
};
|