Update load latest to show when there's new activity with an indicator
parent
6f02548bca
commit
e89103915d
|
@ -290,7 +290,9 @@ export class NotificationsFeedModel {
|
|||
}
|
||||
|
||||
get hasNewLatest() {
|
||||
return this.queuedNotifications && this.queuedNotifications?.length > 0
|
||||
return Boolean(
|
||||
this.queuedNotifications && this.queuedNotifications?.length > 0,
|
||||
)
|
||||
}
|
||||
|
||||
get unreadCountLabel(): string {
|
||||
|
|
|
@ -1,24 +1,32 @@
|
|||
import React from 'react'
|
||||
import {StyleSheet, TouchableOpacity} from 'react-native'
|
||||
import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {Text} from '../text/Text'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {UpIcon} from 'lib/icons'
|
||||
import {LoadLatestBtn as LoadLatestBtnMobile} from './LoadLatestBtnMobile'
|
||||
import {isMobileWeb} from 'platform/detection'
|
||||
import {colors} from 'lib/styles'
|
||||
|
||||
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
|
||||
|
||||
export const LoadLatestBtn = ({
|
||||
onPress,
|
||||
label,
|
||||
showIndicator,
|
||||
}: {
|
||||
onPress: () => void
|
||||
label: string
|
||||
showIndicator: boolean
|
||||
}) => {
|
||||
const pal = usePalette('default')
|
||||
if (isMobileWeb) {
|
||||
return <LoadLatestBtnMobile onPress={onPress} label={label} />
|
||||
return (
|
||||
<LoadLatestBtnMobile
|
||||
onPress={onPress}
|
||||
label={label}
|
||||
showIndicator={showIndicator}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<TouchableOpacity
|
||||
|
@ -35,6 +43,7 @@ export const LoadLatestBtn = ({
|
|||
style={[pal.text, styles.icon]}
|
||||
/>
|
||||
</Text>
|
||||
{showIndicator && <View style={styles.indicator} />}
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
|
@ -58,4 +67,13 @@ const styles = StyleSheet.create({
|
|||
position: 'relative',
|
||||
top: 2,
|
||||
},
|
||||
indicator: {
|
||||
position: 'absolute',
|
||||
top: 3,
|
||||
right: 3,
|
||||
backgroundColor: colors.blue3,
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 6,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -1,16 +1,26 @@
|
|||
import React from 'react'
|
||||
import {StyleSheet, TouchableOpacity} from 'react-native'
|
||||
import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||
import {clamp} from 'lodash'
|
||||
import {useStores} from 'state/index'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
|
||||
import {colors} from 'lib/styles'
|
||||
|
||||
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
|
||||
|
||||
export const LoadLatestBtn = observer(
|
||||
({onPress, label}: {onPress: () => void; label: string}) => {
|
||||
({
|
||||
onPress,
|
||||
label,
|
||||
showIndicator,
|
||||
}: {
|
||||
onPress: () => void
|
||||
label: string
|
||||
showIndicator: boolean
|
||||
}) => {
|
||||
const store = useStores()
|
||||
const pal = usePalette('default')
|
||||
const safeAreaInsets = useSafeAreaInsets()
|
||||
|
@ -30,6 +40,7 @@ export const LoadLatestBtn = observer(
|
|||
accessibilityLabel={label}
|
||||
accessibilityHint="">
|
||||
<FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
|
||||
{showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
|
||||
</TouchableOpacity>
|
||||
)
|
||||
},
|
||||
|
@ -48,4 +59,14 @@ const styles = StyleSheet.create({
|
|||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
indicator: {
|
||||
position: 'absolute',
|
||||
top: 3,
|
||||
right: 3,
|
||||
backgroundColor: colors.blue3,
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: 6,
|
||||
borderWidth: 1,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -246,6 +246,7 @@ const FeedPage = observer(
|
|||
feed.refresh()
|
||||
}, [feed, scrollToTop])
|
||||
|
||||
const hasNew = feed.hasNewLatest && !feed.isRefreshing
|
||||
return (
|
||||
<View testID={testID} style={s.h100pct}>
|
||||
<Feed
|
||||
|
@ -260,8 +261,12 @@ const FeedPage = observer(
|
|||
renderEmptyState={renderEmptyState}
|
||||
headerOffset={HEADER_OFFSET}
|
||||
/>
|
||||
{isScrolledDown && (
|
||||
<LoadLatestBtn onPress={onPressLoadLatest} label="Load new posts" />
|
||||
{(isScrolledDown || hasNew) && (
|
||||
<LoadLatestBtn
|
||||
onPress={onPressLoadLatest}
|
||||
label="Load new posts"
|
||||
showIndicator={hasNew}
|
||||
/>
|
||||
)}
|
||||
<FAB
|
||||
testID="composeFAB"
|
||||
|
|
|
@ -88,6 +88,9 @@ export const NotificationsScreen = withAuthRequired(
|
|||
),
|
||||
)
|
||||
|
||||
const hasNew =
|
||||
store.me.notifications.hasNewLatest &&
|
||||
!store.me.notifications.isRefreshing
|
||||
return (
|
||||
<View testID="notificationsScreen" style={s.hContentRegion}>
|
||||
<ViewHeader title="Notifications" canGoBack={false} />
|
||||
|
@ -98,10 +101,11 @@ export const NotificationsScreen = withAuthRequired(
|
|||
onScroll={onMainScroll}
|
||||
scrollElRef={scrollElRef}
|
||||
/>
|
||||
{isScrolledDown && (
|
||||
{(isScrolledDown || hasNew) && (
|
||||
<LoadLatestBtn
|
||||
onPress={onPressLoadLatest}
|
||||
label="Load new notifications"
|
||||
showIndicator={hasNew}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
|
|
Loading…
Reference in New Issue