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>
91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
import { useContext, useState } from "react";
|
|
import { TorrentStats } from "../../api-types";
|
|
import {
|
|
AppContext,
|
|
APIContext,
|
|
RefreshTorrentStatsContext,
|
|
} from "../../context";
|
|
import { IconButton } from "./IconButton";
|
|
import { DeleteTorrentModal } from "../modal/DeleteTorrentModal";
|
|
import { FaPause, FaPlay, FaTrash } from "react-icons/fa";
|
|
|
|
export const TorrentActions: React.FC<{
|
|
id: number;
|
|
statsResponse: TorrentStats;
|
|
}> = ({ id, statsResponse }) => {
|
|
let state = statsResponse.state;
|
|
|
|
let [disabled, setDisabled] = useState<boolean>(false);
|
|
let [deleting, setDeleting] = useState<boolean>(false);
|
|
|
|
let refreshCtx = useContext(RefreshTorrentStatsContext);
|
|
|
|
const canPause = state == "live";
|
|
const canUnpause = state == "paused" || state == "error";
|
|
|
|
const ctx = useContext(AppContext);
|
|
const API = useContext(APIContext);
|
|
|
|
const unpause = () => {
|
|
setDisabled(true);
|
|
API.start(id)
|
|
.then(
|
|
() => {
|
|
refreshCtx.refresh();
|
|
},
|
|
(e) => {
|
|
ctx.setCloseableError({
|
|
text: `Error starting torrent id=${id}`,
|
|
details: e,
|
|
});
|
|
}
|
|
)
|
|
.finally(() => setDisabled(false));
|
|
};
|
|
|
|
const pause = () => {
|
|
setDisabled(true);
|
|
API.pause(id)
|
|
.then(
|
|
() => {
|
|
refreshCtx.refresh();
|
|
},
|
|
(e) => {
|
|
ctx.setCloseableError({
|
|
text: `Error pausing torrent id=${id}`,
|
|
details: e,
|
|
});
|
|
}
|
|
)
|
|
.finally(() => setDisabled(false));
|
|
};
|
|
|
|
const startDeleting = () => {
|
|
setDisabled(true);
|
|
setDeleting(true);
|
|
};
|
|
|
|
const cancelDeleting = () => {
|
|
setDisabled(false);
|
|
setDeleting(false);
|
|
};
|
|
|
|
return (
|
|
<div className="flex w-full justify-center gap-2">
|
|
{canUnpause && (
|
|
<IconButton onClick={unpause} disabled={disabled}>
|
|
<FaPlay className="hover:text-green-500 transition-colors duration-300" />
|
|
</IconButton>
|
|
)}
|
|
{canPause && (
|
|
<IconButton onClick={pause} disabled={disabled}>
|
|
<FaPause className="hover:text-yellow-500 transition-colors duration-300" />
|
|
</IconButton>
|
|
)}
|
|
<IconButton onClick={startDeleting} disabled={disabled}>
|
|
<FaTrash className="hover:text-red-500 transition-colors duration-500" />
|
|
</IconButton>
|
|
<DeleteTorrentModal id={id} show={deleting} onHide={cancelDeleting} />
|
|
</div>
|
|
);
|
|
};
|