From b54280f191635b1b522014a7d10f9ab66f683686 Mon Sep 17 00:00:00 2001 From: Foysal Ahamed Date: Tue, 12 Mar 2024 14:50:32 +0000 Subject: [PATCH] :broom: Cleanup label related changes --- app/actions/ModActionPanel/QuickAction.tsx | 5 +- components/common/labels/Grid.tsx | 29 +++++-- components/common/labels/util.ts | 99 +++++++++++++++++++--- components/common/posts/PostsFeed.tsx | 6 +- components/mod-event/EventItem.tsx | 12 +-- 5 files changed, 121 insertions(+), 30 deletions(-) diff --git a/app/actions/ModActionPanel/QuickAction.tsx b/app/actions/ModActionPanel/QuickAction.tsx index 0f08e7fc..5d81a8d7 100644 --- a/app/actions/ModActionPanel/QuickAction.tsx +++ b/app/actions/ModActionPanel/QuickAction.tsx @@ -21,9 +21,9 @@ import { displayLabel, getLabelsForSubject, toLabelVal, + getLabelGroupInfo, unFlagSelfLabel, isSelfLabel, - LabelGroupInfo, } from '@/common/labels' import { FullScreenActionPanel } from '@/common/FullScreenActionPanel' import { PreviewCard } from '@/common/PreviewCard' @@ -535,10 +535,11 @@ function Form( {!currentLabels.length && } {currentLabels.map((label) => { + const labelGroup = getLabelGroupInfo(unFlagSelfLabel(label)) return ( {displayLabel(label)} diff --git a/components/common/labels/Grid.tsx b/components/common/labels/Grid.tsx index 5e683a79..55b75e9c 100644 --- a/components/common/labels/Grid.tsx +++ b/components/common/labels/Grid.tsx @@ -1,6 +1,11 @@ import { useState } from 'react' import Select from 'react-tailwindcss-select' -import { buildAllLabelOptions, ALL_LABELS, LabelGroupInfo } from './util' +import { + labelOptions, + groupLabelList, + getLabelGroupInfo, + buildAllLabelOptions, +} from './util' const EMPTY_ARR = [] type SelectProps = React.ComponentProps @@ -11,7 +16,7 @@ export const LabelSelector = (props: LabelsProps) => { formId, name, defaultLabels = EMPTY_ARR, - options = Object.keys(ALL_LABELS), + options = labelOptions, disabled, onChange, } = props @@ -22,10 +27,19 @@ export const LabelSelector = (props: LabelsProps) => { })), ) const allOptions = buildAllLabelOptions(defaultLabels, options) - const selectorOptions = Object.values(ALL_LABELS).map((labelOption) => ({ - label: labelOption.identifier, - value: labelOption.identifier, - })) + const groupedLabelList = groupLabelList(allOptions) + const selectorOptions = Object.entries(groupedLabelList).map( + ([group, groupInfo]) => ({ + label: group, + options: groupInfo.labels.map((label) => { + const labelText = typeof label === 'string' ? label : label.id + return { + label: labelText, + value: labelText, + } + }), + }), + ) // TODO: selected label text doesn't feel very nice here return ( @@ -47,10 +61,11 @@ export const LabelSelector = (props: LabelsProps) => { value={selectedLabels} options={selectorOptions} formatOptionLabel={(data) => { + const labelGroup = getLabelGroupInfo(data.label) return (
  • {data.label}
    • diff --git a/components/common/labels/util.ts b/components/common/labels/util.ts index d04f2a01..cc7216b3 100644 --- a/components/common/labels/util.ts +++ b/components/common/labels/util.ts @@ -3,9 +3,22 @@ import { AppBskyActorDefs, ComAtprotoAdminDefs, ComAtprotoLabelDefs, + LabelDefinition, + LabelGroupDefinition, LABELS, + LABEL_GROUPS, } from '@atproto/api' +type LabelGroupInfoRecord = { + color: string + labels: Array +} + +type GroupedLabelList = Record< + string, + LabelGroupInfoRecord & Omit +> + export function diffLabels(current: string[], next: string[]) { return { createLabelVals: next @@ -40,35 +53,95 @@ export function toLabelVal( return val } -export const ALL_LABELS = LABELS +export const labelOptions = Object.keys(LABELS) -export const LabelGroupInfo: Record = { - [LABELS.sexual.identifier]: { +export const LabelGroupInfo: Record< + string, + Partial & { color: string } +> = { + [LABEL_GROUPS.system.id]: { + color: '#c45722', + }, + [LABEL_GROUPS.sexual.id]: { color: '#d45722', }, - [LABELS.gore.identifier]: { + [LABEL_GROUPS.violence.id]: { color: '#d42222', }, - [LABELS.porn.identifier]: { + [LABEL_GROUPS.intolerance.id]: { color: '#d422bc', }, - [LABELS.nudity.identifier]: { + [LABEL_GROUPS.legal.id]: { color: '#3502cc', }, - [LABELS.doxxing.identifier]: { + [LABEL_GROUPS.rude.id]: { color: '#ccb802', }, + [LABEL_GROUPS.curation.id]: { + color: '#ff0303', + }, + [LABEL_GROUPS.misinfo.id]: { + color: '#530303', + }, + uncategorized: { + strings: { + settings: { + en: { + name: 'Uncategorzied', + description: 'Labels that have not been categorized yet', + }, + }, + }, + color: '', + labels: [], + }, } -const labelsRequiring = [ - LABELS.gore.identifier, - LABELS.porn.identifier, - LABELS.nudity.identifier, - LABELS.sexual.identifier, +const labelGroupsRequiringBlur = [ + LABEL_GROUPS.violence.id, + LABEL_GROUPS.sexual.id, ] +export const groupLabelList = (labels: string[]): GroupedLabelList => { + const groupedList: GroupedLabelList = {} + + labels.forEach((label) => { + // SELF_FLAG is embedded in the label value so when grouping, we have to take it out of the value + const cleanedLabel = unFlagSelfLabel(label) + const group = LABELS[cleanedLabel] + const groupId = group?.groupId || 'uncategorized' + + if (groupedList[groupId]) { + groupedList[groupId].labels.push(label) + } else { + groupedList[groupId] = { + ...(LabelGroupInfo[groupId] || LabelGroupInfo.uncategorized), + ...(LABEL_GROUPS[groupId] || {}), + labels: [label], + } + } + }) + + return groupedList +} + +export const getLabelGroupInfo = (label: string): LabelGroupInfoRecord => { + const group = LABELS[label] + const groupId = group?.groupId || 'uncategorized' + + return { + // TODO: We shouldn't have to do this, there's a weird type def somewhere that's causing this + labels: [], + ...LabelGroupInfo.uncategorized, + ...(LabelGroupInfo[groupId] || {}), + ...(group || {}), + } +} + export const doesLabelNeedBlur = (labels?: string[]): boolean => - !!labels?.find((label) => labelsRequiring.includes(label)) + !!labels?.find((label) => + labelGroupsRequiringBlur.includes(LABELS[label]?.groupId), + ) export const doesProfileNeedBlur = ({ profile, diff --git a/components/common/posts/PostsFeed.tsx b/components/common/posts/PostsFeed.tsx index 5f028d8c..3455a1ad 100644 --- a/components/common/posts/PostsFeed.tsx +++ b/components/common/posts/PostsFeed.tsx @@ -26,6 +26,7 @@ import { doesLabelNeedBlur, toLabelVal, LabelGroupInfo, + getLabelGroupInfo, } from '../labels' import { CollectionId } from '@/reports/helpers/subject' import { ProfileAvatar } from '@/repositories/ProfileAvatar' @@ -417,14 +418,15 @@ function PostLabels({ {labels?.map((label, i) => { const { val, src } = label + const labelGroup = getLabelGroupInfo(val) return ( {header} {labels.map((label) => { + const labelGroup = getLabelGroupInfo(unFlagSelfLabel(label)) return ( - + {displayLabel(label)} ) @@ -253,7 +252,8 @@ export const ModEventItem = ({ ComAtprotoAdminDefs.isModEventUnmute(modEvent.event) || ComAtprotoAdminDefs.isModEventResolveAppeal(modEvent.event) || ComAtprotoAdminDefs.isModEventReverseTakedown(modEvent.event) || - ComAtprotoAdminDefs.isModEventDivert(modEvent.event) + // This is temporary since the api package with this new type check is not yet published + modEvent.event.$type === 'com.atproto.admin.defs#modEventDivert' ) { eventItem = }