uqbar-dao/nectar
1
1
Fork 0
mirror of https://github.com/uqbar-dao/nectar.git synced 2025-01-07 01:56:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

add download/install in progress messages

Browse Source
This commit is contained in:
Tobias Merkle 2024-05-29 11:27:49 -04:00
parent 763c08aa2b
commit c2c00aa4a3
7 changed files with 40 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
kinode/packages/app_store/pkg/ui/assets/index--h2dsLNv.js → kinode/packages/app_store/pkg/ui/assets/index-6VPcHcAg.js
View File

File diff suppressed because one or more lines are too long

1
kinode/packages/app_store/pkg/ui/assets/index-OOHWYMdt.css
View File

File diff suppressed because one or more lines are too long

1
kinode/packages/app_store/pkg/ui/assets/index-QKhqBZTd.css Normal file
View File

File diff suppressed because one or more lines are too long

4
kinode/packages/app_store/pkg/ui/index.html
View File

@ -14,8 +14,8 @@
<meta httpEquiv="X-UA-Compatible" content="IE=edge" /> <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" <meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover" /> 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> <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-OOHWYMdt.css"> <link rel="stylesheet" crossorigin href="/main:app_store:sys/assets/index-QKhqBZTd.css">
</head> </head>
<body> <body>

24
kinode/packages/app_store/ui/src/components/DownloadButton.tsx
View File

@ -18,7 +18,7 @@ export default function DownloadButton({ app, isIcon = false, ...props }: Downlo
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const [mirror, setMirror] = useState(app.metadata?.properties?.mirrors?.[0] || "Other"); const [mirror, setMirror] = useState(app.metadata?.properties?.mirrors?.[0] || "Other");
const [customMirror, setCustomMirror] = useState(""); const [customMirror, setCustomMirror] = useState("");
const [loading, setLoading] = useState(""); const [downloading, setDownloading] = useState("");
useEffect(() => { useEffect(() => {
setMirror(app.metadata?.properties?.mirrors?.[0] || "Other"); setMirror(app.metadata?.properties?.mirrors?.[0] || "Other");
@ -40,12 +40,12 @@ export default function DownloadButton({ app, isIcon = false, ...props }: Downlo
} }
try { try {
setLoading(`Downloading ${getAppName(app)}...`); setDownloading(`Downloading ${getAppName(app)}...`);
await downloadApp(app, targetMirror); await downloadApp(app, targetMirror);
const interval = setInterval(() => { const interval = setInterval(() => {
getMyApp(app) getMyApp(app)
.then(() => { .then(() => {
setLoading(""); setDownloading("");
setShowModal(false); setShowModal(false);
clearInterval(interval); clearInterval(interval);
getMyApps(); getMyApps();
@ -57,7 +57,7 @@ export default function DownloadButton({ app, isIcon = false, ...props }: Downlo
window.alert( window.alert(
`Failed to download app from ${targetMirror}, please try a different mirror.` `Failed to download app from ${targetMirror}, please try a different mirror.`
); );
setLoading(""); setDownloading("");
} }
}, [mirror, customMirror, app, downloadApp, getMyApp]); }, [mirror, customMirror, app, downloadApp, getMyApp]);
@ -72,13 +72,23 @@ export default function DownloadButton({ app, isIcon = false, ...props }: Downlo
'icon clear': isIcon, 'icon clear': isIcon,
'black': !isIcon, 'black': !isIcon,
})} })}
disabled={!!downloading}
onClick={onClick} onClick={onClick}
> >
{isIcon ? <FaDownload /> : 'Download'} {isIcon
? <FaDownload />
: downloading
? 'Downloading...'
: 'Download'}
</button> </button>
<Modal show={showModal} hide={() => setShowModal(false)}> <Modal show={showModal} hide={() => setShowModal(false)}>
{loading ? ( {downloading ? (
<Loader msg={loading} /> <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}> <form className="flex flex-col items-center gap-2" onSubmit={download}>
<h4>Download '{appName}'</h4> <h4>Download '{appName}'</h4>

24
kinode/packages/app_store/ui/src/components/InstallButton.tsx
View File

@ -17,7 +17,7 @@ export default function InstallButton({ app, isIcon = false, ...props }: Install
useAppsStore(); useAppsStore();
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const [caps, setCaps] = useState<string[]>([]); const [caps, setCaps] = useState<string[]>([]);
const [loading, setLoading] = useState(""); const [installing, setInstalling] = useState("");
const onClick = useCallback(async (e: React.MouseEvent<HTMLButtonElement>) => { const onClick = useCallback(async (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault(); e.preventDefault();
@ -29,14 +29,14 @@ export default function InstallButton({ app, isIcon = false, ...props }: Install
const install = useCallback(async () => { const install = useCallback(async () => {
try { try {
setLoading(`Installing ${getAppName(app)}...`); setInstalling(`Installing ${getAppName(app)}...`);
await installApp(app); await installApp(app);
const interval = setInterval(() => { const interval = setInterval(() => {
getMyApp(app) getMyApp(app)
.then((app) => { .then((app) => {
if (!app.installed) return; if (!app.installed) return;
setLoading(""); setInstalling("");
setShowModal(false); setShowModal(false);
clearInterval(interval); clearInterval(interval);
getMyApps(); getMyApps();
@ -46,7 +46,7 @@ export default function InstallButton({ app, isIcon = false, ...props }: Install
} catch (e) { } catch (e) {
console.error(e); console.error(e);
window.alert(`Failed to install, please try again.`); window.alert(`Failed to install, please try again.`);
setLoading(""); setInstalling("");
} }
}, [app, installApp, getMyApp]); }, [app, installApp, getMyApp]);
@ -59,12 +59,22 @@ export default function InstallButton({ app, isIcon = false, ...props }: Install
'icon clear': isIcon 'icon clear': isIcon
})} })}
onClick={onClick} onClick={onClick}
disabled={!!installing}
> >
{isIcon ? <FaI /> : "Install"} {isIcon
? <FaI />
: installing
? 'Installing...'
: "Install"}
</button> </button>
<Modal show={showModal} hide={() => setShowModal(false)}> <Modal show={showModal} hide={() => setShowModal(false)}>
{loading ? ( {installing ? (
<Loader msg={loading} /> <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> <h4>Approve App Permissions</h4>

4
kinode/packages/app_store/ui/src/components/Loader.tsx
View File

@ -6,9 +6,9 @@ type LoaderProps = {
export default function Loader({ msg }: LoaderProps) { export default function Loader({ msg }: LoaderProps) {
return ( return (
<div id="loading" className="flex flex-col text-center"> <div id="loading" className="flex-col-center text-center gap-4">
<h4>{msg}</h4> <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> </div>
) )
} }