revenge-mod/Revenge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[UI] Implement and use ErrorBoundary

Browse source
This commit is contained in:
Beef 2023-02-26 02:20:01 +00:00
parent 8354b3806c
commit c3f7d60d85
10 changed files with 279 additions and 206 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/ui/settings/pages/AssetBrowser.tsx
View file

@ -1,6 +1,7 @@
import { ReactNative as RN, stylesheet } from "@metro/common";
import { Forms, Search } from "@ui/components";
import { all } from "@ui/assets";
import ErrorBoundary from "@ui/components/ErrorBoundary";
import AssetDisplay from "@ui/settings/components/AssetDisplay";
const { FormDivider } = Forms;
@ -19,22 +20,24 @@ export default function AssetBrowser() {
const [search, setSearch] = React.useState("");
return (
<RN.View style={{ flex: 1 }}>
<Search
style={styles.search}
onChangeText={(v: string) => setSearch(v)}
placeholder="Search"
/>
<RN.FlatList
data={Object.values(all).filter(a => a.name.includes(search) || a.id.toString() === search)}
renderItem={({ item }) => (
<>
<AssetDisplay asset={item} />
<FormDivider />
</>
)}
keyExtractor={item => item.name}
/>
</RN.View>
<ErrorBoundary>
<RN.View style={{ flex: 1 }}>
<Search
style={styles.search}
onChangeText={(v: string) => setSearch(v)}
placeholder="Search"
/>
<RN.FlatList
data={Object.values(all).filter(a => a.name.includes(search) || a.id.toString() === search)}
renderItem={({ item }) => (
<>
<AssetDisplay asset={item} />
<FormDivider />
</>
)}
keyExtractor={item => item.name}
/>
</RN.View>
</ErrorBoundary>
)
}

152
src/ui/settings/pages/Developer.tsx
View file

@ -1,22 +1,14 @@
import { ReactNative as RN, NavigationNative, stylesheet, constants } from "@metro/common";
import { Forms, General } from "@ui/components";
import { ReactNative as RN, NavigationNative } from "@metro/common";
import { Forms } from "@ui/components";
import { getAssetIDByName } from "@ui/assets";
import { showToast } from "@ui/toasts";
import { connectToDebugger } from "@lib/debug";
import { useProxy } from "@lib/storage";
import settings, { loaderConfig } from "@lib/settings";
import logger from "@lib/logger";
import ErrorBoundary from "@ui/components/ErrorBoundary";
const { FormSection, FormRow, FormSwitchRow, FormInput, FormDivider } = Forms;
const { Text } = General;
const styles = stylesheet.createThemedStyleSheet({
code: {
fontFamily: constants.Fonts.CODE_SEMIBOLD,
includeFontPadding: false,
fontSize: 12,
}
});
export default function Developer() {
const navigation = NavigationNative.useNavigation();
@ -25,78 +17,80 @@ export default function Developer() {
useProxy(loaderConfig);
return (
<RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}>
<FormSection title="Debug" titleStyleType="no_border">
<FormInput
value={settings.debuggerUrl}
onChange={(v: string) => settings.debuggerUrl = v}
placeholder="127.0.0.1:9090"
title="DEBUGGER URL"
/>
<FormDivider />
<FormRow
label="Connect to debug websocket"
leading={<FormRow.Icon source={getAssetIDByName("copy")} />}
onPress={() => connectToDebugger(settings.debuggerUrl)}
/>
{window.__vendetta_rdc && <>
<ErrorBoundary>
<RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}>
<FormSection title="Debug" titleStyleType="no_border">
<FormInput
value={settings.debuggerUrl}
onChange={(v: string) => settings.debuggerUrl = v}
placeholder="127.0.0.1:9090"
title="DEBUGGER URL"
/>
<FormDivider />
<FormRow
label="Connect to React DevTools"
leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
onPress={() => {
try {
window.__vendetta_rdc?.connectToDevTools({
host: settings.debuggerUrl.split(":")?.[0],
resolveRNStyle: RN.StyleSheet.flatten,
});
} catch (e) {
// TODO: Check if this ever actually catches anything
logger.error("Failed to connect to React DevTools!", e);
showToast("Failed to connect to React DevTools!", getAssetIDByName("Small"));
}
label="Connect to debug websocket"
leading={<FormRow.Icon source={getAssetIDByName("copy")} />}
onPress={() => connectToDebugger(settings.debuggerUrl)}
/>
{window.__vendetta_rdc && <>
<FormDivider />
<FormRow
label="Connect to React DevTools"
leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
onPress={() => {
try {
window.__vendetta_rdc?.connectToDevTools({
host: settings.debuggerUrl.split(":")?.[0],
resolveRNStyle: RN.StyleSheet.flatten,
});
} catch (e) {
// TODO: Check if this ever actually catches anything
logger.error("Failed to connect to React DevTools!", e);
showToast("Failed to connect to React DevTools!", getAssetIDByName("Small"));
}
}}
/>
</>}
</FormSection>
{window.__vendetta_loader?.features.loaderConfig && <FormSection title="Loader config">
<FormSwitchRow
label="Load from custom url"
subLabel={"Load Vendetta from a custom endpoint."}
leading={<FormRow.Icon source={getAssetIDByName("copy")} />}
value={loaderConfig.customLoadUrl.enabled}
onValueChange={(v: boolean) => {
loaderConfig.customLoadUrl.enabled = v;
}}
/>
</>}
</FormSection>
{window.__vendetta_loader?.features.loaderConfig && <FormSection title="Loader config">
<FormSwitchRow
label="Load from custom url"
subLabel={"Load Vendetta from a custom endpoint."}
leading={<FormRow.Icon source={getAssetIDByName("copy")} />}
value={loaderConfig.customLoadUrl.enabled}
onValueChange={(v: boolean) => {
loaderConfig.customLoadUrl.enabled = v;
}}
/>
<FormDivider />
{loaderConfig.customLoadUrl.enabled && <>
<FormInput
value={loaderConfig.customLoadUrl.url}
onChange={(v: string) => loaderConfig.customLoadUrl.url = v}
placeholder="http://localhost:4040/vendetta.js"
title="VENDETTA URL"
/>
<FormDivider />
</>}
{window.__vendetta_loader.features.devtools && <FormSwitchRow
label="Load React DevTools"
subLabel={`Version: ${window.__vendetta_loader.features.devtools.version}`}
leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
value={loaderConfig.loadReactDevTools}
onValueChange={(v: boolean) => {
loaderConfig.loadReactDevTools = v;
}}
/>}
</FormSection>}
<FormSection title="Other">
<FormRow
label="Asset Browser"
leading={<FormRow.Icon source={getAssetIDByName("ic_media_upload")} />}
trailing={FormRow.Arrow}
onPress={() => navigation.push("VendettaAssetBrowser")}
/>
</FormSection>
</RN.ScrollView>
{loaderConfig.customLoadUrl.enabled && <>
<FormInput
value={loaderConfig.customLoadUrl.url}
onChange={(v: string) => loaderConfig.customLoadUrl.url = v}
placeholder="http://localhost:4040/vendetta.js"
title="VENDETTA URL"
/>
<FormDivider />
</>}
{window.__vendetta_loader.features.devtools && <FormSwitchRow
label="Load React DevTools"
subLabel={`Version: ${window.__vendetta_loader.features.devtools.version}`}
leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
value={loaderConfig.loadReactDevTools}
onValueChange={(v: boolean) => {
loaderConfig.loadReactDevTools = v;
}}
/>}
</FormSection>}
<FormSection title="Other">
<FormRow
label="Asset Browser"
leading={<FormRow.Icon source={getAssetIDByName("ic_media_upload")} />}
trailing={FormRow.Arrow}
onPress={() => navigation.push("VendettaAssetBrowser")}
/>
</FormSection>
</RN.ScrollView>
</ErrorBoundary>
)
}

107
src/ui/settings/pages/General.tsx
View file

@ -6,6 +6,7 @@ import { getDebugInfo } from "@lib/debug";
import { useProxy } from "@lib/storage";
import settings from "@lib/settings";
import Version from "@ui/settings/components/Version";
import ErrorBoundary from "@ui/components/ErrorBoundary";
const { FormRow, FormSwitchRow, FormSection, FormDivider } = Forms;
const debugInfo = getDebugInfo();
@ -80,57 +81,59 @@ export default function General() {
];
return (
<RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}>
<FormSection title="Links" titleStyleType="no_border">
<FormRow
label="Discord Server"
leading={<FormRow.Icon source={getAssetIDByName("Discord")} />}
trailing={FormRow.Arrow}
onPress={() => invites.acceptInviteAndTransitionToInviteChannel({ inviteKey: DISCORD_SERVER })}
/>
<FormDivider />
<FormRow
label="GitHub"
leading={<FormRow.Icon source={getAssetIDByName("img_account_sync_github_white")} />}
trailing={FormRow.Arrow}
onPress={() => url.openURL(GITHUB)}
/>
</FormSection>
<FormSection title="Actions">
<FormRow
label="Reload Discord"
leading={<FormRow.Icon source={getAssetIDByName("ic_message_retry")} />}
onPress={() => RN.NativeModules.BundleUpdaterManager.reload()}
/>
<FormDivider />
<FormSwitchRow
label="Developer Settings"
leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
value={settings.developerSettings}
onValueChange={(v: boolean) => {
settings.developerSettings = v;
}}
/>
</FormSection>
<FormSection title="Info">
<Summary label="Versions" icon="ic_information_filled_24px">
{versions.map((v, i) => (
<>
<Version label={v.label} version={v.version} icon={v.icon} />
{i !== versions.length - 1 && <FormDivider />}
</>
))}
</Summary>
<FormDivider />
<Summary label="Platform" icon="ic_mobile_device">
{platformInfo.map((p, i) => (
<>
<Version label={p.label} version={p.version} icon={p.icon} />
{i !== platformInfo.length - 1 && <FormDivider />}
</>
))}
</Summary>
</FormSection>
</RN.ScrollView>
<ErrorBoundary>
<RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}>
<FormSection title="Links" titleStyleType="no_border">
<FormRow
label="Discord Server"
leading={<FormRow.Icon source={getAssetIDByName("Discord")} />}
trailing={FormRow.Arrow}
onPress={() => invites.acceptInviteAndTransitionToInviteChannel({ inviteKey: DISCORD_SERVER })}
/>
<FormDivider />
<FormRow
label="GitHub"
leading={<FormRow.Icon source={getAssetIDByName("img_account_sync_github_white")} />}
trailing={FormRow.Arrow}
onPress={() => url.openURL(GITHUB)}
/>
</FormSection>
<FormSection title="Actions">
<FormRow
label="Reload Discord"
leading={<FormRow.Icon source={getAssetIDByName("ic_message_retry")} />}
onPress={() => RN.NativeModules.BundleUpdaterManager.reload()}
/>
<FormDivider />
<FormSwitchRow
label="Developer Settings"
leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
value={settings.developerSettings}
onValueChange={(v: boolean) => {
settings.developerSettings = v;
}}
/>
</FormSection>
<FormSection title="Info">
<Summary label="Versions" icon="ic_information_filled_24px">
{versions.map((v, i) => (
<>
<Version label={v.label} version={v.version} icon={v.icon} />
{i !== versions.length - 1 && <FormDivider />}
</>
))}
</Summary>
<FormDivider />
<Summary label="Platform" icon="ic_mobile_device">
{platformInfo.map((p, i) => (
<>
<Version label={p.label} version={p.version} icon={p.icon} />
{i !== platformInfo.length - 1 && <FormDivider />}
</>
))}
</Summary>
</FormSection>
</RN.ScrollView>
</ErrorBoundary>
)
}

55
src/ui/settings/pages/Plugins.tsx
View file

@ -5,6 +5,7 @@ import { getAssetIDByName } from "@ui/assets";
import { useProxy } from "@lib/storage";
import { plugins, installPlugin } from "@lib/plugins";
import PluginCard from "@ui/settings/components/PluginCard";
import ErrorBoundary from "@ui/components/ErrorBoundary";
const { FormInput, FormRow } = Forms;
@ -13,32 +14,34 @@ export default function Plugins() {
const [pluginUrl, setPluginUrl] = React.useState("");
return (
<RN.View style={{ flex: 1 }}>
<FormInput
value={pluginUrl}
onChange={(v: string) => setPluginUrl(v)}
placeholder="https://example.com/"
title="PLUGIN URL"
/>
<FormRow
label="Install plugin"
// I checked, this icon exists on a fresh Discord install. Please, stop disappearing.
leading={<FormRow.Icon source={getAssetIDByName("ic_add_24px")} />}
onPress={() => {
installPlugin(pluginUrl).then(() => {
setPluginUrl("");
}).catch((e: Error) => {
showToast(e.message, getAssetIDByName("Small"));
});
<ErrorBoundary>
<RN.View style={{ flex: 1 }}>
<FormInput
value={pluginUrl}
onChange={(v: string) => setPluginUrl(v)}
placeholder="https://example.com/"
title="PLUGIN URL"
/>
<FormRow
label="Install plugin"
// I checked, this icon exists on a fresh Discord install. Please, stop disappearing.
leading={<FormRow.Icon source={getAssetIDByName("ic_add_24px")} />}
onPress={() => {
installPlugin(pluginUrl).then(() => {
setPluginUrl("");
}).catch((e: Error) => {
showToast(e.message, getAssetIDByName("Small"));
});
}
}
}
/>
<RN.FlatList
style={{ marginTop: 10 }}
data={Object.values(plugins)}
renderItem={({ item }) => <PluginCard plugin={item} />}
keyExtractor={item => item.id}
/>
</RN.View>
/>
<RN.FlatList
style={{ marginTop: 10 }}
data={Object.values(plugins)}
renderItem={({ item }) => <PluginCard plugin={item} />}
keyExtractor={item => item.id}
/>
</RN.View>
</ErrorBoundary>
)
}