From 1111108efee528d94a0ec5a6cb714aa09f6237db Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 14 Dec 2023 17:46:27 -0600 Subject: [PATCH] Some brand, some pwi (#2212) * Add logo to left nav in logged out * Protect last routes * Hide links in left nav, hide nav * Replace bottom bar for pwi * Remove same links from drawer * Hide reply prompt * Allow search --- src/Navigation.tsx | 10 +- src/view/screens/PostThread.tsx | 4 +- src/view/shell/Drawer.tsx | 22 +-- src/view/shell/NavSignupCard.tsx | 8 +- src/view/shell/bottom-bar/BottomBar.tsx | 155 +++++++++++------ src/view/shell/bottom-bar/BottomBarWeb.tsx | 185 ++++++++++++++------- src/view/shell/desktop/LeftNav.tsx | 68 ++++---- 7 files changed, 297 insertions(+), 155 deletions(-) diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 252699e5..c9f92721 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -292,7 +292,11 @@ function HomeTabNavigator() { animationDuration: 250, contentStyle, }}> - HomeScreen} /> + HomeScreen} + options={{requireAuth: true}} + /> {commonScreens(HomeTab)} ) @@ -402,7 +406,7 @@ const FlatNavigator = () => { HomeScreen} - options={{title: title('Home')}} + options={{title: title('Home'), requireAuth: true}} /> { FeedsScreen} - options={{title: title('Feeds')}} + options={{title: title('Feeds'), requireAuth: true}} /> export function PostThreadScreen({route}: Props) { const queryClient = useQueryClient() const {_} = useLingui() + const {hasSession} = useSession() const {fabMinimalShellTransform} = useMinimalShellMode() const setMinimalShellMode = useSetMinimalShellMode() const {openComposer} = useComposerControls() @@ -89,7 +91,7 @@ export function PostThreadScreen({route}: Props) { /> )} - {isMobile && canReply && ( + {isMobile && canReply && hasSession && ( { )} - {hasSession && } - {hasSession && } - - - {hasSession && ( - - )} - {hasSession && ( + {hasSession ? ( <> + + + + + @@ -242,6 +240,8 @@ let DrawerContent = ({}: {}): React.ReactNode => { /> + ) : ( + )} diff --git a/src/view/shell/NavSignupCard.tsx b/src/view/shell/NavSignupCard.tsx index 8c0e2075..bae37e83 100644 --- a/src/view/shell/NavSignupCard.tsx +++ b/src/view/shell/NavSignupCard.tsx @@ -5,11 +5,11 @@ import {useLingui} from '@lingui/react' import {s} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' -import {DefaultAvatar} from '#/view/com/util/UserAvatar' import {Text} from '#/view/com/util/text/Text' import {Button} from '#/view/com/util/forms/Button' import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useCloseAllActiveElements} from '#/state/util' +import {Logo} from '#/view/icons/Logo' let NavSignupCard = ({}: {}): React.ReactNode => { const {_} = useLingui() @@ -35,10 +35,10 @@ let NavSignupCard = ({}: {}): React.ReactNode => { paddingTop: 6, marginBottom: 24, }}> - + - - + + Sign up or sign in to join the conversation diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx index ef147f27..926e08ce 100644 --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -23,13 +23,19 @@ import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {useNavigationTabState} from 'lib/hooks/useNavigationTabState' import {UserAvatar} from 'view/com/util/UserAvatar' import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useModalControls} from '#/state/modals' import {useShellLayout} from '#/state/shell/shell-layout' import {useUnreadNotifications} from '#/state/queries/notifications/unread' import {emitSoftReset} from '#/state/events' import {useSession} from '#/state/session' import {useProfileQuery} from '#/state/queries/profile' +import {useLoggedOutViewControls} from '#/state/shell/logged-out' +import {useCloseAllActiveElements} from '#/state/util' +import {Button} from '#/view/com/util/forms/Button' +import {s} from 'lib/styles' +import {Logo} from '#/view/icons/Logo' +import {Logotype} from '#/view/icons/Logotype' type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds' @@ -46,6 +52,19 @@ export function BottomBar({navigation}: BottomTabBarProps) { const numUnreadNotifications = useUnreadNotifications() const {footerMinimalShellTransform} = useMinimalShellMode() const {data: profile} = useProfileQuery({did: currentAccount?.did}) + const {requestSwitchToAccount} = useLoggedOutViewControls() + const closeAllActiveElements = useCloseAllActiveElements() + + const showSignIn = React.useCallback(() => { + closeAllActiveElements() + requestSwitchToAccount({requestedAccount: 'none'}) + }, [requestSwitchToAccount, closeAllActiveElements]) + + const showCreateAccount = React.useCallback(() => { + closeAllActiveElements() + requestSwitchToAccount({requestedAccount: 'new'}) + // setShowLoggedOut(true) + }, [requestSwitchToAccount, closeAllActiveElements]) const onPressTab = React.useCallback( (tab: TabOptions) => { @@ -94,53 +113,52 @@ export function BottomBar({navigation}: BottomTabBarProps) { onLayout={e => { footerHeight.value = e.nativeEvent.layout.height }}> - - ) : ( - - ) - } - onPress={onPressHome} - accessibilityRole="tab" - accessibilityLabel={_(msg`Home`)} - accessibilityHint="" - /> - - ) : ( - - ) - } - onPress={onPressSearch} - accessibilityRole="search" - accessibilityLabel={_(msg`Search`)} - accessibilityHint="" - /> - - {hasSession && ( + {hasSession ? ( <> + + ) : ( + + ) + } + onPress={onPressHome} + accessibilityRole="tab" + accessibilityLabel={_(msg`Home`)} + accessibilityHint="" + /> + + ) : ( + + ) + } + onPress={onPressSearch} + accessibilityRole="search" + accessibilityLabel={_(msg`Search`)} + accessibilityHint="" + /> + ) : ( + <> + + + + + + + + + + + + + + + )} ) diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx index 6ed0a99f..5ae65750 100644 --- a/src/view/shell/bottom-bar/BottomBarWeb.tsx +++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx @@ -3,6 +3,9 @@ import {usePalette} from 'lib/hooks/usePalette' import {useNavigationState} from '@react-navigation/native' import Animated from 'react-native-reanimated' import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {getCurrentRoute, isTab} from 'lib/routes/helpers' import {styles} from './BottomBarStyles' import {clamp} from 'lib/numbers' @@ -22,12 +25,33 @@ import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {makeProfileLink} from 'lib/routes/links' import {CommonNavigatorParams} from 'lib/routes/types' import {useSession} from '#/state/session' +import {useLoggedOutViewControls} from '#/state/shell/logged-out' +import {useCloseAllActiveElements} from '#/state/util' +import {Button} from '#/view/com/util/forms/Button' +import {Text} from '#/view/com/util/text/Text' +import {s} from 'lib/styles' +import {Logo} from '#/view/icons/Logo' +import {Logotype} from '#/view/icons/Logotype' export function BottomBarWeb() { + const {_} = useLingui() const {hasSession, currentAccount} = useSession() const pal = usePalette('default') const safeAreaInsets = useSafeAreaInsets() const {footerMinimalShellTransform} = useMinimalShellMode() + const {requestSwitchToAccount} = useLoggedOutViewControls() + const closeAllActiveElements = useCloseAllActiveElements() + + const showSignIn = React.useCallback(() => { + closeAllActiveElements() + requestSwitchToAccount({requestedAccount: 'none'}) + }, [requestSwitchToAccount, closeAllActiveElements]) + + const showCreateAccount = React.useCallback(() => { + closeAllActiveElements() + requestSwitchToAccount({requestedAccount: 'new'}) + // setShowLoggedOut(true) + }, [requestSwitchToAccount, closeAllActiveElements]) return ( - - {({isActive}) => { - const Icon = isActive ? HomeIconSolid : HomeIcon - return ( - - ) - }} - - - {({isActive}) => { - const Icon = isActive - ? MagnifyingGlassIcon2Solid - : MagnifyingGlassIcon2 - return ( - - ) - }} - - - {hasSession && ( + {hasSession ? ( <> - + {({isActive}) => { - return ( - - ) - }} - - - {({isActive}) => { - const Icon = isActive ? BellIconSolid : BellIcon + const Icon = isActive ? HomeIconSolid : HomeIcon return ( ) }} - + {({isActive}) => { - const Icon = isActive ? UserIconSolid : UserIcon + const Icon = isActive + ? MagnifyingGlassIcon2Solid + : MagnifyingGlassIcon2 return ( ) }} + + {hasSession && ( + <> + + {({isActive}) => { + return ( + + ) + }} + + + {({isActive}) => { + const Icon = isActive ? BellIconSolid : BellIcon + return ( + + ) + }} + + + {({isActive}) => { + const Icon = isActive ? UserIconSolid : UserIcon + return ( + + ) + }} + + + )} + + ) : ( + <> + + + + + + + + + + + + + + )} diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 8078df80..5d1c2a20 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -266,6 +266,10 @@ export function DesktopLeftNav() { const {isDesktop, isTablet} = useWebMediaQueries() const numUnread = useUnreadNotifications() + if (!hasSession && !isDesktop) { + return null + } + return ( ) : null} - - - } - iconFilled={ - - } - label={_(msg`Home`)} - /> - - } - iconFilled={ - - } - label={_(msg`Search`)} - /> {hasSession && ( <> + + + } + iconFilled={ + + } + label={_(msg`Home`)} + /> + + } + iconFilled={ + + } + label={_(msg`Search`)} + />