Merge pull request #51 from funnyzak/feature/topic

Author: funnyzak

src/i18n/locales/en.json

@@ -4,7 +4,7 @@
     "intro": "This project used React Native to build a V2EX mobile client application. The main goal was to build a React Native rapid development scaffold."
   },
   "common": {
-    "more":"More",
+    "more": "More",
     "home": "Home",
     "integrated": "Integrated",
     "help": "Help",
@@ -79,6 +79,7 @@
   },
   "label": {
     "registedMember": "Registered Member",
+    "latestReplay": "Latest Replay",
     "topicCount": "Topic Count",
     "postedTime": "Posted $",
     "lastReplyTime": "Last Replyed $",

src/i18n/locales/zh.json

@@ -79,11 +79,12 @@
   },
   "label": {
     "registedMember": "注册会员",
+    "latestReplay": "最新回复",
     "topicCount": "主题数量",
     "postedTime": "发布于 $",
     "lastReplyTime": "最后回复于 $",
     "replyedCount": "回复数量",
-    "replyedTime": "回复于",
+    "replyedTime": "回复于 $",
     "createSince": "创建至今",
     "profileLastModified": "最近修改于 $。",
     "activeLatest": "最近活跃于 $。",
@@ -148,9 +149,9 @@
     "token": "输入API令牌..",
     "search": "搜索关键字...",
     "message": "写点啥...",
-    "empty": "无内容。",
-    "noResult": "无内容。 ",
-    "noFound": "未找到无内容。 ",
+    "empty": "无内容",
+    "noResult": "无内容",
+    "noFound": "未找到内容 ",
     "noTopics": "还没有任何主题.",
     "noReplies": "还没有任何回复.",
     "noNodes": "还没有任何节点.",

src/screens/components/common/TabCardContainer.tsx

@@ -0,0 +1,67 @@
+/**
+ * Created by leon<[email protected]> on 22/04/28.
+ */
+import React from 'react'
+import { View, ViewStyle, TextStyle, StyleProp, ImageSourcePropType, Image } from 'react-native'
+
+import { Text, Button, Spinner, Placeholder } from '@src/components'
+import { ITheme, SylCommon, useTheme } from '@src/theme'
+import { translate } from '@src/i18n'
+import { NavigationService, ROUTES } from '@src/navigation'
+import { V2exObject } from '@src/types'
+import { BorderLine } from './General'
+
+/**
+ * TabCardContainer props
+ */
+export interface TabCardContainerProps {
+  containerStyle?: StyleProp<ViewStyle>
+
+  title?: string
+
+  icon?: ImageSourcePropType
+
+  children?: React.ReactNode
+}
+
+const TabCardContainer: React.FC<TabCardContainerProps> = ({
+  containerStyle,
+  title,
+  icon,
+  children
+}: TabCardContainerProps) => {
+  const { theme } = useTheme()
+
+  const renderContent = () => {
+    return (
+      <View style={[SylCommon.Card.container(theme), styles.container(theme), containerStyle]}>
+        <View style={styles.tabBar(theme)}>
+          {icon && <Image source={icon} width={20} height={20} style={{ marginRight: theme.spacing.small }} />}
+          <Text style={{ ...theme.typography.bodyText }}>{title ?? ''}</Text>
+        </View>
+        <BorderLine />
+        <View style={styles.content(theme)}>{children}</View>
+      </View>
+    )
+  }
+
+  return renderContent()
+}
+
+const styles = {
+  container: (theme: ITheme): ViewStyle => ({
+    flexDirection: 'column'
+  }),
+  tabBar: (theme: ITheme): ViewStyle => ({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    height: 36
+  }),
+  content: (theme: ITheme): ViewStyle => ({
+    marginVertical: theme.spacing.small
+  })
+}
+
+export default TabCardContainer

src/screens/components/common/index.ts

@@ -1,2 +1,4 @@
 export { default as NotFound } from './NotFound'
+export { default as TabCardContainer } from './TabCardContainer'
+
 export * from './General'

src/screens/components/topic/Replay.tsx

@@ -24,6 +24,11 @@ export interface TopicCardItemProps {
    */
   displayStyle?: 'simple' | 'full' | 'auto'
 
+  /**
+   * Whether to show last reply users
+   */
+  showlastReplay?: boolean
+
   /**
    * Topic Info
    */
@@ -35,7 +40,13 @@ export interface TopicCardItemProps {
   onPress?: (topic: V2exObject.Topic) => void
 }
 
-const TopicCardItem = ({ containerStyle, displayStyle = 'auto', topic, onPress }: TopicCardItemProps) => {
+const TopicCardItem = ({
+  containerStyle,
+  showlastReplay = true,
+  displayStyle = 'auto',
+  topic,
+  onPress
+}: TopicCardItemProps) => {
   const { theme } = useTheme()
 
   const display_style = useMemo(
@@ -90,7 +101,7 @@ const TopicCardItem = ({ containerStyle, displayStyle = 'auto', topic, onPress }
 
           <View style={styles.infoMainItem(theme)}>
             <View style={styles.summaryContainer(theme)}>
-              {topic.last_reply_by !== '' && (
+              {topic.last_reply_by !== '' && showlastReplay ? (
                 <TextWithIconPress
                   containerStyle={[{ marginRight: theme.spacing.small }]}
                   text={topic.last_reply_by}
@@ -100,7 +111,7 @@ const TopicCardItem = ({ containerStyle, displayStyle = 'auto', topic, onPress }
                     NavigationService.navigate(ROUTES.Profile, { username: topic.last_reply_by })
                   }}
                 />
-              )}
+              ) : null}
               <TextWithIconPress
                 containerStyle={[{ marginRight: theme.spacing.small }]}
                 text={topic.replies.toString()}
@@ -157,7 +168,7 @@ const styles = {
   }),
   infoMainItem: (theme: ITheme): ViewStyle => ({
     flexDirection: 'row',
-    marginBottom: theme.spacing.tiny,
+    marginBottom: theme.spacing.small,
     justifyContent: 'space-between'
   }),
   summaryContainer: (theme: ITheme): ViewStyle => ({

src/screens/components/topic/ReplayList.tsx

@@ -1,36 +1,41 @@
 /**
  * Created by leon<[email protected]> on 22/04/01.
  */
-import React from 'react'
-import { View, ViewStyle, TextStyle } from 'react-native'
-
-import { Text, Button, Spinner, Placeholder } from '@src/components'
 import { ITheme, SylCommon, useTheme } from '@src/theme'
-import { translate } from '@src/i18n'
-import { NavigationService, ROUTES } from '@src/navigation'
 import { V2exObject } from '@src/types'
+import React from 'react'
+import { StyleProp, View, ViewStyle } from 'react-native'
+import RenderHtml from 'react-native-render-html'
+import TopicCardItem from './TopicCardItem'
 
 /**
- * // TODO: TopicInfo
  * TopicInfo props
  */
 export interface TopicInfoProps {
   /**
-   * TopicInfo width
+   * container style
    */
-  width?: number | string
+  containerStyle?: StyleProp<ViewStyle>
 
   /**
-   * TopicInfo height
+   * TopicInfo width
    */
-  height?: number | string
+  info: V2exObject.Topic
 }
 
-const TopicInfo: React.FC<TopicInfoProps> = ({ width, height }: TopicInfoProps) => {
+const TopicInfo: React.FC<TopicInfoProps> = ({ containerStyle, info }: TopicInfoProps) => {
+  const { theme } = useTheme()
+
   const renderContent = () => {
     return (
-      <View>
-        <Text>Hello World, TopicInfo.</Text>
+      <View style={[SylCommon.Card.container(theme), styles.container(theme), containerStyle]}>
+        <TopicCardItem topic={info} showlastReplay={false} />
+        <RenderHtml
+          source={{
+            html: `<div style="color:${theme.colors.bodyText}">${info.content_rendered}</div>` || '<p></p>'
+          }}
+          contentWidth={theme.dimens.WINDOW_WIDTH - theme.spacing.large * 2}
+        />
       </View>
     )
   }
@@ -40,7 +45,7 @@ const TopicInfo: React.FC<TopicInfoProps> = ({ width, height }: TopicInfoProps)
 
 const styles = {
   container: (theme: ITheme): ViewStyle => ({
-    flex: 1
+    paddingVertical: theme.spacing.medium
   })
 }
 

src/screens/components/topic/TopicCardItem.tsx

@@ -0,0 +1,45 @@
+/**
+ * Created by leon<[email protected]> on 22/04/28.
+ */
+import { translate } from '@src/i18n'
+import { ITheme, useTheme } from '@src/theme'
+import { V2exObject } from '@src/types'
+import React from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
+import { ReplayList } from '.'
+import { TabCardContainer } from '../common'
+
+/**
+ * TopicReplay props
+ */
+export interface TopicReplayProps {
+  containerStyle?: StyleProp<ViewStyle>
+
+  info: V2exObject.Topic
+}
+
+const TopicReplay: React.FC<TopicReplayProps> = ({ containerStyle, info }: TopicReplayProps) => {
+  const { theme } = useTheme()
+
+  const renderContent = () => {
+    return (
+      <TabCardContainer
+        containerStyle={[styles.container(theme), containerStyle]}
+        icon={theme.assets.images.icons.tabbar.title.comment}
+        title={translate('label.latestReplay')}>
+        <ReplayList topicId={info.id} />
+      </TabCardContainer>
+    )
+  }
+
+  return renderContent()
+}
+
+const styles = {
+  container: (theme: ITheme): ViewStyle => ({
+    marginTop: theme.spacing.small,
+    flex: 1
+  })
+}
+
+export default TopicReplay