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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/def.d.ts vendored
View file

@ -7,7 +7,6 @@ import _moment from "moment";
type MetroModules = { [id: number]: any };
// Component types
// TODO: Make these not be here?
interface SummaryProps {
label: string;
icon?: string;
@ -15,6 +14,10 @@ interface SummaryProps {
children: JSX.Element | JSX.Element[];
}
interface ErrorBoundaryProps {
children: JSX.Element | JSX.Element[],
}
// Helper types for API functions
type PropIntellisense<P extends string | symbol> = Record<P, any> & Record<PropertyKey, any>;
type PropsFinder = <T extends string | symbol>(...props: T[]) => PropIntellisense<T>;
@ -331,6 +334,7 @@ interface VendettaObject {
Search: _React.ComponentType;
// Vendetta
Summary: (props: SummaryProps) => JSX.Element;
ErrorBoundary: (props: ErrorBoundaryProps) => JSX.Element;
}
toasts: {
showToast: (content: string, asset: number) => void;

61
src/ui/components/ErrorBoundary.tsx Normal file
View file

@ -0,0 +1,61 @@
import { ErrorBoundaryProps } from "@types";
import { React, ReactNative as RN, stylesheet, constants } from "@metro/common";
import { findByProps } from "@metro/filters";
import { Forms } from "@ui/components";
import { semanticColors } from "@ui/color";
interface ErrorBoundaryState {
hasErr: boolean;
errText?: string;
}
const Button = findByProps("Looks", "Colors", "Sizes") as any;
const styles = stylesheet.createThemedStyleSheet({
view: {
flex: 1,
flexDirection: "column",
margin: 10,
},
title: {
fontSize: 20,
textAlign: "center",
marginBottom: 5,
},
codeblock: {
fontFamily: constants.Fonts.CODE_SEMIBOLD,
includeFontPadding: false,
fontSize: 12,
backgroundColor: semanticColors.BACKGROUND_SECONDARY,
padding: 5,
borderRadius: 5,
marginBottom: 5,
}
});
export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
constructor(props: ErrorBoundaryProps) {
super(props);
this.state = { hasErr: false };
}
static getDerivedStateFromError = (error: Error) => ({ hasErr: true, errText: error.message });
render() {
if (!this.state.hasErr) return this.props.children;
return (
<RN.ScrollView style={styles.view}>
<Forms.FormText style={styles.title}>Uh oh.</Forms.FormText>
<Forms.FormText style={styles.codeblock}>{this.state.errText}</Forms.FormText>
<Button
color={Button.Colors.RED}
size={Button.Sizes.MEDIUM}
look={Button.Looks.FILLED}
onPress={() => this.setState({ hasErr: false, errText: undefined })}
text="Retry"
/>
</RN.ScrollView>
)
}
}

2
src/ui/components/Summary.tsx
View file

@ -1,7 +1,7 @@
import { SummaryProps } from "@types";
import { Forms } from "@ui/components";
import { getAssetIDByName } from "@ui/assets";
import { ReactNative as RN } from "@metro/common";
import { Forms } from "@ui/components";
// TODO: Animated would be awesome
// TODO: Destructuring Forms doesn't work here. Why?

1
src/ui/components/index.ts
View file

@ -7,3 +7,4 @@ export const Search = findByDisplayName("StaticSearchBarContainer");
// Vendetta
export { default as Summary } from "@ui/components/Summary";
export { default as ErrorBoundary } from "@ui/components/ErrorBoundary";

56
src/ui/settings/components/SettingsSection.tsx
View file

@ -1,5 +1,5 @@
import { NavigationNative } from "@metro/common";
import { Forms } from "@ui/components";
import { ErrorBoundary, Forms } from "@ui/components";
import { getAssetIDByName } from "@ui/assets";
import { useProxy } from "@lib/storage";
import settings from "@lib/settings";
@ -11,31 +11,33 @@ export default function SettingsSection() {
useProxy(settings);
return (
<FormSection key="Vendetta" title="Vendetta">
<FormRow
label="General"
leading={<FormRow.Icon source={getAssetIDByName("settings")} />}
trailing={FormRow.Arrow}
onPress={() => navigation.push("VendettaSettings")}
/>
<FormDivider />
<FormRow
label="Plugins"
leading={<FormRow.Icon source={getAssetIDByName("debug")} />}
trailing={FormRow.Arrow}
onPress={() => navigation.push("VendettaPlugins")}
/>
{settings.developerSettings && (
<>
<FormDivider />
<FormRow
label="Developer"
leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
trailing={FormRow.Arrow}
onPress={() => navigation.push("VendettaDeveloper")}
/>
</>
)}
</FormSection>
<ErrorBoundary>
<FormSection key="Vendetta" title="Vendetta">
<FormRow
label="General"
leading={<FormRow.Icon source={getAssetIDByName("settings")} />}
trailing={FormRow.Arrow}
onPress={() => navigation.push("VendettaSettings")}
/>
<FormDivider />
<FormRow
label="Plugins"
leading={<FormRow.Icon source={getAssetIDByName("debug")} />}
trailing={FormRow.Arrow}
onPress={() => navigation.push("VendettaPlugins")}
/>
{settings.developerSettings && (
<>
<FormDivider />
<FormRow
label="Developer"
leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
trailing={FormRow.Arrow}
onPress={() => navigation.push("VendettaDeveloper")}
/>
</>
)}
</FormSection>
</ErrorBoundary>
)
}

4
src/ui/settings/index.tsx
View file

@ -2,6 +2,7 @@ import { NavigationNative, i18n } from "@metro/common";
import { findByDisplayName } from "@metro/filters";
import { after } from "@lib/patcher";
import findInReactTree from "@utils/findInReactTree";
import ErrorBoundary from "@ui/components/ErrorBoundary";
import SettingsSection from "@ui/settings/components/SettingsSection";
import General from "@ui/settings/pages/General";
import Plugins from "@ui/settings/pages/Plugins";
@ -38,7 +39,8 @@ export default function initSettings() {
render: ({ render: PageView, ...options }: { render: React.ComponentType }) => {
const navigation = NavigationNative.useNavigation();
React.useEffect(() => options && navigation.setOptions(options));
return <PageView />;
// TODO: Is wrapping this in ErrorBoundary a good idea?
return <ErrorBoundary><PageView /></ErrorBoundary>;
}
}
}

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>
)
}