mirror of
https://github.com/tooot-app/app
synced 2025-06-05 22:19:13 +02:00
Fix #600
This commit is contained in:
xmflsct
218
src/screens/Tabs/Shared/Report.tsx
Normal file
218
src/screens/Tabs/Shared/Report.tsx
Normal file
@ -0,0 +1,218 @@
|
||||
import apiInstance from '@api/instance'
|
||||
import ComponentAccount from '@components/Account'
|
||||
import { HeaderLeft, HeaderRight } from '@components/Header'
|
||||
import Selections from '@components/Selections'
|
||||
import CustomText from '@components/Text'
|
||||
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
|
||||
import { useRulesQuery } from '@utils/queryHooks/reports'
|
||||
import { getInstanceUri } from '@utils/slices/instancesSlice'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Platform, ScrollView, TextInput, View } from 'react-native'
|
||||
import { Switch } from 'react-native-gesture-handler'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
const TabSharedReport: React.FC<TabSharedStackScreenProps<'Tab-Shared-Report'>> = ({
|
||||
navigation,
|
||||
route: {
|
||||
params: { account, status }
|
||||
}
|
||||
}) => {
|
||||
const { colors } = useTheme()
|
||||
const { t } = useTranslation('screenTabs')
|
||||
|
||||
const [categories, setCategories] = useState<
|
||||
{ selected: boolean; content: string; type: 'spam' | 'other' | 'violation' }[]
|
||||
>([
|
||||
{ selected: true, content: t('shared.report.reasons.spam'), type: 'spam' },
|
||||
{ selected: false, content: t('shared.report.reasons.other'), type: 'other' },
|
||||
{ selected: false, content: t('shared.report.reasons.violation'), type: 'violation' }
|
||||
])
|
||||
const [rules, setRules] = useState<{ selected: boolean; content: string; id: string }[]>([])
|
||||
const [forward, setForward] = useState<boolean>(true)
|
||||
const [comment, setComment] = useState('')
|
||||
|
||||
const [isReporting, setIsReporting] = useState(false)
|
||||
useEffect(() => {
|
||||
navigation.setOptions({
|
||||
title: t('shared.report.name', { acct: `@${account.acct}` }),
|
||||
headerLeft: () => (
|
||||
<HeaderLeft
|
||||
type='text'
|
||||
content={t('common:buttons.cancel')}
|
||||
onPress={() => navigation.goBack()}
|
||||
/>
|
||||
),
|
||||
headerRight: () => (
|
||||
<HeaderRight
|
||||
type='text'
|
||||
content={t('shared.report.report')}
|
||||
destructive
|
||||
onPress={() => {
|
||||
const body = new FormData()
|
||||
body.append('account_id', account.id)
|
||||
status && body.append('status_ids[]', status.id)
|
||||
comment.length && body.append('comment', comment)
|
||||
body.append('forward', forward.toString())
|
||||
body.append('category', categories.find(category => category.selected)?.type || 'other')
|
||||
rules.filter(rule => rule.selected).forEach(rule => body.append('rule_ids[]', rule.id))
|
||||
|
||||
apiInstance({ method: 'post', url: 'reports', body })
|
||||
.then(() => {
|
||||
setIsReporting(false)
|
||||
navigation.pop(1)
|
||||
})
|
||||
.catch(() => {
|
||||
setIsReporting(false)
|
||||
})
|
||||
}}
|
||||
loading={isReporting}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}, [isReporting, comment, forward, categories, rules])
|
||||
|
||||
const instanceUri = useSelector(getInstanceUri)
|
||||
const localInstance = account?.acct.includes('@')
|
||||
? account?.acct.includes(`@${instanceUri}`)
|
||||
: true
|
||||
|
||||
const rulesQuery = useRulesQuery()
|
||||
useEffect(() => {
|
||||
if (rulesQuery.data) {
|
||||
setRules(rulesQuery.data.map(rule => ({ ...rule, selected: false, content: rule.text })))
|
||||
}
|
||||
}, [rulesQuery.data])
|
||||
|
||||
return (
|
||||
<ScrollView>
|
||||
<View
|
||||
style={{
|
||||
margin: StyleConstants.Spacing.Global.PagePadding,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.red,
|
||||
borderRadius: 8
|
||||
}}
|
||||
>
|
||||
<ComponentAccount account={account} props={{}} />
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
|
||||
marginTop: StyleConstants.Spacing.M
|
||||
}}
|
||||
>
|
||||
{!localInstance ? (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: StyleConstants.Spacing.L
|
||||
}}
|
||||
>
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
style={{ color: colors.primaryDefault, paddingRight: StyleConstants.Spacing.M }}
|
||||
numberOfLines={2}
|
||||
>
|
||||
{t('shared.report.forward.heading', { instance: account.acct.match(/@(.*)/)?.[1] })}
|
||||
</CustomText>
|
||||
<Switch
|
||||
value={forward}
|
||||
onValueChange={setForward}
|
||||
trackColor={{ true: colors.blue, false: colors.disabled }}
|
||||
/>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
style={{ color: colors.primaryDefault, marginBottom: StyleConstants.Spacing.S }}
|
||||
>
|
||||
{t('shared.report.reasons.heading')}
|
||||
</CustomText>
|
||||
<View style={{ marginLeft: StyleConstants.Spacing.M }}>
|
||||
<Selections options={categories} setOptions={setCategories} />
|
||||
</View>
|
||||
|
||||
{categories[1].selected || comment.length ? (
|
||||
<>
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
style={{
|
||||
color: colors.primaryDefault,
|
||||
marginTop: StyleConstants.Spacing.M,
|
||||
marginBottom: StyleConstants.Spacing.XS
|
||||
}}
|
||||
>
|
||||
{t('shared.report.comment.heading')}
|
||||
</CustomText>
|
||||
<View
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
marginVertical: StyleConstants.Spacing.S,
|
||||
padding: StyleConstants.Spacing.S,
|
||||
borderColor: colors.border,
|
||||
flexDirection: 'column',
|
||||
alignItems: 'stretch'
|
||||
}}
|
||||
>
|
||||
<TextInput
|
||||
style={{
|
||||
flex: 1,
|
||||
fontSize: StyleConstants.Font.Size.M,
|
||||
color: colors.primaryDefault,
|
||||
minHeight:
|
||||
Platform.OS === 'ios' ? StyleConstants.Font.LineHeight.M * 5 : undefined
|
||||
}}
|
||||
value={comment}
|
||||
onChangeText={setComment}
|
||||
multiline={true}
|
||||
numberOfLines={Platform.OS === 'android' ? 5 : undefined}
|
||||
textAlignVertical='top'
|
||||
/>
|
||||
|
||||
<View style={{ flexDirection: 'row', alignSelf: 'flex-end' }}>
|
||||
<CustomText
|
||||
fontStyle='S'
|
||||
style={{ paddingLeft: StyleConstants.Spacing.XS, color: colors.secondary }}
|
||||
>
|
||||
{comment.length} / 1000
|
||||
</CustomText>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{rules.length ? (
|
||||
<>
|
||||
<CustomText
|
||||
fontStyle='M'
|
||||
style={{
|
||||
color: categories[2].selected ? colors.primaryDefault : colors.disabled,
|
||||
marginTop: StyleConstants.Spacing.M,
|
||||
marginBottom: StyleConstants.Spacing.S
|
||||
}}
|
||||
>
|
||||
{t('shared.report.violatedRules.heading')}
|
||||
</CustomText>
|
||||
<View style={{ marginLeft: StyleConstants.Spacing.M }}>
|
||||
<Selections
|
||||
disabled={!categories[2].selected}
|
||||
multiple
|
||||
options={rules}
|
||||
setOptions={setRules}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
) : null}
|
||||
</View>
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
|
||||
export default TabSharedReport
|
||||
@ -1,13 +1,14 @@
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack'
|
||||
import TabSharedAccount from '@screens/Tabs/Shared/Account'
|
||||
import TabSharedAccountInLists from '@screens/Tabs/Shared/AccountInLists'
|
||||
import TabSharedAttachments from '@screens/Tabs/Shared/Attachments'
|
||||
import TabSharedHashtag from '@screens/Tabs/Shared/Hashtag'
|
||||
import TabSharedHistory from '@screens/Tabs/Shared/History'
|
||||
import TabSharedReport from '@screens/Tabs/Shared/Report'
|
||||
import TabSharedSearch from '@screens/Tabs/Shared/Search'
|
||||
import TabSharedToot from '@screens/Tabs/Shared/Toot'
|
||||
import TabSharedUsers from '@screens/Tabs/Shared/Users'
|
||||
import React from 'react'
|
||||
import TabSharedAccountInLists from './AccountInLists'
|
||||
|
||||
const TabShared = ({ Stack }: { Stack: ReturnType<typeof createNativeStackNavigator> }) => {
|
||||
return (
|
||||
@ -37,6 +38,12 @@ const TabShared = ({ Stack }: { Stack: ReturnType<typeof createNativeStackNaviga
|
||||
name='Tab-Shared-History'
|
||||
component={TabSharedHistory}
|
||||
/>
|
||||
<Stack.Screen
|
||||
key='Tab-Shared-Report'
|
||||
name='Tab-Shared-Report'
|
||||
component={TabSharedReport}
|
||||
options={{ presentation: 'modal' }}
|
||||
/>
|
||||
<Stack.Screen key='Tab-Shared-Search' name='Tab-Shared-Search' component={TabSharedSearch} />
|
||||
<Stack.Screen key='Tab-Shared-Toot' name='Tab-Shared-Toot' component={TabSharedToot} />
|
||||
<Stack.Screen key='Tab-Shared-Users' name='Tab-Shared-Users' component={TabSharedUsers} />
|
||||
|
||||
Reference in New Issue
Block a user