diff --git a/src/components/Inbox/DialogCard.tsx b/src/components/Inbox/DialogCard.tsx
index f5f54b0f..1ac2284b 100644
--- a/src/components/Inbox/DialogCard.tsx
+++ b/src/components/Inbox/DialogCard.tsx
@@ -2,6 +2,7 @@ import { Show, Switch, Match, createMemo, For } 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'
@@ -14,6 +15,7 @@ type DialogProps = {
members: ChatMember[]
onClick?: () => void
isChatHeader?: boolean
+ lastUpdate?: number
}
const DialogCard = (props: DialogProps) => {
@@ -37,17 +39,22 @@ const DialogCard = (props: DialogProps) => {
{props.title}
-
+
+ {props.message}
1}>{names}
-
22:22
-
- 12
-
+
+ {formattedTime(props.lastUpdate)}
+
+
0}>
+
+ {props.counter}
+
+
diff --git a/src/components/Inbox/Message.module.scss b/src/components/Inbox/Message.module.scss
index 50fe8bae..baa38207 100644
--- a/src/components/Inbox/Message.module.scss
+++ b/src/components/Inbox/Message.module.scss
@@ -11,10 +11,12 @@
padding: 12px 16px;
position: relative;
display: flex;
+ margin-right: auto;
p {
margin: 0;
}
+
a {
color: inherit;
text-decoration: underline;
@@ -48,6 +50,7 @@
.body {
justify-content: flex-end;
margin-left: auto;
+ margin-right: unset;
background: #000;
color: #fff;
}
diff --git a/src/components/Inbox/Message.tsx b/src/components/Inbox/Message.tsx
index 0dc5827b..2bc3d3b8 100644
--- a/src/components/Inbox/Message.tsx
+++ b/src/components/Inbox/Message.tsx
@@ -1,10 +1,10 @@
-import { createMemo, Show } from 'solid-js'
+import { Show } from 'solid-js'
import MarkdownIt from 'markdown-it'
import { clsx } from 'clsx'
import styles from './Message.module.scss'
import DialogAvatar from './DialogAvatar'
-import { locale } from '../../stores/ui'
import type { Message, ChatMember } from '../../graphql/types.gen'
+import formattedTime from '../../utils/formatDateTime'
type Props = {
content: Message
@@ -17,28 +17,21 @@ const md = new MarkdownIt({
})
const Message = (props: Props) => {
- const formattedTime = createMemo(() => {
- return new Date(props.content.createdAt * 1000).toLocaleTimeString(locale(), {
- hour: 'numeric',
- minute: 'numeric'
- })
- })
-
// возвращать ID автора
const isOwn = props.ownId === Number(props.content.author)
-
+ const user = props.members.find((m) => m.id === Number(props.content.author))
return (
-
-
Message Author
+
+
{user.name}
-
{formattedTime()}
+
{formattedTime(props.content.createdAt)}
)
}
diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx
index 69f188b4..2055ac5c 100644
--- a/src/components/Views/Inbox.tsx
+++ b/src/components/Views/Inbox.tsx
@@ -106,12 +106,16 @@ export const InboxView = () => {
}
const chatsToShow = () => {
+ const sorted = chats().sort((a, b) => {
+ return a.updatedAt - b.updatedAt
+ })
+ console.log('!!! sorted:', sorted)
if (sortByPerToPer()) {
- return chats().filter((chat) => chat.title.trim().length === 0)
+ return sorted.filter((chat) => chat.title.trim().length === 0)
} else if (sortByGroup()) {
- return chats().filter((chat) => chat.title.trim().length > 0)
+ return sorted.filter((chat) => chat.title.trim().length > 0)
} else {
- return chats()
+ return sorted
}
}
@@ -173,6 +177,9 @@ export const InboxView = () => {
title={chat.title || chat.members[0].name}
members={chat.members}
ownId={currentUserId()}
+ lastUpdate={chat.updatedAt}
+ counter={chat.unread}
+ message={chat.messages.pop()?.body}
/>
)}
diff --git a/src/graphql/query/chats-load.ts b/src/graphql/query/chats-load.ts
index b7c4cc48..bda875c2 100644
--- a/src/graphql/query/chats-load.ts
+++ b/src/graphql/query/chats-load.ts
@@ -8,6 +8,7 @@ export default gql`
id
title
admins
+ users
members {
id
slug
@@ -17,6 +18,7 @@ export default gql`
unread
description
updatedAt
+ private
messages {
id
body
diff --git a/src/utils/formatDateTime.ts b/src/utils/formatDateTime.ts
new file mode 100644
index 00000000..d2593118
--- /dev/null
+++ b/src/utils/formatDateTime.ts
@@ -0,0 +1,13 @@
+import { createMemo } from 'solid-js'
+import { locale } from '../stores/ui'
+
+// unix timestamp in seconds
+const formattedTime = (time: number) =>
+ createMemo(() => {
+ return new Date(time * 1000).toLocaleTimeString(locale(), {
+ hour: 'numeric',
+ minute: 'numeric'
+ })
+ })
+
+export default formattedTime