Merge branch 'prepare-inbox' of github.com:Discours/discoursio-webapp into prepare-inbox

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) => {
         <div class={styles.row}>
           <div class={styles.name}>{props.title}</div>
           <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>

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;
     }

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>
   )
 }

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}
                   />
                 )}
               </For>

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

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