From 43ec2f554f12d36aac239b64480d77dfbfecfce1 Mon Sep 17 00:00:00 2001
From: Jon Tzeng <jon@edge.app>
Date: Mon, 1 Jan 2024 14:25:44 -0800
Subject: [PATCH] Uncomment BlogCard

---
 src/components/ui4/BlogCard.tsx | 150 ++++++++++++++++----------------
 1 file changed, 74 insertions(+), 76 deletions(-)

diff --git a/src/components/ui4/BlogCard.tsx b/src/components/ui4/BlogCard.tsx
index 9ee3ee835a7..0d3f1f7ab21 100644
--- a/src/components/ui4/BlogCard.tsx
+++ b/src/components/ui4/BlogCard.tsx
@@ -1,86 +1,84 @@
-// import { BlogPost } from 'edge-info-server/types'
-// import * as React from 'react'
-// import { Platform, View } from 'react-native'
-// import FastImage from 'react-native-fast-image'
+import { BlogPost } from 'edge-info-server/types'
+import * as React from 'react'
+import { Platform, View } from 'react-native'
+import FastImage from 'react-native-fast-image'
 
-// import { useHandler } from '../../hooks/useHandler'
-// import { getLocaleOrDefaultString } from '../../locales/intl'
-// import { openBrowserUri } from '../../util/WebUtils'
-// import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
-// import { EdgeText } from '../themed/EdgeText'
-// import { CardUi4 } from './CardUi4'
+import { useHandler } from '../../hooks/useHandler'
+import { getLocaleOrDefaultString } from '../../locales/intl'
+import { openBrowserUri } from '../../util/WebUtils'
+import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
+import { EdgeText } from '../themed/EdgeText'
+import { CardUi4 } from './CardUi4'
 
-// interface Props {
-//   blogPost: BlogPost
-// }
+interface Props {
+  blogPost: BlogPost
+}
 
-// const IMAGE_HEIGHT_RATIO = '65%'
+const IMAGE_HEIGHT_RATIO = '65%'
 
-// /**
-//  * Blog post card with a top image and text below.
-//  */
-// export const BlogCard = (props: Props) => {
-//   const { localeTitle, localeBody, localeBlogUrl, lightImageUrl, darkImageUrl } = props.blogPost
+/**
+ * Blog post card with a top image and text below.
+ */
+export const BlogCard = (props: Props) => {
+  const { localeTitle, localeBody, localeBlogUrl, lightImageUrl, darkImageUrl } = props.blogPost
 
-//   const theme = useTheme()
-//   const styles = getStyles(theme)
+  const theme = useTheme()
+  const styles = getStyles(theme)
 
-//   const textShadow = Platform.OS === 'ios' ? theme.shadowTextIosUi4 : theme.shadowTextAndroidUi4
+  const textShadow = Platform.OS === 'ios' ? theme.shadowTextIosUi4 : theme.shadowTextAndroidUi4
 
-//   const title = getLocaleOrDefaultString(localeTitle)
-//   const body = getLocaleOrDefaultString(localeBody)
-//   const url = getLocaleOrDefaultString(localeBlogUrl)
-//   const image = theme.isDark ? darkImageUrl : lightImageUrl
+  const title = getLocaleOrDefaultString(localeTitle)
+  const body = getLocaleOrDefaultString(localeBody)
+  const url = getLocaleOrDefaultString(localeBlogUrl)
+  const image = theme.isDark ? darkImageUrl : lightImageUrl
 
-//   const handlePress = useHandler(() => {
-//     if (url != null) openBrowserUri(url)
-//   })
+  const handlePress = useHandler(() => {
+    if (url != null) openBrowserUri(url)
+  })
 
-//   return (
-//     <CardUi4
-//       onPress={handlePress}
-//       nodeBackground={
-//         <View style={styles.nodeBackground}>
-//           <FastImage source={{ uri: image }} style={styles.bannerImage} />
-//         </View>
-//       }
-//     >
-//       <View style={styles.backgroundSpacing} />
-//       <View style={styles.textContainer}>
-//         <EdgeText style={[textShadow, styles.titleText]} numberOfLines={1}>
-//           {title}
-//         </EdgeText>
-//         <EdgeText style={[styles.bodyText, textShadow]} numberOfLines={2}>
-//           {body}
-//         </EdgeText>
-//       </View>
-//     </CardUi4>
-//   )
-// }
+  return (
+    <CardUi4
+      onPress={handlePress}
+      nodeBackground={
+        <View style={styles.nodeBackground}>
+          <FastImage source={{ uri: image }} style={styles.bannerImage} />
+        </View>
+      }
+    >
+      <View style={styles.backgroundSpacing} />
+      <View style={styles.textContainer}>
+        <EdgeText style={[textShadow, styles.titleText]} numberOfLines={1}>
+          {title}
+        </EdgeText>
+        <EdgeText style={[styles.bodyText, textShadow]} numberOfLines={2}>
+          {body}
+        </EdgeText>
+      </View>
+    </CardUi4>
+  )
+}
 
-// const getStyles = cacheStyles((theme: Theme) => ({
-//   backgroundSpacing: {
-//     height: IMAGE_HEIGHT_RATIO
-//   },
-//   textContainer: {
-//     margin: theme.rem(0.5)
-//   },
-//   titleText: {
-//     fontFamily: theme.fontFaceMedium,
-//     marginBottom: theme.rem(0.25)
-//   },
-//   bodyText: {
-//     fontSize: theme.rem(0.65)
-//   },
-//   nodeBackground: {
-//     height: IMAGE_HEIGHT_RATIO,
-//     justifyConent: 'center',
-//     alignItems: 'center'
-//   },
-//   bannerImage: {
-//     height: '100%',
-//     width: '100%'
-//   }
-// }))
-
-export const BlogCard = (props: any) => null // TODO
+const getStyles = cacheStyles((theme: Theme) => ({
+  backgroundSpacing: {
+    height: IMAGE_HEIGHT_RATIO
+  },
+  textContainer: {
+    margin: theme.rem(0.5)
+  },
+  titleText: {
+    fontFamily: theme.fontFaceMedium,
+    marginBottom: theme.rem(0.25)
+  },
+  bodyText: {
+    fontSize: theme.rem(0.65)
+  },
+  nodeBackground: {
+    height: IMAGE_HEIGHT_RATIO,
+    justifyConent: 'center',
+    alignItems: 'center'
+  },
+  bannerImage: {
+    height: '100%',
+    width: '100%'
+  }
+}))