Add notifications view

package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@adxp/auth": "*",
     "@adxp/common": "*",
-    "@adxp/mock-api": "git+ssh://git@github.com:bluesky-social/adx-mock-api.git#6d700ac04affe31030120975c128f1849c8ae98e",
+    "@adxp/mock-api": "git+ssh://git@github.com:bluesky-social/adx-mock-api.git#e6f9ecd510fd54fbc5af32e319342634d9446a07",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",

src/state/models/feed-view.ts

@@ -110,6 +110,7 @@ export class FeedViewModel implements bsky.FeedView.Response {
       {
         rootStore: false,
         params: false,
+        _loadPromise: false,
         _loadMorePromise: false,
         _updatePromise: false,
       },

src/state/models/notifications-view.ts

@@ -0,0 +1,304 @@
+import {makeAutoObservable, runInAction} from 'mobx'
+import {bsky} from '@adxp/mock-api'
+import {RootStoreModel} from './root-store'
+import {hasProp} from '../lib/type-guards'
+
+export class NotificationsViewItemModel
+  implements bsky.NotificationsView.Notification
+{
+  // ui state
+  _reactKey: string = ''
+
+  // data
+  uri: string = ''
+  author: {
+    did: string
+    name: string
+    displayName: string
+  } = {did: '', name: '', displayName: ''}
+  record: any = {}
+  isRead: boolean = false
+  indexedAt: string = ''
+
+  constructor(
+    public rootStore: RootStoreModel,
+    reactKey: string,
+    v: bsky.NotificationsView.Notification,
+  ) {
+    makeAutoObservable(this, {rootStore: false})
+    this._reactKey = reactKey
+    this.copy(v)
+  }
+
+  copy(v: bsky.NotificationsView.Notification) {
+    this.uri = v.uri
+    this.author = v.author
+    this.record = v.record
+    this.isRead = v.isRead
+    this.indexedAt = v.indexedAt
+  }
+
+  get isLike() {
+    return (
+      hasProp(this.record, '$type') &&
+      this.record.$type === 'blueskyweb.xyz:Like'
+    )
+  }
+
+  get isRepost() {
+    return (
+      hasProp(this.record, '$type') &&
+      this.record.$type === 'blueskyweb.xyz:Repost'
+    )
+  }
+
+  get isReply() {
+    return (
+      hasProp(this.record, '$type') &&
+      this.record.$type === 'blueskyweb.xyz:Post'
+    )
+  }
+
+  get isFollow() {
+    return (
+      hasProp(this.record, '$type') &&
+      this.record.$type === 'blueskyweb.xyz:Follow'
+    )
+  }
+
+  get subjectUri() {
+    if (
+      hasProp(this.record, 'subject') &&
+      typeof this.record.subject === 'string'
+    ) {
+      return this.record.subject
+    }
+    return ''
+  }
+}
+
+export class NotificationsViewModel implements bsky.NotificationsView.Response {
+  // state
+  isLoading = false
+  isRefreshing = false
+  hasLoaded = false
+  error = ''
+  params: bsky.NotificationsView.Params
+  _loadPromise: Promise<void> | undefined
+  _loadMorePromise: Promise<void> | undefined
+  _updatePromise: Promise<void> | undefined
+
+  // data
+  notifications: NotificationsViewItemModel[] = []
+
+  constructor(
+    public rootStore: RootStoreModel,
+    params: bsky.NotificationsView.Params,
+  ) {
+    makeAutoObservable(
+      this,
+      {
+        rootStore: false,
+        params: false,
+        _loadPromise: false,
+        _loadMorePromise: false,
+        _updatePromise: false,
+      },
+      {autoBind: true},
+    )
+    this.params = params
+  }
+
+  get hasContent() {
+    return this.notifications.length !== 0
+  }
+
+  get hasError() {
+    return this.error !== ''
+  }
+
+  get isEmpty() {
+    return this.hasLoaded && !this.hasContent
+  }
+
+  get loadMoreCursor() {
+    if (this.hasContent) {
+      return this.notifications[this.notifications.length - 1].indexedAt
+    }
+    return undefined
+  }
+
+  // public api
+  // =
+
+  /**
+   * Load for first render
+   */
+  async setup(isRefreshing = false) {
+    if (this._loadPromise) {
+      return this._loadPromise
+    }
+    await this._pendingWork()
+    this._loadPromise = this._initialLoad(isRefreshing)
+    await this._loadPromise
+    this._loadPromise = undefined
+  }
+
+  /**
+   * Reset and load
+   */
+  async refresh() {
+    return this.setup(true)
+  }
+
+  /**
+   * Load more posts to the end of the notifications
+   */
+  async loadMore() {
+    if (this._loadMorePromise) {
+      return this._loadMorePromise
+    }
+    await this._pendingWork()
+    this._loadMorePromise = this._loadMore()
+    await this._loadMorePromise
+    this._loadMorePromise = undefined
+  }
+
+  /**
+   * Update content in-place
+   */
+  async update() {
+    if (this._updatePromise) {
+      return this._updatePromise
+    }
+    await this._pendingWork()
+    this._updatePromise = this._update()
+    await this._updatePromise
+    this._updatePromise = undefined
+  }
+
+  // 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 _pendingWork() {
+    if (this._loadPromise) {
+      await this._loadPromise
+    }
+    if (this._loadMorePromise) {
+      await this._loadMorePromise
+    }
+    if (this._updatePromise) {
+      await this._updatePromise
+    }
+  }
+
+  private async _initialLoad(isRefreshing = false) {
+    this._xLoading(isRefreshing)
+    await new Promise(r => setTimeout(r, 250)) // DEBUG
+    try {
+      const res = (await this.rootStore.api.mainPds.view(
+        'blueskyweb.xyz:NotificationsView',
+        this.params,
+      )) as bsky.NotificationsView.Response
+      this._replaceAll(res)
+      this._xIdle()
+    } catch (e: any) {
+      this._xIdle(`Failed to load notifications: ${e.toString()}`)
+    }
+  }
+
+  private async _loadMore() {
+    this._xLoading()
+    await new Promise(r => setTimeout(r, 250)) // DEBUG
+    try {
+      const params = Object.assign({}, this.params, {
+        before: this.loadMoreCursor,
+      })
+      const res = (await this.rootStore.api.mainPds.view(
+        'blueskyweb.xyz:NotificationsView',
+        params,
+      )) as bsky.NotificationsView.Response
+      this._appendAll(res)
+      this._xIdle()
+    } catch (e: any) {
+      this._xIdle(`Failed to load notifications: ${e.toString()}`)
+    }
+  }
+
+  private async _update() {
+    this._xLoading()
+    await new Promise(r => setTimeout(r, 250)) // DEBUG
+    let numToFetch = this.notifications.length
+    let cursor = undefined
+    try {
+      do {
+        const res = (await this.rootStore.api.mainPds.view(
+          'blueskyweb.xyz:NotificationsView',
+          {
+            before: cursor,
+            limit: Math.min(numToFetch, 100),
+          },
+        )) as bsky.NotificationsView.Response
+        if (res.notifications.length === 0) {
+          break // sanity check
+        }
+        this._updateAll(res)
+        numToFetch -= res.notifications.length
+        cursor = this.notifications[res.notifications.length - 1].indexedAt
+        console.log(numToFetch, cursor, res.notifications.length)
+      } while (numToFetch > 0)
+      this._xIdle()
+    } catch (e: any) {
+      this._xIdle(`Failed to update notifications: ${e.toString()}`)
+    }
+  }
+
+  private _replaceAll(res: bsky.NotificationsView.Response) {
+    this.notifications.length = 0
+    this._appendAll(res)
+  }
+
+  private _appendAll(res: bsky.NotificationsView.Response) {
+    let counter = this.notifications.length
+    for (const item of res.notifications) {
+      this._append(counter++, item)
+    }
+  }
+
+  private _append(keyId: number, item: bsky.NotificationsView.Notification) {
+    // TODO: validate .record
+    this.notifications.push(
+      new NotificationsViewItemModel(this.rootStore, `item-${keyId}`, item),
+    )
+  }
+
+  private _updateAll(res: bsky.NotificationsView.Response) {
+    for (const item of res.notifications) {
+      const existingItem = this.notifications.find(
+        // this find function has a key subtley- the indexedAt comparison
+        // the reason for this is reposts: they set the URI of the original post, not of the repost record
+        // the indexedAt time will be for the repost however, so we use that to help us
+        item2 => item.uri === item2.uri && item.indexedAt === item2.indexedAt,
+      )
+      if (existingItem) {
+        existingItem.copy(item)
+      }
+    }
+  }
+}

src/state/models/post.ts

@@ -0,0 +1,93 @@
+import {makeAutoObservable} from 'mobx'
+import {bsky, AdxUri} from '@adxp/mock-api'
+import {RootStoreModel} from './root-store'
+
+export type PostEntities = bsky.Post.Record['entities']
+export type PostReply = bsky.Post.Record['reply']
+export class PostModel implements bsky.Post.Record {
+  // state
+  isLoading = false
+  hasLoaded = false
+  error = ''
+  uri: string = ''
+
+  // data
+  text: string = ''
+  entities?: PostEntities
+  reply?: PostReply
+  createdAt: string = ''
+
+  constructor(public rootStore: RootStoreModel, uri: string) {
+    makeAutoObservable(
+      this,
+      {
+        rootStore: false,
+        uri: false,
+      },
+      {autoBind: true},
+    )
+    this.uri = uri
+  }
+
+  get hasContent() {
+    return this.createdAt !== ''
+  }
+
+  get hasError() {
+    return this.error !== ''
+  }
+
+  get isEmpty() {
+    return this.hasLoaded && !this.hasContent
+  }
+
+  // public api
+  // =
+
+  async setup() {
+    await this._load()
+  }
+
+  // state transitions
+  // =
+
+  private _xLoading() {
+    this.isLoading = true
+    this.error = ''
+  }
+
+  private _xIdle(err: string = '') {
+    this.isLoading = false
+    this.hasLoaded = true
+    this.error = err
+  }
+
+  // loader functions
+  // =
+
+  private async _load() {
+    this._xLoading()
+    await new Promise(r => setTimeout(r, 250)) // DEBUG
+    try {
+      const urip = new AdxUri(this.uri)
+      const res = await this.rootStore.api.mainPds
+        .repo(urip.host, false)
+        .collection(urip.collection)
+        .get('Post', urip.recordKey)
+      if (!res.valid) {
+        throw new Error(res.error)
+      }
+      this._replaceAll(res.value)
+      this._xIdle()
+    } catch (e: any) {
+      this._xIdle(`Failed to load post: ${e.toString()}`)
+    }
+  }
+
+  private _replaceAll(res: bsky.Post.Record) {
+    this.text = res.text
+    this.entities = res.entities
+    this.reply = res.reply
+    this.createdAt = res.createdAt
+  }
+}

src/state/models/root-store.ts

@@ -9,11 +9,13 @@ import {isObj, hasProp} from '../lib/type-guards'
 import {SessionModel} from './session'
 import {MeModel} from './me'
 import {FeedViewModel} from './feed-view'
+import {NotificationsViewModel} from './notifications-view'
 
 export class RootStoreModel {
   session = new SessionModel()
   me = new MeModel(this)
   homeFeed = new FeedViewModel(this, {})
+  notesFeed = new NotificationsViewModel(this, {})
 
   constructor(public api: AdxClient) {
     makeAutoObservable(this, {

src/view/com/notifications/Feed.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import {observer} from 'mobx-react-lite'
+import {Text, View, FlatList} from 'react-native'
+import {OnNavigateContent} from '../../routes/types'
+import {
+  NotificationsViewModel,
+  NotificationsViewItemModel,
+} from '../../../state/models/notifications-view'
+import {FeedItem} from './FeedItem'
+
+export const Feed = observer(function Feed({
+  view,
+  onNavigateContent,
+}: {
+  view: NotificationsViewModel
+  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: NotificationsViewItemModel}) => (
+    <FeedItem item={item} onNavigateContent={onNavigateContent} />
+  )
+  const onRefresh = () => {
+    view.refresh().catch(err => console.error('Failed to refresh', err))
+  }
+  const onEndReached = () => {
+    view.loadMore().catch(err => console.error('Failed to load more', err))
+  }
+  return (
+    <View>
+      {view.isLoading && !view.isRefreshing && !view.hasContent && (
+        <Text>Loading...</Text>
+      )}
+      {view.hasError && <Text>{view.error}</Text>}
+      {view.hasContent && (
+        <FlatList
+          data={view.notifications}
+          keyExtractor={item => item._reactKey}
+          renderItem={renderItem}
+          refreshing={view.isRefreshing}
+          onRefresh={onRefresh}
+          onEndReached={onEndReached}
+        />
+      )}
+      {view.isEmpty && <Text>This feed is empty!</Text>}
+    </View>
+  )
+})

src/view/com/notifications/FeedItem.tsx

@@ -0,0 +1,136 @@
+import React from 'react'
+import {observer} from 'mobx-react-lite'
+import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {AdxUri} from '@adxp/mock-api'
+import {FontAwesomeIcon, Props} from '@fortawesome/react-native-fontawesome'
+import {OnNavigateContent} from '../../routes/types'
+import {NotificationsViewItemModel} from '../../../state/models/notifications-view'
+import {s} from '../../lib/styles'
+import {ago} from '../../lib/strings'
+import {AVIS} from '../../lib/assets'
+import {PostText} from '../post/PostText'
+import {Post} from '../post/Post'
+
+export const FeedItem = observer(function FeedItem({
+  item,
+  onNavigateContent,
+}: {
+  item: NotificationsViewItemModel
+  onNavigateContent: OnNavigateContent
+}) {
+  const onPressOuter = () => {
+    if (item.isLike || item.isRepost) {
+      const urip = new AdxUri(item.subjectUri)
+      onNavigateContent('PostThread', {
+        name: urip.host,
+        recordKey: urip.recordKey,
+      })
+    } else if (item.isFollow) {
+      onNavigateContent('Profile', {
+        name: item.author.name,
+      })
+    } else if (item.isReply) {
+      const urip = new AdxUri(item.uri)
+      onNavigateContent('PostThread', {
+        name: urip.host,
+        recordKey: urip.recordKey,
+      })
+    }
+  }
+  const onPressAuthor = () => {
+    onNavigateContent('Profile', {
+      name: item.author.name,
+    })
+  }
+
+  let action = ''
+  let icon: Props['icon']
+  if (item.isLike) {
+    action = 'liked your post'
+    icon = ['far', 'heart']
+  } else if (item.isRepost) {
+    action = 'reposted your post'
+    icon = 'retweet'
+  } else if (item.isReply) {
+    action = 'replied to your post'
+    icon = ['far', 'comment']
+  } else if (item.isFollow) {
+    action = 'followed you'
+    icon = 'plus'
+  } else {
+    return <></>
+  }
+
+  return (
+    <TouchableOpacity style={styles.outer} onPress={onPressOuter}>
+      <View style={styles.layout}>
+        <TouchableOpacity style={styles.layoutAvi} onPress={onPressAuthor}>
+          <Image
+            style={styles.avi}
+            source={AVIS[item.author.name] || AVIS['alice.com']}
+          />
+        </TouchableOpacity>
+        <View style={styles.layoutContent}>
+          <View style={styles.meta}>
+            <FontAwesomeIcon icon={icon} size={14} style={[s.mt2, s.mr5]} />
+            <Text
+              style={[styles.metaItem, s.f14, s.bold]}
+              onPress={onPressAuthor}>
+              {item.author.displayName}
+            </Text>
+            <Text style={[styles.metaItem, s.f14]}>{action}</Text>
+            <Text style={[styles.metaItem, s.f14, s.gray]}>
+              {ago(item.indexedAt)}
+            </Text>
+          </View>
+          {item.isLike || item.isRepost ? (
+            <PostText uri={item.subjectUri} style={[s.gray]} />
+          ) : (
+            <></>
+          )}
+        </View>
+      </View>
+      {item.isReply ? (
+        <View style={s.pt5}>
+          <Post uri={item.uri} onNavigateContent={onNavigateContent} />
+        </View>
+      ) : (
+        <></>
+      )}
+    </TouchableOpacity>
+  )
+})
+
+const styles = StyleSheet.create({
+  outer: {
+    backgroundColor: '#fff',
+    padding: 10,
+    paddingBottom: 0,
+  },
+  layout: {
+    flexDirection: 'row',
+  },
+  layoutAvi: {
+    width: 40,
+  },
+  avi: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    resizeMode: 'cover',
+  },
+  layoutContent: {
+    flex: 1,
+  },
+  meta: {
+    flexDirection: 'row',
+    paddingTop: 6,
+    paddingBottom: 4,
+  },
+  metaItem: {
+    paddingRight: 3,
+  },
+  postText: {
+    paddingBottom: 5,
+  },
+})

src/view/com/post/Post.tsx

@@ -0,0 +1,225 @@
+import React, {useState, useEffect} from 'react'
+import {observer} from 'mobx-react-lite'
+import {bsky, AdxUri} from '@adxp/mock-api'
+import {
+  ActivityIndicator,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {OnNavigateContent} from '../../routes/types'
+import {PostThreadViewModel} from '../../../state/models/post-thread-view'
+import {useStores} from '../../../state'
+import {s} from '../../lib/styles'
+import {ago} from '../../lib/strings'
+import {AVIS} from '../../lib/assets'
+
+export const Post = observer(function Post({
+  uri,
+  onNavigateContent,
+}: {
+  uri: string
+  onNavigateContent: OnNavigateContent
+}) {
+  const store = useStores()
+  const [view, setView] = useState<PostThreadViewModel | undefined>()
+
+  useEffect(() => {
+    if (view?.params.uri === uri) {
+      return // no change needed? or trigger refresh?
+    }
+    const newView = new PostThreadViewModel(store, {uri, depth: 0})
+    setView(newView)
+    newView.setup().catch(err => console.error('Failed to fetch post', err))
+  }, [uri, view?.params.uri, store])
+
+  // loading
+  // =
+  if (!view || view.isLoading || view.params.uri !== uri) {
+    return (
+      <View>
+        <ActivityIndicator />
+      </View>
+    )
+  }
+
+  // error
+  // =
+  if (view.hasError || !view.thread) {
+    return (
+      <View>
+        <Text>{view.error || 'Thread not found'}</Text>
+      </View>
+    )
+  }
+
+  // loaded
+  // =
+  const item = view.thread
+  const record = view.thread?.record as unknown as bsky.Post.Record
+
+  const onPressOuter = () => {
+    const urip = new AdxUri(item.uri)
+    onNavigateContent('PostThread', {
+      name: item.author.name,
+      recordKey: urip.recordKey,
+    })
+  }
+  const onPressAuthor = () => {
+    onNavigateContent('Profile', {
+      name: item.author.name,
+    })
+  }
+  const onPressReply = () => {
+    onNavigateContent('Composer', {
+      replyTo: item.uri,
+    })
+  }
+  const onPressToggleRepost = () => {
+    item
+      .toggleRepost()
+      .catch(e => console.error('Failed to toggle repost', record, e))
+  }
+  const onPressToggleLike = () => {
+    item
+      .toggleLike()
+      .catch(e => console.error('Failed to toggle like', record, e))
+  }
+
+  return (
+    <TouchableOpacity style={styles.outer} onPress={onPressOuter}>
+      <View style={styles.layout}>
+        <TouchableOpacity style={styles.layoutAvi} onPress={onPressAuthor}>
+          <Image
+            style={styles.avi}
+            source={AVIS[item.author.name] || AVIS['alice.com']}
+          />
+        </TouchableOpacity>
+        <View style={styles.layoutContent}>
+          <View style={styles.meta}>
+            <Text
+              style={[styles.metaItem, s.f15, s.bold]}
+              onPress={onPressAuthor}>
+              {item.author.displayName}
+            </Text>
+            <Text
+              style={[styles.metaItem, s.f14, s.gray]}
+              onPress={onPressAuthor}>
+              @{item.author.name}
+            </Text>
+            <Text style={[styles.metaItem, s.f14, s.gray]}>
+              &middot; {ago(item.indexedAt)}
+            </Text>
+          </View>
+          <Text style={[styles.postText, s.f15, s['lh15-1.3']]}>
+            {record.text}
+          </Text>
+          <View style={styles.ctrls}>
+            <TouchableOpacity style={styles.ctrl} onPress={onPressReply}>
+              <FontAwesomeIcon
+                style={styles.ctrlIcon}
+                icon={['far', 'comment']}
+              />
+              <Text>{item.replyCount}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}>
+              <FontAwesomeIcon
+                style={
+                  item.myState.hasReposted
+                    ? styles.ctrlIconReposted
+                    : styles.ctrlIcon
+                }
+                icon="retweet"
+                size={22}
+              />
+              <Text
+                style={
+                  item.myState.hasReposted ? [s.bold, s.green] : undefined
+                }>
+                {item.repostCount}
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.ctrl} onPress={onPressToggleLike}>
+              <FontAwesomeIcon
+                style={
+                  item.myState.hasLiked ? styles.ctrlIconLiked : styles.ctrlIcon
+                }
+                icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
+              />
+              <Text style={item.myState.hasLiked ? [s.bold, s.red] : undefined}>
+                {item.likeCount}
+              </Text>
+            </TouchableOpacity>
+            <View style={styles.ctrl}>
+              <FontAwesomeIcon
+                style={styles.ctrlIcon}
+                icon="share-from-square"
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  )
+})
+
+const styles = StyleSheet.create({
+  outer: {
+    borderWidth: 1,
+    borderColor: '#e8e8e8',
+    borderRadius: 4,
+    backgroundColor: '#fff',
+    padding: 10,
+  },
+  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,
+  },
+  postText: {
+    paddingBottom: 5,
+  },
+  ctrls: {
+    flexDirection: 'row',
+  },
+  ctrl: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    paddingLeft: 4,
+    paddingRight: 4,
+  },
+  ctrlIcon: {
+    marginRight: 5,
+    color: 'gray',
+  },
+  ctrlIconReposted: {
+    marginRight: 5,
+    color: 'green',
+  },
+  ctrlIconLiked: {
+    marginRight: 5,
+    color: 'red',
+  },
+})

src/view/com/post/PostText.tsx

@@ -0,0 +1,53 @@
+import React, {useState, useEffect} from 'react'
+import {observer} from 'mobx-react-lite'
+import {ActivityIndicator, Text, View} from 'react-native'
+import {PostModel} from '../../../state/models/post'
+import {useStores} from '../../../state'
+
+export const PostText = observer(function PostText({
+  uri,
+  style,
+}: {
+  uri: string
+  style?: StyleProp
+}) {
+  const store = useStores()
+  const [model, setModel] = useState<PostModel | undefined>()
+
+  useEffect(() => {
+    if (model?.uri === uri) {
+      return // no change needed? or trigger refresh?
+    }
+    const newModel = new PostModel(store, uri)
+    setModel(newModel)
+    newModel.setup().catch(err => console.error('Failed to fetch post', err))
+  }, [uri, model?.uri, store])
+
+  // loading
+  // =
+  if (!model || model.isLoading || model.uri !== uri) {
+    return (
+      <View>
+        <ActivityIndicator />
+      </View>
+    )
+  }
+
+  // error
+  // =
+  if (model.hasError) {
+    return (
+      <View>
+        <Text style={style}>{model.error}</Text>
+      </View>
+    )
+  }
+
+  // loaded
+  // =
+  return (
+    <View>
+      <Text style={style}>{model.text}</Text>
+    </View>
+  )
+})

src/view/screens/tabroots/Notifications.tsx

@@ -1,16 +1,71 @@
-import React from 'react'
+import React, {useState, useEffect, useLayoutEffect} from 'react'
+import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Shell} from '../../shell'
-import {Text, View} from 'react-native'
+import {Feed} from '../../com/notifications/Feed'
 import type {RootTabsScreenProps} from '../../routes/types'
+import {useStores} from '../../../state'
+import {AVIS} from '../../lib/assets'
+
+export const Notifications = ({
+  navigation,
+}: RootTabsScreenProps<'NotificationsTab'>) => {
+  const [hasSetup, setHasSetup] = useState<boolean>(false)
+  const store = useStores()
+  useEffect(() => {
+    console.log('Fetching home feed')
+    store.notesFeed.setup().then(() => setHasSetup(true))
+  }, [store.notesFeed])
+
+  const onNavigateContent = (screen: string, props: Record<string, string>) => {
+    // @ts-ignore it's up to the callers to supply correct params -prf
+    navigation.navigate(screen, props)
+  }
+
+  useEffect(() => {
+    return navigation.addListener('focus', () => {
+      if (hasSetup) {
+        console.log('Updating home feed')
+        store.notesFeed.update()
+      }
+    })
+  }, [navigation, store.notesFeed, hasSetup])
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: true,
+      headerTitle: 'Notifications',
+      headerLeft: () => (
+        <TouchableOpacity
+          onPress={() => navigation.push('Profile', {name: 'alice.com'})}>
+          <Image source={AVIS['alice.com']} style={styles.avi} />
+        </TouchableOpacity>
+      ),
+      headerRight: () => (
+        <TouchableOpacity
+          onPress={() => {
+            navigation.push('Composer', {})
+          }}>
+          <FontAwesomeIcon icon="plus" style={{color: '#006bf7'}} />
+        </TouchableOpacity>
+      ),
+    })
+  }, [navigation])
 
-export const Notifications = (
-  _props: RootTabsScreenProps<'NotificationsTab'>,
-) => {
   return (
     <Shell>
-      <View style={{justifyContent: 'center', alignItems: 'center'}}>
+      <View>
-        <Text style={{fontSize: 20, fontWeight: 'bold'}}>Notifications</Text>
+        <Feed view={store.notesFeed} onNavigateContent={onNavigateContent} />
       </View>
     </Shell>
   )
 }
+
+const styles = StyleSheet.create({
+  avi: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    resizeMode: 'cover',
+  },
+})

todos.txt

@@ -4,8 +4,6 @@ Paul's todo list
   - Check on navigation stack during a bunch of replies
 - Search view
   - *
-- Notifications view
-  - *
 - Linking
   - Web linking
   - App linking

yarn.lock

@@ -55,9 +55,9 @@
     ucans "0.9.0-alpha3"
     uint8arrays "^3.0.0"
 
-"@adxp/mock-api@git+ssh://git@github.com:bluesky-social/adx-mock-api.git#6d700ac04affe31030120975c128f1849c8ae98e":
+"@adxp/mock-api@git+ssh://git@github.com:bluesky-social/adx-mock-api.git#e6f9ecd510fd54fbc5af32e319342634d9446a07":
   version "0.0.1"
-  resolved "git+ssh://git@github.com:bluesky-social/adx-mock-api.git#6d700ac04affe31030120975c128f1849c8ae98e"
+  resolved "git+ssh://git@github.com:bluesky-social/adx-mock-api.git#e6f9ecd510fd54fbc5af32e319342634d9446a07"
   dependencies:
     ajv "^8.11.0"
     ajv-formats "^2.1.1"