79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import { Show, Switch, Match, createMemo } from 'solid-js'
|
|
import DialogAvatar from './DialogAvatar'
|
|
import type { ChatMember } from '../../graphql/types.gen'
|
|
import GroupDialogAvatar from './GroupDialogAvatar'
|
|
import formattedTime from '../../utils/formatDateTime'
|
|
import { clsx } from 'clsx'
|
|
import styles from './DialogCard.module.scss'
|
|
import { useLocalize } from '../../context/localize'
|
|
|
|
type DialogProps = {
|
|
online?: boolean
|
|
message?: string
|
|
counter?: number
|
|
ownId: number
|
|
members: ChatMember[]
|
|
onClick?: () => void
|
|
isChatHeader?: boolean
|
|
lastUpdate?: number
|
|
isOpened?: boolean
|
|
}
|
|
|
|
const DialogCard = (props: DialogProps) => {
|
|
const { t } = useLocalize()
|
|
const companions = createMemo(
|
|
() => props.members && props.members.filter((member) => member.id !== props.ownId)
|
|
)
|
|
|
|
const names = createMemo(() =>
|
|
companions()
|
|
?.map((companion) => companion.name)
|
|
.join(', ')
|
|
)
|
|
|
|
return (
|
|
<Show when={props.members}>
|
|
<div
|
|
class={clsx(styles.DialogCard, {
|
|
[styles.opened]: props.isOpened,
|
|
[styles.hovered]: !props.isChatHeader
|
|
})}
|
|
onClick={props.onClick}
|
|
>
|
|
<div class={styles.avatar}>
|
|
<Switch fallback={<DialogAvatar name={props.members[0].slug} url={props.members[0].userpic} />}>
|
|
<Match when={props.members.length >= 3}>
|
|
<GroupDialogAvatar users={props.members} />
|
|
</Match>
|
|
</Switch>
|
|
</div>
|
|
<div class={styles.row}>
|
|
<div class={styles.name}>
|
|
{companions()?.length > 1 ? t('Group Chat') : companions()[0]?.name}
|
|
</div>
|
|
<div class={styles.message}>
|
|
<Switch>
|
|
<Match when={props.message && !props.isChatHeader}>{props.message}</Match>
|
|
<Match when={props.isChatHeader && companions().length > 1}>{names()}</Match>
|
|
</Switch>
|
|
</div>
|
|
</div>
|
|
<Show when={!props.isChatHeader}>
|
|
<div class={styles.activity}>
|
|
<Show when={props.lastUpdate}>
|
|
<div class={styles.time}>{formattedTime(props.lastUpdate * 1000)()}</div>
|
|
</Show>
|
|
<Show when={props.counter > 0}>
|
|
<div class={styles.counter}>
|
|
<span>{props.counter}</span>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
</Show>
|
|
)
|
|
}
|
|
|
|
export default DialogCard
|