Merge pull request #6 from funnyzak/feat/tab_node

Author: funnyzak

index.js

@@ -8,7 +8,7 @@ import { name as appName } from './app.json'
 import 'react-native-gesture-handler'
 
 // Ignore log notification by message:
-LogBox.ignoreLogs(['required dispatch_sync'])
+LogBox.ignoreLogs(['required dispatch_sync', 'flexWrap'])
 
 // Ignore all log notifications:
 // LogBox.ignoreAllLogs();

src/actions/RestActions.ts

@@ -4,7 +4,7 @@ import _ from 'lodash'
 import { v2exLib } from '@src/v2ex'
 import { v2exOptions } from '@src/config/v2ex'
 import { MEMBER_TOKEN_KEY } from '@src/config/constants'
-import { APP_INIT, APP_SITE_STAT, APP_INIT_ERROR, APP_SITE_INFO, IState } from '../types'
+import { APP_INIT, APP_SITE_STAT, APP_INIT_ERROR, APP_SITE_INFO, APP_ALL_NODE_INFO, IState } from '../types'
 import { logError } from '@src/helper/logger'
 import DeviceInfo from 'react-native-device-info'
 
@@ -26,6 +26,8 @@ export const initV2ex = () => {
 
       dispatchSiteStat(dispatch)
 
+      dispatchAllNodeInfo(dispatch)
+
       dispatch({
         type: APP_INIT,
         payload: {
@@ -72,6 +74,19 @@ const dispatchSiteInfo = async (dispatch: Dispatch) => {
   }
 }
 
+const dispatchAllNodeInfo = async (dispatch: Dispatch) => {
+  try {
+    const nodes = await v2exLib.node.all()
+
+    dispatch({
+      type: APP_ALL_NODE_INFO,
+      payload: nodes
+    })
+  } catch (e) {
+    logError(e)
+  }
+}
+
 const dispatchSiteStat = async (dispatch: Dispatch) => {
   try {
     const site_stat = await v2exLib.siteStat()

src/actions/types.ts

@@ -5,6 +5,7 @@
 export const APP_INIT = 'v2ex_init'
 export const APP_LATEST_VERSION = 'v2ex_latest_version'
 export const APP_SITE_INFO = 'v2ex_site_info'
+export const APP_ALL_NODE_INFO = 'v2ex_all_node_info'
 export const APP_SITE_STAT = 'v2ex_site_stat'
 export const APP_INIT_ERROR = 'v2ex_init_error'
 
@@ -46,6 +47,7 @@ export const ActionTypes = {
   APP_LATEST_VERSION,
   APP_SITE_INFO,
   MEMBER_READ_TOPIC,
+  APP_ALL_NODE_INFO,
   APP_INIT_ERROR,
   APP_NODE_NODE_TOPICS,
   APP_NODE_LOAD_MORE_TOPICS,

src/helper/node.ts

@@ -0,0 +1,33 @@
+/**
+ * Created by leon<[email protected]> on 22/3/20.
+ */
+import { store } from '@src/store'
+import { V2exObject } from '@src/types'
+
+/**
+ * home tab nodes
+ */
+export interface TabNodeProps {
+  title: string
+  parentNodeNames: any[]
+  children?: V2exObject.Node[]
+}
+
+export let TabNodes: TabNodeProps[] = [
+  { title: 'V2EX', parentNodeNames: ['v2ex'] },
+  { title: 'Life', parentNodeNames: ['life'] },
+  { title: 'Geek', parentNodeNames: ['geek'] },
+  { title: 'Programming', parentNodeNames: ['programming'] },
+  { title: 'Earth', parentNodeNames: ['cn', 'us'] }
+]
+
+export const nodeChildren = (rootNode: TabNodeProps): V2exObject.Node[] => {
+  const { title, parentNodeNames: parentNodes } = rootNode
+
+  let nodes: V2exObject.Node[] = []
+
+  const all_node = store.getState().app.allNode
+  if (!all_node) return nodes
+
+  return all_node.filter((v) => parentNodes.includes(v.parent_node_name))
+}

src/navigation/NavigationService.ts

@@ -26,6 +26,10 @@ function goTopicDetail(topicId: string) {
   navigate(ROUTES.TopicDetail, { topicId })
 }
 
+function goNodeTopics(nodeName: string, nodeTitle: string) {
+  navigate(ROUTES.NodeTopics, { nodeName, nodeTitle })
+}
+
 export type NavigationType = NavigationContainerRefWithCurrent<RootStackParamList>
 
 // add other navigation functions that you need and export them
@@ -34,5 +38,6 @@ export default {
   navigate,
   setTopLevelNavigator,
   goTopicDetail,
+  goNodeTopics,
   goUserProfile
 }

src/reducers/AppReducer.ts

@@ -1,4 +1,14 @@
-import { APP_INIT, APP_INIT_ERROR, APP_SITE_INFO, APP_LOGOUT, APP_LATEST_VERSION, APP_SITE_STAT, Action, IState } from '../types'
+import {
+  APP_INIT,
+  APP_INIT_ERROR,
+  APP_SITE_INFO,
+  APP_LOGOUT,
+  APP_LATEST_VERSION,
+  APP_SITE_STAT,
+  Action,
+  IState,
+  APP_ALL_NODE_INFO
+} from '../types'
 import { aboutUs } from '@src/config/v2ex'
 
 const INITIAL_STATE: IState.AppState = {
@@ -18,6 +28,8 @@ export default (state: IState.AppState = INITIAL_STATE, action: Action): IState.
       return { ...state, siteInfo: action.payload }
     case APP_SITE_STAT:
       return { ...state, siteStat: action.payload }
+    case APP_ALL_NODE_INFO:
+      return { ...state, allNode: action.payload }
     case APP_INIT_ERROR:
       return { ...state, errorMessage: action.payload }
     case APP_LOGOUT:

src/screens/node/index.tsx

@@ -1,19 +1,55 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { connect } from 'react-redux'
-import { StyleSheet, View, ViewStyle, TextStyle } from 'react-native'
+import { View, ViewStyle, SectionList, TouchableOpacity } from 'react-native'
 
-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 } from '@src/components'
-import { NodeScreenProps as ScreenProps } from '@src/navigation/routes'
+import { Text } from '@src/components'
+import { NodeScreenProps as ScreenProps, NavigationService } from '@src/navigation'
+import { TabNodes, nodeChildren } from '@src/helper/node'
 
-const Node = ({ route, navigation, loading }: ScreenProps) => {
+const Node = ({ route, navigation }: ScreenProps) => {
   const { theme } = useTheme()
+
+  const Item = ({ node }: { node: V2exObject.Node }) => (
+    <TouchableOpacity
+      style={styles.item(theme)}
+      onPress={() => {
+        NavigationService.goNodeTopics(node.name, node.title)
+      }}>
+      <Text style={SylCommon.Node.nodeTitle(theme)}>{node.title}</Text>
+    </TouchableOpacity>
+  )
+
+  const sectionData = () => {
+    return TabNodes.map((node) => ({
+      title: node.title,
+      data: nodeChildren(node),
+      key: node.title
+    }))
+  }
+
+  const renderContent = () => {
+    return (
+      <View style={styles.container(theme)}>
+        <SectionList
+          sections={sectionData()}
+          contentContainerStyle={styles.listContainer(theme)}
+          keyExtractor={(item, index) => item.name + index}
+          renderItem={({ item }) => <Item node={item} />}
+          stickySectionHeadersEnabled={false}
+          renderSectionHeader={({ section: { title } }) => (
+            <View style={styles.section(theme)}>
+              <Text style={SylCommon.Node.sectionTitle(theme)}>{title}</Text>
+            </View>
+          )}
+        />
+      </View>
+    )
+  }
   return (
-    <View style={[SylCommon.Layout.fill, SylCommon.View.background(theme)]}>
-      <Text>Hello, Node.</Text>
+    <View style={[SylCommon.Layout.fill, SylCommon.View.background(theme), { alignItems: 'center' }]}>
+      {renderContent()}
     </View>
   )
 }
@@ -23,20 +59,23 @@ const Node = ({ route, navigation, loading }: ScreenProps) => {
  */
 const styles = {
   container: (theme: ITheme): ViewStyle => ({
+    width: theme.dimens.WINDOW_WIDTH - 40,
     flex: 1
+  }),
+  section: (theme: ITheme) => ({
+    width: styles.container(theme).width,
+    paddingVertical: theme.spacing.medium
+  }),
+  listContainer: (theme: ITheme): ViewStyle => ({
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-start'
+  }),
+  item: (theme: ITheme): ViewStyle => ({
+    width: 'auto',
+    marginRight: theme.spacing.small,
+    marginVertical: theme.spacing.tiny
   })
 }
 
-/**
- * default props
- */
-Node.defaultProps = {
-  loading: false
-}
-
-const mapStateToProps = ({ ui: { login } }: { ui: IState.UIState }) => {
-  const { error, success, loading } = login
-  return { error, success, loading }
-}
-
-export default connect(mapStateToProps)(Node)
+export default Node

src/screens/topic/TopicDetail.tsx

@@ -51,7 +51,7 @@ const TopicDetail = ({ route, navigation }: ScreenProps) => {
                     nodeTitle: topic.node?.title || 'HOT'
                   })
                 }}>
-                <Text style={SylCommon.Node.node(theme)}>{topic.node?.name}</Text>
+                <Text style={SylCommon.Node.nodeTitle(theme)}>{topic.node?.name}</Text>
               </Pressable>
             </View>
           </View>

src/store/types.ts

@@ -53,6 +53,8 @@ export declare module IState {
 
     siteStat?: V2exObject.SiteStat
 
+    allNode?: V2exObject.Node[]
+
     errorMessage?: Error[]
   }
 

src/theme/common.ts

@@ -28,15 +28,19 @@ export const View = {
 }
 
 export const Node = {
-  node: (theme: ITheme) => ({
+  sectionTitle: (theme: ITheme) => ({
+    ...theme.typography.subheadingText
+  }),
+  nodeTitle: (theme: ITheme) => ({
     fontSize: 12,
     paddingVertical: 1,
     paddingHorizontal: 8,
     backgroundColor: theme.colors.surface,
     borderRadius: 4,
     color: theme.colors.secondary
   }),
-  small: (theme: ITheme) => ({
+  smallTitle: (theme: ITheme) => ({
+    ...Node.nodeTitle(theme),
     fontSize: 10
   })
 }