concrnt-world/app/src/components/ContentWithCCAvatar.tsx at 2d8764c5e27c38bf7748d0e60e0fa29c81ab0e29 · concrnt/concrnt-world · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import {
    User,
    type MarkdownMessageSchema,
    type Message,
    type ReplyMessageSchema,
    type UserProfile
} from '@concrnt/worldlib'
import { Box, IconButton, ListItem, type SxProps } from '@mui/material'
import { Link as routerLink, useNavigate, useLocation } from 'react-router-dom'
import { CCAvatar } from './ui/CCAvatar'
import { useRef } from 'react'
import { ProfileTooltip, useProfile } from '../context/ProfileContext'

export interface ContentWithCCAvatarProps {
    message?: Message<MarkdownMessageSchema | ReplyMessageSchema>
    linkTo?: string
    author?: User
    profile: UserProfile
    children?: JSX.Element | Array<JSX.Element | undefined>
    sx?: SxProps
    apId?: string
}

export const ContentWithCCAvatar = (props: ContentWithCCAvatarProps): JSX.Element => {
    const navigate = useNavigate()
    const location = useLocation()

    const navigateTo = props.linkTo ?? `/${props.message?.author}/${props.message?.id}`
    const apLink = props.apId ? `/ap/${props.apId}` : undefined
    const buttonEl = useRef<HTMLElement>(null)

    const profile = useProfile()

    return (
        <>
            <Box itemProp="author" itemScope itemType="https://schema.org/Person">
                <>
                    <meta itemProp="identifier" content={props.profile.ccid} />
                    <meta itemProp="url" content={'https://concrnt.world/' + props.profile.ccid} />
                </>
                {props.profile.alias && <meta itemProp="alternateName" content={props.profile.alias} />}
                {props.profile.username && (
                    <>
                        <meta itemProp="name" content={props.profile.username} />
                    </>
                )}
            </Box>
            <Box
                sx={{ cursor: location.pathname !== navigateTo ? 'pointer' : 'auto' }}
                onClick={() => {
                    const selectedString = window.getSelection()?.toString()
                    if (selectedString !== '') return
                    navigate(navigateTo)
                }}
            >
                <ListItem
                    sx={{
                        wordBreak: 'break-word',
                        alignItems: 'flex-start',
                        flex: 1,
                        gap: { xs: 0.5, sm: 1 }
                    }}
                    disablePadding
                >
                    <Box
                        ref={buttonEl}
                        onClick={(e) => {
                            e.stopPropagation() // prevent to navigate other page
                        }}
                    >
                        <ProfileTooltip user={props.author} profile={props.profile}>
                            <IconButton
                                sx={{
                                    width: { xs: '38px', sm: '48px' },
                                    height: { xs: '38px', sm: '48px' },
                                    mt: { xs: '3px', sm: '5px' }
                                }}
                                component={routerLink}
                                to={
                                    apLink ??
                                    '/' +
                                        (props.profile.ccid ?? '') +
                                        (props.profile.profileOverrideID ? '#' + props.profile.profileOverrideID : '')
                                }
                                onPointerDown={() => profile.forceClose()} // prevent to stick showing when clicking
                            >
                                <CCAvatar
                                    avatarURL={props.profile.avatar}
                                    identiconSource={props.profile.ccid}
                                    sx={{
                                        width: { xs: '38px', sm: '48px' },
                                        height: { xs: '38px', sm: '48px' }
                                    }}
                                />
                            </IconButton>
                        </ProfileTooltip>
                    </Box>
                    <Box
                        sx={{
                            display: 'flex',
                            flex: 1,
                            flexDirection: 'column',
                            width: '100%',
                            overflow: 'hidden',
                            ...props.sx
                        }}
                    >
                        {props.children}
                    </Box>
                </ListItem>
            </Box>
        </>
    )
}