From 90662d6cc3d630ff4765c22f0ff6b570e61c8d3b Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 15 Feb 2024 11:57:27 -0600 Subject: [PATCH] Clean up Mod screen --- src/screens/Moderation/index.tsx | 113 ++++++++----------------------- src/state/queries/modservice.ts | 2 + 2 files changed, 32 insertions(+), 83 deletions(-) diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index d1d2030ef5..620133f1ad 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -40,9 +40,9 @@ import {useLabelGroupStrings} from '#/lib/moderation/useLabelGroupStrings' import * as Dialog from '#/components/Dialog' import {Button} from '#/components/Button' import { - getLabelGroupsFromLabels, getModerationServiceTitle, useConfigurableLabelGroups, + getLabelGroupToLabelerMap, } from '#/lib/moderation' import { @@ -91,9 +91,19 @@ export function ModerationScreen( error: preferencesError, data: preferences, } = usePreferencesQuery() + const { + isLoading: isModServicesLoading, + data: modservices, + error: modservicesError, + } = useModServicesDetailedInfoQuery({ + dids: preferences ? preferences.moderationOpts.mods.map(m => m.did) : [], + }) const {gtMobile} = useBreakpoints() const {height} = useSafeAreaFrame() + const isLoading = isPreferencesLoading || isModServicesLoading + const error = preferencesError || modservicesError + return ( - {isPreferencesLoading ? ( + {isLoading ? ( - ) : preferencesError || !preferences ? ( + ) : error || !(preferences && modservices) ? ( ) : ( - + )} ) } -function ModerationScreenIntermediate({ - preferences, -}: { - preferences: UsePreferencesQueryResponse -}) { - const t = useTheme() - const {_} = useLingui() - const { - isLoading: isModServicesLoading, - data: modservices, - error: modservicesError, - } = useModServicesDetailedInfoQuery({ - dids: preferences.moderationOpts.mods.map(m => m.did), - }) - - return isModServicesLoading ? ( - - - - ) : modservicesError || !modservices ? ( - - ) : ( - - ) -} - export function ModerationScreenInner({ preferences, modservices, @@ -169,15 +148,17 @@ export function ModerationScreenInner({ const setMinimalShellMode = useSetMinimalShellMode() const {screen} = useAnalytics() const {gtTablet} = useBreakpoints() - const labelGroupStrings = useLabelGroupStrings() const modSettingsDialogControl = Dialog.useDialogControl() - const [settingsDialogProps, setSettingsDialogProps] = React.useState({ - // @ts-ignore - labelGroup: '', + // prefill with valid value to appease TS + labelGroup: 'intolerance', modservices: [], }) + const groups = useConfigurableLabelGroups() + const labelGroupToLabelerMap = React.useMemo(() => { + return getLabelGroupToLabelerMap(modservices) + }, [modservices]) useFocusEffect( React.useCallback(() => { @@ -186,34 +167,6 @@ export function ModerationScreenInner({ }, [screen, setMinimalShellMode]), ) - const groups = useConfigurableLabelGroups() - - const didToModServiceMap = React.useMemo< - Record - >(() => { - return modservices.reduce((acc, modservice) => { - return { - ...acc, - [modservice.creator.did]: modservice, - } - }, {}) - }, [modservices]) - const labelGroupToModServiceMap = React.useMemo(() => { - const groups: Partial> = {} - - for (const modservice of modservices) { - const labelGroups = getLabelGroupsFromLabels( - modservice.policies.labelValues, - ) - for (const group of labelGroups) { - const g = (groups[group.id] = groups[group.id] || []) - g.push(modservice.creator.did) - } - } - - return groups - }, [modservices]) - const openModSettingsDialog = React.useCallback( ({labelGroup, modservices}: Omit) => { setSettingsDialogProps({ @@ -304,19 +257,15 @@ export function ModerationScreenInner({ {groups.map((def, i) => { - const groupStrings = labelGroupStrings[def.id] - const modDids = labelGroupToModServiceMap[def.id] || [] - const mods = modDids.map(did => didToModServiceMap[did]) + const labelers = labelGroupToLabelerMap[def.id] || [] return ( {i !== 0 && } ) @@ -338,21 +287,18 @@ export function ModerationScreenInner({ function LabelGroup({ labelGroup, - name, - description, labelers: mods, preferences, openModSettingsDialog, }: { labelGroup: LabelGroupDefinition['id'] - name: string - description: string labelers: AppBskyModerationDefs.ModServiceViewDetailed[] preferences: UsePreferencesQueryResponse openModSettingsDialog: (props: SettingsDialogProps) => void }) { const t = useTheme() const {_} = useLingui() + const labelGroupStrings = useLabelGroupStrings() const {mutateAsync: setContentLabelPref, variables: optimisticContentLabel} = useSetContentLabelMutation() @@ -364,16 +310,17 @@ function LabelGroup({ visibility: values[0] as LabelPreference, }) } catch (e) { + // TODO console.error(e) } }, [labelGroup, setContentLabelPref], ) + const {name, description} = labelGroupStrings[labelGroup] const value = optimisticContentLabel?.visibility ?? preferences.moderationOpts.labelGroups[labelGroup] - const labelOptions = { hide: _(msg`Hide`), warn: _(msg`Warn`), diff --git a/src/state/queries/modservice.ts b/src/state/queries/modservice.ts index d79110a421..73ebedf6f5 100644 --- a/src/state/queries/modservice.ts +++ b/src/state/queries/modservice.ts @@ -17,6 +17,7 @@ export const modServicesDetailedInfoQueryKey = (dids: string[]) => [ export function useModServiceInfoQuery({did}: {did: string}) { return useQuery({ + enabled: !!did, queryKey: modServiceInfoQueryKey(did), queryFn: async () => { const res = await getAgent().app.bsky.moderation.getService({did}) @@ -38,6 +39,7 @@ export function useModServicesInfoQuery({dids}: {dids: string[]}) { export function useModServicesDetailedInfoQuery({dids}: {dids: string[]}) { return useQuery({ + enabled: !!dids.length, queryKey: modServicesDetailedInfoQueryKey(dids), queryFn: async () => { const views: AppBskyModerationDefs.ModServiceViewDetailed[] = []