Sort dialog list by last update time

src/components/Inbox/DialogCard.tsx

@@ -58,7 +58,7 @@ const DialogCard = (props: DialogProps) => {
         <Show when={!props.isChatHeader}>
           <div class={styles.activity}>
             <Show when={props.lastUpdate}>
-              <div class={styles.time}>{formattedTime(props.lastUpdate)}</div>
+              <div class={styles.time}>{formattedTime(props.lastUpdate * 1000)}</div>
             </Show>
             <Show when={props.counter > 0}>
               <div class={styles.counter}>

src/components/Views/Inbox.tsx

@@ -18,6 +18,10 @@ import { useRouter } from '../../stores/router'
 import { clsx } from 'clsx'
 import styles from '../../styles/Inbox.module.scss'
 
+type InboxSearchParams = {
+  initChat: string
+  chat: string
+}
 const userSearch = (array: Author[], keyword: string) => {
   const searchTerm = keyword.toLowerCase()
   return array.filter((value) => {
@@ -29,10 +33,9 @@ export const InboxView = () => {
   const {
     chats,
     messages,
-    actions: { loadChats, getMessages, sendMessage }
+    actions: { loadChats, getMessages, sendMessage, createChat }
   } = useInbox()
 
-  // const [messages, setMessages] = createSignal<MessageType[]>([])
   const [recipients, setRecipients] = createSignal<Author[]>([])
   const [postMessageText, setPostMessageText] = createSignal('')
   const [sortByGroup, setSortByGroup] = createSignal<boolean>(false)
@@ -65,10 +68,6 @@ export const InboxView = () => {
     }
   }
 
-  createEffect(() => {
-    console.log('!!! messages:', messages())
-  })
-
   onMount(async () => {
     try {
       const response = await loadRecipients({ days: 365 })
@@ -95,22 +94,24 @@ export const InboxView = () => {
     setPostMessageText(event.target.value)
   }
 
-  const { actions } = useInbox()
-  const urlParams = new URLSearchParams(window.location.search)
-  const params = Object.fromEntries(urlParams)
+  const { changeSearchParam, searchParams } = useRouter<InboxSearchParams>()
+
   createEffect(async () => {
     if (textareaParent) {
       textareaParent.dataset.replicatedValue = postMessageText()
     }
-    if (params['chat']) {
-      if (chats().length === 0) return
-      const chatToOpen = chats()?.find((chat) => chat.id === params['chat'])
+    if (searchParams().chat) {
+      const chatToOpen = chats()?.find((chat) => chat.id === searchParams().chat)
+      if (!chatToOpen) return
       await handleOpenChat(chatToOpen)
+      return
     }
-    if (params['initChat']) {
+    if (searchParams().initChat) {
       try {
-        const newChat = await actions.createChat([Number(params['initChat'])], '')
+        const newChat = await createChat([Number(searchParams().initChat)], '')
         await loadChats()
+        changeSearchParam('initChat', null)
+        changeSearchParam('chat', newChat.chat.id)
         const chatToOpen = chats().find((chat) => chat.id === newChat.chat.id)
         await handleOpenChat(chatToOpen)
       } catch (error) {
@@ -125,7 +126,7 @@ export const InboxView = () => {
 
   const chatsToShow = () => {
     const sorted = chats().sort((a, b) => {
-      return a.updatedAt - b.updatedAt
+      return b.updatedAt - a.updatedAt
     })
     if (sortByPerToPer()) {
       return sorted.filter((chat) => chat.title.trim().length === 0)

src/context/inbox.tsx

@@ -33,11 +33,7 @@ export const InboxProvider = (props: { children: JSX.Element }) => {
   const loadChats = async () => {
     try {
       const newChats = await apiClient.getChats({ limit: 50, offset: 0 })
-      setChats(
-        newChats.sort((x, y) => {
-          return x.updatedAt < y.updatedAt ? 1 : -1
-        })
-      )
+      setChats(newChats)
     } catch (error) {
       console.log(error)
     }
@@ -49,14 +45,19 @@ export const InboxProvider = (props: { children: JSX.Element }) => {
       const response = await loadMessages({ chat: chatId })
       setMessages(response as unknown as Message[])
     } catch (error) {
-      console.log('[loadMessages]', error)
+      console.error('[loadMessages]', error)
     }
   }
 
   const sendMessage = async (args) => {
     try {
-      const post = await apiClient.createMessage(args)
-      setMessages((prev) => [...prev, post.message])
+      const message = await apiClient.createMessage(args)
+      setMessages((prev) => [...prev, message])
+      const chat = chats().find((chat) => chat.id === args.chat)
+      setChats((prev) => [
+        ...prev.filter((c) => c.id !== chat.id),
+        { ...chat, updatedAt: message.createdAt }
+      ])
     } catch (error) {
       console.error('[post message error]:', error)
     }

src/utils/apiClient.ts

@@ -288,7 +288,7 @@ export const apiClient = {
 
   createMessage: async (options: MutationCreateMessageArgs) => {
     const resp = await privateGraphQLClient.mutation(createMessage, options).toPromise()
-    return resp.data.createMessage
+    return resp.data.createMessage.message
   },
 
   getChatMessages: async (options: QueryLoadMessagesByArgs) => {

src/utils/formatDateTime.ts

@@ -4,7 +4,7 @@ import { locale } from '../stores/ui'
 // unix timestamp in seconds
 const formattedTime = (time: number) =>
   createMemo<string>(() => {
-    return new Date(time * 1000).toLocaleTimeString(locale(), {
+    return new Date(time).toLocaleTimeString(locale(), {
       hour: 'numeric',
       minute: 'numeric'
     })