Chat list filters

src/components/Inbox/CreateModalContent.tsx

@@ -7,12 +7,6 @@ import { hideModal } from '../../stores/ui'
 import { useInbox } from '../../context/inbox'
 
 type inviteUser = Author & { selected: boolean }
-type query =
-  | {
-      theme: string
-      members: string[]
-    }
-  | undefined
 type Props = {
   users: Author[]
 }

src/components/Inbox/DialogAvatar.tsx

@@ -9,7 +9,7 @@ type Props = {
   online?: boolean
   size?: 'small'
   bordered?: boolean
-  className: string
+  className?: string
 }
 
 const colors = [

src/components/Inbox/DialogCard.tsx

@@ -1,9 +1,6 @@
 import styles from './DialogCard.module.scss'
 import DialogAvatar from './DialogAvatar'
-import type { Author, Chat, ChatMember, User } from '../../graphql/types.gen'
-import { apiClient } from '../../utils/apiClient'
-import { t } from '../../utils/intl'
-import { useInbox } from '../../context/inbox'
+import type { ChatMember } from '../../graphql/types.gen'
 import GroupDialogAvatar from './GroupDialogAvatar'
 
 type DialogProps = {
@@ -20,13 +17,12 @@ const DialogCard = (props: DialogProps) => {
   return (
     <div class={styles.DialogCard}>
       <div class={styles.avatar}>
-        {companions.length > 1 ? (
+        {companions.length > 2 ? (
           <GroupDialogAvatar users={companions} />
         ) : (
           <DialogAvatar name={props.members[0].name} url={props.members[0].userpic} />
         )}
       </div>
-
       <div class={styles.row}>
         {companions.length > 1 ? (
           <div class={styles.name}>{props.title}</div>

src/components/Views/Inbox.tsx

@@ -10,12 +10,11 @@ import { createClient } from '@urql/core'
 import Message from '../Inbox/Message'
 import { loadRecipients, loadChats } from '../../stores/inbox'
 import { t } from '../../utils/intl'
-import '../../styles/Inbox.scss'
-import { useInbox } from '../../context/inbox'
 import { Modal } from '../Nav/Modal'
 import { showModal } from '../../stores/ui'
-import InviteUser from '../Inbox/InviteUser'
 import CreateModalContent from '../Inbox/CreateModalContent'
+import { clsx } from 'clsx'
+import '../../styles/Inbox.scss'
 
 const OWNER_ID = '501'
 const client = createClient({
@@ -65,6 +64,8 @@ export const InboxView = () => {
   const [cashedRecipients, setCashedRecipients] = createSignal<Author[]>([])
   const [postMessageText, setPostMessageText] = createSignal('')
   const [loading, setLoading] = createSignal<boolean>(false)
+  const [sortByGroup, setSortByGroup] = createSignal<boolean>(false)
+  const [sortByPerToPer, setSortByPerToPer] = createSignal<boolean>(false)
   const { session } = useSession()
   const currentSlug = createMemo(() => session()?.user?.slug)
 
@@ -112,7 +113,6 @@ export const InboxView = () => {
     try {
       const response = await loadChats()
       setChats(response as unknown as Chat[])
-      console.log('!!! chats:', response)
     } catch (error) {
       console.log(error)
     }
@@ -158,16 +158,46 @@ export const InboxView = () => {
 
           <div class="chat-list__types">
             <ul>
-              <li>
-                <strong>{t('All')}</strong>
+              <li
+                class={clsx({ ['selected']: !sortByPerToPer() && !sortByGroup() })}
+                onClick={() => {
+                  setSortByPerToPer(false)
+                  setSortByGroup(false)
+                }}
+              >
+                <span>{t('All')}</span>
+              </li>
+              <li
+                class={clsx({ ['selected']: sortByPerToPer() })}
+                onClick={() => {
+                  setSortByPerToPer(true)
+                  setSortByGroup(false)
+                }}
+              >
+                <span>{t('Personal')}</span>
+              </li>
+              <li
+                class={clsx({ ['selected']: sortByGroup() })}
+                onClick={() => {
+                  setSortByGroup(true)
+                  setSortByPerToPer(false)
+                }}
+              >
+                <span>{t('Groups')}</span>
               </li>
-              <li>{t('Personal')}</li>
-              <li>{t('Groups')}</li>
             </ul>
           </div>
           <div class="holder">
             <div class="dialogs">
-              <For each={chats()}>
+              <For
+                each={
+                  sortByPerToPer()
+                    ? chats().filter((chat) => chat.title.length === 0)
+                    : sortByGroup()
+                    ? chats().filter((chat) => chat.title.length > 0)
+                    : chats()
+                }
+              >
                 {(chat) => <DialogCard title={chat.title} members={chat.members} ownSlug={currentSlug()} />}
               </For>
             </div>

src/styles/Inbox.scss

@@ -111,14 +111,16 @@ main {
   li {
     margin-right: 1em;
     color: #696969;
-  }
-
-  strong {
+    cursor: pointer;
+    &.selected {
+      span {
         border-bottom: 3px solid;
         font-weight: normal;
         color: #000;
       }
     }
+  }
+}
 
 .interlocutor {
   height: 56px;