Merge pull request #56 from funnyzak/feature/likenode

Author: funnyzak

src/actions/MemberActions.ts

@@ -11,7 +11,9 @@ import {
   APP_AUTH_ERROR,
   APP_AUTH_SUCCESS,
   V2exObject,
-  MEMBER_TOPICS
+  MEMBER_TOPICS,
+  MEMBER_INSEREST_NODE,
+  MEMBER_UNINTEREST_NODE
 } from '../types'
 import { v2exLib } from '@src/v2ex'
 import { logError } from '@src/helper/logger'
@@ -39,6 +41,16 @@ export const setMyTopics = (topics: V2exObject.Topic[]) => ({
   payload: topics
 })
 
+export const interestNode = (node: V2exObject.Node) => ({
+  type: MEMBER_INSEREST_NODE,
+  payload: node
+})
+
+export const unInterestNode = (node: V2exObject.Node) => ({
+  type: MEMBER_UNINTEREST_NODE,
+  payload: node
+})
+
 export const setCurrentToken = (token?: V2exObject.MToken) => ({
   type: APP_AUTH,
   payload: token

src/actions/types.ts

@@ -21,6 +21,8 @@ export const MEMBER_FOLLOW_PEOPLE = 'follow_people'
 export const MEMBER_LIKE_TOPICS = 'like_topics'
 export const MEMBER_READ_TOPIC = 'read_topic'
 export const MEMBER_TOPICS = 'member_topics'
+export const MEMBER_INSEREST_NODE = 'member_interest_node'
+export const MEMBER_UNINTEREST_NODE = 'member_uninterest_node'
 
 export const FEEDBACKING = 'feedbacking'
 export const FEEDBACK_DONE = 'feedback_done'
@@ -48,6 +50,8 @@ export const APP_CACHE_RESET_NODES = 'v2ex_cache_reset_node'
 export const APP_CACHE_RESET = 'v2ex_cache_reset'
 
 export const ActionTypes = {
+  MEMBER_INSEREST_NODE,
+  MEMBER_UNINTEREST_NODE,
   MEMBER_TOPICS,
   APP_CACHE_RESET,
   APP_CACHE_RESET_MEMBERS,

src/i18n/locales/zh.json

@@ -65,7 +65,7 @@
     "all": "所有",
     "favorite": "收藏",
     "cancelFavorite": "取消收藏",
-    "unFollow": "取消关注",
+    "unFollow": "取关",
     "follow": "关注",
     "node": "节点",
     "author": "作者",

src/reducers/MemberReducer.ts

@@ -1,10 +1,34 @@
-import { Action, IState, APP_AUTH, MEMBER_PROFILE, APP_LOGOUT, MEMBER_READ_TOPIC, MEMBER_TOPICS } from '../types'
+import InterestNodes from '@src/screens/node/InterestNodes'
+import {
+  Action,
+  IState,
+  APP_AUTH,
+  MEMBER_PROFILE,
+  APP_LOGOUT,
+  MEMBER_READ_TOPIC,
+  MEMBER_TOPICS,
+  MEMBER_INSEREST_NODE,
+  MEMBER_UNINTEREST_NODE
+} from '../types'
 const INITIAL_STATE: IState.MemberState = {
-  refreshing: false
+  refreshing: false,
+  interestNodes: []
 }
 
 export default (state: IState.MemberState = INITIAL_STATE, action: Action): IState.MemberState => {
   switch (action.type) {
+    case MEMBER_INSEREST_NODE:
+      return {
+        ...state,
+        interestNodes: state.interestNodes.concat(
+          state.interestNodes.findIndex((v) => v.id === action.payload.id) >= 0 ? [] : action.payload
+        )
+      }
+    case MEMBER_UNINTEREST_NODE:
+      return {
+        ...state,
+        interestNodes: state.interestNodes.filter((v) => v.id !== action.payload.id)
+      }
     case MEMBER_TOPICS:
       return { ...state, topics: action.payload }
     case APP_AUTH:

src/screens/common/WebLink.tsx

@@ -29,7 +29,7 @@ const WebLink = ({ route, navigation }: ScreenProps) => {
       headerRight: () => (
         <>
           <HeaderButton
-            containerStyle={[{ marginRight: theme.spacing.tiny }]}
+            containerStyle={[{ marginRight: theme.spacing.medium }]}
             source={theme.assets.images.icons.header.refresh}
             onPress={() => {
               setLoading(true)

src/screens/components/button/header/LikeNode.tsx

@@ -0,0 +1,62 @@
+/**
+ * Created by leon<[email protected]> on 22/05/5.
+ */
+import { interestNode, unInterestNode } from '@src/actions'
+import { useAppDispatch, useAppSelector } from '@src/hooks'
+import { useSession } from '@src/hooks/useSession'
+import { translate } from '@src/i18n'
+import { NavigationService, ROUTES } from '@src/navigation'
+import { useTheme } from '@src/theme'
+import { V2exObject } from '@src/types'
+import React, { useMemo } from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
+import { HeaderButton } from '../../common'
+
+/**
+ * Like Node Button
+ * @param {
+ *   text,
+ *   buttonText,
+ *   buttonPress
+ * }
+ * @returns
+ */
+const LikeNodeHeaderButton = ({
+  containerStyle,
+  node
+}: {
+  containerStyle?: StyleProp<ViewStyle>
+  node: V2exObject.Node
+}) => {
+  const { theme } = useTheme()
+  const { logined } = useSession()
+  const { interestNodes } = useAppSelector((RootState) => RootState.member)
+  const dispatch = useAppDispatch()
+  const isInterest = useMemo(
+    () => (logined ? interestNodes.findIndex((v) => v.id === node.id) >= 0 : false),
+    [interestNodes]
+  )
+
+  const buttonPress = () => {
+    if (!logined) {
+      NavigationService.navigate(ROUTES.SignIn)
+    } else {
+      if (isInterest) {
+        dispatch(unInterestNode(node))
+      } else {
+        dispatch(interestNode(node))
+      }
+    }
+  }
+
+  return (
+    <HeaderButton
+      text={translate(`common.${isInterest ? 'cancel' : 'follow'}`)}
+      textColor={isInterest ? theme.colors.captionText : theme.colors.secondary}
+      onPress={buttonPress}
+      containerStyle={containerStyle}
+    />
+  )
+}
+
+export default LikeNodeHeaderButton

src/screens/components/button/header/index.ts

@@ -0,0 +1 @@
+export { default as LikeNodeHeaderButton } from './LikeNode'

src/screens/components/button/index.ts

@@ -0,0 +1 @@
+export * from './header'

src/screens/components/node/NodeInfoCard.tsx

@@ -6,8 +6,9 @@ import { useNode } from '@src/hooks/useNode'
 import { translate } from '@src/i18n'
 import { NavigationService, ROUTES } from '@src/navigation'
 import { ITheme, SylCommon, useTheme } from '@src/theme'
+import { V2exObject } from '@src/types'
 import dayjs from 'dayjs'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { StyleProp, View, ViewStyle } from 'react-native'
 import { TextWithIconPress } from '../common'
 
@@ -24,12 +25,23 @@ export interface NodeInfoCardProps {
    * node name or id
    */
   nodeid: string | number
+
+  /**
+   * Load completion callback
+   */
+  loadedCallback?: (node: V2exObject.Node) => void
 }
 
-const NodeInfoCard: React.FC<NodeInfoCardProps> = ({ nodeid, containerStyle }: NodeInfoCardProps) => {
+const NodeInfoCard: React.FC<NodeInfoCardProps> = ({ nodeid, loadedCallback, containerStyle }: NodeInfoCardProps) => {
   const { theme } = useTheme()
   const { node: info } = useNode({ nodeid: nodeid })
 
+  useEffect(() => {
+    if (loadedCallback && info) {
+      loadedCallback(info)
+    }
+  }, [info])
+
   const renderContent = () => {
     return (
       <View style={[SylCommon.Card.container(theme), { paddingVertical: theme.spacing.small }, containerStyle]}>

src/screens/node/NodeDetail.tsx

@@ -1,25 +1,49 @@
-import { useNode } from '@src/hooks/useNode'
+/**
+ * Created by leon<[email protected]> on 22/04/30.
+ */
+import { interestNode, unInterestNode } from '@src/actions'
 import { NodeDetailScreenProps as ScreenProps } from '@src/navigation/routes'
+import { RootState } from '@src/store'
 import { SylCommon, useTheme } from '@src/theme'
-import React, { useEffect } from 'react'
+import { V2exObject } from '@src/types'
+import React, { useEffect, useMemo, useState } from 'react'
 import { View } from 'react-native'
 import { connect } from 'react-redux'
 import { NodeInfoCard, NodeTopicTabList } from '../components'
+import { LikeNodeHeaderButton } from '../components/button'
 
-const NodeDetail = ({ route, navigation }: ScreenProps) => {
+const NodeDetail = ({
+  interestNodes,
+  route,
+  navigation
+}: ScreenProps & {
+  interestNodes: V2exObject.Node[]
+}) => {
   const { theme } = useTheme()
+  const nodeName = useMemo(() => route.params.nodeName, [route])
+  const [info, setInfo] = useState<V2exObject.Node | undefined>(undefined)
+
+  const HeaderRight = () => () => {
+    return !info ? undefined : <LikeNodeHeaderButton node={info} />
+  }
+
   useEffect(() => {
     navigation.setOptions({
-      title: route.params.nodeTitle
+      title: route.params.nodeTitle,
+      headerRight: HeaderRight()
     })
-  }, [])
+  }, [interestNodes, info])
 
   return (
     <View style={SylCommon.Layout.fill}>
-      <NodeInfoCard nodeid={route.params.nodeName} />
-      <NodeTopicTabList nodename={route.params.nodeName} containerStyle={[{ marginTop: theme.spacing.small }]} />
+      <NodeInfoCard nodeid={nodeName} loadedCallback={setInfo} />
+      <NodeTopicTabList nodename={nodeName} containerStyle={[{ marginTop: theme.spacing.small }]} />
     </View>
   )
 }
 
-export default connect()(NodeDetail)
+const mapStateToProps = ({ member: { interestNodes } }: RootState) => {
+  return { interestNodes }
+}
+
+export default connect(mapStateToProps, {})(NodeDetail)