Merge pull request #63 from funnyzak/feature/liketopic

Author: funnyzak

src/actions/CacheAction.ts

@@ -10,6 +10,7 @@ import {
   APP_CACHE_ADD_NODE,
   APP_CACHE_MEMBER_FOLLOWING,
   APP_CACHE_MEMBER_INTEREST_NODES,
+  APP_CACHE_MEMBER_LIKE_TOPICS,
   APP_CACHE_RESET,
   APP_CACHE_RESET_MEMBERS,
   APP_CACHE_RESET_NODES,
@@ -50,6 +51,11 @@ export const cacheMemberInterestNodes = (nodes: V2exObject.Node[] | undefined) =
   payload: nodes
 })
 
+export const cacheMemberLikeTopicss = (topics: V2exObject.Topic[] | undefined) => ({
+  type: APP_CACHE_MEMBER_LIKE_TOPICS,
+  payload: topics
+})
+
 export const resetCache = (type: 'all' | 'nodes' | 'members') => ({
   type: type === 'nodes' ? APP_CACHE_RESET_NODES : type === 'members' ? APP_CACHE_RESET_MEMBERS : APP_CACHE_RESET
 })

src/actions/MemberActions.ts

@@ -19,9 +19,13 @@ import {
   MEMBER_SATE_SETTING,
   MEMBER_TOPICS,
   MEMBER_UNINTEREST_NODE,
+  MEMBER_FOLLOW_PEOPLE,
+  MEMBER_UNFOLLOW_PEOPLE,
+  MEMBER_LIKE_TOPICS,
+  MEMBER_UNLIKE_TOPICS,
   V2exObject
 } from '../types'
-import { cacheMemberInterestNodes } from './CacheAction'
+import { cacheMemberFollowing, cacheMemberInterestNodes, cacheMemberLikeTopicss } from './CacheAction'
 
 export const myProfile = () => async (dispatch: Dispatch, getState: () => RootState) => {
   const _member = await v2exLib.member.myProfile()
@@ -35,7 +39,8 @@ export const myProfile = () => async (dispatch: Dispatch, getState: () => RootSt
     type: MEMBER_SATE_SETTING,
     payload: {
       interestNodes: getState().cache.membersInterestNodes[_member.id],
-      followPeoples: getState().cache.membersFollowing[_member.id]
+      followPeoples: getState().cache.membersFollowing[_member.id],
+      likeTopics: getState().cache.membersLikeTopics[_member.id]
     }
   })
 }
@@ -68,6 +73,38 @@ export const unInterestNode = (node: V2exObject.Node) => async (dispatch: Dispat
   dispatch(cacheMemberInterestNodes(getState().member.interestNodes))
 }
 
+export const likeTopic = (topic: V2exObject.Topic) => async (dispatch: Dispatch, getState: () => RootState) => {
+  dispatch({
+    type: MEMBER_LIKE_TOPICS,
+    payload: topic
+  })
+  dispatch(cacheMemberLikeTopicss(getState().member.likeTopics))
+}
+
+export const unLikeTopic = (topic: V2exObject.Topic) => async (dispatch: Dispatch, getState: () => RootState) => {
+  dispatch({
+    type: MEMBER_UNLIKE_TOPICS,
+    payload: topic
+  })
+  dispatch(cacheMemberLikeTopicss(getState().member.likeTopics))
+}
+
+export const followPeople = (member: V2exObject.Member) => async (dispatch: Dispatch, getState: () => RootState) => {
+  dispatch({
+    type: MEMBER_FOLLOW_PEOPLE,
+    payload: member
+  })
+  dispatch(cacheMemberFollowing(getState().member.followPeoples))
+}
+
+export const unFollowPeople = (member: V2exObject.Member) => async (dispatch: Dispatch, getState: () => RootState) => {
+  dispatch({
+    type: MEMBER_UNFOLLOW_PEOPLE,
+    payload: member
+  })
+  dispatch(cacheMemberFollowing(getState().member.followPeoples))
+}
+
 export const setCurrentToken = (token?: V2exObject.MToken) => ({
   type: APP_AUTH,
   payload: token

src/actions/types.ts

@@ -17,10 +17,16 @@ export const APP_NOTIFICATION_LATEST = 'notification'
 export const APP_NOTIFICATION_REMOVE = 'notification_remove'
 
 export const MEMBER_PROFILE = 'profile'
-export const MEMBER_FOLLOW_PEOPLE = 'follow_people'
-export const MEMBER_LIKE_TOPICS = 'like_topics'
+
+export const MEMBER_FOLLOW_PEOPLE = 'member_follow_people'
+export const MEMBER_UNFOLLOW_PEOPLE = 'member_unfollow_people'
+
+export const MEMBER_LIKE_TOPICS = 'member_like_topics'
+export const MEMBER_UNLIKE_TOPICS = 'member_unlike_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 MEMBER_SATE_SETTING = 'member_state_setting'
@@ -46,15 +52,19 @@ export const APP_NODE_LOAD_ERROR = 'v2ex_node_error'
 
 export const APP_CACHE_ADD_MEMBER = 'v2ex_cache_add_member'
 export const APP_CACHE_ADD_NODE = 'v2ex_cache_add_node'
+
 export const APP_CACHE_MEMBER_INTEREST_NODES = 'v2ex_cache_member_interest_nodes'
 export const APP_CACHE_MEMBER_FOLLOWING = 'v2ex_cache_member_following'
+export const APP_CACHE_MEMBER_LIKE_TOPICS = 'v2ex_cache_member_like_topics'
+
 export const APP_CACHE_RESET_MEMBERS = 'v2ex_cache_reset_member'
 export const APP_CACHE_RESET_NODES = 'v2ex_cache_reset_node'
 export const APP_CACHE_RESET = 'v2ex_cache_reset'
 
 export const ActionTypes = {
   MEMBER_INSEREST_NODE,
   APP_CACHE_MEMBER_INTEREST_NODES,
+  APP_CACHE_MEMBER_LIKE_TOPICS,
   MEMBER_UNINTEREST_NODE,
   APP_CACHE_MEMBER_FOLLOWING,
   MEMBER_TOPICS,
@@ -84,7 +94,9 @@ export const ActionTypes = {
   APP_AUTH_LOADING,
   APP_AUTH_RESET,
   MEMBER_FOLLOW_PEOPLE,
+  MEMBER_UNFOLLOW_PEOPLE,
   MEMBER_LIKE_TOPICS,
+  MEMBER_UNLIKE_TOPICS,
   APP_AUTH,
   FEEDBACKING,
   TOPIC_GET,

src/components/common/Placeholder.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { View, ViewStyle, TextStyle, ImageSourcePropType, Image, StyleProp } from 'react-native'
 import { useTheme, ITheme } from '@src/theme'
 import { Text, Button } from '.'
+import { translate } from '@src/i18n'
 
 const Placeholder = ({
   containerStyle,
@@ -14,7 +15,7 @@ const Placeholder = ({
   containerStyle?: StyleProp<ViewStyle>
   displayType?: 'icon' | 'text' | 'none'
   icon?: ImageSourcePropType
-  placeholderText: string
+  placeholderText?: string
   buttonText?: string
   buttonPress?: () => void
 }) => {
@@ -36,7 +37,7 @@ const Placeholder = ({
   return (
     <View style={[styles.containerStyle(theme), containerStyle]}>
       {renderIcon()}
-      <Text style={styles.textStyle(theme)}>{placeholderText}</Text>
+      <Text style={styles.textStyle(theme)}>{placeholderText ?? translate('placeholder.empty')}</Text>
 
       {buttonText && (
         <Button style={styles.buttonContainer(theme)} disabled={false} type="small" onPress={buttonPress}>

src/i18n/locales/zh.json

@@ -150,7 +150,7 @@
     "token": "输入API令牌..",
     "search": "搜索关键字...",
     "message": "写点啥...",
-    "empty": "无内容",
+    "empty": "无内容.",
     "noResult": "无内容",
     "noFound": "未找到内容 ",
     "noTopics": "还没有任何主题.",

src/reducers/CacheReducer.ts

@@ -4,6 +4,7 @@ import {
   APP_CACHE_ADD_NODE,
   APP_CACHE_MEMBER_FOLLOWING,
   APP_CACHE_MEMBER_INTEREST_NODES,
+  APP_CACHE_MEMBER_LIKE_TOPICS,
   APP_CACHE_RESET,
   APP_CACHE_RESET_MEMBERS,
   APP_CACHE_RESET_NODES,
@@ -16,7 +17,8 @@ const INITIAL_STATE: IState.CacheState = {
   members: [],
   nodes: [],
   membersFollowing: { 0: undefined },
-  membersInterestNodes: { 0: undefined }
+  membersInterestNodes: { 0: undefined },
+  membersLikeTopics: { 0: undefined }
 }
 
 export default (state: IState.CacheState = INITIAL_STATE, action: Action): IState.CacheState => {
@@ -38,6 +40,9 @@ export default (state: IState.CacheState = INITIAL_STATE, action: Action): IStat
     case APP_CACHE_MEMBER_INTEREST_NODES:
       state.membersInterestNodes[state.currentSessionMember?.id ?? 0] = action.payload
       return { ...state }
+    case APP_CACHE_MEMBER_LIKE_TOPICS:
+      state.membersLikeTopics[state.currentSessionMember?.id ?? 0] = action.payload
+      return { ...state }
     case APP_CACHE_MEMBER_FOLLOWING:
       state.membersFollowing[state.currentSessionMember?.id ?? 0] = action.payload
       return { ...state }

src/reducers/MemberReducer.ts

@@ -9,11 +9,17 @@ import {
   MEMBER_TOPICS,
   MEMBER_INSEREST_NODE,
   MEMBER_UNINTEREST_NODE,
+  MEMBER_FOLLOW_PEOPLE,
+  MEMBER_UNFOLLOW_PEOPLE,
+  MEMBER_LIKE_TOPICS,
+  MEMBER_UNLIKE_TOPICS,
   MEMBER_SATE_SETTING
 } from '../types'
 const INITIAL_STATE: IState.MemberState = {
   refreshing: false,
-  interestNodes: []
+  interestNodes: [],
+  followPeoples: [],
+  likeTopics: []
 }
 
 export default (state: IState.MemberState = INITIAL_STATE, action: Action): IState.MemberState => {
@@ -32,6 +38,32 @@ export default (state: IState.MemberState = INITIAL_STATE, action: Action): ISta
         ...state,
         interestNodes: state.interestNodes.filter((v) => v.id !== action.payload.id)
       }
+    case MEMBER_FOLLOW_PEOPLE:
+      return {
+        ...state,
+        followPeoples: state.followPeoples.concat(
+          state.followPeoples && state.followPeoples.findIndex((v) => v.id === action.payload.id) >= 0
+            ? []
+            : action.payload
+        )
+      }
+    case MEMBER_UNFOLLOW_PEOPLE:
+      return {
+        ...state,
+        followPeoples: state.followPeoples.filter((v) => v.id !== action.payload.id)
+      }
+    case MEMBER_LIKE_TOPICS:
+      return {
+        ...state,
+        likeTopics: state.likeTopics.concat(
+          state.likeTopics && state.likeTopics.findIndex((v) => v.id === action.payload.id) >= 0 ? [] : action.payload
+        )
+      }
+    case MEMBER_UNLIKE_TOPICS:
+      return {
+        ...state,
+        likeTopics: state.likeTopics.filter((v) => v.id !== action.payload.id)
+      }
     case MEMBER_SATE_SETTING:
       return { ...state, ...action.payload }
     case MEMBER_TOPICS:

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

@@ -0,0 +1,62 @@
+/**
+ * Created by leon<[email protected]> on 22/05/27.
+ */
+import { followPeople, interestNode, unFollowPeople, 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'
+
+/**
+ * Follow People Button
+ * @param {
+ *   text,
+ *   buttonText,
+ *   buttonPress
+ * }
+ * @returns
+ */
+const FollowPeopleHeaderButton = ({
+  containerStyle,
+  member
+}: {
+  containerStyle?: StyleProp<ViewStyle>
+  member: V2exObject.Member
+}) => {
+  const { theme } = useTheme()
+  const { logined } = useSession()
+  const { followPeoples } = useAppSelector((RootState) => RootState.member)
+  const dispatch = useAppDispatch()
+  const isInterest = useMemo(
+    () => (logined ? followPeoples && followPeoples.findIndex((v) => v.id === member.id) >= 0 : false),
+    [followPeoples]
+  )
+
+  const buttonPress = () => {
+    if (!logined) {
+      NavigationService.navigate(ROUTES.SignIn)
+    } else {
+      if (isInterest) {
+        dispatch(unFollowPeople(member) as any)
+      } else {
+        dispatch(followPeople(member) as any)
+      }
+    }
+  }
+
+  return (
+    <HeaderButton
+      text={translate(`common.${isInterest ? 'cancel' : 'follow'}`)}
+      textColor={isInterest ? theme.colors.captionText : theme.colors.secondary}
+      onPress={buttonPress}
+      containerStyle={containerStyle}
+    />
+  )
+}
+
+export default FollowPeopleHeaderButton

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

@@ -0,0 +1,63 @@
+/**
+ * Created by leon<[email protected]> on 22/05/27.
+ */
+import { likeTopic, unLikeTopic } 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 Topic Button
+ * @param {
+ *   text,
+ *   buttonText,
+ *   buttonPress
+ * }
+ * @returns
+ */
+const LikeTopicHeaderButton = ({
+  containerStyle,
+  topic
+}: {
+  containerStyle?: StyleProp<ViewStyle>
+  topic: V2exObject.Topic
+}) => {
+  const { theme } = useTheme()
+  const { logined } = useSession()
+  const { likeTopics } = useAppSelector((RootState) => RootState.member)
+
+  const dispatch = useAppDispatch()
+  const isLike = useMemo(
+    () => (logined ? likeTopics && likeTopics.findIndex((v) => v.id === topic.id) >= 0 : false),
+    [likeTopics]
+  )
+
+  const buttonPress = () => {
+    if (!logined) {
+      NavigationService.navigate(ROUTES.SignIn)
+    } else {
+      if (isLike) {
+        dispatch(unLikeTopic(topic) as any)
+      } else {
+        dispatch(likeTopic(topic) as any)
+      }
+    }
+  }
+
+  return (
+    <HeaderButton
+      text={translate(`common.${isLike ? 'cancel' : 'favorite'}`)}
+      textColor={isLike ? theme.colors.captionText : theme.colors.secondary}
+      onPress={buttonPress}
+      containerStyle={containerStyle}
+    />
+  )
+}
+
+export default LikeTopicHeaderButton

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

@@ -1 +1,3 @@
 export { default as LikeNodeHeaderButton } from './LikeNode'
+export { default as LikeTopicHeaderButton } from './LikeTopic'
+export { default as FollowPeopleHeaderButton } from './FollowPeople'