mirror of
https://github.com/uqbar-dao/nectar.git
synced 2025-01-03 06:11:01 +03:00
add download/install in progress messages
This commit is contained in:
Tobias Merkle
parent
763c08aa2b
commit
c2c00aa4a3
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -14,8 +14,8 @@
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover" />
|
||||
<script type="module" crossorigin src="/main:app_store:sys/assets/index--h2dsLNv.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/main:app_store:sys/assets/index-OOHWYMdt.css">
|
||||
<script type="module" crossorigin src="/main:app_store:sys/assets/index-6VPcHcAg.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/main:app_store:sys/assets/index-QKhqBZTd.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -18,7 +18,7 @@ export default function DownloadButton({ app, isIcon = false, ...props }: Downlo
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [mirror, setMirror] = useState(app.metadata?.properties?.mirrors?.[0] || "Other");
|
||||
const [customMirror, setCustomMirror] = useState("");
|
||||
const [loading, setLoading] = useState("");
|
||||
const [downloading, setDownloading] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
setMirror(app.metadata?.properties?.mirrors?.[0] || "Other");
|
||||
@ -40,12 +40,12 @@ export default function DownloadButton({ app, isIcon = false, ...props }: Downlo
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(`Downloading ${getAppName(app)}...`);
|
||||
setDownloading(`Downloading ${getAppName(app)}...`);
|
||||
await downloadApp(app, targetMirror);
|
||||
const interval = setInterval(() => {
|
||||
getMyApp(app)
|
||||
.then(() => {
|
||||
setLoading("");
|
||||
setDownloading("");
|
||||
setShowModal(false);
|
||||
clearInterval(interval);
|
||||
getMyApps();
|
||||
@ -57,7 +57,7 @@ export default function DownloadButton({ app, isIcon = false, ...props }: Downlo
|
||||
window.alert(
|
||||
`Failed to download app from ${targetMirror}, please try a different mirror.`
|
||||
);
|
||||
setLoading("");
|
||||
setDownloading("");
|
||||
}
|
||||
}, [mirror, customMirror, app, downloadApp, getMyApp]);
|
||||
|
||||
@ -72,13 +72,23 @@ export default function DownloadButton({ app, isIcon = false, ...props }: Downlo
|
||||
'icon clear': isIcon,
|
||||
'black': !isIcon,
|
||||
})}
|
||||
disabled={!!downloading}
|
||||
onClick={onClick}
|
||||
>
|
||||
{isIcon ? <FaDownload /> : 'Download'}
|
||||
{isIcon
|
||||
? <FaDownload />
|
||||
: downloading
|
||||
? 'Downloading...'
|
||||
: 'Download'}
|
||||
</button>
|
||||
<Modal show={showModal} hide={() => setShowModal(false)}>
|
||||
{loading ? (
|
||||
<Loader msg={loading} />
|
||||
{downloading ? (
|
||||
<div className="flex-col-center">
|
||||
<Loader msg={downloading} />
|
||||
<div className="text-center">
|
||||
App is downloading in the background. You can safely close this window.
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<form className="flex flex-col items-center gap-2" onSubmit={download}>
|
||||
<h4>Download '{appName}'</h4>
|
||||
|
||||
@ -17,7 +17,7 @@ export default function InstallButton({ app, isIcon = false, ...props }: Install
|
||||
useAppsStore();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [caps, setCaps] = useState<string[]>([]);
|
||||
const [loading, setLoading] = useState("");
|
||||
const [installing, setInstalling] = useState("");
|
||||
|
||||
const onClick = useCallback(async (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
@ -29,14 +29,14 @@ export default function InstallButton({ app, isIcon = false, ...props }: Install
|
||||
|
||||
const install = useCallback(async () => {
|
||||
try {
|
||||
setLoading(`Installing ${getAppName(app)}...`);
|
||||
setInstalling(`Installing ${getAppName(app)}...`);
|
||||
await installApp(app);
|
||||
|
||||
const interval = setInterval(() => {
|
||||
getMyApp(app)
|
||||
.then((app) => {
|
||||
if (!app.installed) return;
|
||||
setLoading("");
|
||||
setInstalling("");
|
||||
setShowModal(false);
|
||||
clearInterval(interval);
|
||||
getMyApps();
|
||||
@ -46,7 +46,7 @@ export default function InstallButton({ app, isIcon = false, ...props }: Install
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
window.alert(`Failed to install, please try again.`);
|
||||
setLoading("");
|
||||
setInstalling("");
|
||||
}
|
||||
}, [app, installApp, getMyApp]);
|
||||
|
||||
@ -59,12 +59,22 @@ export default function InstallButton({ app, isIcon = false, ...props }: Install
|
||||
'icon clear': isIcon
|
||||
})}
|
||||
onClick={onClick}
|
||||
disabled={!!installing}
|
||||
>
|
||||
{isIcon ? <FaI /> : "Install"}
|
||||
{isIcon
|
||||
? <FaI />
|
||||
: installing
|
||||
? 'Installing...'
|
||||
: "Install"}
|
||||
</button>
|
||||
<Modal show={showModal} hide={() => setShowModal(false)}>
|
||||
{loading ? (
|
||||
<Loader msg={loading} />
|
||||
{installing ? (
|
||||
<div className="flex-col-center">
|
||||
<Loader msg={installing} />
|
||||
<div className="text-center">
|
||||
App is installing in the background. You can safely close this window.
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<h4>Approve App Permissions</h4>
|
||||
|
||||
@ -6,9 +6,9 @@ type LoaderProps = {
|
||||
|
||||
export default function Loader({ msg }: LoaderProps) {
|
||||
return (
|
||||
<div id="loading" className="flex flex-col text-center">
|
||||
<div id="loading" className="flex-col-center text-center gap-4">
|
||||
<h4>{msg}</h4>
|
||||
<div id="loader"> <div /> <div /> <div /> <div /> </div>
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-r-2 border-gray-900"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user