From a31940485177f99792b595393e8ec535c7fb7d41 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Tue, 29 Nov 2022 10:04:38 +0300
Subject: [PATCH] Chat list filters

---
 src/components/Inbox/CreateModalContent.tsx |  6 ---
 src/components/Inbox/DialogAvatar.tsx       |  2 +-
 src/components/Inbox/DialogCard.tsx         |  8 +---
 src/components/Views/Inbox.tsx              | 48 +++++++++++++++++----
 src/styles/Inbox.scss                       | 14 +++---
 5 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/components/Inbox/CreateModalContent.tsx b/src/components/Inbox/CreateModalContent.tsx
index c34b6158..d9a04d0a 100644
--- a/src/components/Inbox/CreateModalContent.tsx
+++ b/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[]
 }
diff --git a/src/components/Inbox/DialogAvatar.tsx b/src/components/Inbox/DialogAvatar.tsx
index 88217b90..38368ce1 100644
--- a/src/components/Inbox/DialogAvatar.tsx
+++ b/src/components/Inbox/DialogAvatar.tsx
@@ -9,7 +9,7 @@ type Props = {
   online?: boolean
   size?: 'small'
   bordered?: boolean
-  className: string
+  className?: string
 }
 
 const colors = [
diff --git a/src/components/Inbox/DialogCard.tsx b/src/components/Inbox/DialogCard.tsx
index c36ac98b..ef9ae13c 100644
--- a/src/components/Inbox/DialogCard.tsx
+++ b/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>
diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx
index df975df0..2108c579 100644
--- a/src/components/Views/Inbox.tsx
+++ b/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>
diff --git a/src/styles/Inbox.scss b/src/styles/Inbox.scss
index 1b6f0a0c..812a9dae 100644
--- a/src/styles/Inbox.scss
+++ b/src/styles/Inbox.scss
@@ -111,12 +111,14 @@ main {
   li {
     margin-right: 1em;
     color: #696969;
-  }
-
-  strong {
-    border-bottom: 3px solid;
-    font-weight: normal;
-    color: #000;
+    cursor: pointer;
+    &.selected {
+      span {
+        border-bottom: 3px solid;
+        font-weight: normal;
+        color: #000;
+      }
+    }
   }
 }