zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Merge remote-tracking branch 'upstream/main' into patch-3

Browse source
This commit is contained in:
Minseo Lee 2024-03-19 10:52:29 +09:00
commit ad43d594c9
174 changed files with 7262 additions and 5065 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx
View file

@ -56,7 +56,9 @@ export function AdultContentEnabledPref({
try {
mutate({
enabled: !(variables?.enabled ?? preferences?.adultContentEnabled),
enabled: !(
variables?.enabled ?? preferences?.moderationPrefs.adultContentEnabled
),
})
} catch (e) {
Toast.show(
@ -75,7 +77,10 @@ export function AdultContentEnabledPref({
<Toggle.Item
name={_(msg`Enable adult content in your feeds`)}
label={_(msg`Enable adult content in your feeds`)}
value={variables?.enabled ?? preferences?.adultContentEnabled}
value={
variables?.enabled ??
preferences?.moderationPrefs.adultContentEnabled
}
onChange={onToggleAdultContent}>
<View
style={[

91
src/screens/Onboarding/StepModeration/ModerationOption.tsx
View file

@ -1,40 +1,51 @@
import React from 'react'
import {View} from 'react-native'
import {LabelPreference} from '@atproto/api'
import {LabelPreference, InterpretedLabelValueDefinition} from '@atproto/api'
import {useLingui} from '@lingui/react'
import {msg} from '@lingui/macro'
import Animated, {Easing, Layout, FadeIn} from 'react-native-reanimated'
import {msg, Trans} from '@lingui/macro'
import {
CONFIGURABLE_LABEL_GROUPS,
ConfigurableLabelGroup,
usePreferencesQuery,
usePreferencesSetContentLabelMutation,
} from '#/state/queries/preferences'
import {atoms as a, useTheme} from '#/alf'
import {Text} from '#/components/Typography'
import * as ToggleButton from '#/components/forms/ToggleButton'
import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
export function ModerationOption({
labelGroup,
isMounted,
labelValueDefinition,
disabled,
}: {
labelGroup: ConfigurableLabelGroup
isMounted: React.MutableRefObject<boolean>
labelValueDefinition: InterpretedLabelValueDefinition
disabled?: boolean
}) {
const {_} = useLingui()
const t = useTheme()
const groupInfo = CONFIGURABLE_LABEL_GROUPS[labelGroup]
const {data: preferences} = usePreferencesQuery()
const {mutate, variables} = usePreferencesSetContentLabelMutation()
const label = labelValueDefinition.identifier
const visibility =
variables?.visibility ?? preferences?.contentLabels?.[labelGroup]
variables?.visibility ?? preferences?.moderationPrefs.labels?.[label]
const allLabelStrings = useGlobalLabelStrings()
const labelStrings =
labelValueDefinition.identifier in allLabelStrings
? allLabelStrings[labelValueDefinition.identifier]
: {
name: labelValueDefinition.identifier,
description: `Labeled "${labelValueDefinition.identifier}"`,
}
const onChange = React.useCallback(
(vis: string[]) => {
mutate({labelGroup, visibility: vis[0] as LabelPreference})
mutate({
label,
visibility: vis[0] as LabelPreference,
labelerDid: undefined,
})
},
[mutate, labelGroup],
[mutate, label],
)
const labels = {
@ -44,7 +55,7 @@ export function ModerationOption({
}
return (
<Animated.View
<View
style={[
a.flex_row,
a.justify_between,
@ -52,33 +63,37 @@ export function ModerationOption({
a.py_xs,
a.px_xs,
a.align_center,
]}
layout={Layout.easing(Easing.ease).duration(200)}
entering={isMounted.current ? FadeIn : undefined}>
<View style={[a.gap_xs, {width: '50%'}]}>
<Text style={[a.font_bold]}>{groupInfo.title}</Text>
]}>
<View style={[a.gap_xs, a.flex_1]}>
<Text style={[a.font_bold]}>{labelStrings.name}</Text>
<Text style={[t.atoms.text_contrast_medium, a.leading_snug]}>
{groupInfo.subtitle}
{labelStrings.description}
</Text>
</View>
<View style={[a.justify_center, {minHeight: 35}]}>
<ToggleButton.Group
label={_(
msg`Configure content filtering setting for category: ${groupInfo.title.toLowerCase()}`,
)}
values={[visibility ?? 'hide']}
onChange={onChange}>
<ToggleButton.Button name="hide" label={labels.hide}>
{labels.hide}
</ToggleButton.Button>
<ToggleButton.Button name="warn" label={labels.warn}>
{labels.warn}
</ToggleButton.Button>
<ToggleButton.Button name="ignore" label={labels.show}>
{labels.show}
</ToggleButton.Button>
</ToggleButton.Group>
<View style={[a.justify_center, {minHeight: 40}]}>
{disabled ? (
<Text style={[a.font_bold]}>
<Trans>Hide</Trans>
</Text>
) : (
<ToggleButton.Group
label={_(
msg`Configure content filtering setting for category: ${labelStrings.name.toLowerCase()}`,
)}
values={[visibility ?? 'hide']}
onChange={onChange}>
<ToggleButton.Button name="ignore" label={labels.show}>
{labels.show}
</ToggleButton.Button>
<ToggleButton.Button name="warn" label={labels.warn}>
{labels.warn}
</ToggleButton.Button>
<ToggleButton.Button name="hide" label={labels.hide}>
{labels.hide}
</ToggleButton.Button>
</ToggleButton.Group>
)}
</View>
</Animated.View>
</View>
)
}

48
src/screens/Onboarding/StepModeration/index.tsx
View file

@ -2,15 +2,10 @@ import React from 'react'
import {View} from 'react-native'
import {useLingui} from '@lingui/react'
import {msg, Trans} from '@lingui/macro'
import Animated, {Easing, Layout} from 'react-native-reanimated'
import {LABELS} from '@atproto/api'
import {atoms as a} from '#/alf'
import {
configurableAdultLabelGroups,
configurableOtherLabelGroups,
usePreferencesSetAdultContentMutation,
} from 'state/queries/preferences'
import {Divider} from '#/components/Divider'
import {usePreferencesSetAdultContentMutation} from 'state/queries/preferences'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
@ -28,14 +23,6 @@ import {AdultContentEnabledPref} from '#/screens/Onboarding/StepModeration/Adult
import {Context} from '#/screens/Onboarding/state'
import {IconCircle} from '#/components/IconCircle'
function AnimatedDivider() {
return (
<Animated.View layout={Layout.easing(Easing.ease).duration(200)}>
<Divider />
</Animated.View>
)
}
export function StepModeration() {
const {_} = useLingui()
const {track} = useAnalytics()
@ -52,7 +39,7 @@ export function StepModeration() {
const adultContentEnabled = !!(
(variables && variables.enabled) ||
(!variables && preferences?.adultContentEnabled)
(!variables && preferences?.moderationPrefs.adultContentEnabled)
)
const onContinue = React.useCallback(() => {
@ -86,22 +73,19 @@ export function StepModeration() {
<AdultContentEnabledPref mutate={mutate} variables={variables} />
<View style={[a.gap_sm, a.w_full]}>
{adultContentEnabled &&
configurableAdultLabelGroups.map((g, index) => (
<React.Fragment key={index}>
{index === 0 && <AnimatedDivider />}
<ModerationOption labelGroup={g} isMounted={isMounted} />
<AnimatedDivider />
</React.Fragment>
))}
{configurableOtherLabelGroups.map((g, index) => (
<React.Fragment key={index}>
{!adultContentEnabled && index === 0 && <AnimatedDivider />}
<ModerationOption labelGroup={g} isMounted={isMounted} />
<AnimatedDivider />
</React.Fragment>
))}
<ModerationOption
labelValueDefinition={LABELS.porn}
disabled={!adultContentEnabled}
/>
<ModerationOption
labelValueDefinition={LABELS.sexual}
disabled={!adultContentEnabled}
/>
<ModerationOption
labelValueDefinition={LABELS['graphic-media']}
disabled={!adultContentEnabled}
/>
<ModerationOption labelValueDefinition={LABELS.nudity} />
</View>
</>
)}