diff options
Diffstat (limited to 'src/screens/Onboarding/StepModeration')
3 files changed, 0 insertions, 340 deletions
diff --git a/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx b/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx deleted file mode 100644 index 7563bece1..000000000 --- a/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import React from 'react' -import {View} from 'react-native' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {UseMutateFunction} from '@tanstack/react-query' - -import {logger} from '#/logger' -import {isIOS} from '#/platform/detection' -import {usePreferencesQuery} from '#/state/queries/preferences' -import * as Toast from '#/view/com/util/Toast' -import {atoms as a, useTheme} from '#/alf' -import * as Toggle from '#/components/forms/Toggle' -import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' -import * as Prompt from '#/components/Prompt' -import {Text} from '#/components/Typography' - -function Card({children}: React.PropsWithChildren<{}>) { - const t = useTheme() - return ( - <View - style={[ - a.w_full, - a.flex_row, - a.align_center, - a.gap_sm, - a.px_lg, - a.py_md, - a.rounded_sm, - a.mb_md, - t.atoms.bg_contrast_50, - ]}> - {children} - </View> - ) -} - -export function AdultContentEnabledPref({ - mutate, - variables, -}: { - mutate: UseMutateFunction<void, unknown, {enabled: boolean}, unknown> - variables: {enabled: boolean} | undefined -}) { - const {_} = useLingui() - const t = useTheme() - const prompt = Prompt.usePromptControl() - - // Reuse logic here form ContentFilteringSettings.tsx - const {data: preferences} = usePreferencesQuery() - - const onToggleAdultContent = React.useCallback(async () => { - if (isIOS) { - prompt.open() - return - } - - try { - mutate({ - enabled: !( - variables?.enabled ?? preferences?.moderationPrefs.adultContentEnabled - ), - }) - } catch (e) { - Toast.show( - _(msg`There was an issue syncing your preferences with the server`), - ) - logger.error('Failed to update preferences with server', {error: e}) - } - }, [variables, preferences, mutate, _, prompt]) - - if (!preferences) return null - - return ( - <> - {preferences.userAge && preferences.userAge >= 18 ? ( - <View style={[a.w_full, a.px_xs]}> - <Toggle.Item - name={_(msg`Enable adult content in your feeds`)} - label={_(msg`Enable adult content in your feeds`)} - value={ - variables?.enabled ?? - preferences?.moderationPrefs.adultContentEnabled - } - onChange={onToggleAdultContent}> - <View - style={[ - a.flex_row, - a.w_full, - a.justify_between, - a.align_center, - a.py_md, - ]}> - <Text style={[a.font_bold]}> - <Trans>Enable Adult Content</Trans> - </Text> - <Toggle.Switch /> - </View> - </Toggle.Item> - </View> - ) : ( - <Card> - <CircleInfo size="sm" fill={t.palette.contrast_500} /> - <Text - style={[ - a.flex_1, - t.atoms.text_contrast_medium, - a.leading_snug, - {paddingTop: 1}, - ]}> - <Trans>You must be 18 years or older to enable adult content</Trans> - </Text> - </Card> - )} - - <Prompt.Outer control={prompt}> - <Prompt.TitleText> - <Trans>Adult Content</Trans> - </Prompt.TitleText> - <Prompt.DescriptionText> - <Trans> - Due to Apple policies, adult content can only be enabled on the web - after completing sign up. - </Trans> - </Prompt.DescriptionText> - <Prompt.Actions> - <Prompt.Action onPress={() => prompt.close()} cta={_(msg`OK`)} /> - </Prompt.Actions> - </Prompt.Outer> - </> - ) -} diff --git a/src/screens/Onboarding/StepModeration/ModerationOption.tsx b/src/screens/Onboarding/StepModeration/ModerationOption.tsx deleted file mode 100644 index d6334e6bd..000000000 --- a/src/screens/Onboarding/StepModeration/ModerationOption.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import React from 'react' -import {View} from 'react-native' -import {InterpretedLabelValueDefinition, LabelPreference} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' - -import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings' -import { - usePreferencesQuery, - usePreferencesSetContentLabelMutation, -} from '#/state/queries/preferences' -import {atoms as a, useTheme} from '#/alf' -import * as ToggleButton from '#/components/forms/ToggleButton' -import {Text} from '#/components/Typography' - -export function ModerationOption({ - labelValueDefinition, - disabled, -}: { - labelValueDefinition: InterpretedLabelValueDefinition - disabled?: boolean -}) { - const {_} = useLingui() - const t = useTheme() - const {data: preferences} = usePreferencesQuery() - const {mutate, variables} = usePreferencesSetContentLabelMutation() - const label = labelValueDefinition.identifier - const visibility = - 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({ - label, - visibility: vis[0] as LabelPreference, - labelerDid: undefined, - }) - }, - [mutate, label], - ) - - const labels = { - hide: _(msg`Hide`), - warn: _(msg`Warn`), - show: _(msg`Show`), - } - - return ( - <View - style={[ - a.flex_row, - a.justify_between, - a.gap_sm, - a.py_xs, - a.px_xs, - a.align_center, - ]}> - <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]}> - {labelStrings.description} - </Text> - </View> - <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}> - <ToggleButton.ButtonText>{labels.show}</ToggleButton.ButtonText> - </ToggleButton.Button> - <ToggleButton.Button name="warn" label={labels.warn}> - <ToggleButton.ButtonText>{labels.warn}</ToggleButton.ButtonText> - </ToggleButton.Button> - <ToggleButton.Button name="hide" label={labels.hide}> - <ToggleButton.ButtonText>{labels.hide}</ToggleButton.ButtonText> - </ToggleButton.Button> - </ToggleButton.Group> - )} - </View> - </View> - ) -} diff --git a/src/screens/Onboarding/StepModeration/index.tsx b/src/screens/Onboarding/StepModeration/index.tsx deleted file mode 100644 index d494f48dd..000000000 --- a/src/screens/Onboarding/StepModeration/index.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React from 'react' -import {View} from 'react-native' -import {LABELS} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' - -import {useAnalytics} from '#/lib/analytics/analytics' -import {logEvent} from '#/lib/statsig/statsig' -import {usePreferencesQuery} from '#/state/queries/preferences' -import {usePreferencesSetAdultContentMutation} from 'state/queries/preferences' -import { - DescriptionText, - OnboardingControls, - TitleText, -} from '#/screens/Onboarding/Layout' -import {Context} from '#/screens/Onboarding/state' -import {AdultContentEnabledPref} from '#/screens/Onboarding/StepModeration/AdultContentEnabledPref' -import {ModerationOption} from '#/screens/Onboarding/StepModeration/ModerationOption' -import {atoms as a} from '#/alf' -import {Button, ButtonIcon, ButtonText} from '#/components/Button' -import {IconCircle} from '#/components/IconCircle' -import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' -import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash' -import {Loader} from '#/components/Loader' - -export function StepModeration() { - const {_} = useLingui() - const {track} = useAnalytics() - const {state, dispatch} = React.useContext(Context) - const {data: preferences} = usePreferencesQuery() - const {mutate, variables} = usePreferencesSetAdultContentMutation() - - // We need to know if the screen is mounted so we know if we want to run entering animations - // https://github.com/software-mansion/react-native-reanimated/discussions/2513 - const isMounted = React.useRef(false) - React.useLayoutEffect(() => { - isMounted.current = true - }, []) - - const adultContentEnabled = !!( - (variables && variables.enabled) || - (!variables && preferences?.moderationPrefs.adultContentEnabled) - ) - - const onContinue = React.useCallback(() => { - dispatch({type: 'next'}) - track('OnboardingV2:StepModeration:End') - logEvent('onboarding:moderation:nextPressed', {}) - }, [track, dispatch]) - - React.useEffect(() => { - track('OnboardingV2:StepModeration:Start') - }, [track]) - - return ( - <View style={[a.align_start]}> - <IconCircle icon={EyeSlash} style={[a.mb_2xl]} /> - - <TitleText> - <Trans>You're in control</Trans> - </TitleText> - <DescriptionText style={[a.mb_xl]}> - <Trans> - Select what you want to see (or not see), and we’ll handle the rest. - </Trans> - </DescriptionText> - - {!preferences ? ( - <View style={[a.pt_md]}> - <Loader size="xl" /> - </View> - ) : ( - <> - <AdultContentEnabledPref mutate={mutate} variables={variables} /> - - <View style={[a.gap_sm, a.w_full]}> - <ModerationOption - labelValueDefinition={LABELS.porn} - disabled={!adultContentEnabled} - /> - <ModerationOption - labelValueDefinition={LABELS.sexual} - disabled={!adultContentEnabled} - /> - <ModerationOption - labelValueDefinition={LABELS['graphic-media']} - disabled={!adultContentEnabled} - /> - <ModerationOption labelValueDefinition={LABELS.nudity} /> - </View> - </> - )} - - <OnboardingControls.Portal> - <Button - key={state.activeStep} // remove focus state on nav - variant="gradient" - color="gradient_sky" - size="large" - label={_(msg`Continue to next step`)} - onPress={onContinue}> - <ButtonText> - <Trans>Continue</Trans> - </ButtonText> - <ButtonIcon icon={ChevronRight} position="right" /> - </Button> - </OnboardingControls.Portal> - </View> - ) -} |