RosePlugs: inline install button on each row, plus a timeout safety net
This commit is contained in:
parent
986f9a6352
commit
a42d97decb
2 changed files with 68 additions and 18 deletions
|
|
@ -6,21 +6,28 @@ import { NexusPlugin } from "../lib/nexusApi";
|
|||
|
||||
const { ScrollView, Text } = ReactNative;
|
||||
|
||||
// Confirmed live: this could get stuck on "Installing..." forever - the timeout below is a safety
|
||||
// net so a hung installPlugin() call can't leave the button stuck indefinitely.
|
||||
function withTimeout<T>(promise: Promise<T>, ms: number): Promise<T> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const timer = setTimeout(() => reject(new Error("Timed out")), ms);
|
||||
promise.then(
|
||||
(v) => { clearTimeout(timer); resolve(v); },
|
||||
(e) => { clearTimeout(timer); reject(e); },
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export default function PluginDetailSheet({ plugin }: { plugin: NexusPlugin }) {
|
||||
const [installing, setInstalling] = React.useState(false);
|
||||
const alreadyInstalled = plugin.installUrl in installedPlugins;
|
||||
|
||||
const onInstall = React.useCallback(() => {
|
||||
setInstalling(true);
|
||||
installPlugin(plugin.installUrl)
|
||||
.then(() => {
|
||||
setInstalling(false);
|
||||
showToast(`${plugin.name} installed`);
|
||||
})
|
||||
.catch((e: any) => {
|
||||
setInstalling(false);
|
||||
showToast(`Install failed: ${e?.message ?? e}`);
|
||||
});
|
||||
withTimeout(installPlugin(plugin.installUrl), 20000)
|
||||
.then(() => showToast(`${plugin.name} installed`))
|
||||
.catch((e: any) => showToast(`Install failed: ${e?.message ?? e}`))
|
||||
.finally(() => setInstalling(false));
|
||||
}, [plugin.installUrl]);
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { React, ReactNative } from "@vendetta/metro/common";
|
||||
import { plugins as installedPlugins } from "@vendetta/plugins";
|
||||
import { plugins as installedPlugins, installPlugin } from "@vendetta/plugins";
|
||||
import { showCustomAlert } from "@vendetta/ui/alerts";
|
||||
import { showToast } from "@vendetta/ui/toasts";
|
||||
import SettingsScaffold from "@shared/ui/SettingsScaffold";
|
||||
import NoteBox from "@shared/ui/NoteBox";
|
||||
import PrimaryButton from "@shared/ui/PrimaryButton";
|
||||
|
|
@ -8,7 +9,7 @@ import { TableRow, TableRowGroup } from "@shared/ui/table";
|
|||
import { fetchNexusPlugins, NexusPlugin } from "../lib/nexusApi";
|
||||
import PluginDetailSheet from "./PluginDetailSheet";
|
||||
|
||||
const { Text } = ReactNative;
|
||||
const { Text, View, TouchableOpacity } = ReactNative;
|
||||
|
||||
interface BrowserState {
|
||||
loading: boolean;
|
||||
|
|
@ -16,8 +17,22 @@ interface BrowserState {
|
|||
plugins: NexusPlugin[];
|
||||
}
|
||||
|
||||
// Confirmed live: installing from the detail sheet could get stuck on "Installing..." forever -
|
||||
// the promise from installPlugin wasn't reliably settling. This timeout is a safety net so a hung
|
||||
// call can't leave a row stuck indefinitely, on top of moving the action to an inline button.
|
||||
function withTimeout<T>(promise: Promise<T>, ms: number): Promise<T> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const timer = setTimeout(() => reject(new Error("Timed out")), ms);
|
||||
promise.then(
|
||||
(v) => { clearTimeout(timer); resolve(v); },
|
||||
(e) => { clearTimeout(timer); reject(e); },
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export default function PluginsBrowser() {
|
||||
const [state, setState] = React.useState<BrowserState>({ loading: true, error: null, plugins: [] });
|
||||
const [installingId, setInstallingId] = React.useState<string | null>(null);
|
||||
|
||||
const load = React.useCallback(() => {
|
||||
setState((s) => ({ ...s, loading: true, error: null }));
|
||||
|
|
@ -30,6 +45,14 @@ export default function PluginsBrowser() {
|
|||
load();
|
||||
}, [load]);
|
||||
|
||||
const onInstall = React.useCallback((plugin: NexusPlugin) => {
|
||||
setInstallingId(plugin.id);
|
||||
withTimeout(installPlugin(plugin.installUrl), 20000)
|
||||
.then(() => showToast(`${plugin.name} installed`))
|
||||
.catch((e: any) => showToast(`Install failed: ${e?.message ?? e}`))
|
||||
.finally(() => setInstallingId(null));
|
||||
}, []);
|
||||
|
||||
if (state.loading) {
|
||||
return (
|
||||
<SettingsScaffold>
|
||||
|
|
@ -60,19 +83,39 @@ export default function PluginsBrowser() {
|
|||
<TableRowGroup key={category} title={category}>
|
||||
{plugins.map((plugin) => {
|
||||
const installed = plugin.installUrl in installedPlugins;
|
||||
const installing = installingId === plugin.id;
|
||||
return (
|
||||
<TableRow
|
||||
key={plugin.id}
|
||||
label={plugin.name}
|
||||
subLabel={installed ? "Installed" : plugin.tagline || plugin.description}
|
||||
trailing={
|
||||
plugin.status && plugin.status !== "default" ? (
|
||||
<Text style={{ fontSize: 11, fontWeight: "700", opacity: 0.7 }}>
|
||||
{plugin.status.toUpperCase()}
|
||||
</Text>
|
||||
) : installed ? (
|
||||
<Text style={{ fontSize: 14, fontWeight: "700", color: "#23A55A" }}>✓</Text>
|
||||
) : undefined
|
||||
<View style={{ flexDirection: "row", alignItems: "center" }}>
|
||||
{plugin.status && plugin.status !== "default" && (
|
||||
<Text style={{ fontSize: 11, fontWeight: "700", opacity: 0.7, marginRight: 8 }}>
|
||||
{plugin.status.toUpperCase()}
|
||||
</Text>
|
||||
)}
|
||||
{installed ? (
|
||||
<Text style={{ fontSize: 14, fontWeight: "700", color: "#23A55A" }}>✓</Text>
|
||||
) : (
|
||||
<TouchableOpacity
|
||||
disabled={installing}
|
||||
onPress={() => onInstall(plugin)}
|
||||
style={{
|
||||
backgroundColor: "#5865F2",
|
||||
borderRadius: 6,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 5,
|
||||
opacity: installing ? 0.6 : 1,
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: "white", fontSize: 12, fontWeight: "600" }}>
|
||||
{installing ? "Installing…" : "Install"}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
}
|
||||
onPress={() => showCustomAlert(PluginDetailSheet, { plugin })}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue