From ce85375c856549371e1e561e21bb5932baca8ea6 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Sat, 27 Apr 2024 04:54:18 +0000 Subject: [PATCH] [Clipclops] New routes with placeholder screens (#3725) * add new routes with placeholder screens * gate content * add filled envelope style * swap filled state * switch to `useAgent` --- src/Navigation.tsx | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/routes.ts | 3 +++ assets/icons/envelope_filled_stroke2_corner0_rounded.svg | 1 + assets/icons/settingsSliderVertical_stroke2_corner0_rounded.svg | 1 + bskyweb/cmd/bskyweb/server.go | 2 ++ src/components/icons/Envelope.tsx | 4 ++++ src/components/icons/SettingsSlider.tsx | 6 ++++++ src/components/icons/TEMPLATE.tsx | 2 +- src/lib/analytics/types.ts | 1 + src/lib/hooks/useNavigationTabState.ts | 5 ++++- src/lib/routes/router.ts | 2 +- src/lib/routes/types.ts | 10 ++++++++++ src/lib/statsig/gates.ts | 1 + src/screens/Messages/gate.tsx | 17 +++++++++++++++++ src/screens/Messages/Conversation/index.tsx | 32 ++++++++++++++++++++++++++++++++ src/screens/Messages/List/index.tsx | 234 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/screens/Messages/Settings/index.tsx | 24 ++++++++++++++++++++++++ src/view/shell/bottom-bar/BottomBar.tsx | 48 +++++++++++++++++++++++++++++++++++++++++++++--- src/view/shell/bottom-bar/BottomBarStyles.tsx | 4 ++++ src/view/shell/bottom-bar/BottomBarWeb.tsx | 44 +++++++++++++++++++++++++++++++------------- src/view/shell/desktop/LeftNav.tsx | 14 ++++++++++++++ 21 file(s) changed, 486 insertion(s)(+), 19 deletion(s)(-) diff --git a/src/Navigation.tsx b/src/Navigation.tsx --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -25,6 +25,7 @@ FeedsTabNavigatorParams, FlatNavigatorParams, HomeTabNavigatorParams, + MessagesTabNavigatorParams, MyProfileTabNavigatorParams, NotificationsTabNavigatorParams, SearchTabNavigatorParams, @@ -46,6 +47,9 @@ import {useWebScrollRestoration} from './lib/hooks/useWebScrollRestoration' import {attachRouteToLogEvents, logEvent} from './lib/statsig/statsig' import {router} from './routes' +import {MessagesConversationScreen} from './screens/Messages/Conversation' +import {MessagesListScreen} from './screens/Messages/List' +import {MessagesSettingsScreen} from './screens/Messages/Settings' import {useModalControls} from './state/modals' import {useUnreadNotifications} from './state/queries/notifications/unread' import {useSession} from './state/session' @@ -92,6 +96,8 @@ createNativeStackNavigatorWithAuth() const MyProfileTab = createNativeStackNavigatorWithAuth() +const MessagesTab = + createNativeStackNavigatorWithAuth() const Flat = createNativeStackNavigatorWithAuth() const Tab = createBottomTabNavigator() @@ -290,6 +296,16 @@ getComponent={() => HashtagScreen} options={{title: title(msg`Hashtag`)}} /> + MessagesConversationScreen} + options={{title: title(msg`Chat`), requireAuth: true}} + /> + MessagesSettingsScreen} + options={{title: title(msg`Messaging settings`), requireAuth: true}} + /> ) } @@ -322,6 +338,10 @@ MyProfileTabNavigator} + /> + MessagesTabNavigator} /> ) @@ -429,6 +449,28 @@ ) } +function MessagesTabNavigator() { + const pal = usePalette('default') + return ( + + MessagesListScreen} + options={{requireAuth: true}} + /> + {commonScreens(MessagesTab as typeof HomeTab)} + + ) +} + /** * The FlatNavigator is used by Web to represent the routes * in a single ("flat") stack. @@ -468,6 +510,11 @@ name="Notifications" getComponent={() => NotificationsScreen} options={{title: title(msg`Notifications`), requireAuth: true}} + /> + MessagesListScreen} + options={{title: title(msg`Messages`), requireAuth: true}} /> {commonScreens(Flat as typeof HomeTab, numUnread)} @@ -521,6 +568,9 @@ } if (name === 'Home') { return buildStateObject('HomeTab', 'Home', params) + } + if (name === 'Messages') { + return buildStateObject('MessagesTab', 'MessagesList', params) } // if the path is something else, like a post, profile, or even settings, we need to initialize the home tab as pre-existing state otherwise the back button will not work return buildStateObject('HomeTab', name, params, [ diff --git a/src/routes.ts b/src/routes.ts --- a/src/routes.ts +++ b/src/routes.ts @@ -37,4 +37,7 @@ CommunityGuidelines: '/support/community-guidelines', CopyrightPolicy: '/support/copyright', Hashtag: '/hashtag/:tag', + MessagesList: '/messages', + MessagesSettings: '/messages/settings', + MessagesConversation: '/messages/:conversation', }) diff --git a/assets/icons/envelope_filled_stroke2_corner0_rounded.svg b/assets/icons/envelope_filled_stroke2_corner0_rounded.svg new file mode 100644 --- /dev/null +++ b/assets/icons/envelope_filled_stroke2_corner0_rounded.svg @@ -0,0 +1,1 @@ + diff --git a/assets/icons/settingsSliderVertical_stroke2_corner0_rounded.svg b/assets/icons/settingsSliderVertical_stroke2_corner0_rounded.svg new file mode 100644 --- /dev/null +++ b/assets/icons/settingsSliderVertical_stroke2_corner0_rounded.svg @@ -0,0 +1,1 @@ + diff --git a/bskyweb/cmd/bskyweb/server.go b/bskyweb/cmd/bskyweb/server.go --- a/bskyweb/cmd/bskyweb/server.go +++ b/bskyweb/cmd/bskyweb/server.go @@ -200,6 +200,8 @@ e.GET("/support/community-guidelines", server.WebGeneric) e.GET("/support/copyright", server.WebGeneric) e.GET("/intent/compose", server.WebGeneric) + e.GET("/messages", server.WebGeneric) + e.GET("/messages/:conversation", server.WebGeneric) // profile endpoints; only first populates info e.GET("/profile/:handleOrDID", server.WebProfile) diff --git a/src/components/icons/Envelope.tsx b/src/components/icons/Envelope.tsx --- a/src/components/icons/Envelope.tsx +++ b/src/components/icons/Envelope.tsx @@ -3,3 +3,7 @@ export const Envelope_Stroke2_Corner0_Rounded = createSinglePathSVG({ path: 'M4.568 4h14.864c.252 0 .498 0 .706.017.229.019.499.063.77.201a2 2 0 0 1 .874.874c.138.271.182.541.201.77.017.208.017.454.017.706v10.864c0 .252 0 .498-.017.706a2.022 2.022 0 0 1-.201.77 2 2 0 0 1-.874.874 2.022 2.022 0 0 1-.77.201c-.208.017-.454.017-.706.017H4.568c-.252 0-.498 0-.706-.017a2.022 2.022 0 0 1-.77-.201 2 2 0 0 1-.874-.874 2.022 2.022 0 0 1-.201-.77C2 17.93 2 17.684 2 17.432V6.568c0-.252 0-.498.017-.706.019-.229.063-.499.201-.77a2 2 0 0 1 .874-.874c.271-.138.541-.182.77-.201C4.07 4 4.316 4 4.568 4Zm.456 2L12 11.708 18.976 6H5.024ZM20 7.747l-6.733 5.509a2 2 0 0 1-2.534 0L4 7.746V17.4a8.187 8.187 0 0 0 .011.589h.014c.116.01.278.011.575.011h14.8a8.207 8.207 0 0 0 .589-.012v-.013c.01-.116.011-.279.011-.575V7.747Z', }) + +export const Envelope_Filled_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M12 11.708 2.654 4.06A.998.998 0 0 1 3 4h18c.122 0 .238.022.346.061L12 11.708ZM2 19V6.11l9.367 7.664a1 1 0 0 0 1.266 0L22 6.11V19a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1Z', +}) diff --git a/src/components/icons/SettingsSlider.tsx b/src/components/icons/SettingsSlider.tsx new file mode 100644 --- /dev/null +++ b/src/components/icons/SettingsSlider.tsx @@ -0,0 +1,6 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const SettingsSliderVertical_Stroke2_Corner0_Rounded = + createSinglePathSVG({ + path: 'M7 3a1 1 0 0 1 1 1v1.126a4 4 0 0 1 0 7.748V20a1 1 0 1 1-2 0v-7.126a4 4 0 0 1 0-7.748V4a1 1 0 0 1 1-1Zm10 0a1 1 0 0 1 1 1v9.126a4 4 0 1 1-2 0V4a1 1 0 0 1 1-1ZM7 7a2 2 0 1 0 0 4 2 2 0 1 0 0-4Zm10 8a2 2 0 1 0 0 4 2 2 0 1 0 0-4Z', + }) diff --git a/src/components/icons/TEMPLATE.tsx b/src/components/icons/TEMPLATE.tsx --- a/src/components/icons/TEMPLATE.tsx +++ b/src/components/icons/TEMPLATE.tsx @@ -1,7 +1,7 @@ import React from 'react' import Svg, {Path} from 'react-native-svg' -import {useCommonSVGProps, Props} from '#/components/icons/common' +import {Props, useCommonSVGProps} from '#/components/icons/common' export const IconTemplate_Stroke2_Corner0_Rounded = React.forwardRef( function LogoImpl(props: Props, ref) { diff --git a/src/lib/analytics/types.ts b/src/lib/analytics/types.ts --- a/src/lib/analytics/types.ts +++ b/src/lib/analytics/types.ts @@ -76,6 +76,7 @@ 'MobileShell:SearchButtonPressed': {} 'MobileShell:NotificationsButtonPressed': {} 'MobileShell:FeedsButtonPressed': {} + 'MobileShell:MessagesButtonPressed': {} // NOTIFICATIONS events 'Notificatons:OpenApp': {} // LISTS events diff --git a/src/lib/hooks/useNavigationTabState.ts b/src/lib/hooks/useNavigationTabState.ts --- a/src/lib/hooks/useNavigationTabState.ts +++ b/src/lib/hooks/useNavigationTabState.ts @@ -1,4 +1,5 @@ import {useNavigationState} from '@react-navigation/native' + import {getTabState, TabState} from 'lib/routes/helpers' export function useNavigationTabState() { @@ -10,13 +11,15 @@ isAtNotifications: getTabState(state, 'Notifications') !== TabState.Outside, isAtMyProfile: getTabState(state, 'MyProfile') !== TabState.Outside, + isAtMessages: getTabState(state, 'MessagesList') !== TabState.Outside, } if ( !res.isAtHome && !res.isAtSearch && !res.isAtFeeds && !res.isAtNotifications && - !res.isAtMyProfile + !res.isAtMyProfile && + !res.isAtMessages ) { // HACK for some reason useNavigationState will give us pre-hydration results // and not update after, so we force isAtHome if all came back false diff --git a/src/lib/routes/router.ts b/src/lib/routes/router.ts --- a/src/lib/routes/router.ts +++ b/src/lib/routes/router.ts @@ -1,4 +1,4 @@ -import {RouteParams, Route} from './types' +import {Route, RouteParams} from './types' export class Router { routes: [string, Route][] = [] diff --git a/src/lib/routes/types.ts b/src/lib/routes/types.ts --- a/src/lib/routes/types.ts +++ b/src/lib/routes/types.ts @@ -38,6 +38,8 @@ AccessibilitySettings: undefined Search: {q?: string} Hashtag: {tag: string; author?: string} + MessagesConversation: {conversation: string} + MessagesSettings: undefined } export type BottomTabNavigatorParams = CommonNavigatorParams & { @@ -46,6 +48,7 @@ FeedsTab: undefined NotificationsTab: undefined MyProfileTab: undefined + MessagesTab: undefined } export type HomeTabNavigatorParams = CommonNavigatorParams & { @@ -68,12 +71,17 @@ MyProfile: undefined } +export type MessagesTabNavigatorParams = CommonNavigatorParams & { + MessagesList: undefined +} + export type FlatNavigatorParams = CommonNavigatorParams & { Home: undefined Search: {q?: string} Feeds: undefined Notifications: undefined Hashtag: {tag: string; author?: string} + MessagesList: undefined } export type AllNavigatorParams = CommonNavigatorParams & { @@ -87,6 +95,8 @@ Notifications: undefined MyProfileTab: undefined Hashtag: {tag: string; author?: string} + MessagesTab: undefined + MessagesList: undefined } // NOTE diff --git a/src/lib/statsig/gates.ts b/src/lib/statsig/gates.ts --- a/src/lib/statsig/gates.ts +++ b/src/lib/statsig/gates.ts @@ -3,6 +3,7 @@ | 'autoexpand_suggestions_on_profile_follow_v2' | 'disable_min_shell_on_foregrounding_v2' | 'disable_poll_on_discover_v2' + | 'dms' | 'hide_vertical_scroll_indicators' | 'show_follow_back_label_v2' | 'start_session_with_following_v2' diff --git a/src/screens/Messages/gate.tsx b/src/screens/Messages/gate.tsx new file mode 100644 --- /dev/null +++ b/src/screens/Messages/gate.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import {Text, View} from 'react-native' + +export function ClipClopGate() { + return ( + + 🐴 + Nice try + + ) +} diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation/index.tsx new file mode 100644 --- /dev/null +++ b/src/screens/Messages/Conversation/index.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import {View} from 'react-native' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {NativeStackScreenProps} from '@react-navigation/native-stack' + +import {CommonNavigatorParams} from '#/lib/routes/types' +import {useGate} from '#/lib/statsig/statsig' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import {ClipClopGate} from '../gate' + +type Props = NativeStackScreenProps< + CommonNavigatorParams, + 'MessagesConversation' +> +export function MessagesConversationScreen({route}: Props) { + const chatId = route.params.conversation + const {_} = useLingui() + + const gate = useGate() + if (!gate('dms')) return + + return ( + + + + ) +} diff --git a/src/screens/Messages/List/index.tsx b/src/screens/Messages/List/index.tsx new file mode 100644 --- /dev/null +++ b/src/screens/Messages/List/index.tsx @@ -0,0 +1,234 @@ +import React, {useCallback, useState} from 'react' +import {View} from 'react-native' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {NativeStackScreenProps} from '@react-navigation/native-stack' +import {useInfiniteQuery} from '@tanstack/react-query' + +import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' +import {MessagesTabNavigatorParams} from '#/lib/routes/types' +import {useGate} from '#/lib/statsig/statsig' +import {cleanError} from '#/lib/strings/errors' +import {logger} from '#/logger' +import {useAgent} from '#/state/session' +import {List} from '#/view/com/util/List' +import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import {useTheme} from '#/alf' +import {atoms as a} from '#/alf' +import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider' +import {Link} from '#/components/Link' +import {ListFooter, ListMaybePlaceholder} from '#/components/Lists' +import {Text} from '#/components/Typography' +import {ClipClopGate} from '../gate' + +type Props = NativeStackScreenProps +export function MessagesListScreen({}: Props) { + const {_} = useLingui() + const t = useTheme() + + const renderButton = useCallback(() => { + return ( + + + + ) + }, [_, t.atoms.text]) + + const initialNumToRender = useInitialNumToRender() + const [isPTRing, setIsPTRing] = useState(false) + + const { + data, + isLoading, + isFetchingNextPage, + hasNextPage, + fetchNextPage, + error, + refetch, + } = usePlaceholderConversations() + + const isError = !!error + + const conversations = React.useMemo(() => { + if (data?.pages) { + return data.pages.flat() + } + return [] + }, [data]) + + const onRefresh = React.useCallback(async () => { + setIsPTRing(true) + try { + await refetch() + } catch (err) { + logger.error('Failed to refresh conversations', {message: err}) + } + setIsPTRing(false) + }, [refetch, setIsPTRing]) + + const onEndReached = React.useCallback(async () => { + if (isFetchingNextPage || !hasNextPage || isError) return + try { + await fetchNextPage() + } catch (err) { + logger.error('Failed to load more conversations', {message: err}) + } + }, [isFetchingNextPage, hasNextPage, isError, fetchNextPage]) + + const gate = useGate() + if (!gate('dms')) return + + if (conversations.length < 1) { + return ( + + ) + } + + return ( + + + { + return ( + + + + + + + {item.profile.displayName || item.profile.handle} + {' '} + + @{item.profile.handle} + + + {item.unread && ( + + )} + + + {item.lastMessage} + + + + ) + }} + keyExtractor={item => item.profile.did} + refreshing={isPTRing} + onRefresh={onRefresh} + onEndReached={onEndReached} + ListFooterComponent={ + + } + onEndReachedThreshold={3} + initialNumToRender={initialNumToRender} + windowSize={11} + /> + + ) +} + +function usePlaceholderConversations() { + const {getAgent} = useAgent() + + return useInfiniteQuery({ + queryKey: ['messages'], + queryFn: async () => { + const people = await getAgent().getProfiles({actors: PLACEHOLDER_PEOPLE}) + return people.data.profiles.map(profile => ({ + profile, + unread: Math.random() > 0.5, + lastMessage: getRandomPost(), + })) + }, + initialPageParam: undefined, + getNextPageParam: () => undefined, + }) +} + +const PLACEHOLDER_PEOPLE = [ + 'pfrazee.com', + 'haileyok.com', + 'danabra.mov', + 'esb.lol', + 'samuel.bsky.team', +] + +function getRandomPost() { + const num = Math.floor(Math.random() * 10) + switch (num) { + case 0: + return 'hello' + case 1: + return 'lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' + case 2: + return 'banger post' + case 3: + return 'lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' + case 4: + return 'lol look at this bug' + case 5: + return 'wow' + case 6: + return "that's pretty cool, wow!" + case 7: + return 'I think this is a bug' + case 8: + return 'Hello World!' + case 9: + return 'DMs when???' + default: + return 'this is unlikely' + } +} diff --git a/src/screens/Messages/Settings/index.tsx b/src/screens/Messages/Settings/index.tsx new file mode 100644 --- /dev/null +++ b/src/screens/Messages/Settings/index.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import {View} from 'react-native' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {NativeStackScreenProps} from '@react-navigation/native-stack' + +import {CommonNavigatorParams} from '#/lib/routes/types' +import {useGate} from '#/lib/statsig/statsig' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import {ClipClopGate} from '../gate' + +type Props = NativeStackScreenProps +export function MessagesSettingsScreen({}: Props) { + const {_} = useLingui() + + const gate = useGate() + if (!gate('dms')) return + + return ( + + + + ) +} diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -24,6 +24,7 @@ } from '#/lib/icons' import {clamp} from '#/lib/numbers' import {getTabState, TabState} from '#/lib/routes/helpers' +import {useGate} from '#/lib/statsig/statsig' import {s} from '#/lib/styles' import {emitSoftReset} from '#/state/events' import {useUnreadNotifications} from '#/state/queries/notifications/unread' @@ -39,9 +40,17 @@ import {Logotype} from '#/view/icons/Logotype' import {useDialogControl} from '#/components/Dialog' import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount' +import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope' +import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeFilled} from '#/components/icons/Envelope' import {styles} from './BottomBarStyles' -type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds' +type TabOptions = + | 'Home' + | 'Search' + | 'Notifications' + | 'MyProfile' + | 'Feeds' + | 'Messages' export function BottomBar({navigation}: BottomTabBarProps) { const {hasSession, currentAccount} = useSession() @@ -50,8 +59,14 @@ const safeAreaInsets = useSafeAreaInsets() const {track} = useAnalytics() const {footerHeight} = useShellLayout() - const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} = - useNavigationTabState() + const { + isAtHome, + isAtSearch, + isAtFeeds, + isAtNotifications, + isAtMyProfile, + isAtMessages, + } = useNavigationTabState() const numUnreadNotifications = useUnreadNotifications() const {footerMinimalShellTransform} = useMinimalShellMode() const {data: profile} = useProfileQuery({did: currentAccount?.did}) @@ -60,6 +75,7 @@ const dedupe = useDedupe() const accountSwitchControl = useDialogControl() const playHaptic = useHaptics() + const gate = useGate() const showSignIn = React.useCallback(() => { closeAllActiveElements() @@ -102,6 +118,10 @@ ) const onPressProfile = React.useCallback(() => { onPressTab('MyProfile') + }, [onPressTab]) + + const onPressMessages = React.useCallback(() => { + onPressTab('Messages') }, [onPressTab]) const onLongPressProfile = React.useCallback(() => { @@ -220,6 +240,28 @@ : `${numUnreadNotifications} unread` } /> + {gate('dms') && ( + + ) : ( + + ) + } + onPress={onPressMessages} + accessibilityRole="tab" + accessibilityLabel={_(msg`Messages`)} + accessibilityHint="" + /> + )} { closeAllActiveElements() @@ -117,6 +122,19 @@ ) }} + {gate('dms') && ( + + {({isActive}) => { + const Icon = isActive ? EnvelopeFilled : Envelope + return ( + + ) + }} + + )} + {gate('dms') && ( + } + iconFilled={ + + } + label={_(msg`Messages`)} + /> + )}