diff options
| -rw-r--r-- | src/lib/api/debug-appview-proxy-header.ts | 57 | ||||
| -rw-r--r-- | src/state/models/root-store.ts | 6 | ||||
| -rw-r--r-- | src/view/screens/Settings.tsx | 51 |
3 files changed, 98 insertions, 16 deletions
diff --git a/src/lib/api/debug-appview-proxy-header.ts b/src/lib/api/debug-appview-proxy-header.ts new file mode 100644 index 000000000..d84f65cc1 --- /dev/null +++ b/src/lib/api/debug-appview-proxy-header.ts @@ -0,0 +1,57 @@ +/** + * APP-700 + * + * This is a temporary debug setting we're running on the Web build to + * help the protocol team test some changes. + * + * It should be removed in ~2 weeks. It should only be used on the Web + * version of the app. + */ + +import {useState, useCallback} from 'react' +import {BskyAgent} from '@atproto/api' +import {isWeb} from 'platform/detection' + +export function useDebugHeaderSetting(agent: BskyAgent): [boolean, () => void] { + const [enabled, setEnabled] = useState<boolean>(isEnabled()) + + const toggle = useCallback(() => { + if (!enabled) { + localStorage.setItem('set-header-x-appview-proxy', 'yes') + agent.api.xrpc.setHeader('x-appview-proxy', 'true') + setEnabled(true) + } else { + localStorage.removeItem('set-header-x-appview-proxy') + agent.api.xrpc.unsetHeader('x-appview-proxy') + setEnabled(false) + } + }, [setEnabled, enabled, agent]) + + return [enabled, toggle] +} + +export function setDebugHeader(agent: BskyAgent, enabled: boolean) { + if (!isWeb) { + return + } + if (enabled) { + localStorage.setItem('set-header-x-appview-proxy', 'yes') + agent.api.xrpc.setHeader('x-appview-proxy', 'true') + } else { + localStorage.removeItem('set-header-x-appview-proxy') + agent.api.xrpc.unsetHeader('x-appview-proxy') + } +} + +export function applyDebugHeader(agent: BskyAgent) { + if (!isWeb) { + return + } + if (isEnabled()) { + agent.api.xrpc.setHeader('x-appview-proxy', 'true') + } +} + +function isEnabled() { + return localStorage.getItem('set-header-x-appview-proxy') === 'yes' +} diff --git a/src/state/models/root-store.ts b/src/state/models/root-store.ts index f2a352a79..5a3d102aa 100644 --- a/src/state/models/root-store.ts +++ b/src/state/models/root-store.ts @@ -23,6 +23,11 @@ import {ImageSizesCache} from './cache/image-sizes' import {MutedThreads} from './muted-threads' import {reset as resetNavigation} from '../../Navigation' +// TEMPORARY (APP-700) +// remove after backend testing finishes +// -prf +import {applyDebugHeader} from 'lib/api/debug-appview-proxy-header' + export const appInfo = z.object({ build: z.string(), name: z.string(), @@ -125,6 +130,7 @@ export class RootStoreModel { ) { this.log.debug('RootStoreModel:handleSessionChange') this.agent = agent + applyDebugHeader(this.agent) this.me.clear() /* dont await */ this.preferences.sync() await this.me.load() diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index 9b9a3deea..d88021f75 100644 --- a/src/view/screens/Settings.tsx +++ b/src/view/screens/Settings.tsx @@ -31,6 +31,7 @@ import {Text} from '../com/util/text/Text' import * as Toast from '../com/util/Toast' import {UserAvatar} from '../com/util/UserAvatar' import {DropdownButton} from 'view/com/util/forms/DropdownButton' +import {ToggleButton} from 'view/com/util/forms/ToggleButton' import {usePalette} from 'lib/hooks/usePalette' import {useCustomPalette} from 'lib/hooks/useCustomPalette' import {AccountData} from 'state/models/session' @@ -42,6 +43,11 @@ import {formatCount} from 'view/com/util/numeric/format' import {isColorMode} from 'state/models/ui/shell' import Clipboard from '@react-native-clipboard/clipboard' +// TEMPORARY (APP-700) +// remove after backend testing finishes +// -prf +import {useDebugHeaderSetting} from 'lib/api/debug-appview-proxy-header' + type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'> export const SettingsScreen = withAuthRequired( observer(function Settings({}: Props) { @@ -50,6 +56,9 @@ export const SettingsScreen = withAuthRequired( const navigation = useNavigation<NavigationProp>() const {screen, track} = useAnalytics() const [isSwitching, setIsSwitching] = React.useState(false) + const [debugHeaderEnabled, toggleDebugHeader] = useDebugHeaderSetting( + store.agent, + ) const primaryBg = useCustomPalette<ViewStyle>({ light: {backgroundColor: colors.blue0}, @@ -435,23 +444,33 @@ export const SettingsScreen = withAuthRequired( System log </Text> </Link> - <Link - style={[pal.view, styles.linkCardNoIcon]} - href="/sys/debug" - title="Debug tools"> - <Text type="lg" style={pal.text}> - Storybook - </Text> - </Link> + {isDesktopWeb ? ( + <ToggleButton + type="default-light" + label="Experiment: Use AppView Proxy" + isSelected={debugHeaderEnabled} + onPress={toggleDebugHeader} + /> + ) : null} {__DEV__ ? ( - <Link - style={[pal.view, styles.linkCardNoIcon]} - onPress={onPressResetPreferences} - title="Debug tools"> - <Text type="lg" style={pal.text}> - Reset preferences state - </Text> - </Link> + <> + <Link + style={[pal.view, styles.linkCardNoIcon]} + href="/sys/debug" + title="Debug tools"> + <Text type="lg" style={pal.text}> + Storybook + </Text> + </Link> + <Link + style={[pal.view, styles.linkCardNoIcon]} + onPress={onPressResetPreferences} + title="Debug tools"> + <Text type="lg" style={pal.text}> + Reset preferences state + </Text> + </Link> + </> ) : null} <TouchableOpacity accessibilityRole="button" |