tf-checkout-react-native 2.0.0-beta.0 → 2.0.0-beta.5

package/src/sections/EventDiscussionView.tsx

@@ -0,0 +1,633 @@
+import React, { useRef, useState } from 'react'
+import {
+  ActivityIndicator,
+  Alert,
+  FlatList,
+  Image,
+  KeyboardAvoidingView,
+  Linking,
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native'
+import type {
+  EventComment,
+  EventCommentReportReason,
+  EventDiscussion,
+} from 'tf-checkout-shared'
+import { EVENT_COMMENT_IMAGE_MAX_COUNT } from 'tf-checkout-shared'
+import { useTheme } from '../ui/CheckoutProvider'
+import { CommentImages, CommentImageDrafts } from './discussion/CommentImages'
+import { SwipeReply } from './discussion/SwipeReply'
+import { useAccountT } from '../ui/useAccountT'
+
+export interface EventDiscussionViewProps {
+  eventId: string
+  discussion: EventDiscussion
+  onLogin?: () => void
+  /** Platform picker only; common hook owns upload, validation and publication. */
+  pickImage?: () => Promise<string | null>
+  pickImages?: (remaining: number) => Promise<string[] | null>
+  previewKey?: string
+  locale?: string
+  renderReplyIcon?: (color: string) => React.ReactNode
+  onModerationFilter?: (filter: 'pending' | 'reported' | undefined) => void
+  renderReactionIcon?: (
+    reaction: 'up' | 'down',
+    selected: boolean,
+    color: string
+  ) => React.ReactNode
+}
+
+/** Native presentation of the common discussion state. No account, moderation
+ * or mutation eligibility is inferred here: controls use the API's capabilities. */
+const EventDiscussionBody = ({
+  eventId,
+  discussion: d,
+  onLogin,
+  pickImage,
+  pickImages,
+  previewKey,
+  locale,
+  renderReplyIcon,
+  onModerationFilter,
+  renderReactionIcon,
+}: EventDiscussionViewProps) => {
+  const theme = useTheme()
+  const t = useAccountT(locale)
+  const list = useRef<FlatList<EventComment>>(null)
+  const firstContent = useRef(true)
+  const [actions, setActions] = useState<EventComment | null>(null)
+  const [reporting, setReporting] = useState<EventComment | null>(null)
+  const [moderating, setModerating] = useState<{
+    comment: EventComment
+    status: 'published' | 'hidden'
+  } | null>(null)
+  const [reason, setReason] = useState('')
+  const [blocksVisible, setBlocksVisible] = useState(false)
+  const [pickerError, setPickerError] = useState('')
+  const [imageOpen, setImageOpen] = useState(false)
+  const [pickerBusy, setPickerBusy] = useState(false)
+  const picking = useRef(false)
+  const text = { color: theme.text, fontFamily: theme.fontFamily }
+  const muted = { color: theme.muted, fontFamily: theme.fontFamily }
+  const closeActions = (work: (comment: EventComment) => void) => {
+    if (actions) work(actions)
+    setActions(null)
+  }
+  const chooseImage = async () => {
+    if (
+      (!pickImages && !pickImage) ||
+      d.isSubmitting ||
+      picking.current ||
+      d.imagesBase64.length >= EVENT_COMMENT_IMAGE_MAX_COUNT
+    )
+      return
+    picking.current = true
+    setPickerBusy(true)
+    setPickerError('')
+    try {
+      const values = pickImages
+        ? await pickImages(EVENT_COMMENT_IMAGE_MAX_COUNT - d.imagesBase64.length)
+        : [await pickImage?.()].filter((value): value is string => Boolean(value))
+      if (values?.length) d.appendImagesBase64(values)
+    } catch (error) {
+      setPickerError(
+        error instanceof Error
+          ? error.message
+          : 'Your image couldn’t be opened. Try again.'
+      )
+    } finally {
+      picking.current = false
+      setPickerBusy(false)
+    }
+  }
+  const send = async () => {
+    if (await d.submit()) list.current?.scrollToEnd({ animated: true })
+  }
+  const item = ({ item: comment }: { item: EventComment }) => {
+    const own = comment.canEdit || comment.canDelete
+    return (
+      <SwipeReply
+        enabled={d.canReplyTo(comment) && !d.isSubmitting && !imageOpen}
+        onReply={() => d.replyTo(comment)}
+        renderIcon={renderReplyIcon}
+        hint={t('Swipe left to reply')}
+      >
+        <View style={[s.row, own && s.ownRow]}>
+          {!own && (
+            <View style={[s.avatar, { backgroundColor: theme.surfaceMuted }]}>
+              {comment.author.avatarUrl ? (
+                <Image source={{ uri: comment.author.avatarUrl }} style={s.avatar} />
+              ) : (
+                <Text style={text}>{comment.author.name.slice(0, 1).toUpperCase()}</Text>
+              )}
+            </View>
+          )}
+          <View
+            style={[
+              s.bubble,
+              {
+                backgroundColor: theme.surface,
+                borderColor: own ? theme.accent : theme.border,
+              },
+              own && s.ownBubble,
+            ]}
+          >
+            <View style={s.authorRow}>
+              <Text style={[muted, s.author]}>
+                {comment.author.name}
+                {own ? ' (you)' : ''}
+              </Text>
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={`Actions for comment by ${comment.author.name}`}
+                hitSlop={10}
+                onPress={() => setActions(comment)}
+              >
+                <Text style={muted}>•••</Text>
+              </Pressable>
+            </View>
+            {comment.replyTo && (
+              <Pressable
+                accessibilityRole="button"
+                onPress={() => d.replyTo(comment)}
+                style={[s.reply, { borderLeftColor: theme.accent }]}
+              >
+                <Text style={[muted, s.author]}>{comment.replyTo.authorName}</Text>
+                <Text style={muted} numberOfLines={2}>
+                  {comment.replyTo.body}
+                </Text>
+              </Pressable>
+            )}
+            <CommentImages
+              key={`${comment.id}:${comment.revision}`}
+              eventId={eventId}
+              comment={comment}
+              previewKey={previewKey}
+              locale={locale}
+              onPreviewChange={setImageOpen}
+            />
+            <Text selectable style={[text, s.body]}>
+              {comment.status === 'deleted' ? 'Comment removed' : comment.body}
+            </Text>
+            {comment.status === 'pending' && (
+              <Text accessibilityLiveRegion="polite" style={[muted, s.pending]}>
+                Awaiting review
+              </Text>
+            )}
+            {comment.status === 'hidden' && (
+              <Text style={[muted, s.pending]}>Hidden</Text>
+            )}
+            <View style={s.meta}>
+              <Text style={[muted, s.date]}>
+                {new Date(comment.createdAt).toLocaleString()}
+                {comment.editedAt ? ' · Edited' : ''}
+              </Text>
+              {(['up', 'down'] as const).map((reaction) => (
+                <Pressable
+                  key={reaction}
+                  accessibilityRole="button"
+                  accessibilityLabel={
+                    reaction === 'up' ? 'Like comment' : 'Dislike comment'
+                  }
+                  accessibilityState={{
+                    selected: comment.reactions.mine === reaction,
+                    disabled: d.isSubmitting,
+                  }}
+                  disabled={d.isSubmitting}
+                  onPress={() =>
+                    void d.react(
+                      comment,
+                      comment.reactions.mine === reaction ? null : reaction
+                    )
+                  }
+                  style={s.reaction}
+                >
+                  <View style={s.reactionInner}>
+                    {renderReactionIcon ? (
+                      renderReactionIcon(
+                        reaction,
+                        comment.reactions.mine === reaction,
+                        comment.reactions.mine === reaction ? theme.accent : theme.muted
+                      )
+                    ) : (
+                      <Text>{reaction === 'up' ? '👍' : '👎'}</Text>
+                    )}
+                    <Text
+                      style={{
+                        color:
+                          comment.reactions.mine === reaction
+                            ? theme.accent
+                            : theme.muted,
+                      }}
+                    >
+                      {comment.reactions[reaction] || ''}
+                    </Text>
+                  </View>
+                </Pressable>
+              ))}
+            </View>
+            {comment.replyCount > 0 && (
+              <Pressable
+                accessibilityRole="button"
+                disabled={!d.canReplyTo(comment)}
+                onPress={() => d.replyTo(comment)}
+              >
+                <Text style={[muted, s.pending]}>
+                  {comment.replyCount} {comment.replyCount === 1 ? 'reply' : 'replies'} ·
+                  Reply
+                </Text>
+              </Pressable>
+            )}
+          </View>
+        </View>
+      </SwipeReply>
+    )
+  }
+  const actionButton = (label: string, onPress: () => void) => (
+    <Pressable key={label} accessibilityRole="button" onPress={onPress} style={s.action}>
+      <Text style={text}>{t(label)}</Text>
+    </Pressable>
+  )
+  const sheet = (visible: boolean, close: () => void, children: React.ReactNode) => (
+    <Modal transparent animationType="slide" visible={visible} onRequestClose={close}>
+      <View style={s.overlay}>
+        <Pressable
+          accessibilityLabel="Close menu"
+          style={StyleSheet.absoluteFill}
+          onPress={close}
+        />
+        <View
+          style={[s.sheet, { backgroundColor: theme.surface, borderColor: theme.border }]}
+        >
+          {children}
+          {actionButton('Close', close)}
+        </View>
+      </View>
+    </Modal>
+  )
+  return (
+    <KeyboardAvoidingView
+      style={s.container}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      {onModerationFilter && d.canModerate && (
+        <View style={s.filters}>
+          {actionButton('Comments', () => onModerationFilter(undefined))}
+          {actionButton('Pending', () => onModerationFilter('pending'))}
+          {actionButton('Reported', () => onModerationFilter('reported'))}
+        </View>
+      )}
+      {!!d.blockedAuthors.length && (
+        <Pressable
+          accessibilityRole="button"
+          onPress={() => setBlocksVisible(true)}
+          style={s.blocked}
+        >
+          <Text style={muted}>Blocked people</Text>
+        </Pressable>
+      )}
+      {d.isLoading ? (
+        <ActivityIndicator style={s.loading} color={theme.accent} />
+      ) : (
+        <FlatList
+          ref={list}
+          data={d.comments}
+          keyExtractor={(comment) => comment.id}
+          renderItem={item}
+          contentContainerStyle={s.messages}
+          keyboardShouldPersistTaps="handled"
+          maintainVisibleContentPosition={{ minIndexForVisible: 0 }}
+          onContentSizeChange={() => {
+            if (firstContent.current && d.comments.length) {
+              firstContent.current = false
+              list.current?.scrollToEnd({ animated: false })
+            }
+          }}
+          ListHeaderComponent={
+            d.hasMore ? actionButton('Earlier comments', d.loadMore) : null
+          }
+          ListEmptyComponent={
+            <Text style={[muted, s.empty]}>Be the first to leave a comment.</Text>
+          }
+          refreshing={d.isLoading}
+          onRefresh={() => void d.refresh()}
+        />
+      )}
+      {(d.error || pickerError) && (
+        <View style={s.notice}>
+          <Text accessibilityRole="alert" style={{ color: theme.error }}>
+            {t(d.error || pickerError)}
+          </Text>
+          <Pressable accessibilityRole="button" onPress={() => void d.refresh()}>
+            <Text style={muted}>Try again</Text>
+          </Pressable>
+        </View>
+      )}
+      {!!d.message && (
+        <Text accessibilityLiveRegion="polite" style={[muted, s.notice]}>
+          {t(d.message)}
+        </Text>
+      )}
+      {(d.replyingTo || d.editing) && (
+        <View style={[s.draftContext, { borderColor: theme.border }]}>
+          <Text style={muted} numberOfLines={1}>
+            {d.editing
+              ? 'Edit your comment'
+              : t('Reply to {{name}}', { name: d.replyingTo?.author.name ?? '' })}
+          </Text>
+          <Pressable accessibilityRole="button" onPress={d.cancelDraft}>
+            <Text style={muted}>Cancel</Text>
+          </Pressable>
+        </View>
+      )}
+      <CommentImageDrafts
+        images={d.imagesBase64}
+        locale={locale}
+        disabled={d.isSubmitting}
+        onRemove={d.removeImage}
+      />
+      {d.canPost ? (
+        <View
+          style={[
+            s.composer,
+            { borderColor: theme.border, backgroundColor: theme.surface },
+          ]}
+        >
+          {(pickImages || pickImage) && !d.editing && (
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={t('Attach image')}
+              disabled={
+                d.isSubmitting ||
+                pickerBusy ||
+                d.imagesBase64.length >= EVENT_COMMENT_IMAGE_MAX_COUNT
+              }
+              onPress={() => void chooseImage()}
+              style={s.attach}
+            >
+              <Text style={[muted, s.plus]}>⊕</Text>
+            </Pressable>
+          )}
+          <TextInput
+            accessibilityLabel="Your comment"
+            placeholder="Enter your comment…"
+            placeholderTextColor={theme.muted}
+            multiline
+            maxLength={4000}
+            value={d.body}
+            onChangeText={d.setBody}
+            editable={!d.isSubmitting}
+            style={[text, s.input]}
+          />
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={d.editing ? 'Save comment' : 'Post comment'}
+            disabled={
+              d.isSubmitting ||
+              pickerBusy ||
+              (!d.body.trim() && !d.imagesBase64.length && !d.editing?.images.length)
+            }
+            onPress={() => void send()}
+            style={s.send}
+          >
+            {d.isSubmitting ? (
+              <ActivityIndicator color={theme.accent} />
+            ) : (
+              <Text style={{ color: theme.accent }}>{d.editing ? 'Save' : 'Send'}</Text>
+            )}
+          </Pressable>
+        </View>
+      ) : (
+        <Pressable
+          accessibilityRole="button"
+          onPress={onLogin}
+          style={[
+            s.composer,
+            { borderColor: theme.border, backgroundColor: theme.surface },
+          ]}
+        >
+          <Text style={text}>Sign in to leave a comment</Text>
+        </Pressable>
+      )}
+      <Pressable
+        accessibilityRole="link"
+        style={s.support}
+        onPress={() => {
+          if (/^https:\/\//.test(d.supportUrl))
+            void Linking.openURL(d.supportUrl).catch(() => undefined)
+        }}
+      >
+        <Text style={[muted, s.date]}>Need help? Contact support</Text>
+      </Pressable>
+      {sheet(
+        Boolean(actions),
+        () => setActions(null),
+        actions && (
+          <>
+            {d.canReplyTo(actions) &&
+              actionButton('Reply', () => closeActions((comment) => d.replyTo(comment)))}
+            {actions.canEdit &&
+              actionButton('Edit', () => closeActions((comment) => d.edit(comment)))}
+            {actions.canDelete &&
+              actionButton('Delete', () =>
+                closeActions((comment) =>
+                  Alert.alert(
+                    'Delete comment?',
+                    'Your comment will be removed from this conversation.',
+                    [
+                      { text: 'Cancel', style: 'cancel' },
+                      {
+                        text: 'Delete',
+                        style: 'destructive',
+                        onPress: () => void d.remove(comment),
+                      },
+                    ]
+                  )
+                )
+              )}
+            {d.canPost &&
+              actionButton('Report comment', () => closeActions(setReporting))}
+            {d.canPost &&
+              !actions.canEdit &&
+              actionButton('Block this person', () =>
+                closeActions((comment) =>
+                  Alert.alert(
+                    `Block ${comment.author.name}?`,
+                    'You won’t see their comments. You can unblock them from Blocked people.',
+                    [
+                      { text: 'Cancel', style: 'cancel' },
+                      {
+                        text: 'Block',
+                        onPress: () => void d.block(comment.author.id, true),
+                      },
+                    ]
+                  )
+                )
+              )}
+            {actions.canModerate &&
+              actionButton(
+                actions.status === 'published' ? 'Hide comment' : 'Approve comment',
+                () =>
+                  closeActions((comment) => {
+                    setReason('')
+                    setModerating({
+                      comment,
+                      status: comment.status === 'published' ? 'hidden' : 'published',
+                    })
+                  })
+              )}
+          </>
+        )
+      )}
+      {sheet(
+        Boolean(reporting),
+        () => setReporting(null),
+        <>
+          <Text style={text}>Report comment</Text>
+          {(
+            [
+              ['spam', 'Spam'],
+              ['abuse', 'Harassment or abuse'],
+              ['unsafe', 'Unsafe content'],
+              ['other', 'Other'],
+            ] as Array<[EventCommentReportReason, string]>
+          ).map(([value, label]) =>
+            actionButton(label, () => {
+              if (reporting) void d.report(reporting, value)
+              setReporting(null)
+            })
+          )}
+        </>
+      )}
+      {sheet(
+        Boolean(moderating),
+        () => setModerating(null),
+        <>
+          <Text style={text}>
+            {moderating?.status === 'published' ? 'Approve comment' : 'Hide comment'}
+          </Text>
+          <TextInput
+            accessibilityLabel="Moderation reason"
+            placeholder="Reason"
+            placeholderTextColor={theme.muted}
+            value={reason}
+            onChangeText={setReason}
+            style={[text, s.reason]}
+          />
+          {actionButton('Confirm', () => {
+            if (moderating && reason.trim()) {
+              void d.moderate(moderating.comment, moderating.status, reason.trim())
+              setModerating(null)
+            }
+          })}
+        </>
+      )}
+      {sheet(
+        blocksVisible,
+        () => setBlocksVisible(false),
+        <>
+          <Text style={text}>Blocked people</Text>
+          <FlatList
+            data={d.blockedAuthors}
+            keyExtractor={(person) => person.id}
+            renderItem={({ item: person }) =>
+              actionButton(`Unblock ${person.name}`, () => void d.block(person.id, false))
+            }
+          />
+        </>
+      )}
+    </KeyboardAvoidingView>
+  )
+}
+
+/** Retire local dialogs and full-screen images along with their shared subject. */
+export const EventDiscussionView = (props: EventDiscussionViewProps) => (
+  <EventDiscussionBody key={props.discussion.scopeKey} {...props} />
+)
+
+const s = StyleSheet.create({
+  container: { flex: 1 },
+  messages: { padding: 16, paddingBottom: 12 },
+  row: { flexDirection: 'row', alignItems: 'flex-end', marginBottom: 16, gap: 12 },
+  ownRow: { paddingRight: 44 },
+  avatar: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  bubble: {
+    flex: 1,
+    borderWidth: 1,
+    borderRadius: 14,
+    borderBottomLeftRadius: 0,
+    padding: 15,
+  },
+  ownBubble: { borderBottomLeftRadius: 14, borderBottomRightRadius: 0 },
+  authorRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 6,
+    gap: 8,
+  },
+  author: { fontSize: 12, flexShrink: 1 },
+  body: { fontSize: 14, lineHeight: 22 },
+  meta: { flexDirection: 'row', alignItems: 'center', marginTop: 10, gap: 10 },
+  date: { fontSize: 11, flexShrink: 1 },
+  reaction: { minHeight: 28, justifyContent: 'center' },
+  reactionInner: { flexDirection: 'row', alignItems: 'center', gap: 4 },
+  pending: { fontSize: 12, marginTop: 8 },
+  reply: { borderLeftWidth: 2, paddingLeft: 8, marginBottom: 8 },
+  composer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 32,
+    minHeight: 64,
+    marginHorizontal: 16,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+  },
+  input: { flex: 1, maxHeight: 140, fontSize: 14, paddingVertical: 8 },
+  attach: { paddingRight: 10, paddingVertical: 6 },
+  plus: { fontSize: 24 },
+  send: { paddingLeft: 10, paddingVertical: 10 },
+  support: { padding: 8, alignItems: 'center' },
+  draftContext: {
+    marginHorizontal: 20,
+    padding: 10,
+    borderTopWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  notice: { marginHorizontal: 20, marginVertical: 8 },
+  empty: { textAlign: 'center', paddingVertical: 32 },
+  loading: { margin: 32 },
+  overlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'flex-end' },
+  sheet: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    borderWidth: 1,
+    padding: 20,
+    paddingBottom: 32,
+    maxHeight: '80%',
+  },
+  action: { paddingVertical: 14, paddingHorizontal: 8 },
+  filters: { flexDirection: 'row', justifyContent: 'space-around' },
+  blocked: { alignItems: 'flex-end', paddingHorizontal: 20 },
+  reason: {
+    borderWidth: 1,
+    borderColor: '#777',
+    borderRadius: 8,
+    padding: 12,
+    marginTop: 16,
+  },
+})