about summary refs log tree commit diff
path: root/src/view/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/screens')
-rw-r--r--src/view/screens/Home.tsx73
-rw-r--r--src/view/screens/Notifications.tsx79
-rw-r--r--src/view/screens/PostLikedBy.tsx25
-rw-r--r--src/view/screens/PostRepostedBy.tsx25
-rw-r--r--src/view/screens/PostThread.tsx27
-rw-r--r--src/view/screens/Profile.tsx48
-rw-r--r--src/view/screens/ProfileFollowers.tsx25
-rw-r--r--src/view/screens/ProfileFollows.tsx25
8 files changed, 108 insertions, 219 deletions
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 1bc300a11..9d0356fbb 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -1,53 +1,31 @@
-import React, {useState, useEffect, useLayoutEffect} from 'react'
-import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import React, {useState, useEffect} from 'react'
+import {View} from 'react-native'
 import {Feed} from '../com/feed/Feed'
 import {FAB} from '../com/util/FloatingActionButton'
 import {useStores} from '../../state'
-import {useLoadEffect} from '../lib/navigation'
-import {AVIS} from '../lib/assets'
+import {FeedViewModel} from '../../state/models/feed-view'
 import {ScreenParams} from '../routes'
 
-export function Home({params}: ScreenParams) {
+export function Home({visible}: ScreenParams) {
   const [hasSetup, setHasSetup] = useState<boolean>(false)
+  const [feedView, setFeedView] = useState<FeedViewModel | undefined>()
   const store = useStores()
-  useLoadEffect(() => {
-    store.nav.setTitle('Home')
-    console.log('Fetching home feed')
-    store.homeFeed.setup().then(() => setHasSetup(true))
-  }, [store.nav, store.homeFeed])
 
-  // TODO
-  // useEffect(() => {
-  //   return navigation.addListener('focus', () => {
-  //     if (hasSetup) {
-  //       console.log('Updating home feed')
-  //       store.homeFeed.update()
-  //     }
-  //   })
-  // }, [navigation, store.homeFeed, hasSetup])
-
-  // TODO
-  // useLayoutEffect(() => {
-  //   navigation.setOptions({
-  //     headerShown: true,
-  //     headerTitle: 'V I B E',
-  //     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])
+  useEffect(() => {
+    if (!visible) {
+      return
+    }
+    if (hasSetup) {
+      console.log('Updating home feed')
+      feedView?.update()
+    } else {
+      store.nav.setTitle('Home')
+      console.log('Fetching home feed')
+      const newFeedView = new FeedViewModel(store, {})
+      setFeedView(newFeedView)
+      newFeedView.setup().then(() => setHasSetup(true))
+    }
+  }, [visible, store])
 
   const onComposePress = () => {
     store.nav.navigate('/compose')
@@ -55,17 +33,8 @@ export function Home({params}: ScreenParams) {
 
   return (
     <View>
-      <Feed feed={store.homeFeed} />
+      {feedView && <Feed feed={feedView} />}
       <FAB icon="pen-nib" onPress={onComposePress} />
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  avi: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    resizeMode: 'cover',
-  },
-})
diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx
index 7ebc8a7ce..60627385f 100644
--- a/src/view/screens/Notifications.tsx
+++ b/src/view/screens/Notifications.tsx
@@ -1,65 +1,32 @@
-import React, {useState, useEffect, useLayoutEffect} from 'react'
-import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import React, {useState, useEffect} from 'react'
+import {View} from 'react-native'
 import {Feed} from '../com/notifications/Feed'
 import {useStores} from '../../state'
-import {AVIS} from '../lib/assets'
+import {NotificationsViewModel} from '../../state/models/notifications-view'
 import {ScreenParams} from '../routes'
-import {useLoadEffect} from '../lib/navigation'
 
-export const Notifications = ({params}: ScreenParams) => {
+export const Notifications = ({visible}: ScreenParams) => {
   const [hasSetup, setHasSetup] = useState<boolean>(false)
+  const [notesView, setNotesView] = useState<
+    NotificationsViewModel | undefined
+  >()
   const store = useStores()
-  useLoadEffect(() => {
-    store.nav.setTitle('Notifications')
-    console.log('Fetching notifications feed')
-    store.notesFeed.setup().then(() => setHasSetup(true))
-  }, [store.notesFeed])
 
-  // TODO
-  // useEffect(() => {
-  //   return navigation.addListener('focus', () => {
-  //     if (hasSetup) {
-  //       console.log('Updating notifications feed')
-  //       store.notesFeed.update()
-  //     }
-  //   })
-  // }, [navigation, store.notesFeed, hasSetup])
+  useEffect(() => {
+    if (!visible) {
+      return
+    }
+    if (hasSetup) {
+      console.log('Updating notifications feed')
+      notesView?.update()
+    } else {
+      store.nav.setTitle('Notifications')
+      console.log('Fetching notifications feed')
+      const newNotesView = new NotificationsViewModel(store, {})
+      setNotesView(newNotesView)
+      newNotesView.setup().then(() => setHasSetup(true))
+    }
+  }, [visible, store])
 
-  // TODO
-  // 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])
-
-  return (
-    <View>
-      <Feed view={store.notesFeed} />
-    </View>
-  )
+  return <View>{notesView && <Feed view={notesView} />}</View>
 }
-
-const styles = StyleSheet.create({
-  avi: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    resizeMode: 'cover',
-  },
-})
diff --git a/src/view/screens/PostLikedBy.tsx b/src/view/screens/PostLikedBy.tsx
index 92fae30ad..540382766 100644
--- a/src/view/screens/PostLikedBy.tsx
+++ b/src/view/screens/PostLikedBy.tsx
@@ -1,26 +1,19 @@
-import React, {useLayoutEffect} from 'react'
-import {TouchableOpacity} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import React, {useEffect} from 'react'
 import {makeRecordUri} from '../lib/strings'
 import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy'
 import {ScreenParams} from '../routes'
+import {useStores} from '../../state'
 
-export const PostLikedBy = ({params}: ScreenParams) => {
+export const PostLikedBy = ({visible, params}: ScreenParams) => {
+  const store = useStores()
   const {name, recordKey} = params
   const uri = makeRecordUri(name, 'blueskyweb.xyz:Posts', recordKey)
 
-  // TODO
-  // useLayoutEffect(() => {
-  //   navigation.setOptions({
-  //     headerShown: true,
-  //     headerTitle: 'Liked By',
-  //     headerLeft: () => (
-  //       <TouchableOpacity onPress={() => navigation.goBack()}>
-  //         <FontAwesomeIcon icon="arrow-left" />
-  //       </TouchableOpacity>
-  //     ),
-  //   })
-  // }, [navigation])
+  useEffect(() => {
+    if (visible) {
+      store.nav.setTitle('Liked by')
+    }
+  }, [store, visible])
 
   return <PostLikedByComponent uri={uri} />
 }
diff --git a/src/view/screens/PostRepostedBy.tsx b/src/view/screens/PostRepostedBy.tsx
index 81014a7c7..60950139d 100644
--- a/src/view/screens/PostRepostedBy.tsx
+++ b/src/view/screens/PostRepostedBy.tsx
@@ -1,26 +1,19 @@
-import React, {useLayoutEffect} from 'react'
-import {TouchableOpacity} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import React, {useEffect} from 'react'
 import {makeRecordUri} from '../lib/strings'
 import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy'
 import {ScreenParams} from '../routes'
+import {useStores} from '../../state'
 
-export const PostRepostedBy = ({params}: ScreenParams) => {
+export const PostRepostedBy = ({visible, params}: ScreenParams) => {
+  const store = useStores()
   const {name, recordKey} = params
   const uri = makeRecordUri(name, 'blueskyweb.xyz:Posts', recordKey)
 
-  // TODO
-  // useLayoutEffect(() => {
-  //   navigation.setOptions({
-  //     headerShown: true,
-  //     headerTitle: 'Reposted By',
-  //     headerLeft: () => (
-  //       <TouchableOpacity onPress={() => navigation.goBack()}>
-  //         <FontAwesomeIcon icon="arrow-left" />
-  //       </TouchableOpacity>
-  //     ),
-  //   })
-  // }, [navigation])
+  useEffect(() => {
+    if (visible) {
+      store.nav.setTitle('Reposted by')
+    }
+  }, [store, visible])
 
   return <PostRepostedByComponent uri={uri} />
 }
diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx
index 1003a40e1..8da40302b 100644
--- a/src/view/screens/PostThread.tsx
+++ b/src/view/screens/PostThread.tsx
@@ -1,32 +1,19 @@
-import React, {useEffect, useLayoutEffect} from 'react'
-import {TouchableOpacity} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import React, {useEffect} from 'react'
 import {makeRecordUri} from '../lib/strings'
 import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
-import {useLoadEffect} from '../lib/navigation'
 
-export const PostThread = ({params}: ScreenParams) => {
+export const PostThread = ({visible, params}: ScreenParams) => {
   const store = useStores()
   const {name, recordKey} = params
   const uri = makeRecordUri(name, 'blueskyweb.xyz:Posts', recordKey)
-  useLoadEffect(() => {
-    store.nav.setTitle(`Post by ${name}`)
-  }, [store.nav, name])
 
-  // TODO
-  // useLayoutEffect(() => {
-  //   navigation.setOptions({
-  //     headerShown: true,
-  //     headerTitle: 'Thread',
-  //     headerLeft: () => (
-  //       <TouchableOpacity onPress={() => navigation.goBack()}>
-  //         <FontAwesomeIcon icon="arrow-left" />
-  //       </TouchableOpacity>
-  //     ),
-  //   })
-  // }, [navigation])
+  useEffect(() => {
+    if (visible) {
+      store.nav.setTitle(`Post by ${name}`)
+    }
+  }, [visible, store.nav, name])
 
   return <PostThreadComponent uri={uri} />
 }
diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx
index 84ff63f5a..236f8f908 100644
--- a/src/view/screens/Profile.tsx
+++ b/src/view/screens/Profile.tsx
@@ -5,39 +5,33 @@ import {useStores} from '../../state'
 import {ProfileHeader} from '../com/profile/ProfileHeader'
 import {Feed} from '../com/feed/Feed'
 import {ScreenParams} from '../routes'
-import {useLoadEffect} from '../lib/navigation'
 
-export const Profile = ({params}: ScreenParams) => {
+export const Profile = ({visible, params}: ScreenParams) => {
   const store = useStores()
-  const [hasSetup, setHasSetup] = useState<string>('')
+  const [hasSetup, setHasSetup] = useState<boolean>(false)
   const [feedView, setFeedView] = useState<FeedViewModel | undefined>()
 
-  useLoadEffect(() => {
+  useEffect(() => {
+    if (!visible) {
+      return
+    }
     const author = params.name
-    if (feedView?.params.author === author) {
-      return // no change needed? or trigger refresh?
+    if (hasSetup) {
+      console.log('Updating profile feed for', author)
+      feedView?.update()
+    } else {
+      console.log('Fetching profile feed for', author)
+      const newFeedView = new FeedViewModel(store, {author})
+      setFeedView(newFeedView)
+      newFeedView
+        .setup()
+        .catch(err => console.error('Failed to fetch feed', err))
+        .then(() => {
+          setHasSetup(true)
+          store.nav.setTitle(author)
+        })
     }
-    console.log('Fetching profile feed', author)
-    const newFeedView = new FeedViewModel(store, {author})
-    setFeedView(newFeedView)
-    newFeedView
-      .setup()
-      .catch(err => console.error('Failed to fetch feed', err))
-      .then(() => {
-        setHasSetup(author)
-        store.nav.setTitle(author)
-      })
-  }, [params.name, feedView?.params.author, store])
-
-  // TODO
-  // useEffect(() => {
-  //   return navigation.addListener('focus', () => {
-  //     if (hasSetup === feedView?.params.author) {
-  //       console.log('Updating profile feed', hasSetup)
-  //       feedView?.update()
-  //     }
-  //   })
-  // }, [navigation, feedView, hasSetup])
+  }, [visible, params.name, store])
 
   return (
     <View style={styles.container}>
diff --git a/src/view/screens/ProfileFollowers.tsx b/src/view/screens/ProfileFollowers.tsx
index c8e752685..aabfb59a4 100644
--- a/src/view/screens/ProfileFollowers.tsx
+++ b/src/view/screens/ProfileFollowers.tsx
@@ -1,24 +1,17 @@
-import React, {useLayoutEffect} from 'react'
-import {TouchableOpacity} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import React, {useEffect} from 'react'
 import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
 import {ScreenParams} from '../routes'
+import {useStores} from '../../state'
 
-export const ProfileFollowers = ({params}: ScreenParams) => {
+export const ProfileFollowers = ({visible, params}: ScreenParams) => {
+  const store = useStores()
   const {name} = params
 
-  // TODO
-  // useLayoutEffect(() => {
-  //   navigation.setOptions({
-  //     headerShown: true,
-  //     headerTitle: 'Followers',
-  //     headerLeft: () => (
-  //       <TouchableOpacity onPress={() => navigation.goBack()}>
-  //         <FontAwesomeIcon icon="arrow-left" />
-  //       </TouchableOpacity>
-  //     ),
-  //   })
-  // }, [navigation])
+  useEffect(() => {
+    if (visible) {
+      store.nav.setTitle('Followers of')
+    }
+  }, [store, visible])
 
   return <ProfileFollowersComponent name={name} />
 }
diff --git a/src/view/screens/ProfileFollows.tsx b/src/view/screens/ProfileFollows.tsx
index 96ce60ddd..d020fc742 100644
--- a/src/view/screens/ProfileFollows.tsx
+++ b/src/view/screens/ProfileFollows.tsx
@@ -1,24 +1,17 @@
-import React, {useLayoutEffect} from 'react'
-import {TouchableOpacity} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import React, {useEffect} from 'react'
 import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
 import {ScreenParams} from '../routes'
+import {useStores} from '../../state'
 
-export const ProfileFollows = ({params}: ScreenParams) => {
+export const ProfileFollows = ({visible, params}: ScreenParams) => {
+  const store = useStores()
   const {name} = params
 
-  // TODO
-  // useLayoutEffect(() => {
-  //   navigation.setOptions({
-  //     headerShown: true,
-  //     headerTitle: 'Following',
-  //     headerLeft: () => (
-  //       <TouchableOpacity onPress={() => navigation.goBack()}>
-  //         <FontAwesomeIcon icon="arrow-left" />
-  //       </TouchableOpacity>
-  //     ),
-  //   })
-  // }, [navigation])
+  useEffect(() => {
+    if (visible) {
+      store.nav.setTitle('Followers of')
+    }
+  }, [store, visible])
 
   return <ProfileFollowsComponent name={name} />
 }
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-12 05:29:39 +0000