Merge pull request #49 from funnyzak/feature/mytopics

Author: funnyzak

src/i18n/locales/zh.json

@@ -167,7 +167,7 @@
     "noMoreData": "没有更多数据了。",
     "noMoreNotifications": "没有更多通知了。",
     "noPostTopics": "没有发布主题。",
-    "needToLogin": "此功能需要登陆，要不登陆下？",
+    "needToLogin": "需要登陆，还是登陆下吧？！",
     "seemsErrorAndTryAgain": "貌似产生了一个错误，重试下？！",
     "openLinkFailAndTryAgain": "载入失败，试着默认浏览器打开？!"
   },

src/screens/components/common/General.tsx

@@ -2,13 +2,13 @@
  * Created by leon<[email protected]> on 22/04/06.
  */
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
-import { Text } from '@src/components'
+import { Placeholder, Text } from '@src/components'
 import { useAppSelector } from '@src/hooks'
 import { translate } from '@src/i18n'
 import { NavigationService, ROUTES } from '@src/navigation'
+import { RootState } from '@src/store'
 import { ITheme, useTheme } from '@src/theme'
-import { IState } from '@src/types'
-import React, { ComponentType } from 'react'
+import React, { ComponentType, useEffect } from 'react'
 import {
   Image,
   ImageSourcePropType,
@@ -116,7 +116,7 @@ const HeaderButton = ({
 
 const Footer = () => {
   const { theme } = useTheme()
-  const app = useAppSelector((_state: IState.State) => _state.app)
+  const app = useAppSelector((_state: RootState) => _state.app)
 
   return (
     <TouchableOpacity
@@ -134,6 +134,37 @@ const Footer = () => {
   )
 }
 
+/**
+ * Need Login
+ * @returns
+ */
+const NeedLogin = ({ loginAfterAction, children }: { loginAfterAction?: () => void; children?: React.ReactNode }) => {
+  const token = useAppSelector((_state: RootState) => _state.member.token)
+
+  useEffect(() => {
+    if (token) {
+      loginAfterAction && loginAfterAction()
+    }
+  }, [token])
+
+  return (
+    <View style={{ flex: 1 }}>
+      {!token ? (
+        <Placeholder
+          displayType="text"
+          placeholderText={translate('placeholder.needToLogin')}
+          buttonText={translate('label.goLogin')}
+          buttonPress={() => {
+            NavigationService.navigate(ROUTES.SignIn)
+          }}
+        />
+      ) : (
+        children
+      )}
+    </View>
+  )
+}
+
 export interface TopTabListProps {
   containerStyle?: StyleProp<ViewStyle>
   list?: {
@@ -256,4 +287,4 @@ const styles = {
   }
 }
 
-export { TextWithIconPress, TopTabList, TextGrid, BorderLine, HeaderButton, Footer }
+export { TextWithIconPress, NeedLogin, TopTabList, TextGrid, BorderLine, HeaderButton, Footer }

src/screens/home/HotTopics.tsx

@@ -8,7 +8,7 @@ import { FetchTopicCardList } from '../components'
 const HotTopics = ({ route, navigation }: ScreenProps) => {
   const { theme } = useTheme()
   return (
-    <View style={[SylCommon.Layout.fill, { backgroundColor: theme.colors.background }]}>
+    <View style={SylCommon.Layout.fill}>
       <FetchTopicCardList displayStyle="full" nodeName={NODE_TABS.HOT} />
     </View>
   )

src/screens/my/History.tsx

@@ -1,12 +1,11 @@
+import { HistoryScreenProps as ScreenProps } from '@src/navigation/routes'
+import { RootState } from '@src/store'
+import { SylCommon, useTheme } from '@src/theme'
+import { V2exObject } from '@src/types'
 import React from 'react'
-import { connect } from 'react-redux'
 import { View } from 'react-native'
-
-import { TopicCardList } from '../components'
-import { useTheme, SylCommon } from '@src/theme'
-import { IState, V2exObject } from '@src/types'
-import { NotFound } from '../components'
-import { HistoryScreenProps as ScreenProps } from '@src/navigation/routes'
+import { connect } from 'react-redux'
+import { NotFound, TopicCardList } from '../components'
 
 const History = ({
   route,
@@ -27,7 +26,7 @@ const History = ({
   return <View style={[SylCommon.Layout.fill, SylCommon.View.background(theme)]}>{renderContent()}</View>
 }
 
-const mapStateToProps = ({ member }: IState.State) => {
+const mapStateToProps = ({ member }: RootState) => {
   const { readedTopics } = member
   return {
     readedTopics

src/screens/my/Topics.tsx

@@ -1,40 +1,53 @@
-import React, { useState } from 'react'
+import { useToast } from '@src/components'
+import { MyTopicsScreenProps as ScreenProps } from '@src/navigation'
+import { RootState } from '@src/store'
+import { SylCommon, useTheme } from '@src/theme'
+import { V2exObject } from '@src/types'
+import { v2exLib } from '@src/v2ex'
+import React, { useCallback, useState } from 'react'
+import { RefreshControl, View } from 'react-native'
 import { connect } from 'react-redux'
-import { View, ViewStyle, TouchableOpacity } from 'react-native'
+import { NeedLogin, TopicCardList } from '../components'
 
-import * as Actions from '@src/actions'
-import { translate } from '@src/i18n'
-import { useTheme, SylCommon } from '@src/theme'
-import { IState, ITheme, V2exObject } from '@src/types'
-import * as CompS from '../components'
-import { Text, Spinner, Placeholder } from '@src/components'
-import { MyTopicsScreenProps as ScreenProps, ROUTES } from '@src/navigation'
-
-const MyTopics = ({ route, navigation, loading }: ScreenProps) => {
+const MyTopics = ({
+  profile
+}: ScreenProps & {
+  profile?: V2exObject.Member
+}) => {
   const { theme } = useTheme()
+  const [refreshing, setRefreshing] = useState<boolean>(false)
+  const [list, setList] = useState<V2exObject.Topic[] | undefined>(undefined)
+  const { showMessage } = useToast()
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true)
+    if (!profile) return
+
+    v2exLib.topic
+      .topics(profile?.username, 'username')
+      .then((rlt: V2exObject.Topic[]) => {
+        setRefreshing(false)
+        setList(rlt)
+      })
+      .catch((err) => {
+        showMessage(err.message)
+      })
+  }, [])
+
   return (
-    <View style={[SylCommon.Layout.fill, SylCommon.View.background(theme)]}>
-      <Placeholder
-        displayType="icon"
-        icon={theme.assets.images.icons.placeholder.construction}
-        placeholderText={translate(`router.${ROUTES.MyTopics}`) + translate('label.underConstruction')}
+    <NeedLogin loginAfterAction={onRefresh}>
+      <TopicCardList
+        topics={list}
+        displayStyle={'full'}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+        canLoadMoreContent={false}
+        searchIndicator={false}
+        refreshCallback={onRefresh}
       />
-    </View>
+    </NeedLogin>
   )
 }
 
-/**
- * @description styles settings
- */
-const styles = {
-  container: (theme: ITheme): ViewStyle => ({
-    flex: 1
-  })
-}
-
-const mapStateToProps = ({ ui: { login } }: { ui: IState.UIState }) => {
-  const { error, success, loading } = login
-  return { error, success, loading }
-}
+const mapStateToProps = ({ member: { profile } }: RootState) => ({ profile })
 
 export default connect(mapStateToProps)(MyTopics)