|
| 1 | +import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native'; |
| 2 | +import { DraftsIcon } from '../icons/DraftIcon'; |
| 3 | +import { |
| 4 | + FileTypes, |
| 5 | + MessagePreview, |
| 6 | + TranslationContextValue, |
| 7 | + useChatContext, |
| 8 | + useStateStore, |
| 9 | + useTheme, |
| 10 | + useTranslationContext, |
| 11 | +} from 'stream-chat-react-native'; |
| 12 | +import { DraftManagerState, DraftsManager } from '../utils/DraftsManager'; |
| 13 | +import { useCallback, useEffect, useMemo } from 'react'; |
| 14 | +import dayjs from 'dayjs'; |
| 15 | +import { useIsFocused, useNavigation } from '@react-navigation/native'; |
| 16 | +import { ChannelResponse, DraftMessage, DraftResponse, MessageResponseBase } from 'stream-chat'; |
| 17 | + |
| 18 | +export type DraftItemProps = { |
| 19 | + type?: 'channel' | 'thread'; |
| 20 | + channel?: ChannelResponse; |
| 21 | + date?: string; |
| 22 | + message: DraftMessage; |
| 23 | + // TODO: Fix the type for thread |
| 24 | + thread?: MessageResponseBase; |
| 25 | +}; |
| 26 | + |
| 27 | +export const attachmentTypeIconMap = { |
| 28 | + audio: '🔈', |
| 29 | + file: '📄', |
| 30 | + image: '📷', |
| 31 | + video: '🎥', |
| 32 | + voiceRecording: '🎙️', |
| 33 | +} as const; |
| 34 | + |
| 35 | +const getPreviewFromMessage = ({ |
| 36 | + t, |
| 37 | + draftMessage, |
| 38 | +}: { |
| 39 | + t: TranslationContextValue['t']; |
| 40 | + draftMessage: DraftMessage; |
| 41 | +}) => { |
| 42 | + if (draftMessage.attachments?.length) { |
| 43 | + const attachment = draftMessage?.attachments?.at(0); |
| 44 | + |
| 45 | + const attachmentIcon = attachment |
| 46 | + ? `${ |
| 47 | + attachmentTypeIconMap[ |
| 48 | + (attachment.type as keyof typeof attachmentTypeIconMap) ?? 'file' |
| 49 | + ] ?? attachmentTypeIconMap.file |
| 50 | + } ` |
| 51 | + : ''; |
| 52 | + |
| 53 | + if (attachment?.type === FileTypes.VoiceRecording) { |
| 54 | + return [ |
| 55 | + { bold: false, text: attachmentIcon }, |
| 56 | + { |
| 57 | + bold: false, |
| 58 | + text: t('Voice message'), |
| 59 | + }, |
| 60 | + ]; |
| 61 | + } |
| 62 | + return [ |
| 63 | + { bold: false, text: attachmentIcon }, |
| 64 | + { |
| 65 | + bold: false, |
| 66 | + text: |
| 67 | + attachment?.type === FileTypes.Image |
| 68 | + ? attachment?.fallback |
| 69 | + ? attachment?.fallback |
| 70 | + : 'N/A' |
| 71 | + : attachment?.title |
| 72 | + ? attachment?.title |
| 73 | + : 'N/A', |
| 74 | + }, |
| 75 | + ]; |
| 76 | + } |
| 77 | + |
| 78 | + if (draftMessage.text) { |
| 79 | + return [ |
| 80 | + { |
| 81 | + bold: false, |
| 82 | + text: draftMessage.text, |
| 83 | + }, |
| 84 | + ]; |
| 85 | + } |
| 86 | +}; |
| 87 | + |
| 88 | +export const DraftItem = ({ type, channel, date, message, thread }: DraftItemProps) => { |
| 89 | + const { |
| 90 | + theme: { |
| 91 | + colors: { grey }, |
| 92 | + }, |
| 93 | + } = useTheme(); |
| 94 | + const navigation = useNavigation(); |
| 95 | + const { client } = useChatContext(); |
| 96 | + const { t } = useTranslationContext(); |
| 97 | + const channelName = channel?.name ? channel.name : 'Channel'; |
| 98 | + |
| 99 | + const onNavigationHandler = async () => { |
| 100 | + if (channel?.type && channel.id) { |
| 101 | + const resultChannel = client.channel(channel?.type, channel?.id); |
| 102 | + await resultChannel?.watch(); |
| 103 | + |
| 104 | + if (type === 'thread' && thread?.id) { |
| 105 | + navigation.navigate('ThreadScreen', { |
| 106 | + thread, |
| 107 | + channel: resultChannel, |
| 108 | + }); |
| 109 | + } else if (type === 'channel') { |
| 110 | + navigation.navigate('ChannelScreen', { channel: resultChannel }); |
| 111 | + } |
| 112 | + } |
| 113 | + }; |
| 114 | + |
| 115 | + const previews = useMemo(() => { |
| 116 | + return getPreviewFromMessage({ draftMessage: message, t }); |
| 117 | + }, [message, t]); |
| 118 | + |
| 119 | + return ( |
| 120 | + <Pressable |
| 121 | + style={({ pressed }) => [styles.itemContainer, { opacity: pressed ? 0.8 : 1 }]} |
| 122 | + onPress={onNavigationHandler} |
| 123 | + > |
| 124 | + <View style={styles.header}> |
| 125 | + <Text style={styles.name}> |
| 126 | + {type === 'channel' ? `# ${channelName}` : `Thread in # ${channelName}`} |
| 127 | + </Text> |
| 128 | + <Text style={[styles.date, { color: grey }]}>{dayjs(date).fromNow()}</Text> |
| 129 | + </View> |
| 130 | + <View style={styles.content}> |
| 131 | + <View style={styles.icon}> |
| 132 | + <DraftsIcon /> |
| 133 | + </View> |
| 134 | + <MessagePreview previews={previews} /> |
| 135 | + </View> |
| 136 | + </Pressable> |
| 137 | + ); |
| 138 | +}; |
| 139 | + |
| 140 | +const selector = (nextValue: DraftManagerState) => |
| 141 | + ({ |
| 142 | + isLoading: nextValue.pagination.isLoading, |
| 143 | + isLoadingNext: nextValue.pagination.isLoadingNext, |
| 144 | + drafts: nextValue.drafts, |
| 145 | + }) as const; |
| 146 | + |
| 147 | +const renderItem = ({ item }: { item: DraftResponse }) => ( |
| 148 | + <DraftItem |
| 149 | + channel={item.channel} |
| 150 | + type={item.parent_id ? 'thread' : 'channel'} |
| 151 | + date={item.created_at} |
| 152 | + message={item.message} |
| 153 | + thread={item.parent_message} |
| 154 | + /> |
| 155 | +); |
| 156 | + |
| 157 | +const renderEmptyComponent = () => ( |
| 158 | + <Text style={{ textAlign: 'center', padding: 20 }}>No drafts available</Text> |
| 159 | +); |
| 160 | + |
| 161 | +export const DraftsList = () => { |
| 162 | + const isFocused = useIsFocused(); |
| 163 | + const { client } = useChatContext(); |
| 164 | + const draftsManager = useMemo(() => new DraftsManager({ client }), [client]); |
| 165 | + |
| 166 | + useEffect(() => { |
| 167 | + if (isFocused) { |
| 168 | + draftsManager.activate(); |
| 169 | + } else { |
| 170 | + draftsManager.deactivate(); |
| 171 | + } |
| 172 | + }, [draftsManager, isFocused]); |
| 173 | + |
| 174 | + useEffect(() => { |
| 175 | + draftsManager.registerSubscriptions(); |
| 176 | + |
| 177 | + return () => { |
| 178 | + draftsManager.deactivate(); |
| 179 | + draftsManager.unregisterSubscriptions(); |
| 180 | + }; |
| 181 | + }, [draftsManager]); |
| 182 | + |
| 183 | + const { isLoading, drafts } = useStateStore(draftsManager.state, selector); |
| 184 | + |
| 185 | + const onRefresh = useCallback(() => { |
| 186 | + draftsManager.reload({ force: true }); |
| 187 | + }, [draftsManager]); |
| 188 | + |
| 189 | + const onEndReached = useCallback(() => { |
| 190 | + draftsManager.loadNextPage(); |
| 191 | + }, [draftsManager]); |
| 192 | + |
| 193 | + return ( |
| 194 | + <FlatList |
| 195 | + contentContainerStyle={{ flexGrow: 1 }} |
| 196 | + data={drafts} |
| 197 | + refreshing={isLoading} |
| 198 | + keyExtractor={(item) => item.message.id} |
| 199 | + renderItem={renderItem} |
| 200 | + onRefresh={onRefresh} |
| 201 | + ListEmptyComponent={renderEmptyComponent} |
| 202 | + onEndReached={onEndReached} |
| 203 | + /> |
| 204 | + ); |
| 205 | +}; |
| 206 | + |
| 207 | +const styles = StyleSheet.create({ |
| 208 | + itemContainer: { |
| 209 | + paddingVertical: 8, |
| 210 | + marginHorizontal: 8, |
| 211 | + borderBottomWidth: 1, |
| 212 | + borderBottomColor: '#ccc', |
| 213 | + }, |
| 214 | + header: { |
| 215 | + flexDirection: 'row', |
| 216 | + alignItems: 'center', |
| 217 | + justifyContent: 'space-between', |
| 218 | + }, |
| 219 | + name: { |
| 220 | + fontSize: 16, |
| 221 | + fontWeight: 'bold', |
| 222 | + }, |
| 223 | + date: {}, |
| 224 | + content: { |
| 225 | + flexDirection: 'row', |
| 226 | + alignItems: 'center', |
| 227 | + marginTop: 4, |
| 228 | + }, |
| 229 | + icon: {}, |
| 230 | + text: { |
| 231 | + marginLeft: 8, |
| 232 | + flexShrink: 1, |
| 233 | + }, |
| 234 | +}); |
0 commit comments