Add WIP post-thread view
parent
19c694bc60
commit
c712cbbfe2
|
@ -27,6 +27,7 @@
|
|||
"@react-navigation/stack": "^6.2.1",
|
||||
"@zxing/text-encoding": "^0.9.0",
|
||||
"base64-js": "^1.5.1",
|
||||
"lodash.omit": "^4.5.0",
|
||||
"mobx": "^6.6.1",
|
||||
"mobx-react-lite": "^3.4.0",
|
||||
"moment": "^2.29.4",
|
||||
|
@ -49,6 +50,7 @@
|
|||
"@babel/runtime": "^7.12.5",
|
||||
"@react-native-community/eslint-config": "^2.0.0",
|
||||
"@types/jest": "^26.0.23",
|
||||
"@types/lodash.omit": "^4.5.7",
|
||||
"@types/react-native": "^0.67.3",
|
||||
"@types/react-test-renderer": "^17.0.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.17.0",
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import {makeAutoObservable, runInAction} from 'mobx'
|
||||
import {makeAutoObservable} from 'mobx'
|
||||
import {bsky} from '@adxp/mock-api'
|
||||
import {RootStoreModel} from './root-store'
|
||||
|
||||
export class FeedViewItemModel implements bsky.FeedView.FeedItem {
|
||||
key: string = ''
|
||||
_reactKey: string = ''
|
||||
uri: string = ''
|
||||
author: bsky.FeedView.User = {did: '', name: '', displayName: ''}
|
||||
repostedBy?: bsky.FeedView.User
|
||||
|
@ -17,9 +17,9 @@ export class FeedViewItemModel implements bsky.FeedView.FeedItem {
|
|||
likeCount: number = 0
|
||||
indexedAt: string = ''
|
||||
|
||||
constructor(key: string, v: bsky.FeedView.FeedItem) {
|
||||
constructor(reactKey: string, v: bsky.FeedView.FeedItem) {
|
||||
makeAutoObservable(this)
|
||||
this.key = key
|
||||
this._reactKey = reactKey
|
||||
Object.assign(this, v)
|
||||
}
|
||||
}
|
||||
|
@ -115,7 +115,6 @@ export class FeedViewModel implements bsky.FeedView.Response {
|
|||
// =
|
||||
|
||||
private async _initialLoad() {
|
||||
console.log('_initialLoad()')
|
||||
this._xLoading()
|
||||
await new Promise(r => setTimeout(r, 1e3)) // DEBUG
|
||||
try {
|
||||
|
@ -131,7 +130,6 @@ export class FeedViewModel implements bsky.FeedView.Response {
|
|||
}
|
||||
|
||||
private async _loadMore() {
|
||||
console.log('_loadMore()')
|
||||
this._xLoading()
|
||||
await new Promise(r => setTimeout(r, 1e3)) // DEBUG
|
||||
try {
|
||||
|
@ -150,7 +148,6 @@ export class FeedViewModel implements bsky.FeedView.Response {
|
|||
}
|
||||
|
||||
private async _refresh() {
|
||||
console.log('_refresh()')
|
||||
this._xLoading(true)
|
||||
// TODO: refetch and update items
|
||||
await new Promise(r => setTimeout(r, 1e3)) // DEBUG
|
||||
|
|
|
@ -0,0 +1,153 @@
|
|||
import {makeAutoObservable, runInAction} from 'mobx'
|
||||
import {bsky, AdxUri} from '@adxp/mock-api'
|
||||
import _omit from 'lodash.omit'
|
||||
import {RootStoreModel} from './root-store'
|
||||
|
||||
export class PostThreadViewPostModel implements bsky.PostThreadView.Post {
|
||||
_reactKey: string = ''
|
||||
uri: string = ''
|
||||
author: bsky.PostThreadView.User = {did: '', name: '', displayName: ''}
|
||||
record: Record<string, unknown> = {}
|
||||
embed?:
|
||||
| bsky.PostThreadView.RecordEmbed
|
||||
| bsky.PostThreadView.ExternalEmbed
|
||||
| bsky.PostThreadView.UnknownEmbed
|
||||
replyCount: number = 0
|
||||
replies?: PostThreadViewPostModel[]
|
||||
repostCount: number = 0
|
||||
likeCount: number = 0
|
||||
indexedAt: string = ''
|
||||
|
||||
constructor(reactKey: string, v?: bsky.PostThreadView.Post) {
|
||||
makeAutoObservable(this)
|
||||
this._reactKey = reactKey
|
||||
if (v) {
|
||||
Object.assign(this, _omit(v, 'replies')) // copy everything but the replies
|
||||
}
|
||||
}
|
||||
|
||||
setReplies(v: bsky.PostThreadView.Post) {
|
||||
if (v.replies) {
|
||||
const replies = []
|
||||
let counter = 0
|
||||
for (const item of v.replies) {
|
||||
// TODO: validate .record
|
||||
const itemModel = new PostThreadViewPostModel(`item-${counter++}`, item)
|
||||
if (item.replies) {
|
||||
itemModel.setReplies(item)
|
||||
}
|
||||
replies.push(itemModel)
|
||||
}
|
||||
this.replies = replies
|
||||
}
|
||||
}
|
||||
}
|
||||
const UNLOADED_THREAD = new PostThreadViewPostModel('')
|
||||
|
||||
export class PostThreadViewModel implements bsky.PostThreadView.Response {
|
||||
isLoading = false
|
||||
isRefreshing = false
|
||||
hasLoaded = false
|
||||
error = ''
|
||||
resolvedUri = ''
|
||||
params: bsky.PostThreadView.Params
|
||||
thread: PostThreadViewPostModel = UNLOADED_THREAD
|
||||
|
||||
constructor(
|
||||
public rootStore: RootStoreModel,
|
||||
params: bsky.PostThreadView.Params,
|
||||
) {
|
||||
makeAutoObservable(
|
||||
this,
|
||||
{
|
||||
rootStore: false,
|
||||
params: false,
|
||||
},
|
||||
{autoBind: true},
|
||||
)
|
||||
this.params = params
|
||||
}
|
||||
|
||||
get hasContent() {
|
||||
return this.thread !== UNLOADED_THREAD
|
||||
}
|
||||
|
||||
get hasError() {
|
||||
return this.error !== ''
|
||||
}
|
||||
|
||||
// public api
|
||||
// =
|
||||
|
||||
async setup() {
|
||||
if (!this.resolvedUri) {
|
||||
await this._resolveUri()
|
||||
}
|
||||
if (this.hasContent) {
|
||||
await this._refresh()
|
||||
} else {
|
||||
await this._initialLoad()
|
||||
}
|
||||
}
|
||||
|
||||
async refresh() {
|
||||
await this._refresh()
|
||||
}
|
||||
|
||||
// state transitions
|
||||
// =
|
||||
|
||||
private _xLoading(isRefreshing = false) {
|
||||
this.isLoading = true
|
||||
this.isRefreshing = isRefreshing
|
||||
this.error = ''
|
||||
}
|
||||
|
||||
private _xIdle(err: string = '') {
|
||||
this.isLoading = false
|
||||
this.isRefreshing = false
|
||||
this.hasLoaded = true
|
||||
this.error = err
|
||||
}
|
||||
|
||||
// loader functions
|
||||
// =
|
||||
|
||||
private async _resolveUri() {
|
||||
const urip = new AdxUri(this.params.uri)
|
||||
if (!urip.host.startsWith('did:')) {
|
||||
urip.host = await this.rootStore.resolveName(urip.host)
|
||||
}
|
||||
runInAction(() => {
|
||||
this.resolvedUri = urip.toString()
|
||||
})
|
||||
}
|
||||
|
||||
private async _initialLoad() {
|
||||
this._xLoading()
|
||||
try {
|
||||
const res = (await this.rootStore.api.mainPds.view(
|
||||
'blueskyweb.xyz:PostThreadView',
|
||||
Object.assign({}, this.params, {uri: this.resolvedUri}),
|
||||
)) as bsky.PostThreadView.Response
|
||||
this._replaceAll(res)
|
||||
this._xIdle()
|
||||
} catch (e: any) {
|
||||
this._xIdle(`Failed to load thread: ${e.toString()}`)
|
||||
}
|
||||
}
|
||||
|
||||
private async _refresh() {
|
||||
this._xLoading(true)
|
||||
// TODO: refetch and update items
|
||||
await new Promise(r => setTimeout(r, 1e3)) // DEBUG
|
||||
this._xIdle()
|
||||
}
|
||||
|
||||
private _replaceAll(res: bsky.PostThreadView.Response) {
|
||||
// TODO: validate .record
|
||||
const thread = new PostThreadViewPostModel('item-0', res.thread)
|
||||
thread.setReplies(res.thread)
|
||||
this.thread = thread
|
||||
}
|
||||
}
|
|
@ -18,11 +18,18 @@ export class RootStoreModel {
|
|||
constructor(public api: AdxClient) {
|
||||
makeAutoObservable(this, {
|
||||
api: false,
|
||||
resolveName: false,
|
||||
serialize: false,
|
||||
hydrate: false,
|
||||
})
|
||||
}
|
||||
|
||||
async resolveName(didOrName: string) {
|
||||
const userDb = this.api.mockDb.getUser(didOrName)
|
||||
if (!userDb) throw new Error(`User not found: ${didOrName}`)
|
||||
return userDb.did
|
||||
}
|
||||
|
||||
serialize(): unknown {
|
||||
return {
|
||||
session: this.session.serialize(),
|
||||
|
|
|
@ -1,12 +1,23 @@
|
|||
import React from 'react'
|
||||
import {observer, Observer} from 'mobx-react-lite'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {Text, View, FlatList} from 'react-native'
|
||||
import {FeedViewModel, FeedViewItemModel} from '../../state/models/feed-view'
|
||||
import {OnNavigateContent} from '../../routes/types'
|
||||
import {FeedViewModel, FeedViewItemModel} from '../../../state/models/feed-view'
|
||||
import {FeedItem} from './FeedItem'
|
||||
|
||||
export const Feed = observer(function Feed({feed}: {feed: FeedViewModel}) {
|
||||
export const Feed = observer(function Feed({
|
||||
feed,
|
||||
onNavigateContent,
|
||||
}: {
|
||||
feed: FeedViewModel
|
||||
onNavigateContent: OnNavigateContent
|
||||
}) {
|
||||
// TODO optimize renderItem or FeedItem, we're getting this notice from RN: -prf
|
||||
// VirtualizedList: You have a large list that is slow to update - make sure your
|
||||
// renderItem function renders components that follow React performance best practices
|
||||
// like PureComponent, shouldComponentUpdate, etc
|
||||
const renderItem = ({item}: {item: FeedViewItemModel}) => (
|
||||
<Observer>{() => <FeedItem item={item} />}</Observer>
|
||||
<FeedItem item={item} onNavigateContent={onNavigateContent} />
|
||||
)
|
||||
const onRefresh = () => {
|
||||
feed.refresh().catch(err => console.error('Failed to refresh', err))
|
||||
|
@ -21,6 +32,7 @@ export const Feed = observer(function Feed({feed}: {feed: FeedViewModel}) {
|
|||
{feed.hasContent && (
|
||||
<FlatList
|
||||
data={feed.feed}
|
||||
keyExtractor={item => item._reactKey}
|
||||
renderItem={renderItem}
|
||||
refreshing={feed.isRefreshing}
|
||||
onRefresh={onRefresh}
|
|
@ -1,10 +1,18 @@
|
|||
import React from 'react'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {Text, Image, ImageSourcePropType, StyleSheet, View} from 'react-native'
|
||||
import {bsky} from '@adxp/mock-api'
|
||||
import {
|
||||
Image,
|
||||
ImageSourcePropType,
|
||||
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 {FeedViewItemModel} from '../../state/models/feed-view'
|
||||
import {OnNavigateContent} from '../../routes/types'
|
||||
import {FeedViewItemModel} from '../../../state/models/feed-view'
|
||||
|
||||
const IMAGES: Record<string, ImageSourcePropType> = {
|
||||
'alice.com': require('../../assets/alice.jpg'),
|
||||
|
@ -14,12 +22,21 @@ const IMAGES: Record<string, ImageSourcePropType> = {
|
|||
|
||||
export const FeedItem = observer(function FeedItem({
|
||||
item,
|
||||
onNavigateContent,
|
||||
}: {
|
||||
item: FeedViewItemModel
|
||||
onNavigateContent: OnNavigateContent
|
||||
}) {
|
||||
const record = item.record as unknown as bsky.Post.Record
|
||||
const onPressOuter = () => {
|
||||
const urip = new AdxUri(item.uri)
|
||||
onNavigateContent('PostThread', {
|
||||
name: item.author.name,
|
||||
recordKey: urip.recordKey,
|
||||
})
|
||||
}
|
||||
return (
|
||||
<View style={styles.outer}>
|
||||
<TouchableOpacity style={styles.outer} onPress={onPressOuter}>
|
||||
{item.repostedBy && (
|
||||
<View style={styles.repostedBy}>
|
||||
<FontAwesomeIcon icon="retweet" style={styles.repostedByIcon} />
|
||||
|
@ -80,7 +97,7 @@ export const FeedItem = observer(function FeedItem({
|
|||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
import React, {useState, useEffect} from 'react'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {ActivityIndicator, FlatList, Text, View} from 'react-native'
|
||||
import {OnNavigateContent} from '../../routes/types'
|
||||
import {
|
||||
PostThreadViewModel,
|
||||
PostThreadViewPostModel,
|
||||
} from '../../../state/models/post-thread-view'
|
||||
import {useStores} from '../../../state'
|
||||
import {PostThreadItem} from './PostThreadItem'
|
||||
|
||||
export const PostThread = observer(function PostThread({
|
||||
uri,
|
||||
onNavigateContent,
|
||||
}: {
|
||||
uri: string
|
||||
onNavigateContent: OnNavigateContent
|
||||
}) {
|
||||
const store = useStores()
|
||||
const [view, setView] = useState<PostThreadViewModel | undefined>()
|
||||
|
||||
useEffect(() => {
|
||||
if (view?.params.uri === uri) {
|
||||
console.log('Post thread doing nothing')
|
||||
return // no change needed? or trigger refresh?
|
||||
}
|
||||
console.log('Fetching post thread', uri)
|
||||
const newView = new PostThreadViewModel(store, {uri})
|
||||
setView(newView)
|
||||
newView.setup().catch(err => console.error('Failed to fetch thread', err))
|
||||
}, [uri, view?.params.uri, store])
|
||||
|
||||
// not yet setup
|
||||
if (
|
||||
!view ||
|
||||
(view.isLoading && !view.isRefreshing) ||
|
||||
view.params.uri !== uri
|
||||
) {
|
||||
return (
|
||||
<View>
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// error
|
||||
if (view.hasError) {
|
||||
return (
|
||||
<View>
|
||||
<Text>{view.error}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// rendering
|
||||
const posts = Array.from(flattenThread(view.thread))
|
||||
const renderItem = ({item}: {item: PostThreadViewPostModel}) => (
|
||||
<PostThreadItem item={item} onNavigateContent={onNavigateContent} />
|
||||
)
|
||||
const onRefresh = () => {
|
||||
view.refresh().catch(err => console.error('Failed to refresh', err))
|
||||
}
|
||||
return (
|
||||
<View>
|
||||
{view.isRefreshing && <ActivityIndicator />}
|
||||
{view.hasContent && (
|
||||
<FlatList
|
||||
data={posts}
|
||||
keyExtractor={item => item._reactKey}
|
||||
renderItem={renderItem}
|
||||
refreshing={view.isRefreshing}
|
||||
onRefresh={onRefresh}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
function* flattenThread(
|
||||
post: PostThreadViewPostModel,
|
||||
): Generator<PostThreadViewPostModel, void> {
|
||||
yield post
|
||||
if (post.replies?.length) {
|
||||
for (const reply of post.replies) {
|
||||
yield* flattenThread(reply)
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,176 @@
|
|||
import React from 'react'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {
|
||||
Image,
|
||||
ImageSourcePropType,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {bsky} from '@adxp/mock-api'
|
||||
import moment from 'moment'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {OnNavigateContent} from '../../routes/types'
|
||||
import {PostThreadViewPostModel} from '../../../state/models/post-thread-view'
|
||||
|
||||
const IMAGES: Record<string, ImageSourcePropType> = {
|
||||
'alice.com': require('../../assets/alice.jpg'),
|
||||
'bob.com': require('../../assets/bob.jpg'),
|
||||
'carla.com': require('../../assets/carla.jpg'),
|
||||
}
|
||||
|
||||
export const PostThreadItem = observer(function PostThreadItem({
|
||||
item, // onNavigateContent,
|
||||
}: {
|
||||
item: PostThreadViewPostModel
|
||||
onNavigateContent: OnNavigateContent
|
||||
}) {
|
||||
const record = item.record as unknown as bsky.Post.Record
|
||||
const onPressOuter = () => {
|
||||
// TODO onNavigateContent
|
||||
}
|
||||
return (
|
||||
<TouchableOpacity style={styles.outer} onPress={onPressOuter}>
|
||||
<View style={styles.layout}>
|
||||
<View style={styles.layoutAvi}>
|
||||
<Image
|
||||
style={styles.avi}
|
||||
source={IMAGES[item.author.name] || IMAGES['alice.com']}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.layoutContent}>
|
||||
<View style={styles.meta}>
|
||||
<Text style={[styles.metaItem, styles.metaDisplayName]}>
|
||||
{item.author.displayName}
|
||||
</Text>
|
||||
<Text style={[styles.metaItem, styles.metaName]}>
|
||||
@{item.author.name}
|
||||
</Text>
|
||||
<Text style={[styles.metaItem, styles.metaDate]}>
|
||||
· {moment(item.indexedAt).fromNow(true)}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.postText}>{record.text}</Text>
|
||||
<View style={styles.ctrls}>
|
||||
<View style={styles.ctrl}>
|
||||
<FontAwesomeIcon
|
||||
style={styles.ctrlReplyIcon}
|
||||
icon={['far', 'comment']}
|
||||
/>
|
||||
<Text>{item.replyCount}</Text>
|
||||
</View>
|
||||
<View style={styles.ctrl}>
|
||||
<FontAwesomeIcon
|
||||
style={styles.ctrlRepostIcon}
|
||||
icon="retweet"
|
||||
size={22}
|
||||
/>
|
||||
<Text>{item.repostCount}</Text>
|
||||
</View>
|
||||
<View style={styles.ctrl}>
|
||||
<FontAwesomeIcon
|
||||
style={styles.ctrlLikeIcon}
|
||||
icon={['far', 'heart']}
|
||||
/>
|
||||
<Text>{item.likeCount}</Text>
|
||||
</View>
|
||||
<View style={styles.ctrl}>
|
||||
<FontAwesomeIcon
|
||||
style={styles.ctrlShareIcon}
|
||||
icon="share-from-square"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
})
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#e8e8e8',
|
||||
backgroundColor: '#fff',
|
||||
padding: 10,
|
||||
},
|
||||
repostedBy: {
|
||||
flexDirection: 'row',
|
||||
paddingLeft: 70,
|
||||
},
|
||||
repostedByIcon: {
|
||||
marginRight: 2,
|
||||
color: 'gray',
|
||||
},
|
||||
repostedByText: {
|
||||
color: 'gray',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 13,
|
||||
},
|
||||
layout: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
layoutAvi: {
|
||||
width: 70,
|
||||
},
|
||||
avi: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
resizeMode: 'cover',
|
||||
},
|
||||
layoutContent: {
|
||||
flex: 1,
|
||||
},
|
||||
meta: {
|
||||
flexDirection: 'row',
|
||||
paddingTop: 2,
|
||||
paddingBottom: 4,
|
||||
},
|
||||
metaItem: {
|
||||
paddingRight: 5,
|
||||
},
|
||||
metaDisplayName: {
|
||||
fontSize: 15,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
metaName: {
|
||||
fontSize: 14,
|
||||
color: 'gray',
|
||||
},
|
||||
metaDate: {
|
||||
fontSize: 14,
|
||||
color: 'gray',
|
||||
},
|
||||
postText: {
|
||||
fontSize: 15,
|
||||
paddingBottom: 5,
|
||||
},
|
||||
ctrls: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
ctrl: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
paddingLeft: 4,
|
||||
paddingRight: 4,
|
||||
},
|
||||
ctrlReplyIcon: {
|
||||
marginRight: 5,
|
||||
color: 'gray',
|
||||
},
|
||||
ctrlRepostIcon: {
|
||||
marginRight: 5,
|
||||
color: 'gray',
|
||||
},
|
||||
ctrlLikeIcon: {
|
||||
marginRight: 5,
|
||||
color: 'gray',
|
||||
},
|
||||
ctrlShareIcon: {
|
||||
marginRight: 5,
|
||||
color: 'gray',
|
||||
},
|
||||
})
|
|
@ -16,7 +16,8 @@ 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 {Profile} from '../screens/content/Profile'
|
||||
import {PostThread} from '../screens/content/PostThread'
|
||||
import {Login} from '../screens/Login'
|
||||
import {Signup} from '../screens/Signup'
|
||||
import {NotFound} from '../screens/NotFound'
|
||||
|
@ -32,6 +33,7 @@ const linking: LinkingOptions<RootTabsParamList> = {
|
|||
screens: {
|
||||
Home: '',
|
||||
Profile: 'profile/:name',
|
||||
PostThread: 'profile/:name/post/:recordKey',
|
||||
Search: 'search',
|
||||
Notifications: 'notifications',
|
||||
Menu: 'menu',
|
||||
|
@ -42,7 +44,7 @@ const linking: LinkingOptions<RootTabsParamList> = {
|
|||
},
|
||||
}
|
||||
|
||||
export const RootTabs = createBottomTabNavigator()
|
||||
export const RootTabs = createBottomTabNavigator<RootTabsParamList>()
|
||||
export const PrimaryStack = createNativeStackNavigator()
|
||||
|
||||
const tabBarScreenOptions = ({
|
||||
|
@ -92,6 +94,11 @@ export const Root = observer(() => {
|
|||
component={Profile}
|
||||
options={HIDE_TAB}
|
||||
/>
|
||||
<RootTabs.Screen
|
||||
name="PostThread"
|
||||
component={PostThread}
|
||||
options={HIDE_TAB}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
|
|
|
@ -6,6 +6,7 @@ export type RootTabsParamList = {
|
|||
Notifications: undefined
|
||||
Menu: undefined
|
||||
Profile: {name: string}
|
||||
PostThread: {name: string; recordKey: string}
|
||||
Login: undefined
|
||||
Signup: undefined
|
||||
NotFound: undefined
|
||||
|
@ -13,6 +14,8 @@ export type RootTabsParamList = {
|
|||
export type RootTabsScreenProps<T extends keyof RootTabsParamList> =
|
||||
StackScreenProps<RootTabsParamList, T>
|
||||
|
||||
export type OnNavigateContent = (screen: string, params: Record<string, string>): void
|
||||
|
||||
/*
|
||||
NOTE
|
||||
this is leftover from a nested nav implementation
|
||||
|
|
|
@ -1,20 +1,23 @@
|
|||
import React, {useEffect} from 'react'
|
||||
import {Text, View} from 'react-native'
|
||||
import {View} from 'react-native'
|
||||
import {Shell} from '../shell'
|
||||
import {Feed} from '../com/Feed'
|
||||
// import type {RootTabsScreenProps} from '../routes/types'
|
||||
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<'Home'>) {
|
||||
const store = useStores()
|
||||
useEffect(() => {
|
||||
console.log('Fetching home feed')
|
||||
store.homeFeed.setup()
|
||||
}, [store.homeFeed])
|
||||
const onNavigateContent = (screen: string, props: Record<string, string>) => {
|
||||
navigation.navigate(screen, props)
|
||||
}
|
||||
return (
|
||||
<Shell>
|
||||
<View>
|
||||
<Feed feed={store.homeFeed} />
|
||||
<Feed feed={store.homeFeed} onNavigateContent={onNavigateContent} />
|
||||
</View>
|
||||
</Shell>
|
||||
)
|
||||
|
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'react'
|
||||
import {AdxUri} from '@adxp/mock-api'
|
||||
import {Shell} from '../../shell'
|
||||
import type {RootTabsScreenProps} from '../../routes/types'
|
||||
import {PostThread as PostThreadComponent} from '../../com/post-thread/PostThread'
|
||||
|
||||
export const PostThread = ({
|
||||
navigation,
|
||||
route,
|
||||
}: RootTabsScreenProps<'PostThread'>) => {
|
||||
const {name, recordKey} = route.params
|
||||
|
||||
const urip = new AdxUri(`adx://todo/`)
|
||||
urip.host = name
|
||||
urip.collection = 'blueskyweb.xyz:Posts'
|
||||
urip.recordKey = recordKey
|
||||
const uri = urip.toString()
|
||||
|
||||
const onNavigateContent = (screen: string, props: Record<string, string>) => {
|
||||
navigation.navigate(screen, props)
|
||||
}
|
||||
return (
|
||||
<Shell>
|
||||
<PostThreadComponent uri={uri} onNavigateContent={onNavigateContent} />
|
||||
</Shell>
|
||||
)
|
||||
}
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import {Shell} from '../shell'
|
||||
import {Shell} from '../../shell'
|
||||
import {View, Text} from 'react-native'
|
||||
import type {RootTabsScreenProps} from '../routes/types'
|
||||
import type {RootTabsScreenProps} from '../../routes/types'
|
||||
|
||||
export const Profile = ({route}: RootTabsScreenProps<'Profile'>) => {
|
||||
return (
|
17
yarn.lock
17
yarn.lock
|
@ -2662,6 +2662,18 @@
|
|||
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
|
||||
integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
|
||||
|
||||
"@types/lodash.omit@^4.5.7":
|
||||
version "4.5.7"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash.omit/-/lodash.omit-4.5.7.tgz#2357ed2412b4164344e8ee41f85bb0b2920304ba"
|
||||
integrity sha512-6q6cNg0tQ6oTWjSM+BcYMBhan54P/gLqBldG4AuXd3nKr0oeVekWNS4VrNEu3BhCSDXtGapi7zjhnna0s03KpA==
|
||||
dependencies:
|
||||
"@types/lodash" "*"
|
||||
|
||||
"@types/lodash@*":
|
||||
version "4.14.182"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
|
||||
integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
|
||||
|
||||
"@types/mime@^1":
|
||||
version "1.3.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
|
||||
|
@ -8912,6 +8924,11 @@ lodash.merge@^4.6.2:
|
|||
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
|
||||
integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
|
||||
|
||||
lodash.omit@^4.5.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
|
||||
integrity sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==
|
||||
|
||||
lodash.sortby@^4.7.0:
|
||||
version "4.7.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
|
||||
|
|
Loading…
Reference in New Issue