acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

using register

Browse Source
This commit is contained in:
João Ferreiro
2022-12-12 16:30:52 +00:00
parent 3aca890da6
commit e28093ec35
60 changed files with 3620 additions and 3452 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -34,6 +34,7 @@
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-appstate-hook": "^1.0.6",
"react-native-bundle-splitter": "^2.2.3",
"react-native-gesture-handler": "^2.5.0",
"react-native-image-crop-picker": "^0.38.1",
"react-native-inappbrowser-reborn": "^3.6.3",
src/view/com/composer/Autocomplete.tsx
+3 -2
View File
@@ -8,13 +8,14 @@ import {
} from 'react-native'
import {useAnimatedValue} from '../../lib/useAnimatedValue'
import {colors} from '../../lib/styles'
import {register} from 'react-native-bundle-splitter'
interface AutocompleteItem {
handle: string
displayName?: string
}
export function Autocomplete({
export const Autocomplete = register(function Autocomplete({
active,
items,
onSelect,
@@ -52,7 +53,7 @@ export function Autocomplete({
))}
</Animated.View>
)
}
})
const styles = StyleSheet.create({
outer: {
src/view/com/composer/ComposePost.tsx
+9 -5
View File
@@ -30,19 +30,21 @@ import {UserLocalPhotosModel} from '../../../state/models/user-local-photos'
import {PhotoCarouselPicker} from './PhotoCarouselPicker'
import {SelectedPhoto} from './SelectedPhoto'
import {IMAGES_ENABLED} from '../../../build-flags'
import {register} from 'react-native-bundle-splitter'
const MAX_TEXT_LENGTH = 256
const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH
export const ComposePost = observer(function ComposePost({
export const ComposePost = register(
observer(function ComposePost({
replyTo,
onPost,
onClose,
}: {
}: {
replyTo?: ComposerOpts['replyTo']
onPost?: ComposerOpts['onPost']
onClose: () => void
}) {
}) {
const store = useStores()
const textInput = useRef<TextInput>(null)
const [isProcessing, setIsProcessing] = useState(false)
@@ -131,7 +133,8 @@ export const ComposePost = observer(function ComposePost({
}
const canPost = text.length <= MAX_TEXT_LENGTH
const progressColor = text.length > DANGER_TEXT_LENGTH ? '#e60000' : undefined
const progressColor =
text.length > DANGER_TEXT_LENGTH ? '#e60000' : undefined
const selectTextInputLayout =
selectedPhotos.length !== 0
@@ -287,7 +290,8 @@ export const ComposePost = observer(function ComposePost({
</SafeAreaView>
</KeyboardAvoidingView>
)
})
}),
)
const atPrefixRegex = /@([a-z0-9\.]*)$/i
function extractTextAutocompletePrefix(text: string) {
src/view/com/composer/PhotoCarouselPicker.tsx
+12 -5
View File
@@ -7,16 +7,18 @@ import {
openCamera,
openCropper,
} from 'react-native-image-crop-picker'
import {register} from 'react-native-bundle-splitter'
export const PhotoCarouselPicker = ({
export const PhotoCarouselPicker = register(
({
selectedPhotos,
setSelectedPhotos,
localPhotos,
}: {
}: {
selectedPhotos: string[]
setSelectedPhotos: React.Dispatch<React.SetStateAction<string[]>>
localPhotos: any
}) => {
}) => {
const handleOpenCamera = useCallback(() => {
openCamera({
mediaType: 'photo',
@@ -92,11 +94,16 @@ export const PhotoCarouselPicker = ({
<TouchableOpacity
style={[styles.galleryButton, styles.photo]}
onPress={handleOpenGallery}>
<FontAwesomeIcon icon="image" style={{color: colors.blue3}} size={24} />
<FontAwesomeIcon
icon="image"
style={{color: colors.blue3}}
size={24}
/>
</TouchableOpacity>
</ScrollView>
)
}
},
)
const styles = StyleSheet.create({
photosContainer: {
src/view/com/composer/Prompt.tsx
+3 -2
View File
@@ -3,8 +3,9 @@ import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {colors} from '../../lib/styles'
import {useStores} from '../../../state'
import {UserAvatar} from '../util/UserAvatar'
import {register} from 'react-native-bundle-splitter'
export function ComposePrompt({
export const ComposePrompt = register(function ComposePrompt({
noAvi = false,
text = "What's up?",
btn = 'Post',
@@ -41,7 +42,7 @@ export function ComposePrompt({
</View>
</TouchableOpacity>
)
}
})
const styles = StyleSheet.create({
container: {
src/view/com/composer/SelectedPhoto.tsx
+7 -4
View File
@@ -2,14 +2,16 @@ import React, {useCallback} from 'react'
import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {colors} from '../../lib/styles'
import {register} from 'react-native-bundle-splitter'
export const SelectedPhoto = ({
export const SelectedPhoto = register(
({
selectedPhotos,
setSelectedPhotos,
}: {
}: {
selectedPhotos: string[]
setSelectedPhotos: React.Dispatch<React.SetStateAction<string[]>>
}) => {
}) => {
const imageStyle =
selectedPhotos.length === 1
? styles.image250
@@ -48,7 +50,8 @@ export const SelectedPhoto = ({
))}
</View>
) : null
}
},
)
const styles = StyleSheet.create({
imageContainer: {
src/view/com/discover/SuggestedFollows.tsx
+10 -3
View File
@@ -22,8 +22,10 @@ import {
SuggestedActor,
} from '../../../state/models/suggested-actors-view'
import {s, colors, gradients} from '../../lib/styles'
import {register} from 'react-native-bundle-splitter'
export const SuggestedFollows = observer(
export const SuggestedFollows = register(
observer(
({
onNoSuggestions,
asLinks,
@@ -43,7 +45,9 @@ export const SuggestedFollows = observer(
console.log('Fetching suggested actors')
view
.setup()
.catch((err: any) => console.error('Failed to fetch suggestions', err))
.catch((err: any) =>
console.error('Failed to fetch suggestions', err),
)
}, [view])
useEffect(() => {
@@ -55,7 +59,9 @@ export const SuggestedFollows = observer(
const onPressTryAgain = () =>
view
.setup()
.catch((err: any) => console.error('Failed to fetch suggestions', err))
.catch((err: any) =>
console.error('Failed to fetch suggestions', err),
)
const onPressFollow = async (item: SuggestedActor) => {
try {
@@ -128,6 +134,7 @@ export const SuggestedFollows = observer(
</View>
)
},
),
)
const User = ({
src/view/com/notifications/Feed.tsx
+7 -4
View File
@@ -6,16 +6,18 @@ import {FeedItem} from './FeedItem'
import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
import {ErrorMessage} from '../util/ErrorMessage'
import {EmptyState} from '../util/EmptyState'
import {register} from 'react-native-bundle-splitter'
const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
export const Feed = observer(function Feed({
export const Feed = register(
observer(function Feed({
view,
onPressTryAgain,
}: {
}: {
view: NotificationsViewModel
onPressTryAgain?: () => void
}) {
}) {
// 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
@@ -69,4 +71,5 @@ export const Feed = observer(function Feed({
)}
</View>
)
})
}),
)
src/view/com/notifications/FeedItem.tsx
+7 -7
View File
@@ -13,14 +13,12 @@ import {ErrorMessage} from '../util/ErrorMessage'
import {Post} from '../post/Post'
import {Link} from '../util/Link'
import {InviteAccepter} from './InviteAccepter'
import {register} from 'react-native-bundle-splitter'
const MAX_AUTHORS = 8
export const FeedItem = observer(function FeedItem({
item,
}: {
item: NotificationsViewItemModel
}) {
export const FeedItem = register(
observer(function FeedItem({item}: {item: NotificationsViewItemModel}) {
const itemHref = useMemo(() => {
if (item.isUpvote || item.isRepost || item.isTrend) {
const urip = new AtUri(item.subjectUri)
@@ -166,7 +164,8 @@ export const FeedItem = observer(function FeedItem({
<>
<Text style={[styles.metaItem, s.f15]}>and</Text>
<Text style={[styles.metaItem, s.f15, s.bold]}>
{authors.length - 1} {pluralize(authors.length - 1, 'other')}
{authors.length - 1}{' '}
{pluralize(authors.length - 1, 'other')}
</Text>
</>
) : undefined}
@@ -191,7 +190,8 @@ export const FeedItem = observer(function FeedItem({
)}
</Link>
)
})
}),
)
function AdditionalPostText({
additionalPost,
src/view/com/notifications/InviteAccepter.tsx
+7 -2
View File
@@ -9,8 +9,13 @@ import {useStores} from '../../../state'
import {ProfileCard} from '../profile/ProfileCard'
import * as Toast from '../util/Toast'
import {s, colors, gradients} from '../../lib/styles'
import {register} from 'react-native-bundle-splitter'
export function InviteAccepter({item}: {item: NotificationsViewItemModel}) {
export const InviteAccepter = register(function InviteAccepter({
item,
}: {
item: NotificationsViewItemModel
}) {
const store = useStores()
const [confirmationUri, setConfirmationUri] = useState<string>('')
const isMember =
@@ -70,7 +75,7 @@ export function InviteAccepter({item}: {item: NotificationsViewItemModel}) {
)}
</View>
)
}
})
const styles = StyleSheet.create({
container: {
src/view/com/onboard/FeatureExplainer.tsx
+3 -2
View File
@@ -16,6 +16,7 @@ import {useStores} from '../../../state'
import {s} from '../../lib/styles'
import {SCENE_EXPLAINER, TABS_EXPLAINER} from '../../lib/assets'
import {TABS_ENABLED} from '../../../build-flags'
import {register} from 'react-native-bundle-splitter'
const Intro = () => (
<View style={styles.explainer}>
@@ -79,7 +80,7 @@ const SCENE_MAP = {
}
const renderScene = SceneMap(SCENE_MAP)
export const FeatureExplainer = () => {
export const FeatureExplainer = register(() => {
const layout = useWindowDimensions()
const store = useStores()
const [index, setIndex] = useState(0)
@@ -153,7 +154,7 @@ export const FeatureExplainer = () => {
</View>
</SafeAreaView>
)
}
})
const styles = StyleSheet.create({
container: {
src/view/com/onboard/Follows.tsx
+5 -2
View File
@@ -10,8 +10,10 @@ import {observer} from 'mobx-react-lite'
import {SuggestedFollows} from '../discover/SuggestedFollows'
import {useStores} from '../../../state'
import {s} from '../../lib/styles'
import {register} from 'react-native-bundle-splitter'
export const Follows = observer(() => {
export const Follows = register(
observer(() => {
const store = useStores()
const onNoSuggestions = () => {
@@ -35,7 +37,8 @@ export const Follows = observer(() => {
</View>
</SafeAreaView>
)
})
}),
)
const styles = StyleSheet.create({
container: {
src/view/com/post-thread/PostRepostedBy.tsx
+5 -6
View File
@@ -10,12 +10,10 @@ import {ErrorMessage} from '../util/ErrorMessage'
import {Link} from '../util/Link'
import {useStores} from '../../../state'
import {s, colors} from '../../lib/styles'
import {register} from 'react-native-bundle-splitter'
export const PostRepostedBy = observer(function PostRepostedBy({
uri,
}: {
uri: string
}) {
export const PostRepostedBy = register(
observer(function PostRepostedBy({uri}: {uri: string}) {
const store = useStores()
const [view, setView] = useState<RepostedByViewModel | undefined>()
@@ -79,7 +77,8 @@ export const PostRepostedBy = observer(function PostRepostedBy({
/>
</View>
)
})
}),
)
const RepostedByItem = ({item}: {item: RepostedByViewItemModel}) => {
return (
src/view/com/post-thread/PostThread.tsx
+7 -4
View File
@@ -8,14 +8,16 @@ import {
import {useStores} from '../../../state'
import {PostThreadItem} from './PostThreadItem'
import {ErrorMessage} from '../util/ErrorMessage'
import {register} from 'react-native-bundle-splitter'
export const PostThread = observer(function PostThread({
export const PostThread = register(
observer(function PostThread({
uri,
view,
}: {
}: {
uri: string
view: PostThreadViewModel
}) {
}) {
const ref = useRef<FlatList>(null)
const posts = view.thread ? Array.from(flattenThread(view.thread)) : []
const onRefresh = () => {
@@ -86,7 +88,8 @@ export const PostThread = observer(function PostThread({
contentContainerStyle={{paddingBottom: 200}}
/>
)
})
}),
)
function* flattenThread(
post: PostThreadViewPostModel,
src/view/com/post-thread/PostThreadItem.tsx
+15 -6
View File
@@ -18,17 +18,19 @@ import {PostMeta} from '../util/PostMeta'
import {PostEmbeds} from '../util/PostEmbeds'
import {PostCtrls} from '../util/PostCtrls'
import {ComposePrompt} from '../composer/Prompt'
import {register} from 'react-native-bundle-splitter'
const PARENT_REPLY_LINE_LENGTH = 8
const REPLYING_TO_LINE_LENGTH = 6
export const PostThreadItem = observer(function PostThreadItem({
export const PostThreadItem = register(
observer(function PostThreadItem({
item,
onPostReply,
}: {
}: {
item: PostThreadViewPostModel
onPostReply: () => void
}) {
}) {
const store = useStores()
const [deleted, setDeleted] = useState(false)
const record = item.record as unknown as PostType.Record
@@ -160,7 +162,10 @@ export const PostThreadItem = observer(function PostThreadItem({
</View>
<View style={[s.pl10, s.pr10, s.pb10]}>
<View
style={[styles.postTextContainer, styles.postTextLargeContainer]}>
style={[
styles.postTextContainer,
styles.postTextLargeContainer,
]}>
<RichText
text={record.text}
entities={record.entities}
@@ -277,7 +282,10 @@ export const PostThreadItem = observer(function PostThreadItem({
style={[styles.postText]}
/>
</View>
<PostEmbeds entities={record.entities} style={{marginBottom: 10}} />
<PostEmbeds
entities={record.entities}
style={{marginBottom: 10}}
/>
<PostCtrls
replyCount={item.replyCount}
repostCount={item.repostCount}
@@ -293,7 +301,8 @@ export const PostThreadItem = observer(function PostThreadItem({
</Link>
)
}
})
}),
)
const styles = StyleSheet.create({
outer: {
src/view/com/post-thread/PostVotedBy.tsx
+10 -5
View File
@@ -10,14 +10,16 @@ import {ErrorMessage} from '../util/ErrorMessage'
import {UserAvatar} from '../util/UserAvatar'
import {useStores} from '../../../state'
import {s, colors} from '../../lib/styles'
import {register} from 'react-native-bundle-splitter'
export const PostVotedBy = observer(function PostVotedBy({
export const PostVotedBy = register(
observer(function PostVotedBy({
uri,
direction,
}: {
}: {
uri: string
direction: 'up' | 'down'
}) {
}) {
const store = useStores()
const [view, setView] = useState<VotesViewModel | undefined>()
@@ -29,7 +31,9 @@ export const PostVotedBy = observer(function PostVotedBy({
console.log('Fetching voted by', uri)
const newView = new VotesViewModel(store, {uri, direction})
setView(newView)
newView.setup().catch(err => console.error('Failed to fetch voted by', err))
newView
.setup()
.catch(err => console.error('Failed to fetch voted by', err))
}, [uri, view?.params.uri, store])
const onRefresh = () => {
@@ -79,7 +83,8 @@ export const PostVotedBy = observer(function PostVotedBy({
/>
</View>
)
})
}),
)
const LikedByItem = ({item}: {item: VotesViewItemModel}) => {
return (
src/view/com/post/Post.tsx
+12 -5
View File
@@ -22,16 +22,18 @@ import * as Toast from '../util/Toast'
import {UserAvatar} from '../util/UserAvatar'
import {useStores} from '../../../state'
import {s, colors} from '../../lib/styles'
import {register} from 'react-native-bundle-splitter'
export const Post = observer(function Post({
export const Post = register(
observer(function Post({
uri,
initView,
style,
}: {
}: {
uri: string
initView?: PostThreadViewModel
style?: StyleProp<ViewStyle>
}) {
}) {
const store = useStores()
const [view, setView] = useState<PostThreadViewModel | undefined>(initView)
const [deleted, setDeleted] = useState(false)
@@ -156,7 +158,11 @@ export const Post = observer(function Post({
/>
{replyHref !== '' && (
<View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
<FontAwesomeIcon icon="reply" size={9} style={[s.gray4, s.mr5]} />
<FontAwesomeIcon
icon="reply"
size={9}
style={[s.gray4, s.mr5]}
/>
<Text style={[s.gray4, s.f12, s.mr2]}>Reply to</Text>
<Link href={replyHref} title="Parent post">
<UserInfoText
@@ -188,7 +194,8 @@ export const Post = observer(function Post({
</View>
</Link>
)
})
}),
)
const styles = StyleSheet.create({
outer: {
src/view/com/post/PostText.tsx
+5 -8
View File
@@ -5,14 +5,10 @@ import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
import {ErrorMessage} from '../util/ErrorMessage'
import {PostModel} from '../../../state/models/post'
import {useStores} from '../../../state'
import {register} from 'react-native-bundle-splitter'
export const PostText = observer(function PostText({
uri,
style,
}: {
uri: string
style?: StyleProp
}) {
export const PostText = register(
observer(function PostText({uri, style}: {uri: string; style?: StyleProp}) {
const store = useStores()
const [model, setModel] = useState<PostModel | undefined>()
@@ -54,4 +50,5 @@ export const PostText = observer(function PostText({
<Text style={style}>{model.text}</Text>
</View>
)
})
}),
)
src/view/com/posts/Feed.tsx
+7 -4
View File
@@ -7,23 +7,25 @@ import {ErrorMessage} from '../util/ErrorMessage'
import {FeedModel} from '../../../state/models/feed-view'
import {FeedItem} from './FeedItem'
import {ComposePrompt} from '../composer/Prompt'
import {register} from 'react-native-bundle-splitter'
const COMPOSE_PROMPT_ITEM = {_reactKey: '__prompt__'}
const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
export const Feed = observer(function Feed({
export const Feed = register(
observer(function Feed({
feed,
style,
scrollElRef,
onPressCompose,
onPressTryAgain,
}: {
}: {
feed: FeedModel
style?: StyleProp<ViewStyle>
scrollElRef?: MutableRefObject<FlatList<any> | null>
onPressCompose: () => void
onPressTryAgain?: () => void
}) {
}) {
// 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
@@ -83,4 +85,5 @@ export const Feed = observer(function Feed({
)}
</View>
)
})
}),
)
src/view/com/posts/FeedItem.tsx
+15 -10
View File
@@ -16,15 +16,13 @@ import * as Toast from '../util/Toast'
import {UserAvatar} from '../util/UserAvatar'
import {s, colors} from '../../lib/styles'
import {useStores} from '../../../state'
import {register} from 'react-native-bundle-splitter'
const TOP_REPLY_LINE_LENGTH = 12
const REPLYING_TO_LINE_LENGTH = 8
export const FeedItem = observer(function FeedItem({
item,
}: {
item: FeedItemModel
}) {
export const FeedItem = register(
observer(function FeedItem({item}: {item: FeedItemModel}) {
const store = useStores()
const [deleted, setDeleted] = useState(false)
const record = item.record as unknown as PostType.Record
@@ -35,12 +33,16 @@ export const FeedItem = observer(function FeedItem({
const itemTitle = `Post by ${item.author.handle}`
const authorHref = `/profile/${item.author.handle}`
const replyAuthorDid = useMemo(() => {
if (!record.reply) return ''
if (!record.reply) {
return ''
}
const urip = new AtUri(record.reply.parent?.uri || record.reply.root.uri)
return urip.hostname
}, [record.reply])
const replyHref = useMemo(() => {
if (!record.reply) return ''
if (!record.reply) {
return ''
}
const urip = new AtUri(record.reply.parent?.uri || record.reply.root.uri)
return `/profile/${urip.hostname}/post/${urip.rkey}`
}, [record.reply])
@@ -113,7 +115,8 @@ export const FeedItem = observer(function FeedItem({
title={item.repostedBy.displayName || item.repostedBy.handle}>
<FontAwesomeIcon icon="retweet" style={styles.includeReasonIcon} />
<Text style={[s.gray4, s.bold, s.f13]}>
Reposted by {item.repostedBy.displayName || item.repostedBy.handle}
Reposted by{' '}
{item.repostedBy.displayName || item.repostedBy.handle}
</Text>
</Link>
)}
@@ -127,7 +130,8 @@ export const FeedItem = observer(function FeedItem({
style={styles.includeReasonIcon}
/>
<Text style={[s.gray4, s.bold, s.f13]}>
Trending with {item.trendedBy.displayName || item.trendedBy.handle}
Trending with{' '}
{item.trendedBy.displayName || item.trendedBy.handle}
</Text>
</Link>
)}
@@ -213,7 +217,8 @@ export const FeedItem = observer(function FeedItem({
</View>
</Link>
)
})
}),
)
const styles = StyleSheet.create({
outer: {
src/view/com/profile/ProfileCard.tsx
+3 -2
View File
@@ -3,8 +3,9 @@ import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {Link} from '../util/Link'
import {UserAvatar} from '../util/UserAvatar'
import {s, colors} from '../../lib/styles'
import {register} from 'react-native-bundle-splitter'
export function ProfileCard({
export const ProfileCard = register(function ProfileCard({
did,
handle,
displayName,
@@ -48,7 +49,7 @@ export function ProfileCard({
</View>
</Link>
)
}
})
const styles = StyleSheet.create({
outer: {
src/view/com/profile/ProfileFollowers.tsx
+5 -6
View File
@@ -10,12 +10,10 @@ import {ErrorMessage} from '../util/ErrorMessage'
import {UserAvatar} from '../util/UserAvatar'
import {useStores} from '../../../state'
import {s, colors} from '../../lib/styles'
import {register} from 'react-native-bundle-splitter'
export const ProfileFollowers = observer(function ProfileFollowers({
name,
}: {
name: string
}) {
export const ProfileFollowers = register(
observer(function ProfileFollowers({name}: {name: string}) {
const store = useStores()
const [view, setView] = useState<UserFollowersViewModel | undefined>()
@@ -77,7 +75,8 @@ export const ProfileFollowers = observer(function ProfileFollowers({
/>
</View>
)
})
}),
)
const User = ({item}: {item: FollowerItem}) => {
return (
src/view/com/profile/ProfileFollows.tsx
+5 -6
View File
@@ -10,12 +10,10 @@ import {Link} from '../util/Link'
import {ErrorMessage} from '../util/ErrorMessage'
import {UserAvatar} from '../util/UserAvatar'
import {s, colors} from '../../lib/styles'
import {register} from 'react-native-bundle-splitter'
export const ProfileFollows = observer(function ProfileFollows({
name,
}: {
name: string
}) {
export const ProfileFollows = register(
observer(function ProfileFollows({name}: {name: string}) {
const store = useStores()
const [view, setView] = useState<UserFollowsViewModel | undefined>()
@@ -77,7 +75,8 @@ export const ProfileFollows = observer(function ProfileFollows({
/>
</View>
)
})
}),
)
const User = ({item}: {item: FollowItem}) => {
return (
src/view/com/profile/ProfileHeader.tsx
+14 -8
View File
@@ -21,14 +21,16 @@ import {RichText} from '../util/RichText'
import {UserAvatar} from '../util/UserAvatar'
import {UserBanner} from '../util/UserBanner'
import {UserInfoText} from '../util/UserInfoText'
import {register} from 'react-native-bundle-splitter'
export const ProfileHeader = observer(function ProfileHeader({
export const ProfileHeader = register(
observer(function ProfileHeader({
view,
onRefreshAll,
}: {
}: {
view: ProfileViewModel
onRefreshAll: () => void
}) {
}) {
const store = useStores()
const isMember = useMemo(
() => view.isScene && view.myState.member,
@@ -39,7 +41,7 @@ export const ProfileHeader = observer(function ProfileHeader({
store.nav.tab.goBack()
}
const onPressSearch = () => {
store.nav.navigate(`/search`)
store.nav.navigate('/search')
}
const onPressToggleFollow = () => {
view?.toggleFollowing().then(
@@ -72,7 +74,7 @@ export const ProfileHeader = observer(function ProfileHeader({
store.shell.openModal(
new ConfirmModel(
'Leave this scene?',
`You'll be able to come back unless your invite is revoked.`,
"You'll be able to come back unless your invite is revoked.",
onPressConfirmLeaveScene,
),
)
@@ -83,7 +85,7 @@ export const ProfileHeader = observer(function ProfileHeader({
did: store.me.did || '',
rkey: new AtUri(view.myState.member).rkey,
})
Toast.show(`Scene left`)
Toast.show('Scene left')
}
onRefreshAll()
}
@@ -266,7 +268,10 @@ export const ProfileHeader = observer(function ProfileHeader({
) : undefined}
{view.isScene && view.creator ? (
<View style={styles.relationshipsLine}>
<FontAwesomeIcon icon={['far', 'user']} style={[s.gray5, s.mr5]} />
<FontAwesomeIcon
icon={['far', 'user']}
style={[s.gray5, s.mr5]}
/>
<Text style={[s.mr2, s.gray5, s.f15]}>Created by</Text>
<UserInfoText
style={[s.blue3, s.f15]}
@@ -306,7 +311,8 @@ export const ProfileHeader = observer(function ProfileHeader({
) : undefined}
</View>
)
})
}),
)
const styles = StyleSheet.create({
outer: {
src/view/com/profile/ProfileMembers.tsx
+8 -7
View File
@@ -5,12 +5,10 @@ import {MembersViewModel, MemberItem} from '../../../state/models/members-view'
import {ProfileCard} from './ProfileCard'
import {ErrorMessage} from '../util/ErrorMessage'
import {useStores} from '../../../state'
import {register} from 'react-native-bundle-splitter'
export const ProfileMembers = observer(function ProfileMembers({
name,
}: {
name: string
}) {
export const ProfileMembers = register(
observer(function ProfileMembers({name}: {name: string}) {
const store = useStores()
const [view, setView] = useState<MembersViewModel | undefined>()
@@ -22,7 +20,9 @@ export const ProfileMembers = observer(function ProfileMembers({
console.log('Fetching members', name)
const newView = new MembersViewModel(store, {actor: name})
setView(newView)
newView.setup().catch(err => console.error('Failed to fetch members', err))
newView
.setup()
.catch(err => console.error('Failed to fetch members', err))
}, [name, view?.params.actor, store])
const onRefresh = () => {
@@ -77,4 +77,5 @@ export const ProfileMembers = observer(function ProfileMembers({
/>
</View>
)
})
}),
)
src/view/com/util/DropdownBtn.tsx
+7 -4
View File
@@ -17,6 +17,7 @@ import {toShareUrl} from '../../../lib/strings'
import {useStores} from '../../../state'
import {ConfirmModel} from '../../../state/models/shell-ui'
import {TABS_ENABLED} from '../../../build-flags'
import {register} from 'react-native-bundle-splitter'
const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
@@ -26,17 +27,18 @@ export interface DropdownItem {
onPress: () => void
}
export function DropdownBtn({
export const DropdownBtn = register(
({
style,
items,
menuWidth,
children,
}: {
}: {
style?: StyleProp<ViewStyle>
items: DropdownItem[]
menuWidth?: number
children?: React.ReactNode
}) {
}) => {
const ref = useRef<TouchableOpacity>(null)
const onPress = () => {
@@ -71,7 +73,8 @@ export function DropdownBtn({
{children}
</TouchableOpacity>
)
}
},
)
export function PostDropdownBtn({
style,
src/view/com/util/EmptyState.tsx
+6 -4
View File
@@ -5,15 +5,16 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {UserGroupIcon} from '../../lib/icons'
import {colors} from '../../lib/styles'
export function EmptyState({
export const EmptyState = register(
({
icon,
message,
style,
}: {
}: {
icon: IconProp | 'user-group'
message: string
style?: StyleProp<ViewStyle>
}) {
}) => {
return (
<View style={[styles.container, style]}>
<View style={styles.iconContainer}>
@@ -26,7 +27,8 @@ export function EmptyState({
<Text style={styles.text}>{message}</Text>
</View>
)
}
},
)
const styles = StyleSheet.create({
container: {
src/view/com/util/ErrorMessage.tsx
+9 -5
View File
@@ -10,23 +10,26 @@ import {
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import LinearGradient from 'react-native-linear-gradient'
import {colors, gradients} from '../../lib/styles'
import {register} from 'react-native-bundle-splitter'
export function ErrorMessage({
export const ErrorMessage = register(
({
message,
numberOfLines,
dark,
style,
onPressTryAgain,
}: {
}: {
message: string
numberOfLines?: number
dark?: boolean
style?: StyleProp<ViewStyle>
onPressTryAgain?: () => void
}) {
}) => {
const inner = (
<>
<View style={[styles.errorIcon, dark ? styles.darkErrorIcon : undefined]}>
<View
style={[styles.errorIcon, dark ? styles.darkErrorIcon : undefined]}>
<FontAwesomeIcon
icon="exclamation"
style={{color: dark ? colors.red3 : colors.white}}
@@ -61,7 +64,8 @@ export function ErrorMessage({
)
}
return <View style={[styles.outer, style]}>{inner}</View>
}
},
)
const styles = StyleSheet.create({
outer: {
src/view/com/util/ErrorScreen.tsx
+7 -4
View File
@@ -2,18 +2,20 @@ import React from 'react'
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {colors} from '../../lib/styles'
import {register} from 'react-native-bundle-splitter'
export function ErrorScreen({
export const ErrorScreen = register(
({
title,
message,
details,
onPressTryAgain,
}: {
}: {
title: string
message: string
details?: string
onPressTryAgain?: () => void
}) {
}) => {
return (
<View style={styles.outer}>
<View style={styles.errorIconContainer}>
@@ -42,7 +44,8 @@ export function ErrorScreen({
)}
</View>
)
}
},
)
const styles = StyleSheet.create({
outer: {
src/view/com/util/Link.tsx
+7 -4
View File
@@ -10,18 +10,20 @@ import {
} from 'react-native'
import {useStores, RootStoreModel} from '../../../state'
import {convertBskyAppUrlIfNeeded} from '../../../lib/strings'
import {register} from 'react-native-bundle-splitter'
export const Link = observer(function Link({
export const Link = register(
observer(function Link({
style,
href,
title,
children,
}: {
}: {
style?: StyleProp<ViewStyle>
href: string
title?: string
children?: React.ReactNode
}) {
}) {
const store = useStores()
const onPress = () => {
handleLink(store, href, false)
@@ -38,7 +40,8 @@ export const Link = observer(function Link({
{children ? children : <Text>{title || 'link'}</Text>}
</TouchableOpacity>
)
})
}),
)
export const TextLink = observer(function Link({
style,
src/view/com/util/LoadingPlaceholder.tsx
+7 -5
View File
@@ -4,15 +4,16 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {UpIcon} from '../../lib/icons'
import {s, colors} from '../../lib/styles'
export function LoadingPlaceholder({
export const LoadingPlaceholder = register(
({
width,
height,
style,
}: {
}: {
width: string | number
height: string | number
style?: StyleProp<ViewStyle>
}) {
}) => {
return (
<View
style={[
@@ -34,7 +35,8 @@ export function LoadingPlaceholder({
/>
</View>
)
}
},
)
export function PostLoadingPlaceholder({
style,
@@ -63,7 +65,7 @@ export function PostLoadingPlaceholder({
<View style={s.flex1}>
<UpIcon style={s.gray3} size={17} strokeWidth={1.7} />
</View>
<View style={s.flex1}></View>
<View style={s.flex1} />
</View>
</View>
</View>
src/view/com/util/Picker.tsx
+5 -3
View File
@@ -33,7 +33,8 @@ interface PickerOpts {
const MENU_WIDTH = 200
export function Picker({
export const Picker = register(
({
style,
labelStyle,
iconStyle,
@@ -41,7 +42,7 @@ export function Picker({
value,
onChange,
enabled,
}: PickerOpts) {
}: PickerOpts) => {
const ref = useRef<View>(null)
const valueLabel = items.find(item => item.value === value)?.label || value
const onPress = () => {
@@ -71,7 +72,8 @@ export function Picker({
</View>
</TouchableWithoutFeedback>
)
}
},
)
function createDropdownMenu(
x: number,
src/view/com/util/PostCtrls.tsx
+3 -2
View File
@@ -4,6 +4,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {UpIcon, UpIconSolid} from '../../lib/icons'
import {s, colors} from '../../lib/styles'
import {useAnimatedValue} from '../../lib/useAnimatedValue'
import {register} from 'react-native-bundle-splitter'
interface PostCtrlsOpts {
big?: boolean
@@ -21,7 +22,7 @@ const redgray = '#7A6161'
const sRedgray = {color: redgray}
const HITSLOP = {top: 10, left: 10, bottom: 10, right: 10}
export function PostCtrls(opts: PostCtrlsOpts) {
export const PostCtrls = register((opts: PostCtrlsOpts) => {
const interp1 = useAnimatedValue(0)
const interp2 = useAnimatedValue(0)
@@ -168,7 +169,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
<View style={s.flex1}></View>
</View>
)
}
})
const styles = StyleSheet.create({
ctrls: {
src/view/com/util/PostEmbeds.tsx
+7 -9
View File
@@ -12,19 +12,16 @@ import {Link} from '../util/Link'
import {LinkMeta, getLikelyType, LikelyType} from '../../../lib/link-meta'
import {colors} from '../../lib/styles'
import {useStores} from '../../../state'
import {register} from 'react-native-bundle-splitter'
export function PostEmbeds({
entities,
style,
}: {
entities?: Entity[]
style?: StyleProp<ViewStyle>
}) {
export const PostEmbeds = register(
({entities, style}: {entities?: Entity[]; style?: StyleProp<ViewStyle>}) => {
const store = useStores()
const [linkMeta, setLinkMeta] = useState<LinkMeta | undefined>(undefined)
const link = entities?.find(
ent =>
ent.type === 'link' && getLikelyType(ent.value || '') === LikelyType.HTML,
ent.type === 'link' &&
getLikelyType(ent.value || '') === LikelyType.HTML,
)
useEffect(() => {
@@ -65,7 +62,8 @@ export function PostEmbeds({
)}
</Link>
)
}
},
)
const styles = StyleSheet.create({
outer: {
src/view/com/util/PostMeta.tsx
+3 -2
View File
@@ -5,6 +5,7 @@ import {Link} from '../util/Link'
import {PostDropdownBtn} from '../util/DropdownBtn'
import {s} from '../../lib/styles'
import {ago} from '../../../lib/strings'
import {register} from 'react-native-bundle-splitter'
interface PostMetaOpts {
itemHref: string
@@ -18,7 +19,7 @@ interface PostMetaOpts {
onDeletePost: () => void
}
export function PostMeta(opts: PostMetaOpts) {
export const PostMeta = register((opts: PostMetaOpts) => {
return (
<View style={styles.meta}>
<Link
@@ -47,7 +48,7 @@ export function PostMeta(opts: PostMetaOpts) {
</PostDropdownBtn>
</View>
)
}
})
const styles = StyleSheet.create({
meta: {
src/view/com/util/RichText.tsx
+12 -6
View File
@@ -3,6 +3,7 @@ import {Text, TextStyle, StyleProp} from 'react-native'
import {TextLink} from './Link'
import {s} from '../../lib/styles'
import {toShortUrl} from '../../../lib/strings'
import {register} from 'react-native-bundle-splitter'
type TextSlice = {start: number; end: number}
type Entity = {
@@ -11,17 +12,18 @@ type Entity = {
value: string
}
export function RichText({
export const RichText = register(
({
text,
entities,
style,
numberOfLines,
}: {
}: {
text: string
entities?: Entity[]
style?: StyleProp<TextStyle>
numberOfLines?: number
}) {
}) => {
if (!entities?.length) {
if (/^\p{Extended_Pictographic}+$/u.test(text) && text.length <= 5) {
style = {
@@ -32,8 +34,11 @@ export function RichText({
}
return <Text style={style}>{text}</Text>
}
if (!style) style = []
else if (!Array.isArray(style)) style = [style]
if (!style) {
style = []
} else if (!Array.isArray(style)) {
style = [style]
}
entities.sort(sortByIndex)
const segments = Array.from(toSegments(text, entities))
const els = []
@@ -69,7 +74,8 @@ export function RichText({
{els}
</Text>
)
}
},
)
function sortByIndex(a: Entity, b: Entity) {
return a.index.start - b.index.start
src/view/com/util/Selector.tsx
+9 -5
View File
@@ -7,23 +7,25 @@ import {
View,
} from 'react-native'
import {colors} from '../../lib/styles'
import {register} from 'react-native-bundle-splitter'
interface Layout {
x: number
width: number
}
export function Selector({
export const Selector = register(
({
selectedIndex,
items,
panX,
onSelect,
}: {
}: {
selectedIndex: number
items: string[]
panX: Animated.Value
onSelect?: (index: number) => void
}) {
}) => {
const [itemLayouts, setItemLayouts] = useState<undefined | Layout[]>(
undefined,
)
@@ -91,7 +93,8 @@ export function Selector({
return (
<TouchableWithoutFeedback key={i} onPress={() => onPressItem(i)}>
<View style={styles.item} ref={itemRefs[i]}>
<Text style={selected ? styles.labelSelected : styles.itemLabel}>
<Text
style={selected ? styles.labelSelected : styles.itemLabel}>
{item}
</Text>
</View>
@@ -100,7 +103,8 @@ export function Selector({
})}
</View>
)
}
},
)
const styles = StyleSheet.create({
outer: {
src/view/com/util/UserAvatar.tsx
+7 -4
View File
@@ -10,20 +10,22 @@ import {
} from 'react-native-image-crop-picker'
import {getGradient} from '../../lib/asset-gen'
import {colors} from '../../lib/styles'
import {register} from 'react-native-bundle-splitter'
export function UserAvatar({
export const UserAvatar = register(
({
size,
handle,
avatar,
displayName,
onSelectNewAvatar,
}: {
}: {
size: number
handle: string
displayName: string | undefined
avatar?: string | null
onSelectNewAvatar?: (img: PickedImage) => void
}) {
}) => {
const initials = getInitials(displayName || handle)
const gradient = getGradient(handle)
@@ -113,7 +115,8 @@ export function UserAvatar({
) : (
renderSvg(size, initials)
)
}
},
)
function getInitials(str: string): string {
const tokens = str
src/view/com/util/UserBanner.tsx
+7 -4
View File
@@ -10,16 +10,18 @@ import {
openPicker,
} from 'react-native-image-crop-picker'
import {IMAGES_ENABLED} from '../../../build-flags'
import {register} from 'react-native-bundle-splitter'
export function UserBanner({
export const UserBanner = register(
({
handle,
userBanner,
setUserBanner,
}: {
}: {
handle: string
userBanner?: string | null
setUserBanner?: React.Dispatch<React.SetStateAction<string | null>>
}) {
}) => {
const gradient = getGradient(handle)
const handleEditBanner = useCallback(() => {
@@ -103,7 +105,8 @@ export function UserBanner({
) : (
renderSvg()
)
}
},
)
const styles = StyleSheet.create({
editButtonContainer: {
src/view/com/util/UserInfoText.tsx
+13 -6
View File
@@ -4,8 +4,10 @@ import {StyleProp, Text, TextStyle} from 'react-native'
import {Link} from './Link'
import {LoadingPlaceholder} from './LoadingPlaceholder'
import {useStores} from '../../../state'
import {register} from 'react-native-bundle-splitter'
export function UserInfoText({
export const UserInfoText = register(
({
did,
attr,
loading,
@@ -13,7 +15,7 @@ export function UserInfoText({
prefix,
style,
asLink,
}: {
}: {
did: string
attr?: keyof GetProfile.OutputSchema
loading?: string
@@ -21,7 +23,7 @@ export function UserInfoText({
prefix?: string
style?: StyleProp<TextStyle>
asLink?: boolean
}) {
}) => {
attr = attr || 'handle'
loading = loading || '...'
failed = failed || 'user'
@@ -36,11 +38,15 @@ export function UserInfoText({
let aborted = false
store.profiles.getProfile(did).then(
v => {
if (aborted) return
if (aborted) {
return
}
setProfile(v.data)
},
_err => {
if (aborted) return
if (aborted) {
return
}
setFailed(true)
},
)
@@ -76,4 +82,5 @@ export function UserInfoText({
}
return inner
}
},
)
src/view/com/util/ViewHeader.tsx
+10 -6
View File
@@ -1,5 +1,4 @@
import React from 'react'
import {observer} from 'mobx-react-lite'
import {
ActivityIndicator,
StyleSheet,
@@ -11,19 +10,22 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {s, colors} from '../../lib/styles'
import {MagnifyingGlassIcon} from '../../lib/icons'
import {useStores} from '../../../state'
import {register} from 'react-native-bundle-splitter'
const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
export const ViewHeader = observer(function ViewHeader({
export const ViewHeader = register(
observer(
({
title,
subtitle,
onPost,
}: {
}: {
title: string
subtitle?: string
onPost?: () => void
}) {
}) => {
const store = useStores()
const onPressBack = () => {
store.nav.tab.goBack()
@@ -35,7 +37,7 @@ export const ViewHeader = observer(function ViewHeader({
store.shell.openComposer({onPost})
}
const onPressSearch = () => {
store.nav.navigate(`/search`)
store.nav.navigate('/search')
}
const onPressReconnect = () => {
store.session.connect().catch(e => {
@@ -120,7 +122,9 @@ export const ViewHeader = observer(function ViewHeader({
) : undefined}
</>
)
})
},
),
)
const styles = StyleSheet.create({
header: {
src/view/com/util/ViewSelector.tsx
+7 -4
View File
@@ -4,12 +4,14 @@ import {Selector} from './Selector'
import {HorzSwipe} from './gestures/HorzSwipe'
import {useAnimatedValue} from '../../lib/useAnimatedValue'
import {useStores} from '../../../state'
import {register} from 'react-native-bundle-splitter'
const HEADER_ITEM = {_reactKey: '__header__'}
const SELECTOR_ITEM = {_reactKey: '__selector__'}
const STICKY_HEADER_INDICES = [1]
export function ViewSelector({
export const ViewSelector = register(
({
sections,
items,
refreshing,
@@ -19,7 +21,7 @@ export function ViewSelector({
onSelectView,
onRefresh,
onEndReached,
}: {
}: {
sections: string[]
items: any[]
refreshing?: boolean
@@ -29,7 +31,7 @@ export function ViewSelector({
onSelectView?: (viewIndex: number) => void
onRefresh?: () => void
onEndReached?: (info: {distanceFromEnd: number}) => void
}) {
}) => {
const store = useStores()
const [selectedIndex, setSelectedIndex] = useState<number>(0)
const panX = useAnimatedValue(0)
@@ -90,6 +92,7 @@ export function ViewSelector({
/>
</HorzSwipe>
)
}
},
)
const styles = StyleSheet.create({})
src/view/screens/Contacts.tsx
+3 -2
View File
@@ -7,8 +7,9 @@ import {colors} from '../lib/styles'
import {ScreenParams} from '../routes'
import {useStores} from '../../state'
import {useAnimatedValue} from '../lib/useAnimatedValue'
import {register} from 'react-native-bundle-splitter'
export const Contacts = ({navIdx, visible, params}: ScreenParams) => {
export const Contacts = register(({navIdx, visible, params}: ScreenParams) => {
const store = useStores()
const selectorInterp = useAnimatedValue(0)
@@ -50,7 +51,7 @@ export const Contacts = ({navIdx, visible, params}: ScreenParams) => {
{!!store.me.handle && <ProfileFollowsComponent name={store.me.handle} />}
</View>
)
}
})
const styles = StyleSheet.create({
section: {
src/view/screens/Home.tsx
+8 -7
View File
@@ -9,14 +9,12 @@ import {useStores} from '../../state'
import {FeedModel} from '../../state/models/feed-view'
import {ScreenParams} from '../routes'
import {s, colors} from '../lib/styles'
import {register} from 'react-native-bundle-splitter'
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
export const Home = observer(function Home({
navIdx,
visible,
scrollElRef,
}: ScreenParams) {
export const Home = register(
observer(({navIdx, visible, scrollElRef}: ScreenParams) => {
const store = useStores()
const [hasSetup, setHasSetup] = useState<boolean>(false)
const {appState} = useAppState({
@@ -57,7 +55,9 @@ export const Home = observer(function Home({
store.nav.setTitle(navIdx, 'Home')
console.log('Fetching home feed')
defaultFeedView.setup().then(() => {
if (aborted) return
if (aborted) {
return
}
setHasSetup(true)
})
}
@@ -107,7 +107,8 @@ export const Home = observer(function Home({
) : undefined}
</View>
)
})
}),
)
const styles = StyleSheet.create({
loadLatest: {
src/view/screens/Login.tsx
+7
View File
@@ -27,6 +27,7 @@ import {ServiceDescription} from '../../state/models/session'
import {ServerInputModel} from '../../state/models/shell-ui'
import {ComAtprotoAccountCreate} from '../../third-party/api/index'
import {isNetworkError} from '../../lib/errors'
import {investigate} from 'react-native-bundle-splitter/dist/utils'
enum ScreenState {
SigninOrCreateAccount,
@@ -589,6 +590,12 @@ export const Login = observer(
ScreenState.SigninOrCreateAccount,
)
console.log(
`loaded: ${investigate().loaded.length} \n waiting: ${
investigate().waiting.length
}`,
)
return (
<View style={styles.outer}>
{screenState === ScreenState.SigninOrCreateAccount ? (
src/view/screens/NotFound.tsx
+3 -2
View File
@@ -2,8 +2,9 @@ import React from 'react'
import {Text, Button, View} from 'react-native'
import {ViewHeader} from '../com/util/ViewHeader'
import {useStores} from '../../state'
import {register} from 'react-native-bundle-splitter'
export const NotFound = () => {
export const NotFound = register(() => {
const stores = useStores()
return (
<View>
@@ -19,4 +20,4 @@ export const NotFound = () => {
</View>
</View>
)
}
})
src/view/screens/Notifications.tsx
+3 -2
View File
@@ -5,8 +5,9 @@ import {Feed} from '../com/notifications/Feed'
import {useStores} from '../../state'
import {NotificationsViewModel} from '../../state/models/notifications-view'
import {ScreenParams} from '../routes'
import {register} from 'react-native-bundle-splitter'
export const Notifications = ({navIdx, visible}: ScreenParams) => {
export const Notifications = register(({navIdx, visible}: ScreenParams) => {
const store = useStores()
useEffect(() => {
@@ -36,4 +37,4 @@ export const Notifications = ({navIdx, visible}: ScreenParams) => {
<Feed view={store.me.notifications} onPressTryAgain={onPressTryAgain} />
</View>
)
}
})
src/view/screens/Onboard.tsx
+5 -2
View File
@@ -5,8 +5,10 @@ import {FeatureExplainer} from '../com/onboard/FeatureExplainer'
import {Follows} from '../com/onboard/Follows'
import {OnboardStage, OnboardStageOrder} from '../../state/models/onboard'
import {useStores} from '../../state'
import {register} from 'react-native-bundle-splitter'
export const Onboard = observer(() => {
export const Onboard = register(
observer(() => {
const store = useStores()
useEffect(() => {
@@ -30,4 +32,5 @@ export const Onboard = observer(() => {
<Com />
</View>
)
})
}),
)
src/view/screens/PostDownvotedBy.tsx
+5 -2
View File
@@ -5,8 +5,10 @@ import {PostVotedBy as PostLikedByComponent} from '../com/post-thread/PostVotedB
import {ScreenParams} from '../routes'
import {useStores} from '../../state'
import {makeRecordUri} from '../../lib/strings'
import {register} from 'react-native-bundle-splitter'
export const PostDownvotedBy = ({navIdx, visible, params}: ScreenParams) => {
export const PostDownvotedBy = register(
({navIdx, visible, params}: ScreenParams) => {
const store = useStores()
const {name, rkey} = params
const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
@@ -23,4 +25,5 @@ export const PostDownvotedBy = ({navIdx, visible, params}: ScreenParams) => {
<PostLikedByComponent uri={uri} direction="down" />
</View>
)
}
},
)
src/view/screens/PostRepostedBy.tsx
+5 -2
View File
@@ -5,8 +5,10 @@ import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/Post
import {ScreenParams} from '../routes'
import {useStores} from '../../state'
import {makeRecordUri} from '../../lib/strings'
import {register} from 'react-native-bundle-splitter'
export const PostRepostedBy = ({navIdx, visible, params}: ScreenParams) => {
export const PostRepostedBy = register(
({navIdx, visible, params}: ScreenParams) => {
const store = useStores()
const {name, rkey} = params
const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
@@ -23,4 +25,5 @@ export const PostRepostedBy = ({navIdx, visible, params}: ScreenParams) => {
<PostRepostedByComponent uri={uri} />
</View>
)
}
},
)
src/view/screens/PostThread.tsx
+5 -2
View File
@@ -6,8 +6,10 @@ import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread'
import {PostThreadViewModel} from '../../state/models/post-thread-view'
import {ScreenParams} from '../routes'
import {useStores} from '../../state'
import {register} from 'react-native-bundle-splitter'
export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
export const PostThread = register(
({navIdx, visible, params}: ScreenParams) => {
const store = useStores()
const {name, rkey} = params
const [viewSubtitle, setViewSubtitle] = useState<string>(`by ${name}`)
@@ -55,4 +57,5 @@ export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
</View>
</View>
)
}
},
)
src/view/screens/PostUpvotedBy.tsx
+5 -2
View File
@@ -5,8 +5,10 @@ import {PostVotedBy as PostLikedByComponent} from '../com/post-thread/PostVotedB
import {ScreenParams} from '../routes'
import {useStores} from '../../state'
import {makeRecordUri} from '../../lib/strings'
import {register} from 'react-native-bundle-splitter'
export const PostUpvotedBy = ({navIdx, visible, params}: ScreenParams) => {
export const PostUpvotedBy = register(
({navIdx, visible, params}: ScreenParams) => {
const store = useStores()
const {name, rkey} = params
const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
@@ -23,4 +25,5 @@ export const PostUpvotedBy = ({navIdx, visible, params}: ScreenParams) => {
<PostLikedByComponent uri={uri} direction="up" />
</View>
)
}
},
)
src/view/screens/Profile.tsx
+10 -5
View File
@@ -18,12 +18,14 @@ import {EmptyState} from '../com/util/EmptyState'
import {ViewHeader} from '../com/util/ViewHeader'
import * as Toast from '../com/util/Toast'
import {s, colors} from '../lib/styles'
import {register} from 'react-native-bundle-splitter'
const LOADING_ITEM = {_reactKey: '__loading__'}
const END_ITEM = {_reactKey: '__end__'}
const EMPTY_ITEM = {_reactKey: '__empty__'}
export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
export const Profile = register(
observer(({navIdx, visible, params}: ScreenParams) => {
const store = useStores()
const [hasSetup, setHasSetup] = useState<boolean>(false)
const uiState = useMemo(
@@ -43,7 +45,9 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
console.log('Fetching profile for', params.name)
store.nav.setTitle(navIdx, params.name)
uiState.setup().then(() => {
if (aborted) return
if (aborted) {
return
}
setHasSetup(true)
})
}
@@ -75,10 +79,10 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
store.shell.openModal(
new ConfirmModel(
`Remove ${membership.displayName || membership.handle}?`,
`You'll be able to invite them again if you change your mind.`,
"You'll be able to invite them again if you change your mind.",
async () => {
await uiState.members.removeMember(membership.did)
Toast.show(`User removed`)
Toast.show('User removed')
},
),
)
@@ -254,7 +258,8 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
)}
</View>
)
})
}),
)
const styles = StyleSheet.create({
container: {
src/view/screens/ProfileFollowers.tsx
+5 -2
View File
@@ -4,8 +4,10 @@ import {ViewHeader} from '../com/util/ViewHeader'
import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
import {ScreenParams} from '../routes'
import {useStores} from '../../state'
import {register} from 'react-native-bundle-splitter'
export const ProfileFollowers = ({navIdx, visible, params}: ScreenParams) => {
export const ProfileFollowers = register(
({navIdx, visible, params}: ScreenParams) => {
const store = useStores()
const {name} = params
@@ -21,4 +23,5 @@ export const ProfileFollowers = ({navIdx, visible, params}: ScreenParams) => {
<ProfileFollowersComponent name={name} />
</View>
)
}
},
)
src/view/screens/ProfileFollows.tsx
+5 -2
View File
@@ -4,8 +4,10 @@ import {ViewHeader} from '../com/util/ViewHeader'
import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
import {ScreenParams} from '../routes'
import {useStores} from '../../state'
import {register} from 'react-native-bundle-splitter'
export const ProfileFollows = ({navIdx, visible, params}: ScreenParams) => {
export const ProfileFollows = register(
({navIdx, visible, params}: ScreenParams) => {
const store = useStores()
const {name} = params
@@ -21,4 +23,5 @@ export const ProfileFollows = ({navIdx, visible, params}: ScreenParams) => {
<ProfileFollowsComponent name={name} />
</View>
)
}
},
)
src/view/screens/ProfileMembers.tsx
+5 -2
View File
@@ -4,8 +4,10 @@ import {ViewHeader} from '../com/util/ViewHeader'
import {ProfileMembers as ProfileMembersComponent} from '../com/profile/ProfileMembers'
import {ScreenParams} from '../routes'
import {useStores} from '../../state'
import {register} from 'react-native-bundle-splitter'
export const ProfileMembers = ({navIdx, visible, params}: ScreenParams) => {
export const ProfileMembers = register(
({navIdx, visible, params}: ScreenParams) => {
const store = useStores()
const {name} = params
@@ -21,4 +23,5 @@ export const ProfileMembers = ({navIdx, visible, params}: ScreenParams) => {
<ProfileMembersComponent name={name} />
</View>
)
}
},
)
src/view/screens/Search.tsx
+3 -2
View File
@@ -16,8 +16,9 @@ import {useStores} from '../../state'
import {UserAutocompleteViewModel} from '../../state/models/user-autocomplete-view'
import {s, colors} from '../lib/styles'
import {MagnifyingGlassIcon} from '../lib/icons'
import {register} from 'react-native-bundle-splitter'
export const Search = ({navIdx, visible, params}: ScreenParams) => {
export const Search = register(({navIdx, visible, params}: ScreenParams) => {
const store = useStores()
const textInput = useRef<TextInput>(null)
const [query, setQuery] = useState<string>('')
@@ -92,7 +93,7 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
</View>
</View>
)
}
})
const styles = StyleSheet.create({
container: {
src/view/screens/Settings.tsx
+5 -5
View File
@@ -7,11 +7,10 @@ import {s, colors} from '../lib/styles'
import {ViewHeader} from '../com/util/ViewHeader'
import {Link} from '../com/util/Link'
import {UserAvatar} from '../com/util/UserAvatar'
import {register} from 'react-native-bundle-splitter'
export const Settings = observer(function Settings({
navIdx,
visible,
}: ScreenParams) {
export const Settings = register(
observer(function Settings({navIdx, visible}: ScreenParams) {
const store = useStores()
useEffect(() => {
@@ -55,7 +54,8 @@ export const Settings = observer(function Settings({
</View>
</View>
)
})
}),
)
const styles = StyleSheet.create({
title: {
src/view/shell/mobile/Composer.tsx
+4 -1
View File
@@ -4,8 +4,10 @@ import {Animated, Easing, StyleSheet, View} from 'react-native'
import {ComposePost} from '../../com/composer/ComposePost'
import {ComposerOpts} from '../../../state/models/shell-ui'
import {useAnimatedValue} from '../../lib/useAnimatedValue'
import {register} from 'react-native-bundle-splitter'
export const Composer = observer(
export const Composer = register(
observer(
({
active,
winHeight,
@@ -60,6 +62,7 @@ export const Composer = observer(
</Animated.View>
)
},
),
)
const styles = StyleSheet.create({
yarn.lock
+5
View File
@@ -10163,6 +10163,11 @@ react-native-appstate-hook@^1.0.6:
resolved "https://registry.yarnpkg.com/react-native-appstate-hook/-/react-native-appstate-hook-1.0.6.tgz#cbc16e7b89cfaea034cabd999f00e99053cabd06"
integrity sha512-0hPVyf5yLxCSVrrNEuGqN1ZnSSj3Ye2gZex0NtcK/AHYwMc0rXWFNZjBKOoZSouspqu3hXBbQ6NOUSTzrME1AQ==
react-native-bundle-splitter@^2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/react-native-bundle-splitter/-/react-native-bundle-splitter-2.2.3.tgz#aff144fb1b7c9dbd2da334b318b86032869a7755"
integrity sha512-cxKb8/NUKTqAZ+nHp9PoTdRCI6+tWlUUP0Mq0UKgpVbD0KaxRIXnvdSM8Fp9ctiMyB1rk6izZzQkTJ+GcDXQLA==
react-native-codegen@^0.0.17:
version "0.0.17"
resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.0.17.tgz#83fb814d94061cbd46667f510d2ddba35ffb50ac"