Add mock API and reorg code for clarity
This commit is contained in:
parent
de87ec17d1
commit
1d00f3b984
29 changed files with 356 additions and 168 deletions
110
src/view/routes/index.tsx
Normal file
110
src/view/routes/index.tsx
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
import React, {useEffect} from 'react'
|
||||
import {Text, Linking} from 'react-native'
|
||||
import {
|
||||
NavigationContainer,
|
||||
LinkingOptions,
|
||||
RouteProp,
|
||||
ParamListBase,
|
||||
} from '@react-navigation/native'
|
||||
import {createNativeStackNavigator} from '@react-navigation/native-stack'
|
||||
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import type {RootTabsParamList} from './types'
|
||||
import {useStores} from '../../state'
|
||||
import * as platform from '../../platform/detection'
|
||||
import {Home} from '../screens/Home'
|
||||
import {Search} from '../screens/Search'
|
||||
import {Notifications} from '../screens/Notifications'
|
||||
import {Menu} from '../screens/Menu'
|
||||
import {Profile} from '../screens/Profile'
|
||||
import {Login} from '../screens/Login'
|
||||
import {Signup} from '../screens/Signup'
|
||||
import {NotFound} from '../screens/NotFound'
|
||||
|
||||
const linking: LinkingOptions<RootTabsParamList> = {
|
||||
prefixes: [
|
||||
'http://localhost:3000', // local dev
|
||||
'https://pubsq.pfrazee.com', // test server (universal links only)
|
||||
'pubsqapp://', // custom protocol (ios)
|
||||
'pubsq://app', // custom protocol (android)
|
||||
],
|
||||
config: {
|
||||
screens: {
|
||||
Home: '',
|
||||
Profile: 'profile/:name',
|
||||
Search: 'search',
|
||||
Notifications: 'notifications',
|
||||
Menu: 'menu',
|
||||
Login: 'login',
|
||||
Signup: 'signup',
|
||||
NotFound: '*',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const RootTabs = createBottomTabNavigator()
|
||||
export const PrimaryStack = createNativeStackNavigator()
|
||||
|
||||
const tabBarScreenOptions = ({
|
||||
route,
|
||||
}: {
|
||||
route: RouteProp<ParamListBase, string>
|
||||
}) => ({
|
||||
headerShown: false,
|
||||
tabBarIcon: (_state: {focused: boolean; color: string; size: number}) => {
|
||||
// TODO: icons
|
||||
return <Text>{route.name?.[0] || ''}</Text>
|
||||
},
|
||||
})
|
||||
|
||||
const HIDE_TAB = {tabBarButton: () => null}
|
||||
|
||||
export const Root = observer(() => {
|
||||
const store = useStores()
|
||||
|
||||
useEffect(() => {
|
||||
console.log('Initial link setup')
|
||||
Linking.getInitialURL().then((url: string | null) => {
|
||||
console.log('Initial url', url)
|
||||
})
|
||||
Linking.addEventListener('url', ({url}) => {
|
||||
console.log('Deep link opened with', url)
|
||||
})
|
||||
}, [])
|
||||
|
||||
// hide the tabbar on desktop web
|
||||
const tabBar = platform.isDesktopWeb ? () => null : undefined
|
||||
|
||||
return (
|
||||
<NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
|
||||
<RootTabs.Navigator
|
||||
initialRouteName={store.session.isAuthed ? 'Home' : 'Login'}
|
||||
screenOptions={tabBarScreenOptions}
|
||||
tabBar={tabBar}>
|
||||
{store.session.isAuthed ? (
|
||||
<>
|
||||
<RootTabs.Screen name="Home" component={Home} />
|
||||
<RootTabs.Screen name="Search" component={Search} />
|
||||
<RootTabs.Screen name="Notifications" component={Notifications} />
|
||||
<RootTabs.Screen name="Menu" component={Menu} />
|
||||
<RootTabs.Screen
|
||||
name="Profile"
|
||||
component={Profile}
|
||||
options={HIDE_TAB}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RootTabs.Screen name="Login" component={Login} />
|
||||
<RootTabs.Screen name="Signup" component={Signup} />
|
||||
</>
|
||||
)}
|
||||
<RootTabs.Screen
|
||||
name="NotFound"
|
||||
component={NotFound}
|
||||
options={HIDE_TAB}
|
||||
/>
|
||||
</RootTabs.Navigator>
|
||||
</NavigationContainer>
|
||||
)
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue