5 files changed, 210 insertions, 0 deletions
diff --git a/src/view/screens/stacks/Composer.tsx b/src/view/screens/stacks/Composer.tsx
new file mode 100644
index 000000000..e1b36567a
--- /dev/null
+++ b/src/view/screens/stacks/Composer.tsx
@@ -0,0 +1,50 @@
+import React, {useLayoutEffect, useRef} from 'react'
+import {Text, TouchableOpacity} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Shell} from '../../shell'
+import type {RootTabsScreenProps} from '../../routes/types'
+import {Composer as ComposerComponent} from '../../com/composer/Composer'
+
+export const Composer = ({
+  navigation,
+  route,
+}: RootTabsScreenProps<'Composer'>) => {
+  const {replyTo} = route.params
+  const ref = useRef<{publish: () => Promise<boolean>}>()
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: true,
+      headerTitle: replyTo ? 'Reply' : 'New Post',
+      headerLeft: () => (
+        <TouchableOpacity onPress={() => navigation.goBack()}>
+          <FontAwesomeIcon icon="x" />
+        </TouchableOpacity>
+      ),
+      headerRight: () => (
+        <TouchableOpacity
+          onPress={() => {
+            if (!ref.current) {
+              return
+            }
+            ref.current.publish().then(
+              posted => {
+                if (posted) {
+                  navigation.goBack()
+                }
+              },
+              err => console.error('Failed to create post', err),
+            )
+          }}>
+          <Text>Post</Text>
+        </TouchableOpacity>
+      ),
+    })
+  }, [navigation, replyTo, ref])
+
+  return (
+    <Shell>
+      <ComposerComponent ref={ref} replyTo={replyTo} />
+    </Shell>
+  )
+}
diff --git a/src/view/screens/stacks/PostLikedBy.tsx b/src/view/screens/stacks/PostLikedBy.tsx
new file mode 100644
index 000000000..f12990141
--- /dev/null
+++ b/src/view/screens/stacks/PostLikedBy.tsx
@@ -0,0 +1,38 @@
+import React, {useLayoutEffect} from 'react'
+import {TouchableOpacity} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {makeRecordUri} from '../../lib/strings'
+import {Shell} from '../../shell'
+import type {RootTabsScreenProps} from '../../routes/types'
+import {PostLikedBy as PostLikedByComponent} from '../../com/post-thread/PostLikedBy'
+
+export const PostLikedBy = ({
+  navigation,
+  route,
+}: RootTabsScreenProps<'PostLikedBy'>) => {
+  const {name, recordKey} = route.params
+  const uri = makeRecordUri(name, 'blueskyweb.xyz:Posts', recordKey)
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: true,
+      headerTitle: 'Liked By',
+      headerLeft: () => (
+        <TouchableOpacity onPress={() => navigation.goBack()}>
+          <FontAwesomeIcon icon="arrow-left" />
+        </TouchableOpacity>
+      ),
+    })
+  }, [navigation])
+
+  const onNavigateContent = (screen: string, props: Record<string, string>) => {
+    // @ts-ignore it's up to the callers to supply correct params -prf
+    navigation.push(screen, props)
+  }
+
+  return (
+    <Shell>
+      <PostLikedByComponent uri={uri} onNavigateContent={onNavigateContent} />
+    </Shell>
+  )
+}
diff --git a/src/view/screens/stacks/PostRepostedBy.tsx b/src/view/screens/stacks/PostRepostedBy.tsx
new file mode 100644
index 000000000..000c1a7fc
--- /dev/null
+++ b/src/view/screens/stacks/PostRepostedBy.tsx
@@ -0,0 +1,41 @@
+import React, {useLayoutEffect} from 'react'
+import {TouchableOpacity} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {makeRecordUri} from '../../lib/strings'
+import {Shell} from '../../shell'
+import type {RootTabsScreenProps} from '../../routes/types'
+import {PostRepostedBy as PostRepostedByComponent} from '../../com/post-thread/PostRepostedBy'
+
+export const PostRepostedBy = ({
+  navigation,
+  route,
+}: RootTabsScreenProps<'PostRepostedBy'>) => {
+  const {name, recordKey} = route.params
+  const uri = makeRecordUri(name, 'blueskyweb.xyz:Posts', recordKey)
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: true,
+      headerTitle: 'Reposted By',
+      headerLeft: () => (
+        <TouchableOpacity onPress={() => navigation.goBack()}>
+          <FontAwesomeIcon icon="arrow-left" />
+        </TouchableOpacity>
+      ),
+    })
+  }, [navigation])
+
+  const onNavigateContent = (screen: string, props: Record<string, string>) => {
+    // @ts-ignore it's up to the callers to supply correct params -prf
+    navigation.push(screen, props)
+  }
+
+  return (
+    <Shell>
+      <PostRepostedByComponent
+        uri={uri}
+        onNavigateContent={onNavigateContent}
+      />
+    </Shell>
+  )
+}
diff --git a/src/view/screens/stacks/PostThread.tsx b/src/view/screens/stacks/PostThread.tsx
new file mode 100644
index 000000000..485a2e49a
--- /dev/null
+++ b/src/view/screens/stacks/PostThread.tsx
@@ -0,0 +1,38 @@
+import React, {useLayoutEffect} from 'react'
+import {TouchableOpacity} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {makeRecordUri} from '../../lib/strings'
+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 uri = makeRecordUri(name, 'blueskyweb.xyz:Posts', recordKey)
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: true,
+      headerTitle: 'Thread',
+      headerLeft: () => (
+        <TouchableOpacity onPress={() => navigation.goBack()}>
+          <FontAwesomeIcon icon="arrow-left" />
+        </TouchableOpacity>
+      ),
+    })
+  }, [navigation])
+
+  const onNavigateContent = (screen: string, props: Record<string, string>) => {
+    // @ts-ignore it's up to the callers to supply correct params -prf
+    navigation.push(screen, props)
+  }
+
+  return (
+    <Shell>
+      <PostThreadComponent uri={uri} onNavigateContent={onNavigateContent} />
+    </Shell>
+  )
+}
diff --git a/src/view/screens/stacks/Profile.tsx b/src/view/screens/stacks/Profile.tsx
new file mode 100644
index 000000000..ccdaed4a4
--- /dev/null
+++ b/src/view/screens/stacks/Profile.tsx
@@ -0,0 +1,43 @@
+import React, {useState, useEffect} from 'react'
+import {Shell} from '../../shell'
+import type {RootTabsScreenProps} from '../../routes/types'
+import {FeedViewModel} from '../../../state/models/feed-view'
+import {useStores} from '../../../state'
+import {ProfileHeader} from '../../com/profile/ProfileHeader'
+import {Feed} from '../../com/feed/Feed'
+
+export const Profile = ({
+  navigation,
+  route,
+}: RootTabsScreenProps<'Profile'>) => {
+  const store = useStores()
+  const [feedView, setFeedView] = useState<FeedViewModel | undefined>()
+
+  useEffect(() => {
+    if (feedView?.params.author === route.params.name) {
+      console.log('Profile feed view')
+      return // no change needed? or trigger refresh?
+    }
+    console.log('Fetching profile feed view', route.params.name)
+    const newFeedView = new FeedViewModel(store, {author: route.params.name})
+    setFeedView(newFeedView)
+    newFeedView.setup().catch(err => console.error('Failed to fetch feed', err))
+  }, [route.params.name, feedView?.params.author, store])
+
+  const onNavigateContent = (screen: string, props: Record<string, string>) => {
+    // @ts-ignore it's up to the callers to supply correct params -prf
+    navigation.push(screen, props)
+  }
+
+  return (
+    <Shell>
+      <ProfileHeader
+        user={route.params.name}
+        onNavigateContent={onNavigateContent}
+      />
+      {feedView && (
+        <Feed feed={feedView} onNavigateContent={onNavigateContent} />
+      )}
+    </Shell>
+  )
+}