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 }; type MetroModules = { [id: number]: any };
// Component types // Component types
// TODO: Make these not be here?
interface SummaryProps { interface SummaryProps {
label: string; label: string;
icon?: string; icon?: string;
@ -15,6 +14,10 @@ interface SummaryProps {
children: JSX.Element | JSX.Element[]; children: JSX.Element | JSX.Element[];
} }
interface ErrorBoundaryProps {
children: JSX.Element | JSX.Element[],
}
// Helper types for API functions // Helper types for API functions
type PropIntellisense<P extends string | symbol> = Record<P, any> & Record<PropertyKey, any>; type PropIntellisense<P extends string | symbol> = Record<P, any> & Record<PropertyKey, any>;
type PropsFinder = <T extends string | symbol>(...props: T[]) => PropIntellisense<T>; type PropsFinder = <T extends string | symbol>(...props: T[]) => PropIntellisense<T>;
@ -331,6 +334,7 @@ interface VendettaObject {
Search: _React.ComponentType; Search: _React.ComponentType;
// Vendetta // Vendetta
Summary: (props: SummaryProps) => JSX.Element; Summary: (props: SummaryProps) => JSX.Element;
ErrorBoundary: (props: ErrorBoundaryProps) => JSX.Element;
} }
toasts: { toasts: {
showToast: (content: string, asset: number) => void; 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 { SummaryProps } from "@types";
import { Forms } from "@ui/components";
import { getAssetIDByName } from "@ui/assets"; import { getAssetIDByName } from "@ui/assets";
import { ReactNative as RN } from "@metro/common"; import { ReactNative as RN } from "@metro/common";
import { Forms } from "@ui/components";
// TODO: Animated would be awesome // TODO: Animated would be awesome
// TODO: Destructuring Forms doesn't work here. Why? // TODO: Destructuring Forms doesn't work here. Why?

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

@ -6,4 +6,5 @@ export const General = findByProps("Button", "Text", "View");
export const Search = findByDisplayName("StaticSearchBarContainer"); export const Search = findByDisplayName("StaticSearchBarContainer");
// Vendetta // Vendetta
export { default as Summary } from "@ui/components/Summary"; export { default as Summary } from "@ui/components/Summary";
export { default as ErrorBoundary } from "@ui/components/ErrorBoundary";

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

@ -1,5 +1,5 @@
import { NavigationNative } from "@metro/common"; import { NavigationNative } from "@metro/common";
import { Forms } from "@ui/components"; import { ErrorBoundary, Forms } from "@ui/components";
import { getAssetIDByName } from "@ui/assets"; import { getAssetIDByName } from "@ui/assets";
import { useProxy } from "@lib/storage"; import { useProxy } from "@lib/storage";
import settings from "@lib/settings"; import settings from "@lib/settings";
@ -10,32 +10,34 @@ export default function SettingsSection() {
const navigation = NavigationNative.useNavigation(); const navigation = NavigationNative.useNavigation();
useProxy(settings); useProxy(settings);
return ( return (
<FormSection key="Vendetta" title="Vendetta"> <ErrorBoundary>
<FormRow <FormSection key="Vendetta" title="Vendetta">
label="General" <FormRow
leading={<FormRow.Icon source={getAssetIDByName("settings")} />} label="General"
trailing={FormRow.Arrow} leading={<FormRow.Icon source={getAssetIDByName("settings")} />}
onPress={() => navigation.push("VendettaSettings")} trailing={FormRow.Arrow}
/> onPress={() => navigation.push("VendettaSettings")}
<FormDivider /> />
<FormRow <FormDivider />
label="Plugins" <FormRow
leading={<FormRow.Icon source={getAssetIDByName("debug")} />} label="Plugins"
trailing={FormRow.Arrow} leading={<FormRow.Icon source={getAssetIDByName("debug")} />}
onPress={() => navigation.push("VendettaPlugins")} trailing={FormRow.Arrow}
/> onPress={() => navigation.push("VendettaPlugins")}
{settings.developerSettings && ( />
<> {settings.developerSettings && (
<FormDivider /> <>
<FormRow <FormDivider />
label="Developer" <FormRow
leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />} label="Developer"
trailing={FormRow.Arrow} leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
onPress={() => navigation.push("VendettaDeveloper")} trailing={FormRow.Arrow}
/> onPress={() => navigation.push("VendettaDeveloper")}
</> />
)} </>
</FormSection> )}
</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 { findByDisplayName } from "@metro/filters";
import { after } from "@lib/patcher"; import { after } from "@lib/patcher";
import findInReactTree from "@utils/findInReactTree"; import findInReactTree from "@utils/findInReactTree";
import ErrorBoundary from "@ui/components/ErrorBoundary";
import SettingsSection from "@ui/settings/components/SettingsSection"; import SettingsSection from "@ui/settings/components/SettingsSection";
import General from "@ui/settings/pages/General"; import General from "@ui/settings/pages/General";
import Plugins from "@ui/settings/pages/Plugins"; import Plugins from "@ui/settings/pages/Plugins";
@ -38,7 +39,8 @@ export default function initSettings() {
render: ({ render: PageView, ...options }: { render: React.ComponentType }) => { render: ({ render: PageView, ...options }: { render: React.ComponentType }) => {
const navigation = NavigationNative.useNavigation(); const navigation = NavigationNative.useNavigation();
React.useEffect(() => options && navigation.setOptions(options)); 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 { ReactNative as RN, stylesheet } from "@metro/common";
import { Forms, Search } from "@ui/components"; import { Forms, Search } from "@ui/components";
import { all } from "@ui/assets"; import { all } from "@ui/assets";
import ErrorBoundary from "@ui/components/ErrorBoundary";
import AssetDisplay from "@ui/settings/components/AssetDisplay"; import AssetDisplay from "@ui/settings/components/AssetDisplay";
const { FormDivider } = Forms; const { FormDivider } = Forms;
@ -19,22 +20,24 @@ export default function AssetBrowser() {
const [search, setSearch] = React.useState(""); const [search, setSearch] = React.useState("");
return ( return (
<RN.View style={{ flex: 1 }}> <ErrorBoundary>
<Search <RN.View style={{ flex: 1 }}>
style={styles.search} <Search
onChangeText={(v: string) => setSearch(v)} style={styles.search}
placeholder="Search" onChangeText={(v: string) => setSearch(v)}
/> placeholder="Search"
<RN.FlatList />
data={Object.values(all).filter(a => a.name.includes(search) || a.id.toString() === search)} <RN.FlatList
renderItem={({ item }) => ( data={Object.values(all).filter(a => a.name.includes(search) || a.id.toString() === search)}
<> renderItem={({ item }) => (
<AssetDisplay asset={item} /> <>
<FormDivider /> <AssetDisplay asset={item} />
</> <FormDivider />
)} </>
keyExtractor={item => item.name} )}
/> keyExtractor={item => item.name}
</RN.View> />
</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 { ReactNative as RN, NavigationNative } from "@metro/common";
import { Forms, General } from "@ui/components"; import { Forms } from "@ui/components";
import { getAssetIDByName } from "@ui/assets"; import { getAssetIDByName } from "@ui/assets";
import { showToast } from "@ui/toasts"; import { showToast } from "@ui/toasts";
import { connectToDebugger } from "@lib/debug"; import { connectToDebugger } from "@lib/debug";
import { useProxy } from "@lib/storage"; import { useProxy } from "@lib/storage";
import settings, { loaderConfig } from "@lib/settings"; import settings, { loaderConfig } from "@lib/settings";
import logger from "@lib/logger"; import logger from "@lib/logger";
import ErrorBoundary from "@ui/components/ErrorBoundary";
const { FormSection, FormRow, FormSwitchRow, FormInput, FormDivider } = Forms; 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() { export default function Developer() {
const navigation = NavigationNative.useNavigation(); const navigation = NavigationNative.useNavigation();
@ -25,78 +17,80 @@ export default function Developer() {
useProxy(loaderConfig); useProxy(loaderConfig);
return ( return (
<RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}> <ErrorBoundary>
<FormSection title="Debug" titleStyleType="no_border"> <RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}>
<FormInput <FormSection title="Debug" titleStyleType="no_border">
value={settings.debuggerUrl} <FormInput
onChange={(v: string) => settings.debuggerUrl = v} value={settings.debuggerUrl}
placeholder="127.0.0.1:9090" onChange={(v: string) => settings.debuggerUrl = v}
title="DEBUGGER URL" 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 && <>
<FormDivider /> <FormDivider />
<FormRow <FormRow
label="Connect to React DevTools" label="Connect to debug websocket"
leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />} leading={<FormRow.Icon source={getAssetIDByName("copy")} />}
onPress={() => { onPress={() => connectToDebugger(settings.debuggerUrl)}
try { />
window.__vendetta_rdc?.connectToDevTools({ {window.__vendetta_rdc && <>
host: settings.debuggerUrl.split(":")?.[0], <FormDivider />
resolveRNStyle: RN.StyleSheet.flatten, <FormRow
}); label="Connect to React DevTools"
} catch (e) { leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
// TODO: Check if this ever actually catches anything onPress={() => {
logger.error("Failed to connect to React DevTools!", e); try {
showToast("Failed to connect to React DevTools!", getAssetIDByName("Small")); 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 /> <FormDivider />
</>} {loaderConfig.customLoadUrl.enabled && <>
{window.__vendetta_loader.features.devtools && <FormSwitchRow <FormInput
label="Load React DevTools" value={loaderConfig.customLoadUrl.url}
subLabel={`Version: ${window.__vendetta_loader.features.devtools.version}`} onChange={(v: string) => loaderConfig.customLoadUrl.url = v}
leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />} placeholder="http://localhost:4040/vendetta.js"
value={loaderConfig.loadReactDevTools} title="VENDETTA URL"
onValueChange={(v: boolean) => { />
loaderConfig.loadReactDevTools = v; <FormDivider />
}} </>}
/>} {window.__vendetta_loader.features.devtools && <FormSwitchRow
</FormSection>} label="Load React DevTools"
<FormSection title="Other"> subLabel={`Version: ${window.__vendetta_loader.features.devtools.version}`}
<FormRow leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
label="Asset Browser" value={loaderConfig.loadReactDevTools}
leading={<FormRow.Icon source={getAssetIDByName("ic_media_upload")} />} onValueChange={(v: boolean) => {
trailing={FormRow.Arrow} loaderConfig.loadReactDevTools = v;
onPress={() => navigation.push("VendettaAssetBrowser")} }}
/> />}
</FormSection> </FormSection>}
</RN.ScrollView> <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 { useProxy } from "@lib/storage";
import settings from "@lib/settings"; import settings from "@lib/settings";
import Version from "@ui/settings/components/Version"; import Version from "@ui/settings/components/Version";
import ErrorBoundary from "@ui/components/ErrorBoundary";
const { FormRow, FormSwitchRow, FormSection, FormDivider } = Forms; const { FormRow, FormSwitchRow, FormSection, FormDivider } = Forms;
const debugInfo = getDebugInfo(); const debugInfo = getDebugInfo();
@ -80,57 +81,59 @@ export default function General() {
]; ];
return ( return (
<RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}> <ErrorBoundary>
<FormSection title="Links" titleStyleType="no_border"> <RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}>
<FormRow <FormSection title="Links" titleStyleType="no_border">
label="Discord Server" <FormRow
leading={<FormRow.Icon source={getAssetIDByName("Discord")} />} label="Discord Server"
trailing={FormRow.Arrow} leading={<FormRow.Icon source={getAssetIDByName("Discord")} />}
onPress={() => invites.acceptInviteAndTransitionToInviteChannel({ inviteKey: DISCORD_SERVER })} trailing={FormRow.Arrow}
/> onPress={() => invites.acceptInviteAndTransitionToInviteChannel({ inviteKey: DISCORD_SERVER })}
<FormDivider /> />
<FormRow <FormDivider />
label="GitHub" <FormRow
leading={<FormRow.Icon source={getAssetIDByName("img_account_sync_github_white")} />} label="GitHub"
trailing={FormRow.Arrow} leading={<FormRow.Icon source={getAssetIDByName("img_account_sync_github_white")} />}
onPress={() => url.openURL(GITHUB)} trailing={FormRow.Arrow}
/> onPress={() => url.openURL(GITHUB)}
</FormSection> />
<FormSection title="Actions"> </FormSection>
<FormRow <FormSection title="Actions">
label="Reload Discord" <FormRow
leading={<FormRow.Icon source={getAssetIDByName("ic_message_retry")} />} label="Reload Discord"
onPress={() => RN.NativeModules.BundleUpdaterManager.reload()} leading={<FormRow.Icon source={getAssetIDByName("ic_message_retry")} />}
/> onPress={() => RN.NativeModules.BundleUpdaterManager.reload()}
<FormDivider /> />
<FormSwitchRow <FormDivider />
label="Developer Settings" <FormSwitchRow
leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />} label="Developer Settings"
value={settings.developerSettings} leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
onValueChange={(v: boolean) => { value={settings.developerSettings}
settings.developerSettings = v; onValueChange={(v: boolean) => {
}} settings.developerSettings = v;
/> }}
</FormSection> />
<FormSection title="Info"> </FormSection>
<Summary label="Versions" icon="ic_information_filled_24px"> <FormSection title="Info">
{versions.map((v, i) => ( <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 />} <Version label={v.label} version={v.version} icon={v.icon} />
</> {i !== versions.length - 1 && <FormDivider />}
))} </>
</Summary> ))}
<FormDivider /> </Summary>
<Summary label="Platform" icon="ic_mobile_device"> <FormDivider />
{platformInfo.map((p, i) => ( <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 />} <Version label={p.label} version={p.version} icon={p.icon} />
</> {i !== platformInfo.length - 1 && <FormDivider />}
))} </>
</Summary> ))}
</FormSection> </Summary>
</RN.ScrollView> </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 { useProxy } from "@lib/storage";
import { plugins, installPlugin } from "@lib/plugins"; import { plugins, installPlugin } from "@lib/plugins";
import PluginCard from "@ui/settings/components/PluginCard"; import PluginCard from "@ui/settings/components/PluginCard";
import ErrorBoundary from "@ui/components/ErrorBoundary";
const { FormInput, FormRow } = Forms; const { FormInput, FormRow } = Forms;
@ -13,32 +14,34 @@ export default function Plugins() {
const [pluginUrl, setPluginUrl] = React.useState(""); const [pluginUrl, setPluginUrl] = React.useState("");
return ( return (
<RN.View style={{ flex: 1 }}> <ErrorBoundary>
<FormInput <RN.View style={{ flex: 1 }}>
value={pluginUrl} <FormInput
onChange={(v: string) => setPluginUrl(v)} value={pluginUrl}
placeholder="https://example.com/" onChange={(v: string) => setPluginUrl(v)}
title="PLUGIN URL" placeholder="https://example.com/"
/> title="PLUGIN URL"
<FormRow />
label="Install plugin" <FormRow
// I checked, this icon exists on a fresh Discord install. Please, stop disappearing. label="Install plugin"
leading={<FormRow.Icon source={getAssetIDByName("ic_add_24px")} />} // I checked, this icon exists on a fresh Discord install. Please, stop disappearing.
onPress={() => { leading={<FormRow.Icon source={getAssetIDByName("ic_add_24px")} />}
installPlugin(pluginUrl).then(() => { onPress={() => {
setPluginUrl(""); installPlugin(pluginUrl).then(() => {
}).catch((e: Error) => { setPluginUrl("");
showToast(e.message, getAssetIDByName("Small")); }).catch((e: Error) => {
}); showToast(e.message, getAssetIDByName("Small"));
});
}
} }
} />
/> <RN.FlatList
<RN.FlatList style={{ marginTop: 10 }}
style={{ marginTop: 10 }} data={Object.values(plugins)}
data={Object.values(plugins)} renderItem={({ item }) => <PluginCard plugin={item} />}
renderItem={({ item }) => <PluginCard plugin={item} />} keyExtractor={item => item.id}
keyExtractor={item => item.id} />
/> </RN.View>
</RN.View> </ErrorBoundary>
) )
} }