refactor: needlogin for nodedetail

Author: funnyzak

src/components/common/Placeholder.tsx

@@ -53,7 +53,7 @@ const styles = {
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'column',
-    marginVertical: _theme.spacing.small,
+    paddingVertical: _theme.spacing.small,
     marginBottom: _theme.spacing.large
   }),
   iconStyle: (_theme: ITheme): ViewStyle => ({}),

src/hooks/userMember.ts renamed to src/hooks/useMember.ts

@@ -0,0 +1,15 @@
+/**
+ * Created by leon<[email protected]> on 22/4/20.
+ */
+import { RootState } from '@src/store'
+import { useAppSelector } from '.'
+
+export const useSession = () => {
+  const member = useAppSelector((_state: RootState) => _state.member)
+
+  return {
+    logined: member.token,
+    profile: member.profile,
+    token: member.token
+  }
+}

src/hooks/useSession.ts

@@ -4,6 +4,7 @@
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
 import { Placeholder, Text } from '@src/components'
 import { useAppSelector } from '@src/hooks'
+import { useSession } from '@src/hooks/useSession'
 import { translate } from '@src/i18n'
 import { NavigationService, ROUTES } from '@src/navigation'
 import { RootState } from '@src/store'
@@ -138,19 +139,35 @@ const Footer = () => {
  * Need Login
  * @returns
  */
-const NeedLogin = ({ loginAfterAction, children }: { loginAfterAction?: () => void; children?: React.ReactNode }) => {
-  const token = useAppSelector((_state: RootState) => _state.member.token)
+const NeedLogin = ({
+  containerStyle,
+  placeholderBackground,
+  mustLogin = true,
+  onMount,
+  children
+}: {
+  /**
+   * container style
+   */
+  containerStyle?: StyleProp<ViewStyle>
+  placeholderBackground?: string
+  mustLogin?: boolean
+  onMount?: () => void
+  children?: React.ReactNode
+}) => {
+  const { logined } = useSession()
 
   useEffect(() => {
-    if (token) {
-      loginAfterAction && loginAfterAction()
+    if (logined) {
+      onMount && onMount()
     }
-  }, [token])
+  }, [logined])
 
   return (
-    <View style={{ flex: 1 }}>
-      {!token ? (
+    <View style={[{ flex: 1 }, containerStyle]}>
+      {!logined && mustLogin ? (
         <Placeholder
+          containerStyle={[{ backgroundColor: placeholderBackground }]}
           displayType="text"
           placeholderText={translate('placeholder.needToLogin')}
           buttonText={translate('label.goLogin')}

src/screens/components/common/General.tsx

@@ -3,11 +3,15 @@
  */
 
 import { useToast } from '@src/components'
+import { useMember } from '@src/hooks/useMember'
+import { useSession } from '@src/hooks/useSession'
 import { NODE_TABS } from '@src/navigation'
+import { useTheme } from '@src/theme'
 import { V2exObject } from '@src/types'
 import { v2exLib } from '@src/v2ex'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { RefreshControl, StyleProp, ViewStyle } from 'react-native'
+import { NeedLogin } from '../common'
 import TopicCardList from './TopicCardList'
 
 export interface FetchTopicCardListProps {
@@ -30,6 +34,8 @@ const FetchTopicCardList: React.FC<FetchTopicCardListProps> = ({
   containerStyle,
   displayStyle
 }: FetchTopicCardListProps) => {
+  const { theme } = useTheme()
+  const { logined } = useSession()
   const { showMessage } = useToast()
   const [page, setPage] = useState(1)
   const [mounted, setMounted] = useState<boolean>(false)
@@ -45,7 +51,10 @@ const FetchTopicCardList: React.FC<FetchTopicCardListProps> = ({
 
   const fetchTopics = useCallback(
     (pageNum: number) => {
-      console.log('page number', pageNum)
+      if (v2API && !logined) {
+        return
+      }
+
       if (pageNum > 1 && (!v2API || specialNode)) {
         setHasMore(false)
         return
@@ -61,7 +70,7 @@ const FetchTopicCardList: React.FC<FetchTopicCardListProps> = ({
         ? nodeName === NODE_TABS.LATEST
           ? v2exLib.topic.latestTopics()
           : v2exLib.topic.hotTopics()
-        : v2API
+        : v2API && logined
         ? v2exLib.topic.pager(nodeName, pageNum)
         : v2exLib.topic.topics(nodeName, 'node_name')
       )
@@ -79,7 +88,7 @@ const FetchTopicCardList: React.FC<FetchTopicCardListProps> = ({
           showMessage(err.message)
         })
     },
-    [nodeName, showMessage, page]
+    [nodeName, showMessage, page, v2API, logined]
   ) // eslint-disable-line react-hooks/exhaustive-deps
 
   const onRefresh = () => {
@@ -108,16 +117,23 @@ const FetchTopicCardList: React.FC<FetchTopicCardListProps> = ({
   }
 
   return (
-    <TopicCardList
-      containerStyle={containerStyle}
-      topics={list}
-      displayStyle={displayStyle}
-      refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
-      onEndReached={onReached}
-      canLoadMoreContent={hasMore}
-      searchIndicator={false}
-      refreshCallback={onRefresh}
-    />
+    <NeedLogin
+      onMount={() => {
+        fetchTopics(1)
+      }}
+      mustLogin={v2API}
+      placeholderBackground={theme.colors.surface}>
+      <TopicCardList
+        containerStyle={containerStyle}
+        topics={list}
+        displayStyle={displayStyle}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+        onEndReached={onReached}
+        canLoadMoreContent={hasMore}
+        searchIndicator={false}
+        refreshCallback={onRefresh}
+      />
+    </NeedLogin>
   )
 }
 

src/screens/components/topic/FetchTopicCardList.tsx

@@ -35,7 +35,7 @@ const MyTopics = ({
   }, [])
 
   return (
-    <NeedLogin loginAfterAction={onRefresh}>
+    <NeedLogin onMount={onRefresh}>
       <TopicCardList
         topics={list}
         displayStyle={'full'}