From c491edc8f71a15026d10237fe8b98b177dd59cda Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Tue, 6 Dec 2022 08:47:02 +0300
Subject: [PATCH] Prettify Message

---
 src/components/Inbox/DialogCard.tsx      | 17 ++++++++++++-----
 src/components/Inbox/Message.module.scss |  3 +++
 src/components/Inbox/Message.tsx         | 19 ++++++-------------
 src/components/Views/Inbox.tsx           | 13 ++++++++++---
 src/graphql/query/chats-load.ts          |  2 ++
 src/utils/formatDateTime.ts              | 13 +++++++++++++
 6 files changed, 46 insertions(+), 21 deletions(-)
 create mode 100644 src/utils/formatDateTime.ts

diff --git a/src/components/Inbox/DialogCard.tsx b/src/components/Inbox/DialogCard.tsx
index 41394545..e12d57c9 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) => {
@@ -41,17 +43,22 @@ const DialogCard = (props: DialogProps) => {
             </Match>
           </Switch>
           <div class={styles.message}>
-            <Switch fallback={'Chat last 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}>
-            <div class={styles.time}>22:22</div>
-            <div class={styles.counter}>
-              <span>12</span>
-            </div>
+            <Show when={props.lastUpdate}>
+              <div class={styles.time}>{formattedTime(props.lastUpdate)}</div>
+            </Show>
+            <Show when={props.counter > 0}>
+              <div class={styles.counter}>
+                <span>{props.counter}</span>
+              </div>
+            </Show>
           </div>
         </Show>
       </div>
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<string>(() => {
-    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 (
     <div class={clsx(styles.Message, isOwn && styles.own)}>
       <Show when={!isOwn}>
         <div class={styles.author}>
-          <DialogAvatar size="small" name={'Message Author'} />
-          <div class={styles.name}>Message Author</div>
+          <DialogAvatar size="small" name={user.name} url={user.userpic} />
+          <div class={styles.name}>{user.name}</div>
         </div>
       </Show>
       <div class={styles.body}>
         <div innerHTML={md.render(props.content.body)} />
       </div>
-      <div class={styles.time}>{formattedTime()}</div>
+      <div class={styles.time}>{formattedTime(props.content.createdAt)}</div>
     </div>
   )
 }
diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx
index ff975949..8c5f06f7 100644
--- a/src/components/Views/Inbox.tsx
+++ b/src/components/Views/Inbox.tsx
@@ -100,12 +100,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
     }
   }
 
@@ -167,6 +171,9 @@ export const InboxView = () => {
                     title={chat.title}
                     members={chat.members}
                     ownId={currentUserId()}
+                    lastUpdate={chat.updatedAt}
+                    counter={chat.unread}
+                    message={chat.messages.pop()?.body}
                   />
                 )}
               </For>
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<string>(() => {
+    return new Date(time * 1000).toLocaleTimeString(locale(), {
+      hour: 'numeric',
+      minute: 'numeric'
+    })
+  })
+
+export default formattedTime