forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix profile hover card blocked state (#4480)
* Fix: mini profile on hover allows following a blocker/blocked user (#4423) (#4440)
* Tweaks
---------
Co-authored-by: Michał Gołda <michal.golda@hotmail.com>
authored by
Eric Bailey
Michał Gołda
and committed by
GitHub
28ba9991
d989128e
+65
-27
+54
-25
src/components/ProfileHoverCard/index.web.tsx
+54
-25
src/components/ProfileHoverCard/index.web.tsx
···
5
5
import {msg, plural} from '@lingui/macro'
6
6
import {useLingui} from '@lingui/react'
7
7
8
+
import {getModerationCauseKey} from '#/lib/moderation'
8
9
import {makeProfileLink} from '#/lib/routes/links'
9
10
import {sanitizeDisplayName} from '#/lib/strings/display-names'
10
11
import {sanitizeHandle} from '#/lib/strings/handles'
···
31
32
import {Portal} from '#/components/Portal'
32
33
import {RichText} from '#/components/RichText'
33
34
import {Text} from '#/components/Typography'
35
+
import {ProfileLabel} from '../moderation/ProfileHeaderAlerts'
34
36
import {ProfileHoverCardProps} from './types'
35
37
36
38
const floatingMiddlewares = [
···
374
376
profile: profileShadow,
375
377
logContext: 'ProfileHoverCard',
376
378
})
377
-
const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy
379
+
const isBlockedUser =
380
+
profile.viewer?.blocking ||
381
+
profile.viewer?.blockedBy ||
382
+
profile.viewer?.blockingByList
378
383
const following = formatCount(profile.followsCount || 0)
379
384
const followers = formatCount(profile.followersCount || 0)
380
385
const pluralizedFollowers = plural(profile.followersCount || 0, {
···
405
410
/>
406
411
</Link>
407
412
408
-
{!isMe && (
409
-
<Button
410
-
size="small"
411
-
color={profileShadow.viewer?.following ? 'secondary' : 'primary'}
412
-
variant="solid"
413
-
label={
414
-
profileShadow.viewer?.following
415
-
? _(msg`Following`)
416
-
: _(msg`Follow`)
417
-
}
418
-
style={[a.rounded_full]}
419
-
onPress={profileShadow.viewer?.following ? unfollow : follow}>
420
-
<ButtonIcon
421
-
position="left"
422
-
icon={profileShadow.viewer?.following ? Check : Plus}
423
-
/>
424
-
<ButtonText>
425
-
{profileShadow.viewer?.following
426
-
? _(msg`Following`)
427
-
: _(msg`Follow`)}
428
-
</ButtonText>
429
-
</Button>
430
-
)}
413
+
{!isMe &&
414
+
(isBlockedUser ? (
415
+
<Link
416
+
to={profileURL}
417
+
label={_(msg`View blocked user's profile`)}
418
+
onPress={hide}
419
+
size="small"
420
+
color="secondary"
421
+
variant="solid"
422
+
style={[a.rounded_full]}>
423
+
<ButtonText>{_(msg`View profile`)}</ButtonText>
424
+
</Link>
425
+
) : (
426
+
<Button
427
+
size="small"
428
+
color={profileShadow.viewer?.following ? 'secondary' : 'primary'}
429
+
variant="solid"
430
+
label={
431
+
profileShadow.viewer?.following
432
+
? _(msg`Following`)
433
+
: _(msg`Follow`)
434
+
}
435
+
style={[a.rounded_full]}
436
+
onPress={profileShadow.viewer?.following ? unfollow : follow}>
437
+
<ButtonIcon
438
+
position="left"
439
+
icon={profileShadow.viewer?.following ? Check : Plus}
440
+
/>
441
+
<ButtonText>
442
+
{profileShadow.viewer?.following
443
+
? _(msg`Following`)
444
+
: _(msg`Follow`)}
445
+
</ButtonText>
446
+
</Button>
447
+
))}
431
448
</View>
432
449
433
450
<Link to={profileURL} label={_(msg`View profile`)} onPress={hide}>
···
443
460
</View>
444
461
</Link>
445
462
446
-
{!blockHide && (
463
+
{isBlockedUser && (
464
+
<View style={[a.flex_row, a.flex_wrap, a.gap_xs]}>
465
+
{moderation.ui('profileView').alerts.map(cause => (
466
+
<ProfileLabel
467
+
key={getModerationCauseKey(cause)}
468
+
cause={cause}
469
+
disableDetailsDialog
470
+
/>
471
+
))}
472
+
</View>
473
+
)}
474
+
475
+
{!isBlockedUser && (
447
476
<>
448
477
<View style={[a.flex_row, a.flex_wrap, a.gap_md, a.pt_xs]}>
449
478
<InlineLinkText
+11
-2
src/components/moderation/ProfileHeaderAlerts.tsx
+11
-2
src/components/moderation/ProfileHeaderAlerts.tsx
···
43
43
)
44
44
}
45
45
46
-
function ProfileLabel({cause}: {cause: ModerationCause}) {
46
+
export function ProfileLabel({
47
+
cause,
48
+
disableDetailsDialog,
49
+
}: {
50
+
cause: ModerationCause
51
+
disableDetailsDialog?: boolean
52
+
}) {
47
53
const t = useTheme()
48
54
const control = useModerationDetailsDialogControl()
49
55
const desc = useModerationCauseDescription(cause)
···
51
57
return (
52
58
<>
53
59
<Button
60
+
disabled={disableDetailsDialog}
54
61
label={desc.name}
55
62
onPress={() => {
56
63
control.open()
···
87
94
)}
88
95
</Button>
89
96
90
-
<ModerationDetailsDialog control={control} modcause={cause} />
97
+
{!disableDetailsDialog && (
98
+
<ModerationDetailsDialog control={control} modcause={cause} />
99
+
)}
91
100
</>
92
101
)
93
102
}