From 4059fe85187160abf6af5b5a07331f5d614bf8ac Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Wed, 5 Jul 2023 08:59:34 -0700
Subject: [PATCH] [C-2821] Add hidden dog tag to mobile card (#3701)

---
 packages/mobile/src/components/card/Card.tsx  |  5 ++++
 .../src/components/card/CollectionDogEar.tsx  | 27 +++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 packages/mobile/src/components/card/CollectionDogEar.tsx

diff --git a/packages/mobile/src/components/card/Card.tsx b/packages/mobile/src/components/card/Card.tsx
index b23796616bb..fce5a594e5f 100644
--- a/packages/mobile/src/components/card/Card.tsx
+++ b/packages/mobile/src/components/card/Card.tsx
@@ -14,6 +14,8 @@ import { flexRowCentered, makeStyles } from 'app/styles'
 import type { ImageProps } from '../image/FastImage'
 import { CollectionDownloadStatusIndicator } from '../offline-downloads/CollectionDownloadStatusIndicator'
 
+import { CollectionDogEar } from './CollectionDogEar'
+
 export type CardType = 'user' | 'collection'
 
 const useStyles = makeStyles(({ palette, typography, spacing }) => ({
@@ -102,6 +104,9 @@ export const Card = (props: CardProps) => {
       styles={{ root: style, content: styles.cardContent }}
       {...TileProps}
     >
+      {props.type === 'collection' ? (
+        <CollectionDogEar collectionId={props.id} />
+      ) : null}
       {renderImage({
         style: [styles.cardImage, props.type === 'user' && styles.userImage]
       })}
diff --git a/packages/mobile/src/components/card/CollectionDogEar.tsx b/packages/mobile/src/components/card/CollectionDogEar.tsx
new file mode 100644
index 00000000000..23210c49130
--- /dev/null
+++ b/packages/mobile/src/components/card/CollectionDogEar.tsx
@@ -0,0 +1,27 @@
+import type { ID } from '@audius/common'
+import { cacheCollectionsSelectors } from '@audius/common'
+import { useSelector } from 'react-redux'
+
+import { DogEar, DogEarType } from '../core'
+
+const { getCollection } = cacheCollectionsSelectors
+
+type CollectionDogEarProps = {
+  collectionId: ID
+}
+
+export const CollectionDogEar = (props: CollectionDogEarProps) => {
+  const { collectionId } = props
+
+  const isPrivate = useSelector(
+    (state) => getCollection(state, { id: collectionId })?.is_private
+  )
+
+  const dogEarType = isPrivate ? DogEarType.HIDDEN : null
+
+  if (dogEarType) {
+    return <DogEar type={dogEarType} />
+  }
+
+  return null
+}