diff --git a/package.json b/package.json index 7c7fed2e..0963c46e 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/state/models/feed-view.ts b/src/state/models/feed-view.ts index 4b915a76..51379b5c 100644 --- a/src/state/models/feed-view.ts +++ b/src/state/models/feed-view.ts @@ -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 diff --git a/src/state/models/post-thread-view.ts b/src/state/models/post-thread-view.ts new file mode 100644 index 00000000..e2e0f746 --- /dev/null +++ b/src/state/models/post-thread-view.ts @@ -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 = {} + 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 + } +} diff --git a/src/state/models/root-store.ts b/src/state/models/root-store.ts index a5d35606..7391a82b 100644 --- a/src/state/models/root-store.ts +++ b/src/state/models/root-store.ts @@ -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(), diff --git a/src/view/com/Feed.tsx b/src/view/com/feed/Feed.tsx similarity index 53% rename from src/view/com/Feed.tsx rename to src/view/com/feed/Feed.tsx index 507f0edd..fe9d350d 100644 --- a/src/view/com/Feed.tsx +++ b/src/view/com/feed/Feed.tsx @@ -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}) => ( - {() => } + ) 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 && ( item._reactKey} renderItem={renderItem} refreshing={feed.isRefreshing} onRefresh={onRefresh} diff --git a/src/view/com/FeedItem.tsx b/src/view/com/feed/FeedItem.tsx similarity index 86% rename from src/view/com/FeedItem.tsx rename to src/view/com/feed/FeedItem.tsx index 262104bf..7a57326f 100644 --- a/src/view/com/FeedItem.tsx +++ b/src/view/com/feed/FeedItem.tsx @@ -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 = { 'alice.com': require('../../assets/alice.jpg'), @@ -14,12 +22,21 @@ const IMAGES: Record = { 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 ( - + {item.repostedBy && ( @@ -80,7 +97,7 @@ export const FeedItem = observer(function FeedItem({ - + ) }) diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx new file mode 100644 index 00000000..bc6642e0 --- /dev/null +++ b/src/view/com/post-thread/PostThread.tsx @@ -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() + + 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 ( + + + + ) + } + + // error + if (view.hasError) { + return ( + + {view.error} + + ) + } + + // rendering + const posts = Array.from(flattenThread(view.thread)) + const renderItem = ({item}: {item: PostThreadViewPostModel}) => ( + + ) + const onRefresh = () => { + view.refresh().catch(err => console.error('Failed to refresh', err)) + } + return ( + + {view.isRefreshing && } + {view.hasContent && ( + item._reactKey} + renderItem={renderItem} + refreshing={view.isRefreshing} + onRefresh={onRefresh} + /> + )} + + ) +}) + +function* flattenThread( + post: PostThreadViewPostModel, +): Generator { + yield post + if (post.replies?.length) { + for (const reply of post.replies) { + yield* flattenThread(reply) + } + } +} diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx new file mode 100644 index 00000000..33857f48 --- /dev/null +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -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 = { + '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 ( + + + + + + + + + {item.author.displayName} + + + @{item.author.name} + + + · {moment(item.indexedAt).fromNow(true)} + + + {record.text} + + + + {item.replyCount} + + + + {item.repostCount} + + + + {item.likeCount} + + + + + + + + + ) +}) + +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', + }, +}) diff --git a/src/view/routes/index.tsx b/src/view/routes/index.tsx index 6351dea6..2d47a047 100644 --- a/src/view/routes/index.tsx +++ b/src/view/routes/index.tsx @@ -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 = { screens: { Home: '', Profile: 'profile/:name', + PostThread: 'profile/:name/post/:recordKey', Search: 'search', Notifications: 'notifications', Menu: 'menu', @@ -42,7 +44,7 @@ const linking: LinkingOptions = { }, } -export const RootTabs = createBottomTabNavigator() +export const RootTabs = createBottomTabNavigator() export const PrimaryStack = createNativeStackNavigator() const tabBarScreenOptions = ({ @@ -92,6 +94,11 @@ export const Root = observer(() => { component={Profile} options={HIDE_TAB} /> + ) : ( <> diff --git a/src/view/routes/types.ts b/src/view/routes/types.ts index d92594bb..bca6f196 100644 --- a/src/view/routes/types.ts +++ b/src/view/routes/types.ts @@ -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 = StackScreenProps +export type OnNavigateContent = (screen: string, params: Record): void + /* NOTE this is leftover from a nested nav implementation diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 6685eb79..4a3e41a7 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -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) => { + navigation.navigate(screen, props) + } return ( - + ) diff --git a/src/view/screens/content/PostThread.tsx b/src/view/screens/content/PostThread.tsx new file mode 100644 index 00000000..5b8fa951 --- /dev/null +++ b/src/view/screens/content/PostThread.tsx @@ -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) => { + navigation.navigate(screen, props) + } + return ( + + + + ) +} diff --git a/src/view/screens/Profile.tsx b/src/view/screens/content/Profile.tsx similarity index 80% rename from src/view/screens/Profile.tsx rename to src/view/screens/content/Profile.tsx index 2c93f4bf..cfbf840f 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/content/Profile.tsx @@ -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 ( diff --git a/yarn.lock b/yarn.lock index 0382f8ec..eaefbcc7 100644 --- a/yarn.lock +++ b/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"