Create a standard postcontainer and improve show/hide UI on posts

2023-04-12 10:57:23 -07:00
parent b730b7c81f
commit 03ada6ed73
4 changed files with 241 additions and 223 deletions
@@ -22,7 +22,7 @@ import {useStores} from 'state/index'
 import {PostMeta} from '../util/PostMeta'
 import {PostEmbeds} from '../util/post-embeds'
 import {PostCtrls} from '../util/PostCtrls'
-import {PostHider} from '../util/PostHider'
+import {PostContainer} from '../util/PostContainer'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {usePalette} from 'lib/hooks/usePalette'

@@ -270,15 +270,13 @@ export const PostThreadItem = observer(function PostThreadItem({
    )
  } else {
    return (
-      <PostHider
-        isMuted={item.post.author.viewer?.muted === true}
-        labels={item.post.labels}>
-        <Link
+      <>
+        <PostContainer
          testID={`postThreadItem-by-${item.post.author.handle}`}
-          style={[styles.outer, {borderTopColor: pal.colors.border}, pal.view]}
          href={itemHref}
-          title={itemTitle}
-          noFeedback>
+          style={[styles.outer, {borderTopColor: pal.colors.border}, pal.view]}
+          isMuted={item.post.author.viewer?.muted === true}
+          labels={item.post.labels}>
          {item._showParentReplyLine && (
            <View
              style={[
@@ -347,7 +345,7 @@ export const PostThreadItem = observer(function PostThreadItem({
              />
            </View>
          </View>
-        </Link>
+        </PostContainer>
        {item._hasMore ? (
          <Link
            style={[
@@ -366,7 +364,7 @@ export const PostThreadItem = observer(function PostThreadItem({
            />
          </Link>
        ) : undefined}
-      </PostHider>
+      </>
    )
  }
 })
@@ -17,7 +17,7 @@ import {UserInfoText} from '../util/UserInfoText'
 import {PostMeta} from '../util/PostMeta'
 import {PostEmbeds} from '../util/post-embeds'
 import {PostCtrls} from '../util/PostCtrls'
-import {PostHider} from '../util/PostHider'
+import {PostContainer} from '../util/PostContainer'
 import {Text} from '../util/text/Text'
 import {RichText} from '../util/text/RichText'
 import * as Toast from '../util/Toast'
@@ -150,86 +150,82 @@ export const Post = observer(function Post({
  }

  return (
-    <PostHider
+    <PostContainer
+      href={itemHref}
+      style={[styles.outer, pal.view, pal.border, style]}
      isMuted={item.post.author.viewer?.muted === true}
      labels={item.post.labels}>
-      <Link
-        style={[styles.outer, pal.view, pal.border, style]}
-        href={itemHref}
-        title={itemTitle}
-        noFeedback>
-        {showReplyLine && <View style={styles.replyLine} />}
-        <View style={styles.layout}>
-          <View style={styles.layoutAvi}>
-            <Link href={authorHref} title={authorTitle} asAnchor>
-              <UserAvatar size={52} avatar={item.post.author.avatar} />
-            </Link>
-          </View>
-          <View style={styles.layoutContent}>
-            <PostMeta
-              authorHandle={item.post.author.handle}
-              authorDisplayName={item.post.author.displayName}
-              timestamp={item.post.indexedAt}
-              postHref={itemHref}
-              did={item.post.author.did}
-            />
-            {replyAuthorDid !== '' && (
-              <View style={[s.flexRow, s.mb2, s.alignCenter]}>
-                <FontAwesomeIcon
-                  icon="reply"
-                  size={9}
-                  style={[pal.textLight, s.mr5]}
-                />
-                <Text type="sm" style={[pal.textLight, s.mr2]} lineHeight={1.2}>
-                  Reply to
-                </Text>
-                <UserInfoText
-                  type="sm"
-                  did={replyAuthorDid}
-                  attr="displayName"
-                  style={[pal.textLight]}
-                />
-              </View>
-            )}
-            {item.richText?.text ? (
-              <View style={styles.postTextContainer}>
-                <RichText
-                  type="post-text"
-                  richText={item.richText}
-                  lineHeight={1.3}
-                />
-              </View>
-            ) : undefined}
-            <PostEmbeds embed={item.post.embed} style={s.mb10} />
-            <PostCtrls
-              itemUri={itemUri}
-              itemCid={itemCid}
-              itemHref={itemHref}
-              itemTitle={itemTitle}
-              author={{
-                avatar: item.post.author.avatar!,
-                handle: item.post.author.handle,
-                displayName: item.post.author.displayName!,
-              }}
-              indexedAt={item.post.indexedAt}
-              text={item.richText?.text || record.text}
-              isAuthor={item.post.author.did === store.me.did}
-              replyCount={item.post.replyCount}
-              repostCount={item.post.repostCount}
-              likeCount={item.post.likeCount}
-              isReposted={!!item.post.viewer?.repost}
-              isLiked={!!item.post.viewer?.like}
-              onPressReply={onPressReply}
-              onPressToggleRepost={onPressToggleRepost}
-              onPressToggleLike={onPressToggleLike}
-              onCopyPostText={onCopyPostText}
-              onOpenTranslate={onOpenTranslate}
-              onDeletePost={onDeletePost}
-            />
-          </View>
+      {showReplyLine && <View style={styles.replyLine} />}
+      <View style={styles.layout}>
+        <View style={styles.layoutAvi}>
+          <Link href={authorHref} title={authorTitle} asAnchor>
+            <UserAvatar size={52} avatar={item.post.author.avatar} />
+          </Link>
        </View>
-      </Link>
-    </PostHider>
+        <View style={styles.layoutContent}>
+          <PostMeta
+            authorHandle={item.post.author.handle}
+            authorDisplayName={item.post.author.displayName}
+            timestamp={item.post.indexedAt}
+            postHref={itemHref}
+            did={item.post.author.did}
+          />
+          {replyAuthorDid !== '' && (
+            <View style={[s.flexRow, s.mb2, s.alignCenter]}>
+              <FontAwesomeIcon
+                icon="reply"
+                size={9}
+                style={[pal.textLight, s.mr5]}
+              />
+              <Text type="sm" style={[pal.textLight, s.mr2]} lineHeight={1.2}>
+                Reply to
+              </Text>
+              <UserInfoText
+                type="sm"
+                did={replyAuthorDid}
+                attr="displayName"
+                style={[pal.textLight]}
+              />
+            </View>
+          )}
+          {item.richText?.text ? (
+            <View style={styles.postTextContainer}>
+              <RichText
+                type="post-text"
+                richText={item.richText}
+                lineHeight={1.3}
+              />
+            </View>
+          ) : undefined}
+          <PostEmbeds embed={item.post.embed} style={s.mb10} />
+          <PostCtrls
+            itemUri={itemUri}
+            itemCid={itemCid}
+            itemHref={itemHref}
+            itemTitle={itemTitle}
+            author={{
+              avatar: item.post.author.avatar!,
+              handle: item.post.author.handle,
+              displayName: item.post.author.displayName!,
+            }}
+            indexedAt={item.post.indexedAt}
+            text={item.richText?.text || record.text}
+            isAuthor={item.post.author.did === store.me.did}
+            replyCount={item.post.replyCount}
+            repostCount={item.post.repostCount}
+            likeCount={item.post.likeCount}
+            isReposted={!!item.post.viewer?.repost}
+            isLiked={!!item.post.viewer?.like}
+            onPressReply={onPressReply}
+            onPressToggleRepost={onPressToggleRepost}
+            onPressToggleLike={onPressToggleLike}
+            onCopyPostText={onCopyPostText}
+            onOpenTranslate={onOpenTranslate}
+            onDeletePost={onDeletePost}
+          />
+        </View>
+      </View>
+    </PostContainer>
  )
 })

@@ -14,7 +14,7 @@ import {UserInfoText} from '../util/UserInfoText'
 import {PostMeta} from '../util/PostMeta'
 import {PostCtrls} from '../util/PostCtrls'
 import {PostEmbeds} from '../util/post-embeds'
-import {PostHider} from '../util/PostHider'
+import {PostContainer} from '../util/PostContainer'
 import {RichText} from '../util/text/RichText'
 import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
@@ -132,137 +132,134 @@ export const FeedItem = observer(function ({
  ]

  return (
-    <PostHider isMuted={isMuted} labels={item.post.labels}>
-      <Link
-        testID={`feedItem-by-${item.post.author.handle}`}
-        style={outerStyles}
-        href={itemHref}
-        title={itemTitle}
-        noFeedback>
-        {isThreadChild && (
-          <View
-            style={[styles.topReplyLine, {borderColor: pal.colors.replyLine}]}
-          />
-        )}
-        {isThreadParent && (
-          <View
+    <PostContainer
+      testID={`feedItem-by-${item.post.author.handle}`}
+      style={outerStyles}
+      href={itemHref}
+      isMuted={isMuted}
+      labels={item.post.labels}>
+      {isThreadChild && (
+        <View
+          style={[styles.topReplyLine, {borderColor: pal.colors.replyLine}]}
+        />
+      )}
+      {isThreadParent && (
+        <View
+          style={[
+            styles.bottomReplyLine,
+            {borderColor: pal.colors.replyLine},
+            isNoTop ? styles.bottomReplyLineNoTop : undefined,
+          ]}
+        />
+      )}
+      {item.reasonRepost && (
+        <Link
+          style={styles.includeReason}
+          href={`/profile/${item.reasonRepost.by.handle}`}
+          title={sanitizeDisplayName(
+            item.reasonRepost.by.displayName || item.reasonRepost.by.handle,
+          )}>
+          <FontAwesomeIcon
+            icon="retweet"
            style={[
-              styles.bottomReplyLine,
-              {borderColor: pal.colors.replyLine},
-              isNoTop ? styles.bottomReplyLineNoTop : undefined,
+              styles.includeReasonIcon,
+              {color: pal.colors.textLight} as FontAwesomeIconStyle,
            ]}
          />
-        )}
-        {item.reasonRepost && (
-          <Link
-            style={styles.includeReason}
-            href={`/profile/${item.reasonRepost.by.handle}`}
-            title={sanitizeDisplayName(
-              item.reasonRepost.by.displayName || item.reasonRepost.by.handle,
-            )}>
-            <FontAwesomeIcon
-              icon="retweet"
-              style={[
-                styles.includeReasonIcon,
-                {color: pal.colors.textLight} as FontAwesomeIconStyle,
-              ]}
-            />
-            <Text
+          <Text
+            type="sm-bold"
+            style={pal.textLight}
+            lineHeight={1.2}
+            numberOfLines={1}>
+            Reposted by{' '}
+            <DesktopWebTextLink
              type="sm-bold"
              style={pal.textLight}
              lineHeight={1.2}
-              numberOfLines={1}>
-              Reposted by{' '}
-              <DesktopWebTextLink
-                type="sm-bold"
-                style={pal.textLight}
-                lineHeight={1.2}
-                numberOfLines={1}
-                text={sanitizeDisplayName(
-                  item.reasonRepost.by.displayName ||
-                    item.reasonRepost.by.handle,
-                )}
-                href={`/profile/${item.reasonRepost.by.handle}`}
-              />
-            </Text>
+              numberOfLines={1}
+              text={sanitizeDisplayName(
+                item.reasonRepost.by.displayName || item.reasonRepost.by.handle,
+              )}
+              href={`/profile/${item.reasonRepost.by.handle}`}
+            />
+          </Text>
+        </Link>
+      )}
+      <View style={styles.layout}>
+        <View style={styles.layoutAvi}>
+          <Link href={authorHref} title={item.post.author.handle} asAnchor>
+            <UserAvatar size={52} avatar={item.post.author.avatar} />
          </Link>
-        )}
-        <View style={styles.layout}>
-          <View style={styles.layoutAvi}>
-            <Link href={authorHref} title={item.post.author.handle} asAnchor>
-              <UserAvatar size={52} avatar={item.post.author.avatar} />
-            </Link>
-          </View>
-          <View style={styles.layoutContent}>
-            <PostMeta
-              authorHandle={item.post.author.handle}
-              authorDisplayName={item.post.author.displayName}
-              timestamp={item.post.indexedAt}
-              postHref={itemHref}
-              did={item.post.author.did}
-              showFollowBtn={showFollowBtn}
-            />
-            {!isThreadChild && replyAuthorDid !== '' && (
-              <View style={[s.flexRow, s.mb2, s.alignCenter]}>
-                <FontAwesomeIcon
-                  icon="reply"
-                  size={9}
-                  style={[
-                    {color: pal.colors.textLight} as FontAwesomeIconStyle,
-                    s.mr5,
-                  ]}
-                />
-                <Text type="md" style={[pal.textLight, s.mr2]} lineHeight={1.2}>
-                  Reply to
-                </Text>
-                <UserInfoText
-                  type="md"
-                  did={replyAuthorDid}
-                  attr="displayName"
-                  style={[pal.textLight, s.ml2]}
-                />
-              </View>
-            )}
-            {item.richText?.text ? (
-              <View style={styles.postTextContainer}>
-                <RichText
-                  type="post-text"
-                  richText={item.richText}
-                  lineHeight={1.3}
-                />
-              </View>
-            ) : undefined}
-            <PostEmbeds embed={item.post.embed} style={styles.embed} />
-            <PostCtrls
-              style={styles.ctrls}
-              itemUri={itemUri}
-              itemCid={itemCid}
-              itemHref={itemHref}
-              itemTitle={itemTitle}
-              author={{
-                avatar: item.post.author.avatar!,
-                handle: item.post.author.handle,
-                displayName: item.post.author.displayName!,
-              }}
-              text={item.richText?.text || record.text}
-              indexedAt={item.post.indexedAt}
-              isAuthor={item.post.author.did === store.me.did}
-              replyCount={item.post.replyCount}
-              repostCount={item.post.repostCount}
-              likeCount={item.post.likeCount}
-              isReposted={!!item.post.viewer?.repost}
-              isLiked={!!item.post.viewer?.like}
-              onPressReply={onPressReply}
-              onPressToggleRepost={onPressToggleRepost}
-              onPressToggleLike={onPressToggleLike}
-              onCopyPostText={onCopyPostText}
-              onOpenTranslate={onOpenTranslate}
-              onDeletePost={onDeletePost}
-            />
-          </View>
        </View>
-      </Link>
-    </PostHider>
+        <View style={styles.layoutContent}>
+          <PostMeta
+            authorHandle={item.post.author.handle}
+            authorDisplayName={item.post.author.displayName}
+            timestamp={item.post.indexedAt}
+            postHref={itemHref}
+            did={item.post.author.did}
+            showFollowBtn={showFollowBtn}
+          />
+          {!isThreadChild && replyAuthorDid !== '' && (
+            <View style={[s.flexRow, s.mb2, s.alignCenter]}>
+              <FontAwesomeIcon
+                icon="reply"
+                size={9}
+                style={[
+                  {color: pal.colors.textLight} as FontAwesomeIconStyle,
+                  s.mr5,
+                ]}
+              />
+              <Text type="md" style={[pal.textLight, s.mr2]} lineHeight={1.2}>
+                Reply to
+              </Text>
+              <UserInfoText
+                type="md"
+                did={replyAuthorDid}
+                attr="displayName"
+                style={[pal.textLight, s.ml2]}
+              />
+            </View>
+          )}
+          {item.richText?.text ? (
+            <View style={styles.postTextContainer}>
+              <RichText
+                type="post-text"
+                richText={item.richText}
+                lineHeight={1.3}
+              />
+            </View>
+          ) : undefined}
+          <PostEmbeds embed={item.post.embed} style={styles.embed} />
+          <PostCtrls
+            style={styles.ctrls}
+            itemUri={itemUri}
+            itemCid={itemCid}
+            itemHref={itemHref}
+            itemTitle={itemTitle}
+            author={{
+              avatar: item.post.author.avatar!,
+              handle: item.post.author.handle,
+              displayName: item.post.author.displayName!,
+            }}
+            text={item.richText?.text || record.text}
+            indexedAt={item.post.indexedAt}
+            isAuthor={item.post.author.did === store.me.did}
+            replyCount={item.post.replyCount}
+            repostCount={item.post.repostCount}
+            likeCount={item.post.likeCount}
+            isReposted={!!item.post.viewer?.repost}
+            isLiked={!!item.post.viewer?.like}
+            onPressReply={onPressReply}
+            onPressToggleRepost={onPressToggleRepost}
+            onPressToggleLike={onPressToggleLike}
+            onCopyPostText={onCopyPostText}
+            onOpenTranslate={onOpenTranslate}
+            onDeletePost={onDeletePost}
+          />
+        </View>
+      </View>
+    </PostContainer>
  )
 })

@@ -1,25 +1,43 @@
 import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native'
 import {ComAtprotoLabelDefs} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {usePalette} from 'lib/hooks/usePalette'
+import {Link} from './Link'
 import {Text} from './text/Text'
 import {getLabelValueGroup} from 'lib/labeling/helpers'
+import {addStyle} from 'lib/styles'

-export function PostHider({
+export function PostContainer({
+  testID,
+  href,
  isMuted,
  labels,
+  style,
  children,
 }: React.PropsWithChildren<{
+  testID?: string
+  href: string
  isMuted?: boolean
+  style: StyleProp<ViewStyle>
  labels: ComAtprotoLabelDefs.Label[] | undefined
 }>) {
  const pal = usePalette('default')
-  const palError = usePalette('error')
  const [override, setOverride] = React.useState(false)
+  const bg = override ? pal.viewLight : pal.view

  if (!isMuted && !labels?.length) {
-    return <>{children}</>
+    return (
+      <Link testID={testID} style={style} href={href} noFeedback>
+        {children}
+      </Link>
+    )
  }

  const label = labels?.[0] // TODO use config to settle on most relevant item
@@ -29,8 +47,8 @@ export function PostHider({
  }

  return (
-    <View style={[styles.container, pal.view]}>
-      <View style={[styles.description, pal.view, pal.border]}>
+    <>
+      <View style={[styles.description, bg, pal.border]}>
        <FontAwesomeIcon
          icon={['far', 'eye-slash']}
          style={[styles.icon, pal.text]}
@@ -53,12 +71,17 @@ export function PostHider({
        </TouchableOpacity>
      </View>
      {override && (
-        <View
-          style={[styles.childrenContainer, pal.border, palError.viewLight]}>
-          {children}
+        <View style={[styles.childrenContainer, pal.border, bg]}>
+          <Link
+            testID={testID}
+            style={addStyle(style, styles.child)}
+            href={href}
+            noFeedback>
+            {children}
+          </Link>
        </View>
      )}
-    </View>
+    </>
  )
 }

@@ -78,6 +101,10 @@ const styles = StyleSheet.create({
  },
  childrenContainer: {
    paddingHorizontal: 6,
-    paddingVertical: 6,
+    paddingBottom: 6,
+  },
+  child: {
+    borderWidth: 1,
+    borderRadius: 12,
  },
 })