Improve the profile preview with "swipe up to view" and local cache optimization (#1096)
* Update the ProfilePreview to use a swipe-up to navigate * Use the profile cache to optimize load performance * Hack to align the header in the profile preview against the screen view * Fix profiles cache logic to ensure cache is used * Fix dark mode on profile previewzio/stable
parent
1211c353d0
commit
96280d5f1a
|
@ -96,6 +96,7 @@
|
|||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"lodash.omit": "^4.5.0",
|
||||
"lodash.once": "^4.1.1",
|
||||
"lodash.samplesize": "^4.2.0",
|
||||
"lodash.set": "^4.3.2",
|
||||
"lodash.shuffle": "^4.2.0",
|
||||
|
@ -161,6 +162,7 @@
|
|||
"@types/lodash.debounce": "^4.0.7",
|
||||
"@types/lodash.isequal": "^4.5.6",
|
||||
"@types/lodash.omit": "^4.5.7",
|
||||
"@types/lodash.once": "^4.1.7",
|
||||
"@types/lodash.samplesize": "^4.2.7",
|
||||
"@types/lodash.set": "^4.3.7",
|
||||
"@types/lodash.shuffle": "^4.2.7",
|
||||
|
|
|
@ -125,7 +125,10 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
|
|||
<Stack.Screen
|
||||
name="Profile"
|
||||
component={ProfileScreen}
|
||||
options={({route}) => ({title: title(`@${route.params.name}`)})}
|
||||
options={({route}) => ({
|
||||
title: title(`@${route.params.name}`),
|
||||
animation: 'none',
|
||||
})}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="ProfileFollowers"
|
||||
|
|
|
@ -45,8 +45,6 @@ export class ProfilesCache {
|
|||
}
|
||||
|
||||
overwrite(did: string, res: GetProfile.Response) {
|
||||
if (this.cache.has(did)) {
|
||||
this.cache.set(did, res)
|
||||
}
|
||||
this.cache.set(did, res)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -103,7 +103,12 @@ export class ProfileModel {
|
|||
// =
|
||||
|
||||
async setup() {
|
||||
await this._load()
|
||||
const precache = await this.rootStore.profiles.cache.get(this.params.actor)
|
||||
if (precache) {
|
||||
await this._loadWithCache(precache)
|
||||
} else {
|
||||
await this._load()
|
||||
}
|
||||
}
|
||||
|
||||
async refresh() {
|
||||
|
@ -252,7 +257,7 @@ export class ProfileModel {
|
|||
this._xLoading(isRefreshing)
|
||||
try {
|
||||
const res = await this.rootStore.agent.getProfile(this.params)
|
||||
this.rootStore.profiles.overwrite(this.params.actor, res) // cache invalidation
|
||||
this.rootStore.profiles.overwrite(this.params.actor, res)
|
||||
if (res.data.handle) {
|
||||
this.rootStore.handleResolutions.cache.set(
|
||||
res.data.handle,
|
||||
|
@ -267,6 +272,23 @@ export class ProfileModel {
|
|||
}
|
||||
}
|
||||
|
||||
async _loadWithCache(precache: GetProfile.Response) {
|
||||
// use cached value
|
||||
this._replaceAll(precache)
|
||||
await this._createRichText()
|
||||
this._xIdle()
|
||||
|
||||
// fetch latest
|
||||
try {
|
||||
const res = await this.rootStore.agent.getProfile(this.params)
|
||||
this.rootStore.profiles.overwrite(this.params.actor, res) // cache invalidation
|
||||
this._replaceAll(res)
|
||||
await this._createRichText()
|
||||
} catch (e: any) {
|
||||
this._xIdle(e)
|
||||
}
|
||||
}
|
||||
|
||||
_replaceAll(res: GetProfile.Response) {
|
||||
this.did = res.data.did
|
||||
this.handle = res.data.handle
|
||||
|
|
|
@ -6,6 +6,8 @@ import BottomSheet from '@gorhom/bottom-sheet'
|
|||
import {useStores} from 'state/index'
|
||||
import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {navigate} from '../../../Navigation'
|
||||
import once from 'lodash.once'
|
||||
|
||||
import * as ConfirmModal from './Confirm'
|
||||
import * as EditProfileModal from './EditProfile'
|
||||
|
@ -35,9 +37,25 @@ export const ModalsContainer = observer(function ModalsContainer() {
|
|||
const store = useStores()
|
||||
const bottomSheetRef = useRef<BottomSheet>(null)
|
||||
const pal = usePalette('default')
|
||||
|
||||
const activeModal =
|
||||
store.shell.activeModals[store.shell.activeModals.length - 1]
|
||||
|
||||
const navigateOnce = once(navigate)
|
||||
|
||||
const onBottomSheetAnimate = (fromIndex: number, toIndex: number) => {
|
||||
if (activeModal?.name === 'profile-preview' && toIndex === 1) {
|
||||
// begin loading the profile screen behind the scenes
|
||||
navigateOnce('Profile', {name: activeModal.did})
|
||||
}
|
||||
}
|
||||
const onBottomSheetChange = (snapPoint: number) => {
|
||||
if (snapPoint === -1) {
|
||||
store.shell.closeModal()
|
||||
} else if (activeModal?.name === 'profile-preview' && snapPoint === 1) {
|
||||
// ensure we navigate to Profile and close the modal
|
||||
navigateOnce('Profile', {name: activeModal.did})
|
||||
store.shell.closeModal()
|
||||
}
|
||||
}
|
||||
const onClose = () => {
|
||||
|
@ -45,9 +63,6 @@ export const ModalsContainer = observer(function ModalsContainer() {
|
|||
store.shell.closeModal()
|
||||
}
|
||||
|
||||
const activeModal =
|
||||
store.shell.activeModals[store.shell.activeModals.length - 1]
|
||||
|
||||
useEffect(() => {
|
||||
if (store.shell.isModalActive) {
|
||||
bottomSheetRef.current?.expand()
|
||||
|
@ -146,6 +161,7 @@ export const ModalsContainer = observer(function ModalsContainer() {
|
|||
}
|
||||
handleIndicatorStyle={{backgroundColor: pal.text.color}}
|
||||
handleStyle={[styles.handle, pal.view]}
|
||||
onAnimate={onBottomSheetAnimate}
|
||||
onChange={onBottomSheetChange}>
|
||||
{element}
|
||||
</BottomSheet>
|
||||
|
|
|
@ -1,63 +1,56 @@
|
|||
import React, {useState, useEffect, useCallback} from 'react'
|
||||
import {StyleSheet, View} from 'react-native'
|
||||
import React, {useState, useEffect} from 'react'
|
||||
import {ActivityIndicator, StyleSheet, View} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {useNavigation, StackActions} from '@react-navigation/native'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {ThemedText} from '../util/text/ThemedText'
|
||||
import {useStores} from 'state/index'
|
||||
import {ProfileModel} from 'state/models/content/profile'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useAnalytics} from 'lib/analytics/analytics'
|
||||
import {ProfileHeader} from '../profile/ProfileHeader'
|
||||
import {Button} from '../util/forms/Button'
|
||||
import {NavigationProp} from 'lib/routes/types'
|
||||
import {InfoCircleIcon} from 'lib/icons'
|
||||
import {useNavigationState} from '@react-navigation/native'
|
||||
import {isIOS} from 'platform/detection'
|
||||
import {s} from 'lib/styles'
|
||||
|
||||
export const snapPoints = [560]
|
||||
export const snapPoints = [520, '100%']
|
||||
|
||||
export const Component = observer(({did}: {did: string}) => {
|
||||
const store = useStores()
|
||||
const pal = usePalette('default')
|
||||
const palInverted = usePalette('inverted')
|
||||
const navigation = useNavigation<NavigationProp>()
|
||||
const [model] = useState(new ProfileModel(store, {actor: did}))
|
||||
const {screen} = useAnalytics()
|
||||
|
||||
// track the navigator state to detect if a page-load occurred
|
||||
const navState = useNavigationState(s => s)
|
||||
const [initNavState] = useState(navState)
|
||||
const isLoading = initNavState !== navState
|
||||
|
||||
useEffect(() => {
|
||||
screen('Profile:Preview')
|
||||
model.setup()
|
||||
}, [model, screen])
|
||||
|
||||
const onPressViewProfile = useCallback(() => {
|
||||
navigation.dispatch(StackActions.push('Profile', {name: model.handle}))
|
||||
store.shell.closeModal()
|
||||
}, [navigation, store, model])
|
||||
|
||||
return (
|
||||
<View style={pal.view}>
|
||||
<View style={styles.headerWrapper}>
|
||||
<View style={[pal.view, s.flex1]}>
|
||||
<View
|
||||
style={[
|
||||
styles.headerWrapper,
|
||||
isLoading && isIOS && styles.headerPositionAdjust,
|
||||
]}>
|
||||
<ProfileHeader view={model} hideBackButton onRefreshAll={() => {}} />
|
||||
</View>
|
||||
<View style={[styles.buttonsContainer, pal.view]}>
|
||||
<View style={styles.buttons}>
|
||||
<Button
|
||||
type="inverted"
|
||||
style={[styles.button, styles.buttonWide]}
|
||||
onPress={onPressViewProfile}
|
||||
accessibilityLabel="View profile"
|
||||
accessibilityHint="">
|
||||
<Text type="button-lg" style={palInverted.text}>
|
||||
View Profile
|
||||
</Text>
|
||||
</Button>
|
||||
<Button
|
||||
type="default"
|
||||
style={styles.button}
|
||||
onPress={() => store.shell.closeModal()}
|
||||
accessibilityLabel="Close this preview"
|
||||
accessibilityHint="">
|
||||
<Text type="button-lg" style={pal.text}>
|
||||
Close
|
||||
</Text>
|
||||
</Button>
|
||||
<View style={[styles.hintWrapper, pal.view]}>
|
||||
<View style={styles.hint}>
|
||||
{isLoading ? (
|
||||
<ActivityIndicator />
|
||||
) : (
|
||||
<>
|
||||
<InfoCircleIcon size={21} style={pal.textLight} />
|
||||
<ThemedText type="xl" fg="light">
|
||||
Swipe up to see more
|
||||
</ThemedText>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
@ -68,22 +61,18 @@ const styles = StyleSheet.create({
|
|||
headerWrapper: {
|
||||
height: 440,
|
||||
},
|
||||
buttonsContainer: {
|
||||
height: 120,
|
||||
headerPositionAdjust: {
|
||||
// HACK align the header for the profilescreen transition -prf
|
||||
paddingTop: 23,
|
||||
},
|
||||
buttons: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
paddingHorizontal: 14,
|
||||
paddingTop: 16,
|
||||
hintWrapper: {
|
||||
height: 80,
|
||||
},
|
||||
button: {
|
||||
flex: 2,
|
||||
hint: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 12,
|
||||
},
|
||||
buttonWide: {
|
||||
flex: 3,
|
||||
gap: 8,
|
||||
paddingHorizontal: 14,
|
||||
borderRadius: 6,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -6343,6 +6343,13 @@
|
|||
dependencies:
|
||||
"@types/lodash" "*"
|
||||
|
||||
"@types/lodash.once@^4.1.7":
|
||||
version "4.1.7"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash.once/-/lodash.once-4.1.7.tgz#84bc1f711725f6cd6d8be04365623141e09bc007"
|
||||
integrity sha512-XWhnXzWkxoleOoXKmzUtep8vT+wiiQQgmPD+wzG0yO0bdlszmnqHRb2WiY5hK/8V0DTet1+z9DJj9cnbdAhWng==
|
||||
dependencies:
|
||||
"@types/lodash" "*"
|
||||
|
||||
"@types/lodash.samplesize@^4.2.7":
|
||||
version "4.2.7"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash.samplesize/-/lodash.samplesize-4.2.7.tgz#15784dd9e54aa1bf043552bdb533b83fcf50b82f"
|
||||
|
@ -13912,7 +13919,7 @@ lodash.omit@^4.5.0:
|
|||
resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
|
||||
integrity sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==
|
||||
|
||||
lodash.once@^4.0.0:
|
||||
lodash.once@^4.0.0, lodash.once@^4.1.1:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
|
||||
integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==
|
||||
|
|
Loading…
Reference in New Issue