From 02bbc5e0d558eaab1b1ce1c3dacfbea588ae832f Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Tue, 13 Feb 2024 12:40:24 -0600 Subject: [PATCH] Hook up data to settings page --- src/lib/moderation.ts | 23 +++++++- .../ProfileModerationService/Header.tsx | 37 ++++++------- .../ProfileModerationService/index.tsx | 53 ++++++++++--------- 3 files changed, 69 insertions(+), 44 deletions(-) diff --git a/src/lib/moderation.ts b/src/lib/moderation.ts index 3c3690a15c..9d7921c197 100644 --- a/src/lib/moderation.ts +++ b/src/lib/moderation.ts @@ -1,4 +1,10 @@ -import {ModerationCause, ProfileModeration, PostModeration} from '@atproto/api' +import { + ModerationCause, + ProfileModeration, + PostModeration, + LABEL_GROUPS, + LabelGroupDefinition, +} from '@atproto/api' export function getProfileModerationCauses( moderation: ProfileModeration, @@ -70,3 +76,18 @@ export function getModerationCauseKey(cause: ModerationCause): string { } return `${cause.type}:${source}` } + +export function getLabelGroupsFromLabels(labels: string[]) { + const groups: LabelGroupDefinition[] = [] + + for (const label of labels) { + for (const group in LABEL_GROUPS) { + const def = LABEL_GROUPS[group as LabelGroupDefinition['id']] + if (def.labels.find(l => l.id === label)) { + groups.push(def) + } + } + } + + return Array.from(groups) +} diff --git a/src/screens/ProfileModerationService/Header.tsx b/src/screens/ProfileModerationService/Header.tsx index 2f3a5ef2ec..dde7d520ca 100644 --- a/src/screens/ProfileModerationService/Header.tsx +++ b/src/screens/ProfileModerationService/Header.tsx @@ -30,9 +30,9 @@ import {Bars3_Stroke2_Corner0_Rounded as Bars} from '#/components/icons/Bars' import {Divider} from '#/components/Divider' export function Header({ - info, + modservice, }: { - info: AppBskyModerationDefs.ModServiceViewDetailed + modservice: AppBskyModerationDefs.ModServiceViewDetailed }) { const t = useTheme() const {gtMobile} = useBreakpoints() @@ -81,7 +81,7 @@ export function Header({ - + @@ -98,8 +98,8 @@ export function Header({ a.overflow_hidden, ]}> c[1])} - locations={tokens.gradients.bonfire.values.map(c => c[0])} + colors={tokens.gradients.midnight.values.map(c => c[1])} + locations={tokens.gradients.midnight.values.map(c => c[0])} start={{x: 0, y: 0}} end={{x: 1, y: 1}} style={[a.absolute, a.inset_0]} @@ -115,10 +115,11 @@ export function Header({ onPress={emitSoftReset} style={[a.justify_start]}> - {/* A really long and complex title for a moderation service */} - {info.creator.displayName - ? sanitizeDisplayName(info.creator.displayName) - : sanitizeHandle(info.creator.handle, '@')} + {modservice.displayName + ? sanitizeDisplayName(modservice.displayName) + : modservice.creator.displayName + ? sanitizeDisplayName(modservice.creator.displayName) + : sanitizeHandle(modservice.creator.handle, '@')} @@ -139,7 +140,7 @@ export function Header({ - + )} @@ -148,9 +149,9 @@ export function Header({ } function CommonControls({ - info, + modservice, }: { - info: AppBskyModerationDefs.ModServiceViewDetailed + modservice: AppBskyModerationDefs.ModServiceViewDetailed }) { const t = useTheme() const {_} = useLingui() @@ -158,19 +159,19 @@ function CommonControls({ const {openModal} = useModalControls() const onPressShare = React.useCallback(() => { - const url = makeProfileLink(info.creator, 'modservice') + const url = makeProfileLink(modservice.creator, 'modservice') shareUrl(url) // track('CustomFeed:Share') TODO - }, [info /*, track*/]) + }, [modservice /*, track*/]) const onPressReport = React.useCallback(() => { - if (!info) return + if (!modservice) return openModal({ name: 'report', - uri: info.uri, - cid: info.cid, + uri: modservice.uri, + cid: modservice.cid, }) - }, [openModal, info]) + }, [openModal, modservice]) const dropdownItems: DropdownItem[] = React.useMemo(() => { return [ diff --git a/src/screens/ProfileModerationService/index.tsx b/src/screens/ProfileModerationService/index.tsx index cf776c77a3..7aee6f80fb 100644 --- a/src/screens/ProfileModerationService/index.tsx +++ b/src/screens/ProfileModerationService/index.tsx @@ -1,10 +1,9 @@ import React from 'react' import {Dimensions, View} from 'react-native' import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {AppBskyModerationDefs, LabelGroupDefinition} from '@atproto/api' +import {AppBskyModerationDefs} from '@atproto/api' import {Trans, msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {LABEL_GROUPS} from '@atproto/api' import {usePalette} from '#/lib/hooks/usePalette' import {CommonNavigatorParams} from '#/lib/routes/types' @@ -28,6 +27,8 @@ import {useSession} from '#/state/session' import {useLikeMutation, useUnlikeMutation} from '#/state/queries/like' import {sanitizeHandle} from '#/lib/strings/handles' +import {getLabelGroupsFromLabels} from '#/lib/moderation' + import {useTheme, atoms as a} from '#/alf' import {Text} from '#/components/Typography' import {Loader} from '#/components/Loader' @@ -108,7 +109,7 @@ function ProfileModservicecreenIntermediate({modDid}: {modDid: string}) { ) : preferences && info ? ( - + ) : ( ( - modInfo.viewer?.like || '', + modservice.viewer?.like || '', ) - const groups = React.useMemo< - [keyof typeof LABEL_GROUPS, LabelGroupDefinition][] - >(() => { - return Object.entries(LABEL_GROUPS).filter(([, def]) => def.configurable) - }, []) + const groups = React.useMemo(() => { + return getLabelGroupsFromLabels(modservice.policies.labelValues).filter( + def => def.configurable, + ) + }, [modservice.policies.labelValues]) const isLiked = !!likeUri // const isSaved = false // TODO @@ -150,7 +151,7 @@ export function ProfileModserviceScreenInner({ // !unpinnedFeed && // (!!pinnedFeed || preferences.feeds.pinned.includes(feedInfo.uri)) - useSetTitle(modInfo.creator.displayName || modInfo.creator.handle) + useSetTitle(modservice.creator.displayName || modservice.creator.handle) // event handlers // @@ -163,7 +164,7 @@ export function ProfileModserviceScreenInner({ track('CustomFeed:Unlike') setLikeUri('') } else { - const res = await likeMod({uri: modInfo.uri, cid: modInfo.cid}) + const res = await likeMod({uri: modservice.uri, cid: modservice.cid}) track('CustomFeed:Like') setLikeUri(res.uri) } @@ -175,7 +176,7 @@ export function ProfileModserviceScreenInner({ ) logger.error('Failed up toggle like', {error: err}) } - }, [likeUri, isLiked, modInfo, likeMod, unlikeMod, track, _]) + }, [likeUri, isLiked, modservice, likeMod, unlikeMod, track, _]) return ( -
+
- {modInfo.description ? ( + {modservice.description ? ( ) : ( @@ -203,7 +204,9 @@ export function ProfileModserviceScreenInner({ t.atoms.text_contrast_medium, {fontStyle: 'italic'}, ]}> - No description + + Moderation service managed by @{modservice.creator.handle} + )} @@ -217,8 +220,8 @@ export function ProfileModserviceScreenInner({ Operated by{' '} . Handles reports of anti-social behavior, illegal content, unwanted @@ -243,11 +246,11 @@ export function ProfileModserviceScreenInner({ )} - {typeof modInfo.likeCount === 'number' && ( + {typeof modservice.likeCount === 'number' && ( - Liked by {modInfo.likeCount}{' '} - {pluralize(modInfo.likeCount, 'user')} + Liked by {modservice.likeCount}{' '} + {pluralize(modservice.likeCount, 'user')} )} @@ -255,11 +258,11 @@ export function ProfileModserviceScreenInner({ - {groups.map(([name, def]) => { + {groups.map(def => { return ( - + ) })}