[Clipclops] Clop menu, leave clop, mute/unmute clop (#3804)
* convo menu * memoize convomenu * add convoId to useChat + memoize value * leave convo * Create mute-conversation.ts * add mutes, remove changes to useChat and use chat.convo instead * add todo comments * leave convo confirm prompt * remove dependency on useChat and pass in props instead * show menu on long press * optimistic update * optimistic update leave + add error capture * don't `popToTop` when unnecessary --------- Co-authored-by: Hailey <me@haileyok.com>zio/stable
parent
d3fafdc066
commit
e19f882450
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3.293 3.293A1 1 0 0 1 4 3h7.25a1 1 0 1 1 0 2H5v14h6.25a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1V4a1 1 0 0 1 .293-.707Zm11.5 3.5a1 1 0 0 1 1.414 0l4.5 4.5a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414-1.414L17.586 13H8.75a1 1 0 1 1 0-2h8.836l-2.793-2.793a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>
|
After Width: | Height: | Size: 402 B |
|
@ -64,7 +64,7 @@ type NonTextElements =
|
||||||
|
|
||||||
export type ButtonProps = Pick<
|
export type ButtonProps = Pick<
|
||||||
PressableProps,
|
PressableProps,
|
||||||
'disabled' | 'onPress' | 'testID'
|
'disabled' | 'onPress' | 'testID' | 'onLongPress'
|
||||||
> &
|
> &
|
||||||
AccessibilityProps &
|
AccessibilityProps &
|
||||||
VariantProps & {
|
VariantProps & {
|
||||||
|
|
|
@ -1,27 +1,29 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import {View, Pressable, ViewStyle, StyleProp} from 'react-native'
|
import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
|
||||||
|
import {msg, Trans} from '@lingui/macro'
|
||||||
|
import {useLingui} from '@lingui/react'
|
||||||
import flattenReactChildren from 'react-keyed-flatten-children'
|
import flattenReactChildren from 'react-keyed-flatten-children'
|
||||||
|
|
||||||
|
import {isNative} from 'platform/detection'
|
||||||
import {atoms as a, useTheme} from '#/alf'
|
import {atoms as a, useTheme} from '#/alf'
|
||||||
|
import {Button, ButtonText} from '#/components/Button'
|
||||||
import * as Dialog from '#/components/Dialog'
|
import * as Dialog from '#/components/Dialog'
|
||||||
import {useInteractionState} from '#/components/hooks/useInteractionState'
|
import {useInteractionState} from '#/components/hooks/useInteractionState'
|
||||||
import {Text} from '#/components/Typography'
|
|
||||||
|
|
||||||
import {Context} from '#/components/Menu/context'
|
import {Context} from '#/components/Menu/context'
|
||||||
import {
|
import {
|
||||||
ContextType,
|
ContextType,
|
||||||
TriggerProps,
|
|
||||||
ItemProps,
|
|
||||||
GroupProps,
|
GroupProps,
|
||||||
ItemTextProps,
|
|
||||||
ItemIconProps,
|
ItemIconProps,
|
||||||
|
ItemProps,
|
||||||
|
ItemTextProps,
|
||||||
|
TriggerProps,
|
||||||
} from '#/components/Menu/types'
|
} from '#/components/Menu/types'
|
||||||
import {Button, ButtonText} from '#/components/Button'
|
import {Text} from '#/components/Typography'
|
||||||
import {Trans, msg} from '@lingui/macro'
|
|
||||||
import {useLingui} from '@lingui/react'
|
|
||||||
import {isNative} from 'platform/detection'
|
|
||||||
|
|
||||||
export {useDialogControl as useMenuControl} from '#/components/Dialog'
|
export {
|
||||||
|
type DialogControlProps as MenuControlProps,
|
||||||
|
useDialogControl as useMenuControl,
|
||||||
|
} from '#/components/Dialog'
|
||||||
|
|
||||||
export function useMemoControlContext() {
|
export function useMemoControlContext() {
|
||||||
return React.useContext(Context)
|
return React.useContext(Context)
|
||||||
|
|
|
@ -0,0 +1,177 @@
|
||||||
|
import React, {useCallback} from 'react'
|
||||||
|
import {Pressable} from 'react-native'
|
||||||
|
import {AppBskyActorDefs} from '@atproto/api'
|
||||||
|
import {ChatBskyConvoDefs} from '@atproto-labs/api'
|
||||||
|
import {msg, Trans} from '@lingui/macro'
|
||||||
|
import {useLingui} from '@lingui/react'
|
||||||
|
import {useNavigation} from '@react-navigation/native'
|
||||||
|
|
||||||
|
import {NavigationProp} from '#/lib/routes/types'
|
||||||
|
import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
|
||||||
|
import {
|
||||||
|
useMuteConvo,
|
||||||
|
useUnmuteConvo,
|
||||||
|
} from '#/state/queries/messages/mute-conversation'
|
||||||
|
import * as Toast from '#/view/com/util/Toast'
|
||||||
|
import {atoms as a, useTheme} from '#/alf'
|
||||||
|
import {ArrowBoxLeft_Stroke2_Corner0_Rounded as ArrowBoxLeft} from '#/components/icons/ArrowBoxLeft'
|
||||||
|
import {DotGrid_Stroke2_Corner0_Rounded as DotsHorizontal} from '#/components/icons/DotGrid'
|
||||||
|
import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
|
||||||
|
import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
|
||||||
|
import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
|
||||||
|
import {PersonCheck_Stroke2_Corner0_Rounded as PersonCheck} from '#/components/icons/PersonCheck'
|
||||||
|
import {PersonX_Stroke2_Corner0_Rounded as PersonX} from '#/components/icons/PersonX'
|
||||||
|
import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
|
||||||
|
import * as Menu from '#/components/Menu'
|
||||||
|
import * as Prompt from '#/components/Prompt'
|
||||||
|
|
||||||
|
let ConvoMenu = ({
|
||||||
|
convo,
|
||||||
|
profile,
|
||||||
|
onUpdateConvo,
|
||||||
|
control,
|
||||||
|
hideTrigger,
|
||||||
|
currentScreen,
|
||||||
|
}: {
|
||||||
|
convo: ChatBskyConvoDefs.ConvoView
|
||||||
|
profile: AppBskyActorDefs.ProfileViewBasic
|
||||||
|
onUpdateConvo?: (convo: ChatBskyConvoDefs.ConvoView) => void
|
||||||
|
control?: Menu.MenuControlProps
|
||||||
|
hideTrigger?: boolean
|
||||||
|
currentScreen: 'list' | 'conversation'
|
||||||
|
}): React.ReactNode => {
|
||||||
|
const navigation = useNavigation<NavigationProp>()
|
||||||
|
const {_} = useLingui()
|
||||||
|
const t = useTheme()
|
||||||
|
const leaveConvoControl = Prompt.usePromptControl()
|
||||||
|
|
||||||
|
const onNavigateToProfile = useCallback(() => {
|
||||||
|
navigation.navigate('Profile', {name: profile.did})
|
||||||
|
}, [navigation, profile.did])
|
||||||
|
|
||||||
|
const {mutate: muteConvo} = useMuteConvo(convo.id, {
|
||||||
|
onSuccess: data => {
|
||||||
|
onUpdateConvo?.(data.convo)
|
||||||
|
Toast.show(_(msg`Chat muted`))
|
||||||
|
},
|
||||||
|
onError: () => {
|
||||||
|
Toast.show(_(msg`Could not mute chat`))
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const {mutate: unmuteConvo} = useUnmuteConvo(convo.id, {
|
||||||
|
onSuccess: data => {
|
||||||
|
onUpdateConvo?.(data.convo)
|
||||||
|
Toast.show(_(msg`Chat unmuted`))
|
||||||
|
},
|
||||||
|
onError: () => {
|
||||||
|
Toast.show(_(msg`Could not unmute chat`))
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const {mutate: leaveConvo} = useLeaveConvo(convo.id, {
|
||||||
|
onSuccess: () => {
|
||||||
|
if (currentScreen === 'conversation') {
|
||||||
|
navigation.replace('MessagesList')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onError: () => {
|
||||||
|
Toast.show(_(msg`Could not leave chat`))
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Menu.Root control={control}>
|
||||||
|
{!hideTrigger && (
|
||||||
|
<Menu.Trigger label={_(msg`Chat settings`)}>
|
||||||
|
{({props, state}) => (
|
||||||
|
<Pressable
|
||||||
|
{...props}
|
||||||
|
style={[
|
||||||
|
a.p_sm,
|
||||||
|
a.rounded_sm,
|
||||||
|
(state.hovered || state.pressed) && t.atoms.bg_contrast_25,
|
||||||
|
// make sure pfp is in the middle
|
||||||
|
{marginLeft: -10},
|
||||||
|
]}>
|
||||||
|
<DotsHorizontal size="lg" style={t.atoms.text} />
|
||||||
|
</Pressable>
|
||||||
|
)}
|
||||||
|
</Menu.Trigger>
|
||||||
|
)}
|
||||||
|
<Menu.Outer>
|
||||||
|
<Menu.Group>
|
||||||
|
<Menu.Item
|
||||||
|
label={_(msg`Go to user's profile`)}
|
||||||
|
onPress={onNavigateToProfile}>
|
||||||
|
<Menu.ItemText>
|
||||||
|
<Trans>Go to profile</Trans>
|
||||||
|
</Menu.ItemText>
|
||||||
|
<Menu.ItemIcon icon={Person} />
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item
|
||||||
|
label={_(msg`Mute notifications`)}
|
||||||
|
onPress={() => (convo?.muted ? unmuteConvo() : muteConvo())}>
|
||||||
|
<Menu.ItemText>
|
||||||
|
{convo?.muted ? (
|
||||||
|
<Trans>Unmute notifications</Trans>
|
||||||
|
) : (
|
||||||
|
<Trans>Mute notifications</Trans>
|
||||||
|
)}
|
||||||
|
</Menu.ItemText>
|
||||||
|
<Menu.ItemIcon icon={convo?.muted ? Unmute : Mute} />
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu.Group>
|
||||||
|
{/* TODO(samuel): implement these */}
|
||||||
|
<Menu.Group>
|
||||||
|
<Menu.Item
|
||||||
|
label={_(msg`Block account`)}
|
||||||
|
onPress={() => {}}
|
||||||
|
disabled>
|
||||||
|
<Menu.ItemText>
|
||||||
|
<Trans>Block account</Trans>
|
||||||
|
</Menu.ItemText>
|
||||||
|
<Menu.ItemIcon
|
||||||
|
icon={profile.viewer?.blocking ? PersonCheck : PersonX}
|
||||||
|
/>
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item
|
||||||
|
label={_(msg`Report account`)}
|
||||||
|
onPress={() => {}}
|
||||||
|
disabled>
|
||||||
|
<Menu.ItemText>
|
||||||
|
<Trans>Report account</Trans>
|
||||||
|
</Menu.ItemText>
|
||||||
|
<Menu.ItemIcon icon={Flag} />
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu.Group>
|
||||||
|
<Menu.Group>
|
||||||
|
<Menu.Item
|
||||||
|
label={_(msg`Leave conversation`)}
|
||||||
|
onPress={leaveConvoControl.open}>
|
||||||
|
<Menu.ItemText>
|
||||||
|
<Trans>Leave conversation</Trans>
|
||||||
|
</Menu.ItemText>
|
||||||
|
<Menu.ItemIcon icon={ArrowBoxLeft} />
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu.Group>
|
||||||
|
</Menu.Outer>
|
||||||
|
</Menu.Root>
|
||||||
|
|
||||||
|
<Prompt.Basic
|
||||||
|
control={leaveConvoControl}
|
||||||
|
title={_(msg`Leave conversation`)}
|
||||||
|
description={_(
|
||||||
|
msg`Are you sure you want to leave this conversation? Your messages will be deleted for you, but not for other participants.`,
|
||||||
|
)}
|
||||||
|
confirmButtonCta={_(msg`Leave`)}
|
||||||
|
confirmButtonColor="negative"
|
||||||
|
onConfirm={() => leaveConvo()}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
ConvoMenu = React.memo(ConvoMenu)
|
||||||
|
|
||||||
|
export {ConvoMenu}
|
|
@ -0,0 +1,5 @@
|
||||||
|
import {createSinglePathSVG} from './TEMPLATE'
|
||||||
|
|
||||||
|
export const ArrowBoxLeft_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M3.293 3.293A1 1 0 0 1 4 3h7.25a1 1 0 1 1 0 2H5v14h6.25a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1V4a1 1 0 0 1 .293-.707Zm11.5 3.5a1 1 0 0 1 1.414 0l4.5 4.5a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414-1.414L17.586 13H8.75a1 1 0 1 1 0-2h8.836l-2.793-2.793a1 1 0 0 1 0-1.414Z',
|
||||||
|
})
|
|
@ -1,6 +1,7 @@
|
||||||
import React from 'react'
|
import React, {useCallback} from 'react'
|
||||||
import {TouchableOpacity, View} from 'react-native'
|
import {TouchableOpacity, View} from 'react-native'
|
||||||
import {AppBskyActorDefs} from '@atproto/api'
|
import {AppBskyActorDefs} from '@atproto/api'
|
||||||
|
import {ChatBskyConvoDefs} from '@atproto-labs/api'
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
import {msg, Trans} from '@lingui/macro'
|
import {msg, Trans} from '@lingui/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
|
@ -14,12 +15,11 @@ import {isWeb} from 'platform/detection'
|
||||||
import {ChatProvider, useChat} from 'state/messages'
|
import {ChatProvider, useChat} from 'state/messages'
|
||||||
import {ConvoStatus} from 'state/messages/convo'
|
import {ConvoStatus} from 'state/messages/convo'
|
||||||
import {useSession} from 'state/session'
|
import {useSession} from 'state/session'
|
||||||
import {UserAvatar} from 'view/com/util/UserAvatar'
|
import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
|
||||||
import {CenteredView} from 'view/com/util/Views'
|
import {CenteredView} from 'view/com/util/Views'
|
||||||
import {MessagesList} from '#/screens/Messages/Conversation/MessagesList'
|
import {MessagesList} from '#/screens/Messages/Conversation/MessagesList'
|
||||||
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
|
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
|
||||||
import {Button, ButtonIcon} from '#/components/Button'
|
import {ConvoMenu} from '#/components/dms/ConvoMenu'
|
||||||
import {DotGrid_Stroke2_Corner0_Rounded} from '#/components/icons/DotGrid'
|
|
||||||
import {ListMaybePlaceholder} from '#/components/Lists'
|
import {ListMaybePlaceholder} from '#/components/Lists'
|
||||||
import {Text} from '#/components/Typography'
|
import {Text} from '#/components/Typography'
|
||||||
import {ClipClopGate} from '../gate'
|
import {ClipClopGate} from '../gate'
|
||||||
|
@ -78,8 +78,9 @@ let Header = ({
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const {gtTablet} = useBreakpoints()
|
const {gtTablet} = useBreakpoints()
|
||||||
const navigation = useNavigation<NavigationProp>()
|
const navigation = useNavigation<NavigationProp>()
|
||||||
|
const {service} = useChat()
|
||||||
|
|
||||||
const onPressBack = React.useCallback(() => {
|
const onPressBack = useCallback(() => {
|
||||||
if (isWeb) {
|
if (isWeb) {
|
||||||
navigation.replace('MessagesList')
|
navigation.replace('MessagesList')
|
||||||
} else {
|
} else {
|
||||||
|
@ -87,6 +88,13 @@ let Header = ({
|
||||||
}
|
}
|
||||||
}, [navigation])
|
}, [navigation])
|
||||||
|
|
||||||
|
const onUpdateConvo = useCallback(
|
||||||
|
(convo: ChatBskyConvoDefs.ConvoView) => {
|
||||||
|
service.convo = convo
|
||||||
|
},
|
||||||
|
[service],
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
style={[
|
style={[
|
||||||
|
@ -95,22 +103,20 @@ let Header = ({
|
||||||
a.border_b,
|
a.border_b,
|
||||||
a.flex_row,
|
a.flex_row,
|
||||||
a.justify_between,
|
a.justify_between,
|
||||||
|
a.align_start,
|
||||||
a.gap_lg,
|
a.gap_lg,
|
||||||
a.px_lg,
|
a.px_lg,
|
||||||
a.py_sm,
|
a.py_sm,
|
||||||
]}>
|
]}>
|
||||||
{!gtTablet ? (
|
{!gtTablet ? (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
testID="viewHeaderDrawerBtn"
|
testID="conversationHeaderBackBtn"
|
||||||
onPress={onPressBack}
|
onPress={onPressBack}
|
||||||
hitSlop={BACK_HITSLOP}
|
hitSlop={BACK_HITSLOP}
|
||||||
style={{
|
style={{width: 30, height: 30}}
|
||||||
width: 30,
|
|
||||||
height: 30,
|
|
||||||
}}
|
|
||||||
accessibilityRole="button"
|
accessibilityRole="button"
|
||||||
accessibilityLabel={_(msg`Back`)}
|
accessibilityLabel={_(msg`Back`)}
|
||||||
accessibilityHint={_(msg`Access navigation links and settings`)}>
|
accessibilityHint="">
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
size={18}
|
size={18}
|
||||||
icon="angle-left"
|
icon="angle-left"
|
||||||
|
@ -124,24 +130,22 @@ let Header = ({
|
||||||
<View style={{width: 30}} />
|
<View style={{width: 30}} />
|
||||||
)}
|
)}
|
||||||
<View style={[a.align_center, a.gap_sm]}>
|
<View style={[a.align_center, a.gap_sm]}>
|
||||||
<UserAvatar size={32} avatar={profile.avatar} />
|
<PreviewableUserAvatar size={32} profile={profile} />
|
||||||
<Text style={[a.text_lg, a.font_bold]}>
|
<Text style={[a.text_lg, a.font_bold]}>
|
||||||
<Trans>{profile.displayName}</Trans>
|
<Trans>{profile.displayName}</Trans>
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
<View>
|
{service.convo ? (
|
||||||
<Button
|
<ConvoMenu
|
||||||
label={_(msg`Chat settings`)}
|
convo={service.convo}
|
||||||
color="secondary"
|
profile={profile}
|
||||||
size="large"
|
onUpdateConvo={onUpdateConvo}
|
||||||
variant="ghost"
|
currentScreen="conversation"
|
||||||
style={[{height: 'auto', width: 'auto'}, a.px_sm, a.py_sm]}
|
/>
|
||||||
onPress={() => {}}>
|
) : (
|
||||||
<ButtonIcon icon={DotGrid_Stroke2_Corner0_Rounded} />
|
<View style={{width: 30}} />
|
||||||
</Button>
|
)}
|
||||||
</View>
|
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
Header = React.memo(Header)
|
Header = React.memo(Header)
|
||||||
|
|
|
@ -12,6 +12,7 @@ import {MessagesTabNavigatorParams} from '#/lib/routes/types'
|
||||||
import {useGate} from '#/lib/statsig/statsig'
|
import {useGate} from '#/lib/statsig/statsig'
|
||||||
import {cleanError} from '#/lib/strings/errors'
|
import {cleanError} from '#/lib/strings/errors'
|
||||||
import {logger} from '#/logger'
|
import {logger} from '#/logger'
|
||||||
|
import {isNative} from '#/platform/detection'
|
||||||
import {useListConvos} from '#/state/queries/messages/list-converations'
|
import {useListConvos} from '#/state/queries/messages/list-converations'
|
||||||
import {useSession} from '#/state/session'
|
import {useSession} from '#/state/session'
|
||||||
import {List} from '#/view/com/util/List'
|
import {List} from '#/view/com/util/List'
|
||||||
|
@ -22,11 +23,13 @@ import {CenteredView} from '#/view/com/util/Views'
|
||||||
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
|
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
|
||||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||||
import {DialogControlProps, useDialogControl} from '#/components/Dialog'
|
import {DialogControlProps, useDialogControl} from '#/components/Dialog'
|
||||||
|
import {ConvoMenu} from '#/components/dms/ConvoMenu'
|
||||||
import {NewChat} from '#/components/dms/NewChat'
|
import {NewChat} from '#/components/dms/NewChat'
|
||||||
import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
|
import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
|
||||||
import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
|
import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
|
||||||
import {Link} from '#/components/Link'
|
import {Link} from '#/components/Link'
|
||||||
import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
|
import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
|
||||||
|
import {useMenuControl} from '#/components/Menu'
|
||||||
import {Text} from '#/components/Typography'
|
import {Text} from '#/components/Typography'
|
||||||
import {ClipClopGate} from '../gate'
|
import {ClipClopGate} from '../gate'
|
||||||
|
|
||||||
|
@ -190,6 +193,7 @@ function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const {currentAccount} = useSession()
|
const {currentAccount} = useSession()
|
||||||
|
const menuControl = useMenuControl()
|
||||||
|
|
||||||
let lastMessage = _(msg`No messages yet`)
|
let lastMessage = _(msg`No messages yet`)
|
||||||
let lastMessageSentAt: string | null = null
|
let lastMessageSentAt: string | null = null
|
||||||
|
@ -214,7 +218,10 @@ function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link to={`/messages/${convo.id}`} style={a.flex_1}>
|
<Link
|
||||||
|
to={`/messages/${convo.id}`}
|
||||||
|
style={a.flex_1}
|
||||||
|
onLongPress={isNative ? menuControl.open : undefined}>
|
||||||
{({hovered, pressed}) => (
|
{({hovered, pressed}) => (
|
||||||
<View
|
<View
|
||||||
style={[
|
style={[
|
||||||
|
@ -267,12 +274,26 @@ function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
|
||||||
a.flex_0,
|
a.flex_0,
|
||||||
a.ml_md,
|
a.ml_md,
|
||||||
a.mt_sm,
|
a.mt_sm,
|
||||||
{backgroundColor: t.palette.primary_500},
|
|
||||||
a.rounded_full,
|
a.rounded_full,
|
||||||
{height: 7, width: 7},
|
{
|
||||||
|
backgroundColor: convo.muted
|
||||||
|
? t.palette.contrast_200
|
||||||
|
: t.palette.primary_500,
|
||||||
|
height: 7,
|
||||||
|
width: 7,
|
||||||
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
<ConvoMenu
|
||||||
|
convo={convo}
|
||||||
|
profile={otherUser}
|
||||||
|
control={menuControl}
|
||||||
|
// TODO(sam) show on hover on web
|
||||||
|
// tricky because it captures the mouse event
|
||||||
|
hideTrigger
|
||||||
|
currentScreen="list"
|
||||||
|
/>
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React from 'react'
|
import React, {useContext, useEffect, useMemo, useState} from 'react'
|
||||||
import {BskyAgent} from '@atproto-labs/api'
|
import {BskyAgent} from '@atproto-labs/api'
|
||||||
|
|
||||||
import {Convo, ConvoParams} from '#/state/messages/convo'
|
import {Convo, ConvoParams} from '#/state/messages/convo'
|
||||||
|
@ -8,15 +8,14 @@ import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlSto
|
||||||
const ChatContext = React.createContext<{
|
const ChatContext = React.createContext<{
|
||||||
service: Convo
|
service: Convo
|
||||||
state: Convo['state']
|
state: Convo['state']
|
||||||
}>({
|
} | null>(null)
|
||||||
// @ts-ignore
|
|
||||||
service: null,
|
|
||||||
// @ts-ignore
|
|
||||||
state: null,
|
|
||||||
})
|
|
||||||
|
|
||||||
export function useChat() {
|
export function useChat() {
|
||||||
return React.useContext(ChatContext)
|
const ctx = useContext(ChatContext)
|
||||||
|
if (!ctx) {
|
||||||
|
throw new Error('useChat must be used within a ChatProvider')
|
||||||
|
}
|
||||||
|
return ctx
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ChatProvider({
|
export function ChatProvider({
|
||||||
|
@ -25,7 +24,7 @@ export function ChatProvider({
|
||||||
}: Pick<ConvoParams, 'convoId'> & {children: React.ReactNode}) {
|
}: Pick<ConvoParams, 'convoId'> & {children: React.ReactNode}) {
|
||||||
const {serviceUrl} = useDmServiceUrlStorage()
|
const {serviceUrl} = useDmServiceUrlStorage()
|
||||||
const {getAgent} = useAgent()
|
const {getAgent} = useAgent()
|
||||||
const [service] = React.useState(
|
const [service] = useState(
|
||||||
() =>
|
() =>
|
||||||
new Convo({
|
new Convo({
|
||||||
convoId,
|
convoId,
|
||||||
|
@ -35,13 +34,13 @@ export function ChatProvider({
|
||||||
__tempFromUserDid: getAgent().session?.did!,
|
__tempFromUserDid: getAgent().session?.did!,
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
const [state, setState] = React.useState(service.state)
|
const [state, setState] = useState(service.state)
|
||||||
|
|
||||||
React.useEffect(() => {
|
useEffect(() => {
|
||||||
service.initialize()
|
service.initialize()
|
||||||
}, [service])
|
}, [service])
|
||||||
|
|
||||||
React.useEffect(() => {
|
useEffect(() => {
|
||||||
const update = () => setState(service.state)
|
const update = () => setState(service.state)
|
||||||
service.on('update', update)
|
service.on('update', update)
|
||||||
return () => {
|
return () => {
|
||||||
|
@ -49,9 +48,7 @@ export function ChatProvider({
|
||||||
}
|
}
|
||||||
}, [service])
|
}, [service])
|
||||||
|
|
||||||
return (
|
const value = useMemo(() => ({service, state}), [service, state])
|
||||||
<ChatContext.Provider value={{state, service}}>
|
|
||||||
{children}
|
return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>
|
||||||
</ChatContext.Provider>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import {BskyAgent, ChatBskyConvoGetConvoForMembers} from '@atproto-labs/api'
|
import {BskyAgent, ChatBskyConvoGetConvoForMembers} from '@atproto-labs/api'
|
||||||
import {useMutation, useQueryClient} from '@tanstack/react-query'
|
import {useMutation, useQueryClient} from '@tanstack/react-query'
|
||||||
|
|
||||||
|
import {logger} from '#/logger'
|
||||||
import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
|
import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
|
||||||
import {RQKEY as CONVO_KEY} from './conversation'
|
import {RQKEY as CONVO_KEY} from './conversation'
|
||||||
import {useHeaders} from './temp-headers'
|
import {useHeaders} from './temp-headers'
|
||||||
|
@ -30,6 +31,9 @@ export function useGetConvoForMembers({
|
||||||
queryClient.setQueryData(CONVO_KEY(data.convo.id), data.convo)
|
queryClient.setQueryData(CONVO_KEY(data.convo.id), data.convo)
|
||||||
onSuccess?.(data)
|
onSuccess?.(data)
|
||||||
},
|
},
|
||||||
onError,
|
onError: error => {
|
||||||
|
logger.error(error)
|
||||||
|
onError?.(error)
|
||||||
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,68 @@
|
||||||
|
import {
|
||||||
|
BskyAgent,
|
||||||
|
ChatBskyConvoLeaveConvo,
|
||||||
|
ChatBskyConvoListConvos,
|
||||||
|
} from '@atproto-labs/api'
|
||||||
|
import {useMutation, useQueryClient} from '@tanstack/react-query'
|
||||||
|
|
||||||
|
import {logger} from '#/logger'
|
||||||
|
import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
|
||||||
|
import {RQKEY as CONVO_LIST_KEY} from './list-converations'
|
||||||
|
import {useHeaders} from './temp-headers'
|
||||||
|
|
||||||
|
export function useLeaveConvo(
|
||||||
|
convoId: string,
|
||||||
|
{
|
||||||
|
onSuccess,
|
||||||
|
onError,
|
||||||
|
}: {
|
||||||
|
onSuccess?: (data: ChatBskyConvoLeaveConvo.OutputSchema) => void
|
||||||
|
onError?: (error: Error) => void
|
||||||
|
},
|
||||||
|
) {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
const headers = useHeaders()
|
||||||
|
const {serviceUrl} = useDmServiceUrlStorage()
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async () => {
|
||||||
|
const agent = new BskyAgent({service: serviceUrl})
|
||||||
|
const {data} = await agent.api.chat.bsky.convo.leaveConvo(
|
||||||
|
{convoId},
|
||||||
|
{headers, encoding: 'application/json'},
|
||||||
|
)
|
||||||
|
|
||||||
|
return data
|
||||||
|
},
|
||||||
|
onMutate: () => {
|
||||||
|
queryClient.setQueryData(
|
||||||
|
CONVO_LIST_KEY,
|
||||||
|
(old?: {
|
||||||
|
pageParams: Array<string | undefined>
|
||||||
|
pages: Array<ChatBskyConvoListConvos.OutputSchema>
|
||||||
|
}) => {
|
||||||
|
console.log('old', old)
|
||||||
|
if (!old) return old
|
||||||
|
return {
|
||||||
|
...old,
|
||||||
|
pages: old.pages.map(page => {
|
||||||
|
return {
|
||||||
|
...page,
|
||||||
|
convos: page.convos.filter(convo => convo.id !== convoId),
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
)
|
||||||
|
},
|
||||||
|
onSuccess: data => {
|
||||||
|
queryClient.invalidateQueries({queryKey: CONVO_LIST_KEY})
|
||||||
|
onSuccess?.(data)
|
||||||
|
},
|
||||||
|
onError: error => {
|
||||||
|
logger.error(error)
|
||||||
|
queryClient.invalidateQueries({queryKey: CONVO_LIST_KEY})
|
||||||
|
onError?.(error)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
|
@ -0,0 +1,84 @@
|
||||||
|
import {
|
||||||
|
BskyAgent,
|
||||||
|
ChatBskyConvoMuteConvo,
|
||||||
|
ChatBskyConvoUnmuteConvo,
|
||||||
|
} from '@atproto-labs/api'
|
||||||
|
import {useMutation, useQueryClient} from '@tanstack/react-query'
|
||||||
|
|
||||||
|
import {logger} from '#/logger'
|
||||||
|
import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
|
||||||
|
import {RQKEY as CONVO_KEY} from './conversation'
|
||||||
|
import {RQKEY as CONVO_LIST_KEY} from './list-converations'
|
||||||
|
import {useHeaders} from './temp-headers'
|
||||||
|
|
||||||
|
export function useMuteConvo(
|
||||||
|
convoId: string,
|
||||||
|
{
|
||||||
|
onSuccess,
|
||||||
|
onError,
|
||||||
|
}: {
|
||||||
|
onSuccess?: (data: ChatBskyConvoMuteConvo.OutputSchema) => void
|
||||||
|
onError?: (error: Error) => void
|
||||||
|
},
|
||||||
|
) {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
const headers = useHeaders()
|
||||||
|
const {serviceUrl} = useDmServiceUrlStorage()
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async () => {
|
||||||
|
const agent = new BskyAgent({service: serviceUrl})
|
||||||
|
const {data} = await agent.api.chat.bsky.convo.muteConvo(
|
||||||
|
{convoId},
|
||||||
|
{headers, encoding: 'application/json'},
|
||||||
|
)
|
||||||
|
|
||||||
|
return data
|
||||||
|
},
|
||||||
|
onSuccess: data => {
|
||||||
|
queryClient.invalidateQueries({queryKey: CONVO_LIST_KEY})
|
||||||
|
queryClient.invalidateQueries({queryKey: CONVO_KEY(convoId)})
|
||||||
|
onSuccess?.(data)
|
||||||
|
},
|
||||||
|
onError: error => {
|
||||||
|
logger.error(error)
|
||||||
|
onError?.(error)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useUnmuteConvo(
|
||||||
|
convoId: string,
|
||||||
|
{
|
||||||
|
onSuccess,
|
||||||
|
onError,
|
||||||
|
}: {
|
||||||
|
onSuccess?: (data: ChatBskyConvoUnmuteConvo.OutputSchema) => void
|
||||||
|
onError?: (error: Error) => void
|
||||||
|
},
|
||||||
|
) {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
const headers = useHeaders()
|
||||||
|
const {serviceUrl} = useDmServiceUrlStorage()
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async () => {
|
||||||
|
const agent = new BskyAgent({service: serviceUrl})
|
||||||
|
const {data} = await agent.api.chat.bsky.convo.unmuteConvo(
|
||||||
|
{convoId},
|
||||||
|
{headers, encoding: 'application/json'},
|
||||||
|
)
|
||||||
|
|
||||||
|
return data
|
||||||
|
},
|
||||||
|
onSuccess: data => {
|
||||||
|
queryClient.invalidateQueries({queryKey: CONVO_LIST_KEY})
|
||||||
|
queryClient.invalidateQueries({queryKey: CONVO_KEY(convoId)})
|
||||||
|
onSuccess?.(data)
|
||||||
|
},
|
||||||
|
onError: error => {
|
||||||
|
logger.error(error)
|
||||||
|
onError?.(error)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
Loading…
Reference in New Issue