Merge pull request #42 from funnyzak/feature/latest_screen

Author: funnyzak

src/navigation/Navigator.tsx

@@ -9,7 +9,8 @@ import {
   NavigationState,
   PartialState,
   DefaultTheme,
-  Route
+  Route,
+  RouteProp
 } from '@react-navigation/native'
 import { createNativeStackNavigator, NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import { createDrawerNavigator } from '@react-navigation/drawer'
@@ -31,6 +32,7 @@ import { EdgeInsets, SafeAreaProvider, useSafeAreaInsets } from 'react-native-sa
 import SplashScreen from 'react-native-splash-screen'
 import NavigationService from './NavigationService'
 import { MainScreenProps, RootStackParamList, ROUTES } from './routes'
+import { HeaderButton } from '@src/screens/components'
 
 /**
  * dayjs
@@ -177,6 +179,19 @@ const HotDrawerNavigator = (initialRouteName?: string) => {
   )
 }
 
+const MainBottomHeaderLeft = ({ route }: { route: RouteProp<RootStackParamList> }): ReactNode => {
+  const { theme } = useTheme()
+  const focusRouteName = getFocusedRouteNameFromRoute(route) ?? ROUTES.HotDraw
+  return focusRouteName === ROUTES.HotDraw ? <HeaderButton source={theme.assets.images.icons.header.more} /> : undefined
+}
+
+const MainBottomTabHeaderRight = ({ route }: { route: RouteProp<RootStackParamList> }): ReactNode => {
+  const { theme } = useTheme()
+
+  const focusRouteName = getFocusedRouteNameFromRoute(route) ?? ROUTES.HotDraw
+  return focusRouteName === ROUTES.HotDraw ? <HeaderButton source={theme.assets.images.icons.header.stat} /> : undefined
+}
+
 const MainAppNavigator = ({ navigation, route }: MainScreenProps) => {
   const insets = useSafeAreaInsets()
   const { unread } = useUnRead()
@@ -315,7 +330,7 @@ export const AppNavigationContainer = () => {
             }
             barStyle={theme.name === 'dark' ? 'light-content' : 'dark-content'}
           />
-          <StackNavigator.Navigator initialRouteName={!token ? ROUTES.SignIn : ROUTES.Main}>
+          <StackNavigator.Navigator initialRouteName={!token ? ROUTES.Main : ROUTES.Main}>
             <StackNavigator.Screen
               name={ROUTES.SignIn}
               component={Screens.SignInScreen}
@@ -333,9 +348,11 @@ export const AppNavigationContainer = () => {
               component={MainAppNavigator}
               options={({ route }) => ({
                 ...defaultScreenOptions(theme),
-                headerShadowVisible: ![ROUTES.HomeTabs].includes(
+                headerShadowVisible: ![ROUTES.HotDraw].includes(
                   getFocusedRouteNameFromRoute(route) ?? (ROUTES.Nodes as any)
                 ),
+                headerLeft: () => MainBottomHeaderLeft({ route }),
+                headerRight: () => MainBottomTabHeaderRight({ route }),
                 headerTitle: getHeaderTitle(route)
               })}
               initialParams={{

src/screens/components/common/General.tsx

@@ -101,7 +101,7 @@ const HeaderButton = ({
   source?: ImageSourcePropType
   text?: string
   textColor?: string
-  onPress: () => void
+  onPress?: () => void
 }) => {
   const { theme } = useTheme()
 

src/screens/home/LatestTopics.tsx

@@ -1,40 +1,17 @@
-import React, { useState } from 'react'
+import { InterestNodesScreenProps as ScreenProps, NODE_TABS } from '@src/navigation'
+import { SylCommon, useTheme } from '@src/theme'
+import React from 'react'
+import { View } from 'react-native'
 import { connect } from 'react-redux'
-import { View, ViewStyle, TouchableOpacity } from 'react-native'
+import { FetchTopicCardList } 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 { LatestScreenProps as ScreenProps, ROUTES } from '@src/navigation'
-
-const LatestTopics = ({ route, navigation, loading }: ScreenProps) => {
+const LatestTopics = ({ route, navigation }: ScreenProps) => {
   const { theme } = useTheme()
   return (
-    <View style={[SylCommon.Layout.fill, SylCommon.View.background(theme)]}>
-      <Placeholder
-        displayType="icon"
-        icon={theme.assets.images.icons.placeholder.construction}
-        placeholderText={translate(`router.${ROUTES.Latest}`) + translate('label.underConstruction')}
-      />
+    <View style={[SylCommon.Layout.fill, { backgroundColor: theme.colors.background }]}>
+      <FetchTopicCardList displayStyle="full" nodeName={NODE_TABS.LATEST} />
     </View>
   )
 }
 
-/**
- * @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 }
-}
-
-export default connect(mapStateToProps)(LatestTopics)
+export default connect()(LatestTopics)

src/theme/light/assets.ts

@@ -27,7 +27,8 @@ const Assets: IThemeAssets = {
       header: {
         back: require('@res/images/icons/header/back.png'),
         stat: require('@res/images/icons/header/board.png'),
-        more: require('@res/images/icons/header/more_vert.png'),
+        moreVert: require('@res/images/icons/header/more_vert.png'),
+        more: require('@res/images/icons/header/more.png'),
         search: require('@res/images/icons/header/search.png'),
         star: require('@res/images/icons/header/star.png'),
         heart: require('@res/images/icons/header/heart.png'),

src/theme/types.ts

@@ -212,6 +212,7 @@ export interface IThemeAssets {
         back: ImageSourcePropType
         stat: ImageSourcePropType
         more: ImageSourcePropType
+        moreVert: ImageSourcePropType
         search: ImageSourcePropType
         star: ImageSourcePropType
         heart: ImageSourcePropType