octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Initial try out dynamic following

This commit is contained in:
xmflsct 2022-08-13 00:48:20 +02:00
parent 034208fbe1
commit 51ac36768d
2 changed files with 142 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/Header/Center.tsx
View File

@ -3,27 +3,30 @@ import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
export interface Props {
content: string
content: React.ReactNode | string
inverted?: boolean
onPress?: () => void
}
// Used for Android mostly
const HeaderCenter = React.memo(
({ content, inverted = false }: Props) => {
const { colors } = useTheme()
const HeaderCenter: React.FC<Props> = ({
content,
inverted = false,
onPress
}) => {
const { colors } = useTheme()
return (
<CustomText
style={{
fontSize: 18,
color: inverted ? colors.primaryOverlay : colors.primaryDefault
}}
fontWeight='Bold'
children={content}
/>
)
},
(prev, next) => prev.content === next.content
)
return (
<CustomText
style={{
fontSize: 18,
color: inverted ? colors.primaryOverlay : colors.primaryDefault
}}
fontWeight='Bold'
children={content}
{...(onPress && { onPress })}
/>
)
}
export default HeaderCenter

165
src/screens/Tabs/Local.tsx
View File

@ -1,5 +1,7 @@
import analytics from '@components/analytics'
import { HeaderCenter, HeaderRight } from '@components/Header'
import Icon from '@components/Icon'
import CustomText from '@components/Text'
import Timeline from '@components/Timeline'
import TimelineDefault from '@components/Timeline/Default'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
@ -7,64 +9,141 @@ import {
ScreenTabsScreenProps,
TabLocalStackParamList
} from '@utils/navigation/navigators'
import { useListsQuery } from '@utils/queryHooks/lists'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import React, { useCallback, useMemo } from 'react'
import { StyleConstants } from '@utils/styles/constants'
import layoutAnimation from '@utils/styles/layoutAnimation'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Platform } from 'react-native'
import { Pressable, StyleSheet, Text, View } from 'react-native'
import TabSharedRoot from './Shared/Root'
const Stack = createNativeStackNavigator<TabLocalStackParamList>()
const TabLocal = React.memo(
({ navigation }: ScreenTabsScreenProps<'Tab-Local'>) => {
const { t, i18n } = useTranslation('screenTabs')
const { colors } = useTheme()
const { t } = useTranslation('screenTabs')
const screenOptionsRoot = useMemo(
() => ({
title: t('tabs.local.name'),
...(Platform.OS === 'android' && {
headerCenter: () => <HeaderCenter content={t('tabs.local.name')} />
}),
headerRight: () => (
<HeaderRight
accessibilityLabel={t('common.search.accessibilityLabel')}
accessibilityHint={t('common.search.accessibilityHint')}
content='Search'
onPress={() => {
analytics('search_tap', { page: 'Local' })
navigation.navigate('Tab-Local', {
screen: 'Tab-Shared-Search',
params: { text: undefined }
})
}}
/>
)
}),
[i18n.language]
)
const { data: lists } = useListsQuery({})
const [listsShown, setListsShown] = useState(false)
useEffect(() => {
layoutAnimation()
}, [listsShown])
const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Following' }]
const children = useCallback(
() => (
<Timeline
queryKey={queryKey}
lookback='Following'
customProps={{
renderItem: ({ item }) => (
<TimelineDefault item={item} queryKey={queryKey} />
)
}}
/>
),
[]
)
const [queryKey, setQueryKey] = useState<QueryKeyTimeline>([
'Timeline',
{ page: 'Following' }
])
return (
<Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
<Stack.Screen
name='Tab-Local-Root'
options={screenOptionsRoot}
children={children}
options={{
headerTitle: () => (
<HeaderCenter
onPress={() => {
if (lists?.length) {
setListsShown(!listsShown)
}
}}
content={
<>
<Text>{t('tabs.local.name')}</Text>
{lists?.length ? (
<Icon
name='ChevronDown'
size={StyleConstants.Font.Size.M}
color={colors.primaryDefault}
style={{ marginLeft: StyleConstants.Spacing.S }}
strokeWidth={3}
/>
) : null}
</>
}
/>
),
headerRight: () => (
<HeaderRight
accessibilityLabel={t('common.search.accessibilityLabel')}
accessibilityHint={t('common.search.accessibilityHint')}
content='Search'
onPress={() => {
analytics('search_tap', { page: 'Local' })
navigation.navigate('Tab-Local', {
screen: 'Tab-Shared-Search',
params: { text: undefined }
})
}}
/>
)
}}
children={() => (
<>
<Timeline
queryKey={queryKey}
lookback='Following'
customProps={{
renderItem: ({ item }) => (
<TimelineDefault item={item} queryKey={queryKey} />
)
}}
/>
{listsShown ? (
<View
style={{
position: 'absolute',
backgroundColor: colors.backgroundDefault,
width: '100%',
paddingVertical: StyleConstants.Spacing.S
}}
>
<Pressable
style={{
padding: StyleConstants.Spacing.S * 1.5,
borderColor: colors.border,
borderTopWidth: StyleSheet.hairlineWidth,
borderBottomWidth: StyleSheet.hairlineWidth
}}
onPress={() => {
setQueryKey(['Timeline', { page: 'Following' }])
setListsShown(!listsShown)
}}
>
<CustomText fontSize='M' style={{ textAlign: 'center' }}>
Default
</CustomText>
</Pressable>
{lists?.map(list => (
<Pressable
style={{
padding: StyleConstants.Spacing.S,
borderColor: colors.border,
borderBottomWidth: StyleSheet.hairlineWidth
}}
onPress={() => {
setQueryKey([
'Timeline',
{ page: 'List', list: list.id }
])
setListsShown(!listsShown)
}}
>
<CustomText
key={list.id}
fontSize='M'
style={{ textAlign: 'center' }}
>
{list.title}
</CustomText>
</Pressable>
))}
</View>
) : null}
</>
)}
/>
{TabSharedRoot({ Stack })}
</Stack.Navigator>