diff --git a/src/components/Hashtag.tsx b/src/components/Hashtag.tsx index 2d05edc9..1402d7ac 100644 --- a/src/components/Hashtag.tsx +++ b/src/components/Hashtag.tsx @@ -3,8 +3,8 @@ import { StackNavigationProp } from '@react-navigation/stack' import { TabLocalStackParamList } from '@utils/navigation/navigators' import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' -import React, { useCallback, useState } from 'react' -import { Dimensions, Pressable } from 'react-native' +import React, { PropsWithChildren, useCallback, useState } from 'react' +import { Dimensions, Pressable, View } from 'react-native' import Sparkline from './Sparkline' import CustomText from './Text' @@ -13,7 +13,11 @@ export interface Props { onPress?: () => void } -const ComponentHashtag: React.FC = ({ hashtag, onPress: customOnPress }) => { +const ComponentHashtag: React.FC = ({ + hashtag, + onPress: customOnPress, + children +}) => { const { colors } = useTheme() const navigation = useNavigation>() @@ -31,15 +35,11 @@ const ComponentHashtag: React.FC = ({ hashtag, onPress: customOnPress }) style={{ flex: 1, flexDirection: 'row', + alignItems: 'center', justifyContent: 'space-between', padding }} onPress={customOnPress || onPress} - onLayout={({ - nativeEvent: { - layout: { height } - } - }) => setHeight(height - padding * 2 - 1)} > = ({ hashtag, onPress: customOnPress }) > #{hashtag.name} - parseInt(h.uses)).reverse()} - width={width} - height={height} - /> + setHeight(height)} + > + parseInt(h.uses)).reverse()} + width={width} + height={height} + margin={children ? StyleConstants.Spacing.S : undefined} + /> + {children} + ) } diff --git a/src/components/Sparkline.tsx b/src/components/Sparkline.tsx index 21792069..707f28e7 100644 --- a/src/components/Sparkline.tsx +++ b/src/components/Sparkline.tsx @@ -1,7 +1,6 @@ import { useTheme } from '@utils/styles/ThemeManager' import { maxBy, minBy } from 'lodash' import React from 'react' -import { Platform } from 'react-native' import Svg, { G, Path } from 'react-native-svg' export interface Props { @@ -69,7 +68,7 @@ const Sparkline: React.FC = ({ data, width, height, margin = 0 }) => { const fillPoints = linePoints.concat(closePolyPoints) return ( - + ({ title: t('me.stacks.bookmarks.name'), - ...(Platform.OS === 'android' && { - headerCenter: () => - }), headerLeft: () => navigation.pop(1)} /> })} /> @@ -53,9 +50,6 @@ const TabMe = React.memo( component={TabMeConversations} options={({ navigation }: any) => ({ title: t('me.stacks.conversations.name'), - ...(Platform.OS === 'android' && { - headerCenter: () => - }), headerLeft: () => navigation.pop(1)} /> })} /> @@ -64,9 +58,14 @@ const TabMe = React.memo( component={TabMeFavourites} options={({ navigation }: any) => ({ title: t('me.stacks.favourites.name'), - ...(Platform.OS === 'android' && { - headerCenter: () => - }), + headerLeft: () => navigation.pop(1)} /> + })} + /> + ({ + title: t('me.stacks.followedTags.name'), headerLeft: () => navigation.pop(1)} /> })} /> @@ -75,15 +74,6 @@ const TabMe = React.memo( component={TabMeList} options={({ route, navigation }: any) => ({ title: t('me.stacks.list.name', { list: route.params.title }), - ...(Platform.OS === 'android' && { - headerCenter: () => ( - - ) - }), headerLeft: () => navigation.pop(1)} /> })} /> @@ -92,9 +82,6 @@ const TabMe = React.memo( component={TabMeListAccounts} options={({ navigation, route: { params } }) => ({ title: t('me.stacks.listAccounts.name', { list: params.title }), - ...(Platform.OS === 'android' && { - headerCenter: () => - }), headerLeft: () => navigation.pop(1)} /> })} /> @@ -111,9 +98,6 @@ const TabMe = React.memo( component={TabMeListList} options={({ navigation }: any) => ({ title: t('me.stacks.lists.name'), - ...(Platform.OS === 'android' && { - headerCenter: () => - }), headerLeft: () => navigation.pop(1)} /> })} /> @@ -130,9 +114,6 @@ const TabMe = React.memo( component={TabMePush} options={({ navigation }) => ({ title: t('me.stacks.push.name'), - ...(Platform.OS === 'android' && { - headerCenter: () => - }), headerLeft: () => navigation.goBack()} /> })} /> @@ -149,9 +130,6 @@ const TabMe = React.memo( component={TabMeSettingsFontsize} options={({ navigation }: any) => ({ title: t('me.stacks.fontSize.name'), - ...(Platform.OS === 'android' && { - headerCenter: () => - }), headerLeft: () => navigation.pop(1)} /> })} /> @@ -160,9 +138,6 @@ const TabMe = React.memo( component={TabMeSettingsLanguage} options={({ navigation }: any) => ({ title: t('me.stacks.language.name'), - ...(Platform.OS === 'android' && { - headerCenter: () => - }), headerLeft: () => navigation.pop(1)} /> })} /> @@ -173,9 +148,6 @@ const TabMe = React.memo( presentation: 'modal', headerShown: true, title: t('me.stacks.switch.name'), - ...(Platform.OS === 'android' && { - headerCenter: () => - }), headerLeft: () => ( navigation.goBack()} /> ) diff --git a/src/screens/Tabs/Me/FollowedTags.tsx b/src/screens/Tabs/Me/FollowedTags.tsx new file mode 100644 index 00000000..32a2af98 --- /dev/null +++ b/src/screens/Tabs/Me/FollowedTags.tsx @@ -0,0 +1,71 @@ +import Button from '@components/Button' +import haptics from '@components/haptics' +import ComponentHashtag from '@components/Hashtag' +import { displayMessage } from '@components/Message' +import ComponentSeparator from '@components/Separator' +import { TabMeStackScreenProps } from '@utils/navigation/navigators' +import { useFollowedTagsQuery, useTagsMutation } from '@utils/queryHooks/tags' +import React, { useEffect } from 'react' +import { useTranslation } from 'react-i18next' +import { FlatList } from 'react-native-gesture-handler' + +const TabMeFollowedTags: React.FC> = ({ + navigation +}) => { + const { t } = useTranslation('screenTabs') + + const { data, fetchNextPage, refetch } = useFollowedTagsQuery() + const flattenData = data?.pages ? data.pages.flatMap(page => [...page.body]) : [] + useEffect(() => { + if (flattenData.length === 0) { + navigation.goBack() + } + }, [flattenData.length]) + + const mutation = useTagsMutation({ + onSuccess: () => { + haptics('Light') + refetch() + }, + onError: (err: any, { to }) => { + displayMessage({ + type: 'error', + message: t('common:message.error.message', { + function: to ? t('shared.hashtag.follow') : t('shared.hashtag.unfollow') + }), + ...(err.status && + typeof err.status === 'number' && + err.data && + err.data.error && + typeof err.data.error === 'string' && { + description: err.data.error + }) + }) + } + }) + + return ( + ( + {}} + children={ +