2022-12-03 15:50:15 +01:00
|
|
|
import Button from '@components/Button'
|
|
|
|
import haptics from '@components/haptics'
|
|
|
|
import { HeaderRight } from '@components/Header'
|
|
|
|
import { MenuRow } from '@components/Menu'
|
|
|
|
import CustomText from '@components/Text'
|
|
|
|
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
|
|
|
|
import { useAccountInListsQuery } from '@utils/queryHooks/account'
|
|
|
|
import { useListAccountsMutation, useListsQuery } from '@utils/queryHooks/lists'
|
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
|
|
import React, { useEffect } from 'react'
|
|
|
|
import { useTranslation } from 'react-i18next'
|
2022-12-03 16:50:54 +01:00
|
|
|
import { SectionList, View } from 'react-native'
|
2022-12-03 15:50:15 +01:00
|
|
|
|
|
|
|
const TabSharedAccountInLists: React.FC<
|
|
|
|
TabSharedStackScreenProps<'Tab-Shared-Account-In-Lists'>
|
|
|
|
> = ({
|
|
|
|
navigation,
|
|
|
|
route: {
|
|
|
|
params: { account }
|
|
|
|
}
|
|
|
|
}) => {
|
|
|
|
const { colors } = useTheme()
|
2022-12-23 15:53:40 +01:00
|
|
|
const { t } = useTranslation(['common', 'screenTabs'])
|
2022-12-03 15:50:15 +01:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
navigation.setOptions({
|
|
|
|
presentation: 'modal',
|
2022-12-23 15:53:40 +01:00
|
|
|
title: t('screenTabs:shared.accountInLists.name', { username: account.username }),
|
2023-01-26 23:07:13 +01:00
|
|
|
headerRight: () => (
|
|
|
|
<HeaderRight
|
|
|
|
type='text'
|
|
|
|
content={t('common:buttons.done')}
|
|
|
|
onPress={() => navigation.pop(1)}
|
|
|
|
/>
|
|
|
|
)
|
2022-12-03 15:50:15 +01:00
|
|
|
})
|
|
|
|
}, [])
|
|
|
|
|
2022-12-12 20:43:45 +01:00
|
|
|
const listsQuery = useListsQuery()
|
2022-12-03 15:50:15 +01:00
|
|
|
const accountInListsQuery = useAccountInListsQuery({ id: account.id })
|
|
|
|
|
|
|
|
const sections = [
|
2022-12-23 15:53:40 +01:00
|
|
|
{
|
|
|
|
id: 'in',
|
|
|
|
title: t('screenTabs:shared.accountInLists.inLists'),
|
|
|
|
data: accountInListsQuery.data || []
|
|
|
|
},
|
2022-12-03 15:50:15 +01:00
|
|
|
{
|
|
|
|
id: 'out',
|
2022-12-23 15:53:40 +01:00
|
|
|
title: t('screenTabs:shared.accountInLists.notInLists'),
|
2022-12-03 15:50:15 +01:00
|
|
|
data:
|
2022-12-12 20:43:45 +01:00
|
|
|
listsQuery.data?.filter(({ id }) =>
|
|
|
|
accountInListsQuery.data?.length
|
|
|
|
? accountInListsQuery.data.filter(d => d.id !== id).length
|
|
|
|
: true
|
2022-12-03 15:50:15 +01:00
|
|
|
) || []
|
|
|
|
}
|
|
|
|
]
|
|
|
|
|
|
|
|
const listAccountsMutation = useListAccountsMutation({})
|
|
|
|
|
|
|
|
return (
|
|
|
|
<SectionList
|
|
|
|
style={{ padding: StyleConstants.Spacing.Global.PagePadding }}
|
|
|
|
sections={sections}
|
2023-01-26 23:07:13 +01:00
|
|
|
SectionSeparatorComponent={props =>
|
|
|
|
props.leadingItem && props.trailingSection ? (
|
|
|
|
<View style={{ height: StyleConstants.Spacing.XL }} />
|
2022-12-03 15:50:15 +01:00
|
|
|
) : null
|
2023-01-26 23:07:13 +01:00
|
|
|
}
|
2022-12-03 15:50:15 +01:00
|
|
|
renderSectionHeader={({ section: { title, data } }) =>
|
|
|
|
data.length ? (
|
|
|
|
<CustomText fontStyle='S' style={{ color: colors.secondary }} children={title} />
|
|
|
|
) : null
|
|
|
|
}
|
|
|
|
renderItem={({ index, item, section }) => (
|
|
|
|
<MenuRow
|
|
|
|
key={index}
|
2023-01-25 00:15:46 +01:00
|
|
|
iconFront='list'
|
2022-12-03 15:50:15 +01:00
|
|
|
content={
|
|
|
|
<Button
|
|
|
|
type='icon'
|
2023-01-25 00:15:46 +01:00
|
|
|
content={section.id === 'in' ? 'minus' : 'plus'}
|
2022-12-03 15:50:15 +01:00
|
|
|
round
|
|
|
|
disabled={accountInListsQuery.isFetching}
|
|
|
|
onPress={() => {
|
|
|
|
switch (section.id) {
|
|
|
|
case 'in':
|
|
|
|
listAccountsMutation
|
|
|
|
.mutateAsync({
|
|
|
|
type: 'delete',
|
|
|
|
payload: { id: item.id, accounts: [account.id] }
|
|
|
|
})
|
|
|
|
.then(() => {
|
|
|
|
haptics('Light')
|
|
|
|
accountInListsQuery.refetch()
|
|
|
|
})
|
|
|
|
break
|
|
|
|
case 'out':
|
|
|
|
listAccountsMutation
|
|
|
|
.mutateAsync({
|
|
|
|
type: 'add',
|
|
|
|
payload: { id: item.id, accounts: [account.id] }
|
|
|
|
})
|
|
|
|
.then(() => {
|
|
|
|
haptics('Light')
|
|
|
|
accountInListsQuery.refetch()
|
|
|
|
})
|
|
|
|
break
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
title={item.title}
|
|
|
|
/>
|
|
|
|
)}
|
2023-01-26 23:07:13 +01:00
|
|
|
/>
|
2022-12-03 15:50:15 +01:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default TabSharedAccountInLists
|