acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Revert "attempt to get something working on web"

Browse Source 
This reverts commit d9cbeea995600fe7064ff0b5e5785d26faca38a7.
This commit is contained in:
Samuel Newman
2025-07-08 15:30:05 +03:00
parent 66591d9567
commit c71a76fa2e
7 changed files with 63 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Navigation.tsx
+42 -67
View File
@@ -30,7 +30,6 @@ import {logger as notyLogger} from '#/lib/notifications/util'
import {buildStateObject} from '#/lib/routes/helpers'
import {
type AllNavigatorParams,
type AuthNavigatorParams,
type BottomTabNavigatorParams,
type CoreNavigatorParams,
type FlatNavigatorParams,
@@ -155,7 +154,6 @@ import {AuthModal} from './view/shell/desktop/AuthLayout'
const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
const Core = createNativeStackNavigator<CoreNavigatorParams>()
const Auth = createNativeStackNavigator<AuthNavigatorParams>()
const HomeTab = createNativeStackNavigatorWithAuth<HomeTabNavigatorParams>()
const SearchTab = createNativeStackNavigatorWithAuth<SearchTabNavigatorParams>()
const NotificationsTab =
@@ -781,74 +779,10 @@ const FlatNavigator = () => {
options={{title: title(msg`Home`)}}
/>
{commonScreens(Flat, numUnread)}
<Flat.Screen
name="Auth"
getComponent={() => AuthNavigator}
options={{
title: title(msg`Login or Sign Up`),
presentation: 'modal',
}}
/>
</Flat.Navigator>
)
}
function AuthNavigator() {
const t = useTheme()
return (
<Auth.Navigator screenOptions={screenOptions(t)} layout={AuthModal}>
{authScreens({navigator: Auth})}
</Auth.Navigator>
)
}
function authScreens({navigator: Navigator}: {navigator: typeof Auth}) {
return (
<>
<Navigator.Screen
name="Landing"
getComponent={() => LandingScreen}
options={{animation: 'fade', animationDuration: 200}}
/>
<Navigator.Screen
name="StarterPackLanding"
getComponent={() => StarterPackLandingScreen}
/>
<Navigator.Group>
<Navigator.Screen
name="SelectAccount"
getComponent={() => SelectAccountScreen}
/>
<Navigator.Screen name="SignIn" getComponent={() => SignInScreen} />
<Navigator.Screen
name="ForgotPassword"
getComponent={() => ForgotPasswordScreen}
/>
<Navigator.Screen
name="SetNewPassword"
getComponent={() => SetNewPasswordScreen}
/>
<Navigator.Screen
name="PasswordUpdated"
getComponent={() => PasswordUpdatedScreen}
/>
<Navigator.Screen
name="SignUpInfo"
getComponent={() => SignUpInfoScreen}
/>
<Navigator.Screen
name="SignUpHandle"
getComponent={() => SignUpHandleScreen}
/>
<Navigator.Screen
name="SignUpCaptcha"
getComponent={() => SignUpCaptchaScreen}
/>
</Navigator.Group>
</>
)
}
/**
* The core navigator on native handles authentication, switching between
* the main tab navigator when logged in and the auth screen when logged out.
@@ -867,7 +801,48 @@ export const NativeNavigator = () => {
options={{animation: 'fade', animationDuration: 200}}
/>
) : (
authScreens({navigator: Core as typeof Auth})
<>
<Core.Screen
name="Landing"
getComponent={() => LandingScreen}
options={{animation: 'fade', animationDuration: 200}}
/>
<Core.Screen
name="StarterPackLanding"
getComponent={() => StarterPackLandingScreen}
/>
<Core.Group>
<Core.Screen
name="SelectAccount"
getComponent={() => SelectAccountScreen}
/>
<Core.Screen name="SignIn" getComponent={() => SignInScreen} />
<Core.Screen
name="ForgotPassword"
getComponent={() => ForgotPasswordScreen}
/>
<Core.Screen
name="SetNewPassword"
getComponent={() => SetNewPasswordScreen}
/>
<Core.Screen
name="PasswordUpdated"
getComponent={() => PasswordUpdatedScreen}
/>
<Core.Screen
name="SignUpInfo"
getComponent={() => SignUpInfoScreen}
/>
<Core.Screen
name="SignUpHandle"
getComponent={() => SignUpHandleScreen}
/>
<Core.Screen
name="SignUpCaptcha"
getComponent={() => SignUpCaptchaScreen}
/>
</Core.Group>
</>
)}
</Core.Navigator>
)
src/components/Layout/index.tsx
+2 -11
View File
@@ -13,7 +13,6 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {isWeb} from '#/platform/detection'
import {useShellLayout} from '#/state/shell/shell-layout'
import {useIsWithinAuthLayout} from '#/view/shell/desktop/AuthLayout'
import {
atoms as a,
useBreakpoints,
@@ -39,24 +38,16 @@ export type ScreenProps = React.ComponentProps<typeof View> & {
export const Screen = memo(function Screen({
style,
noInsetTop,
children,
...props
}: ScreenProps) {
const {top} = useSafeAreaInsets()
const withinAuthLayout = useIsWithinAuthLayout()
if (withinAuthLayout) {
return children
}
return (
<>
{isWeb && <WebCenterBorders />}
<View
style={[a.util_screen_outer, {paddingTop: noInsetTop ? 0 : top}, style]}
{...props}>
{children}
</View>
{...props}
/>
</>
)
})
src/lib/routes/types.ts
-1
View File
@@ -119,7 +119,6 @@ export type FlatNavigatorParams = CommonNavigatorParams & {
Feeds: undefined
Notifications: undefined
Messages: {pushToConversation?: string; animation?: 'push' | 'pop'}
Auth: undefined
}
export type AllNavigatorParams = CommonNavigatorParams & {
src/routes.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import {type FlatNavigatorParams} from './lib/routes/types'
type AllNavigatableRoutes = Omit<
FlatNavigatorParams,
'Auth' | 'NotFound' | 'SharedPreferencesTester'
'NotFound' | 'SharedPreferencesTester'
>
export const router = new Router<AllNavigatableRoutes>({
src/view/shell/createNativeStackNavigatorWithAuth.tsx
+18 -54
View File
@@ -1,4 +1,4 @@
import {useCallback, useEffect} from 'react'
import * as React from 'react'
import {View} from 'react-native'
// Based on @react-navigation/native-stack/src/navigators/createNativeStackNavigator.ts
// MIT License
@@ -6,7 +6,6 @@ import {View} from 'react-native'
import {
createNavigatorFactory,
type EventArg,
type NavigationProp,
type NavigatorTypeBagBase,
type ParamListBase,
type StackActionHelpers,
@@ -16,8 +15,6 @@ import {
type StackRouterOptions,
type StaticConfig,
type TypedNavigator,
useFocusEffect,
useNavigation,
useNavigationBuilder,
} from '@react-navigation/native'
import {NativeStackView} from '@react-navigation/native-stack'
@@ -30,11 +27,14 @@ import {
import {PWI_ENABLED} from '#/lib/build-flags'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {type FlatNavigatorParams} from '#/lib/routes/types'
import {isWeb} from '#/platform/detection'
import {useSession} from '#/state/session'
import {useOnboardingState} from '#/state/shell'
import {useLoggedOutView} from '#/state/shell/logged-out'
import {
useLoggedOutView,
useLoggedOutViewControls,
} from '#/state/shell/logged-out'
import {LoggedOut} from '#/view/com/auth/LoggedOut'
import {Deactivated} from '#/screens/Deactivated'
import {Onboarding} from '#/screens/Onboarding'
import {SignupQueued} from '#/screens/SignupQueued'
@@ -76,7 +76,7 @@ function NativeStackNavigator({
screenLayout,
})
useEffect(
React.useEffect(
() =>
// @ts-expect-error: there may not be a tab navigator in parent
navigation?.addListener?.('tabPress', (e: any) => {
@@ -108,40 +108,23 @@ function NativeStackNavigator({
const activeDescriptor = descriptors[activeRoute.key]
const activeRouteRequiresAuth = activeDescriptor.options.requireAuth ?? false
const onboardingState = useOnboardingState()
const {showLoggedOut} = useLoggedOutView()
const {setShowLoggedOut} = useLoggedOutViewControls()
const {isMobile} = useWebMediaQueries()
const {leftNavMinimal} = useLayoutBreakpoints()
const {showLoggedOut} = useLoggedOutView()
const shouldRedirectToAuth =
isWeb && activeRoute.name !== 'Auth' && (showLoggedOut || !PWI_ENABLED)
useEffect(() => {
if (shouldRedirectToAuth) {
navigation.navigate('Auth')
}
}, [navigation, shouldRedirectToAuth])
const shouldRedirectAwayFromAuth =
isWeb &&
activeRoute.name === 'Auth' &&
!showLoggedOut &&
PWI_ENABLED &&
!activeRouteRequiresAuth
useEffect(() => {
if (shouldRedirectAwayFromAuth) {
if (navigation.canGoBack()) {
navigation.goBack()
} else {
navigation.replace('Home')
}
}
}, [navigation, shouldRedirectAwayFromAuth])
// Temp: use old system for web. TODO: unify
if (isWeb && !hasSession && (!PWI_ENABLED || activeRouteRequiresAuth)) {
return <LoggedOut />
}
if (hasSession && currentAccount?.signupQueued) {
return <SignupQueued />
}
if (hasSession && currentAccount?.status === 'takendown') {
return <Takendown />
}
if (isWeb && showLoggedOut) {
return <LoggedOut onDismiss={() => setShowLoggedOut(false)} />
}
if (currentAccount?.status === 'deactivated') {
return <Deactivated />
}
@@ -156,7 +139,7 @@ function NativeStackNavigator({
...descriptor,
render() {
if (requireAuth && !hasSession) {
return <RedirectToAuth />
return <View />
} else {
return descriptor.render()
}
@@ -175,7 +158,7 @@ function NativeStackNavigator({
{...rest}
state={state}
navigation={navigation}
descriptors={newDescriptors}
descriptors={descriptors}
describe={describe}
/>
</View>
@@ -189,25 +172,6 @@ function NativeStackNavigator({
)
}
/**
* Redirects to the auth screen on web. On native, this is handled by swapping
* out the screens instead - see `NativeNavigator`
*/
function RedirectToAuth() {
const navigation = useNavigation<NavigationProp<FlatNavigatorParams>>()
useFocusEffect(
useCallback(() => {
if (isWeb) {
const timeout = setTimeout(() => {
navigation.navigate('Auth')
}, 500)
return () => clearTimeout(timeout)
}
}, [navigation]),
)
return <View />
}
export function createNativeStackNavigatorWithAuth<
const ParamList extends ParamListBase,
const NavigatorID extends string | undefined = undefined,
src/view/shell/desktop/AuthLayout.native.tsx
-7
View File
@@ -1,7 +0,0 @@
export function AuthLayout({children}: {children: React.ReactNode}) {
return children
}
export function useIsWithinAuthLayout() {
return false
}
src/view/shell/desktop/AuthLayout.tsx
-119
View File
@@ -1,119 +0,0 @@
import {createContext, useContext} from 'react'
import {Pressable, View} from 'react-native'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {DismissableLayer, FocusGuards, FocusScope} from 'radix-ui/internal'
import {createPortal} from 'react-dom'
import {RemoveScrollBar} from 'react-remove-scroll-bar'
import {useA11y} from '#/state/a11y'
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
import {atoms as a, flatten, useTheme, web} from '#/alf'
const stopPropagation = (e: any) => e.stopPropagation()
const preventDefault = (e: any) => e.preventDefault()
const WithinAuthLayoutContext = createContext(false)
export function AuthModal({children}: {children: React.ReactNode}) {
const t = useTheme()
const {_} = useLingui()
const {reduceMotionEnabled} = useA11y()
const {setShowLoggedOut} = useLoggedOutViewControls()
FocusGuards.useFocusGuards()
console.log('auth modal')
return createPortal(
<Pressable
accessibilityLabel={_(msg`Close active dialog`)}
accessibilityHint={undefined}
onPress={() => setShowLoggedOut(false)}>
<RemoveScrollBar />
<View
style={[
a.fixed,
a.inset_0,
a.z_10,
a.px_xl,
a.align_center,
a.justify_center,
web({overflowY: 'auto'}),
{zIndex: 999999},
]}>
<Backdrop />
<View
style={[
a.w_full,
a.z_20,
a.align_center,
web({minHeight: '60vh', position: 'static'}),
]}>
<FocusScope.FocusScope loop asChild trapped>
<View
role="dialog"
aria-role="dialog"
aria-label={_(msg`Log in or sign up`)}
// @ts-expect-error web only -prf
onClick={stopPropagation}
onStartShouldSetResponder={_ => true}
onTouchEnd={stopPropagation}
style={flatten([
a.relative,
a.rounded_md,
a.w_full,
a.border,
t.atoms.bg,
{
minHeight: '100%',
maxWidth: 600,
borderColor: t.palette.contrast_200,
shadowColor: t.palette.black,
shadowOpacity: t.name === 'light' ? 0.1 : 0.4,
shadowRadius: 30,
},
!reduceMotionEnabled && a.zoom_fade_in,
a.p_xl,
])}>
<DismissableLayer.DismissableLayer
onInteractOutside={preventDefault}
onFocusOutside={preventDefault}
onDismiss={close}
style={{
display: 'flex',
flexDirection: 'column',
flex: '1 1 0',
}}>
<WithinAuthLayoutContext.Provider value={true}>
{children}
</WithinAuthLayoutContext.Provider>
</DismissableLayer.DismissableLayer>
</View>
</FocusScope.FocusScope>
</View>
</View>
</Pressable>,
document.querySelector('#root')!,
)
}
function Backdrop() {
const t = useTheme()
const {reduceMotionEnabled} = useA11y()
return (
<View style={{opacity: 0.8}}>
<View
style={[
a.fixed,
a.inset_0,
{backgroundColor: t.palette.black},
!reduceMotionEnabled && a.fade_in,
]}
/>
</View>
)
}
export function useIsWithinAuthLayout() {
return useContext(WithinAuthLayoutContext)
}