Add WIP post-thread view

zio/stable
Paul Frazee 2022-07-20 15:00:37 -05:00
parent 19c694bc60
commit c712cbbfe2
14 changed files with 534 additions and 25 deletions

View File

@ -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",

View File

@ -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

View File

@ -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
}
}

View File

@ -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(),

View File

@ -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}

View File

@ -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>
)
})

View File

@ -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)
}
}
}

View File

@ -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]}>
&middot; {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',
},
})

View File

@ -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}
/>
</>
) : (
<>

View File

@ -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

View File

@ -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>
)

View File

@ -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>
)
}

View File

@ -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 (

View File

@ -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"