diff --git a/src/assets/alice.jpg b/public/img/alice.jpg similarity index 100% rename from src/assets/alice.jpg rename to public/img/alice.jpg diff --git a/src/assets/bob.jpg b/public/img/bob.jpg similarity index 100% rename from src/assets/bob.jpg rename to public/img/bob.jpg diff --git a/src/assets/carla.jpg b/public/img/carla.jpg similarity index 100% rename from src/assets/carla.jpg rename to public/img/carla.jpg diff --git a/src/view/com/feed/FeedItem.tsx b/src/view/com/feed/FeedItem.tsx index 18af53dd..9cf70578 100644 --- a/src/view/com/feed/FeedItem.tsx +++ b/src/view/com/feed/FeedItem.tsx @@ -1,25 +1,13 @@ import React from 'react' import {observer} from 'mobx-react-lite' -import { - Image, - ImageSourcePropType, - StyleSheet, - Text, - TouchableOpacity, - View, -} from 'react-native' +import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native' import {bsky, AdxUri} from '@adxp/mock-api' import moment from 'moment' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {OnNavigateContent} from '../../routes/types' import {FeedViewItemModel} from '../../../state/models/feed-view' import {s} from '../../lib/styles' - -const IMAGES: Record = { - 'alice.com': require('../../assets/alice.jpg'), - 'bob.com': require('../../assets/bob.jpg'), - 'carla.com': require('../../assets/carla.jpg'), -} +import {AVIS} from '../../lib/assets' export const FeedItem = observer(function FeedItem({ item, @@ -40,10 +28,7 @@ export const FeedItem = observer(function FeedItem({ {item.repostedBy && ( - + Reposted by {item.repostedBy.displayName} @@ -53,7 +38,7 @@ export const FeedItem = observer(function FeedItem({ @@ -74,14 +59,14 @@ export const FeedItem = observer(function FeedItem({ {item.replyCount} @@ -89,14 +74,14 @@ export const FeedItem = observer(function FeedItem({ {item.likeCount} @@ -120,6 +105,7 @@ const styles = StyleSheet.create({ }, repostedByIcon: { marginRight: 2, + color: 'gray', }, layout: { flexDirection: 'row', @@ -159,5 +145,6 @@ const styles = StyleSheet.create({ }, ctrlIcon: { marginRight: 5, + color: 'gray', }, }) diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 2b72b7e4..5e01ac0a 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -1,13 +1,6 @@ import React from 'react' import {observer} from 'mobx-react-lite' -import { - Image, - ImageSourcePropType, - StyleSheet, - Text, - TouchableOpacity, - View, -} from 'react-native' +import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native' import {bsky, AdxUri} from '@adxp/mock-api' import moment from 'moment' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' @@ -15,14 +8,9 @@ import {OnNavigateContent} from '../../routes/types' import {PostThreadViewPostModel} from '../../../state/models/post-thread-view' import {s} from '../../lib/styles' import {pluralize} from '../../lib/strings' +import {AVIS} from '../../lib/assets' -const IMAGES: Record = { - 'alice.com': require('../../assets/alice.jpg'), - 'bob.com': require('../../assets/bob.jpg'), - 'carla.com': require('../../assets/carla.jpg'), -} - -function iter(n: number, fn: (i: number) => T): Array { +function iter(n: number, fn: (_i: number) => T): Array { const arr: T[] = [] for (let i = 0; i < n; i++) { arr.push(fn(i)) @@ -49,13 +37,13 @@ export const PostThreadItem = observer(function PostThreadItem({ return ( - {iter(Math.abs(item._depth), () => ( - + {iter(Math.abs(item._depth), (i: number) => ( + ))} @@ -104,14 +92,14 @@ export const PostThreadItem = observer(function PostThreadItem({ {item.replyCount} @@ -119,14 +107,14 @@ export const PostThreadItem = observer(function PostThreadItem({ {item.likeCount} @@ -204,5 +192,6 @@ const styles = StyleSheet.create({ }, ctrlIcon: { marginRight: 5, + color: 'gray', }, }) diff --git a/src/view/index.ts b/src/view/index.ts index d636844c..8e3b0079 100644 --- a/src/view/index.ts +++ b/src/view/index.ts @@ -1,6 +1,7 @@ import moment from 'moment' import {library} from '@fortawesome/fontawesome-svg-core' +import {faArrowLeft} from '@fortawesome/free-solid-svg-icons/faArrowLeft' import {faBars} from '@fortawesome/free-solid-svg-icons/faBars' import {faBell} from '@fortawesome/free-solid-svg-icons/faBell' import {faComment} from '@fortawesome/free-regular-svg-icons/faComment' @@ -32,6 +33,7 @@ export function setup() { }, }) library.add( + faArrowLeft, faBars, faBell, faComment, diff --git a/src/view/lib/assets.native.ts b/src/view/lib/assets.native.ts new file mode 100644 index 00000000..af5ee2ba --- /dev/null +++ b/src/view/lib/assets.native.ts @@ -0,0 +1,7 @@ +import {ImageSourcePropType} from 'react-native' + +export const AVIS: Record = { + 'alice.com': require('../../../public/img/alice.jpg'), + 'bob.com': require('../../../public/img/bob.jpg'), + 'carla.com': require('../../../public/img/carla.jpg'), +} diff --git a/src/view/lib/assets.ts b/src/view/lib/assets.ts new file mode 100644 index 00000000..7d0584a4 --- /dev/null +++ b/src/view/lib/assets.ts @@ -0,0 +1,7 @@ +import {ImageSourcePropType} from 'react-native' + +export const AVIS: Record = { + 'alice.com': {uri: '/img/alice.jpg'}, + 'bob.com': {uri: '/img/bob.jpg'}, + 'carla.com': {uri: '/img/carla.jpg'}, +} diff --git a/src/view/routes/index.tsx b/src/view/routes/index.tsx index 24d47a93..58aa0ad8 100644 --- a/src/view/routes/index.tsx +++ b/src/view/routes/index.tsx @@ -1,5 +1,5 @@ import React, {useEffect} from 'react' -import {Text, Linking} from 'react-native' +import {Linking, Text} from 'react-native' import { NavigationContainer, LinkingOptions, @@ -32,12 +32,12 @@ const linking: LinkingOptions = { ], config: { screens: { - Home: '', + HomeTab: '', + SearchTab: 'search', + NotificationsTab: 'notifications', + MenuTab: 'menu', Profile: 'profile/:name', PostThread: 'profile/:name/post/:recordKey', - Search: 'search', - Notifications: 'notifications', - Menu: 'menu', Login: 'login', Signup: 'signup', NotFound: '*', @@ -46,7 +46,9 @@ const linking: LinkingOptions = { } export const RootTabs = createBottomTabNavigator() -export const PrimaryStack = createNativeStackNavigator() +export const HomeTabStack = createNativeStackNavigator() +export const SearchTabStack = createNativeStackNavigator() +export const NotificationsTabStack = createNativeStackNavigator() const tabBarScreenOptions = ({ route, @@ -56,18 +58,18 @@ const tabBarScreenOptions = ({ headerShown: false, tabBarIcon: (state: {focused: boolean; color: string; size: number}) => { switch (route.name) { - case 'Home': + case 'HomeTab': return - case 'Search': + case 'SearchTab': return ( ) - case 'Notifications': + case 'NotificationsTab': return - case 'Menu': + case 'MenuTab': return default: return @@ -75,8 +77,46 @@ const tabBarScreenOptions = ({ }, }) +const HIDE_HEADER = {headerShown: false} const HIDE_TAB = {tabBarButton: () => null} +function HomeStackCom() { + return ( + + + + + + ) +} + +function SearchStackCom() { + return ( + + + + + + ) +} + +function NotificationsStackCom() { + return ( + + + + + + ) +} + export const Root = observer(() => { const store = useStores() @@ -96,25 +136,18 @@ export const Root = observer(() => { return ( Loading...}> {store.session.isAuthed ? ( <> - - - - + + - + ) : ( <> diff --git a/src/view/routes/types.ts b/src/view/routes/types.ts index bca6f196..0b4bbc5d 100644 --- a/src/view/routes/types.ts +++ b/src/view/routes/types.ts @@ -1,10 +1,10 @@ import type {StackScreenProps} from '@react-navigation/stack' export type RootTabsParamList = { - Home: undefined - Search: undefined - Notifications: undefined - Menu: undefined + HomeTab: undefined + SearchTab: undefined + NotificationsTab: undefined + MenuTab: undefined Profile: {name: string} PostThread: {name: string; recordKey: string} Login: undefined @@ -14,7 +14,10 @@ export type RootTabsParamList = { export type RootTabsScreenProps = StackScreenProps -export type OnNavigateContent = (screen: string, params: Record): void +export type OnNavigateContent = ( + screen: string, + params: Record, +) => void /* NOTE diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 4a3e41a7..1b41b2d3 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -5,15 +5,18 @@ import {Feed} from '../com/feed/Feed' import type {RootTabsScreenProps} from '../routes/types' import {useStores} from '../../state' -export function Home({navigation}: RootTabsScreenProps<'Home'>) { +export function Home({navigation}: RootTabsScreenProps<'HomeTab'>) { const store = useStores() useEffect(() => { console.log('Fetching home feed') store.homeFeed.setup() }, [store.homeFeed]) + const onNavigateContent = (screen: string, props: Record) => { + // @ts-ignore it's up to the callers to supply correct params -prf navigation.navigate(screen, props) } + return ( diff --git a/src/view/screens/Menu.tsx b/src/view/screens/Menu.tsx index 8cf93676..d0cc0826 100644 --- a/src/view/screens/Menu.tsx +++ b/src/view/screens/Menu.tsx @@ -3,7 +3,7 @@ import {Shell} from '../shell' import {ScrollView, Text, View} from 'react-native' import type {RootTabsScreenProps} from '../routes/types' -export const Menu = (_props: RootTabsScreenProps<'Menu'>) => { +export const Menu = (_props: RootTabsScreenProps<'MenuTab'>) => { return ( diff --git a/src/view/screens/NotFound.tsx b/src/view/screens/NotFound.tsx index 3f6dd7aa..5357a428 100644 --- a/src/view/screens/NotFound.tsx +++ b/src/view/screens/NotFound.tsx @@ -8,7 +8,7 @@ export const NotFound = ({navigation}: RootTabsScreenProps<'NotFound'>) => { Page not found -