mirror of https://github.com/tooot-app/app
119 lines
3.8 KiB
TypeScript
119 lines
3.8 KiB
TypeScript
import Button from '@components/Button'
|
|
import { Filter } from '@components/Filter'
|
|
import Hr from '@components/Hr'
|
|
import CustomText from '@components/Text'
|
|
import { featureCheck } from '@utils/helpers/featureCheck'
|
|
import { TabSharedStackScreenProps, useNavState } from '@utils/navigation/navigators'
|
|
import { useFilterMutation, useFiltersQuery } from '@utils/queryHooks/filters'
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
import React from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { SectionList, View } from 'react-native'
|
|
|
|
const TabSharedFilter: React.FC<TabSharedStackScreenProps<'Tab-Shared-Filter'>> = ({
|
|
navigation,
|
|
route: { params }
|
|
}) => {
|
|
if (!featureCheck('filter_server_side')) {
|
|
navigation.goBack()
|
|
return null
|
|
}
|
|
|
|
const { colors } = useTheme()
|
|
const { t } = useTranslation(['common', 'screenTabs'])
|
|
|
|
const { data, isFetching, refetch } = useFiltersQuery<'v2'>({ version: 'v2' })
|
|
const sections = [
|
|
{
|
|
id: 'add',
|
|
data:
|
|
data?.filter(filter => {
|
|
switch (params.source) {
|
|
case 'hashtag':
|
|
return !filter.keywords.find(keyword => keyword.keyword === `#${params.tag_name}`)
|
|
case 'status':
|
|
return !filter.statuses.find(({ status_id }) => status_id === params.status.id)
|
|
}
|
|
}) || []
|
|
},
|
|
{
|
|
id: 'remove',
|
|
title: t('screenTabs:shared.filter.existed'),
|
|
data:
|
|
data?.filter(filter => {
|
|
switch (params.source) {
|
|
case 'hashtag':
|
|
return !!filter.keywords.find(keyword => keyword.keyword === `#${params.tag_name}`)
|
|
case 'status':
|
|
return !!filter.statuses.find(({ status_id }) => status_id === params.status.id)
|
|
}
|
|
}) || []
|
|
}
|
|
]
|
|
|
|
const mutation = useFilterMutation()
|
|
|
|
const navState = useNavState()
|
|
|
|
return (
|
|
<SectionList
|
|
contentContainerStyle={{ padding: StyleConstants.Spacing.Global.PagePadding }}
|
|
sections={sections}
|
|
SectionSeparatorComponent={props =>
|
|
props.leadingItem && props.trailingSection ? (
|
|
<View style={{ height: StyleConstants.Spacing.XL }} />
|
|
) : null
|
|
}
|
|
renderSectionHeader={({ section: { title, data } }) =>
|
|
title && data.length ? (
|
|
<CustomText fontStyle='S' style={{ color: colors.secondary }} children={title} />
|
|
) : null
|
|
}
|
|
ItemSeparatorComponent={Hr}
|
|
renderItem={({ item, section }) => (
|
|
<Filter
|
|
filter={item}
|
|
button={
|
|
<Button
|
|
type='icon'
|
|
content={section.id === 'add' ? 'plus' : 'minus'}
|
|
round
|
|
disabled={isFetching}
|
|
onPress={() => {
|
|
if (section.id === 'add' || section.id === 'remove') {
|
|
switch (params.source) {
|
|
case 'status':
|
|
mutation
|
|
.mutateAsync({
|
|
source: 'status',
|
|
filter: item,
|
|
action: section.id,
|
|
status: params.status
|
|
})
|
|
.then(() => refetch())
|
|
break
|
|
case 'hashtag':
|
|
mutation
|
|
.mutateAsync({
|
|
source: 'keyword',
|
|
filter: item,
|
|
action: section.id,
|
|
keyword: `#${params.tag_name}`
|
|
})
|
|
.then(() => refetch())
|
|
break
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
}
|
|
onPress={() => {}}
|
|
/>
|
|
)}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default TabSharedFilter
|