webapp/src/components/Inbox/DialogCard.tsx

79 lines
2.4 KiB
TypeScript
Raw Normal View History

2022-12-17 03:27:00 +00:00
import { Show, Switch, Match, createMemo } from 'solid-js'
2022-11-10 15:06:02 +00:00
import DialogAvatar from './DialogAvatar'
2022-12-17 03:27:00 +00:00
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'
2023-02-17 09:21:02 +00:00
import { useLocalize } from '../../context/localize'
2022-11-10 15:06:02 +00:00
2022-11-15 12:15:07 +00:00
type DialogProps = {
2022-11-10 15:06:02 +00:00
online?: boolean
message?: string
counter?: number
2022-12-17 03:27:00 +00:00
ownId: number
2022-11-27 18:36:45 +00:00
members: ChatMember[]
2022-12-17 03:27:00 +00:00
onClick?: () => void
isChatHeader?: boolean
lastUpdate?: number
isOpened?: boolean
2022-11-15 09:45:55 +00:00
}
2022-11-15 12:15:07 +00:00
const DialogCard = (props: DialogProps) => {
2023-02-17 09:21:02 +00:00
const { t } = useLocalize()
2022-12-17 03:27:00 +00:00
const companions = createMemo(
() => props.members && props.members.filter((member) => member.id !== props.ownId)
)
2022-12-17 03:27:00 +00:00
const names = createMemo(() =>
companions()
?.map((companion) => companion.name)
.join(', ')
)
2022-11-10 15:06:02 +00:00
return (
2022-12-17 03:27:00 +00:00
<Show when={props.members}>
<div
class={clsx(styles.DialogCard, {
[styles.opened]: props.isOpened,
[styles.hovered]: !props.isChatHeader
})}
onClick={props.onClick}
>
2022-12-02 11:11:45 +00:00
<div class={styles.avatar}>
<Switch fallback={<DialogAvatar name={props.members[0].slug} url={props.members[0].userpic} />}>
2022-12-17 03:27:00 +00:00
<Match when={props.members.length >= 3}>
<GroupDialogAvatar users={props.members} />
</Match>
</Switch>
2022-11-10 15:06:02 +00:00
</div>
2022-12-02 11:11:45 +00:00
<div class={styles.row}>
<div class={styles.name}>
{companions()?.length > 1 ? t('Group Chat') : companions()[0]?.name}
</div>
2022-12-17 03:27:00 +00:00
<div class={styles.message}>
<Switch>
<Match when={props.message && !props.isChatHeader}>{props.message}</Match>
<Match when={props.isChatHeader && companions().length > 1}>{names()}</Match>
</Switch>
2022-12-02 11:11:45 +00:00
</div>
2022-11-10 15:06:02 +00:00
</div>
2022-12-17 03:27:00 +00:00
<Show when={!props.isChatHeader}>
<div class={styles.activity}>
<Show when={props.lastUpdate}>
<div class={styles.time}>{formattedTime(props.lastUpdate * 1000)()}</div>
2022-12-17 03:27:00 +00:00
</Show>
<Show when={props.counter > 0}>
<div class={styles.counter}>
<span>{props.counter}</span>
</div>
</Show>
</div>
</Show>
2022-11-10 15:06:02 +00:00
</div>
2022-12-02 11:11:45 +00:00
</Show>
2022-11-10 15:06:02 +00:00
)
}
export default DialogCard