inbox-hitfixes

src/components/Inbox/CreateModalContent.tsx

@@ -6,7 +6,10 @@ import type { Author } from '../../graphql/types.gen'
 import { hideModal } from '../../stores/ui'
 import { useInbox } from '../../context/inbox'
 
-type inviteUser = Author & { selected: boolean }
+type InvitingUser = Author & {
+  selected: boolean
+}
+
 type query =
   | {
       theme: string
@@ -18,40 +21,41 @@ type Props = {
 }
 
 const CreateModalContent = (props: Props) => {
-  const inviteUsers: inviteUser[] = props.users.map((user) => ({ ...user, selected: false }))
-  const [theme, setTheme] = createSignal<string>('')
-  const [slugs, setSlugs] = createSignal<string[]>([])
-  const [collectionToInvite, setCollectionToInvite] = createSignal<inviteUser[]>(inviteUsers)
+  const inviteUsers: InvitingUser[] = props.users.map((user) => ({ ...user, selected: false }))
+  const [title, setTitle] = createSignal<string>('')
+  const [uids, setUids] = createSignal<number[]>([])
+  const [collectionToInvite, setCollectionToInvite] = createSignal<InvitingUser[]>(inviteUsers)
   let textInput: HTMLInputElement
 
   const reset = () => {
-    setTheme('')
-    setSlugs([])
+    setTitle('')
+    setUids([])
     hideModal()
   }
 
   createEffect(() => {
-    setSlugs(() => {
+    console.log(collectionToInvite())
+    setUids(() => {
       return collectionToInvite()
-        .filter((user) => {
+        .filter((user: InvitingUser) => {
           return user.selected === true
         })
-        .map((user) => {
-          return user['slug']
+        .map((user: InvitingUser) => {
+          return user.id
         })
     })
-    if (slugs().length > 2 && theme().length === 0) {
-      setTheme(t('group_chat'))
+    if (uids().length > 1 && title().length === 0) {
+      setTitle(t('group_chat'))
     }
   })
 
   const handleSetTheme = () => {
-    setTheme(textInput.value.length > 0 && textInput.value)
+    setTitle(textInput.value.length > 0 && textInput.value)
   }
 
   const handleClick = (user) => {
-    setCollectionToInvite((userCollection) => {
-      return userCollection.map((clickedUser) =>
+    setCollectionToInvite((userCollection: InvitingUser[]) => {
+      return userCollection.map((clickedUser: InvitingUser) =>
         user.slug === clickedUser.slug ? { ...clickedUser, selected: !clickedUser.selected } : clickedUser
       )
     })
@@ -63,7 +67,7 @@ const CreateModalContent = (props: Props) => {
 
   const handleCreate = async () => {
     try {
-      const initChat = await actions.createChat(slugs(), theme())
+      const initChat = await actions.createChat(uids(), title())
       console.debug('[initChat]', initChat)
     } catch (error) {
       console.error(error)
@@ -73,7 +77,7 @@ const CreateModalContent = (props: Props) => {
   return (
     <div class={styles.CreateModalContent}>
       <h4>{t('create_chat')}</h4>
-      {slugs().length > 2 && (
+      {uids().length > 1 && (
         <input
           ref={textInput}
           onInput={handleSetTheme}
@@ -86,7 +90,7 @@ const CreateModalContent = (props: Props) => {
 
       <div class="invite-recipients" style={{ height: '400px', overflow: 'auto' }}>
         <For each={collectionToInvite()}>
-          {(author) => (
+          {(author: InvitingUser) => (
             <InviteUser onClick={() => handleClick(author)} author={author} selected={author.selected} />
           )}
         </For>
@@ -100,9 +104,9 @@ const CreateModalContent = (props: Props) => {
           type="button"
           class="btn btn-lg fs-3 btn-outline-primary"
           onClick={handleCreate}
-          disabled={slugs().length === 0}
+          disabled={uids().length === 0}
         >
-          {slugs().length > 2 ? t('create_group') : t('create_chat')}
+          {uids().length > 1 ? t('create_group') : t('create_chat')}
         </button>
       </div>
     </div>

src/components/Inbox/DialogCard.tsx

@@ -2,29 +2,30 @@ import styles from './DialogCard.module.scss'
 import DialogAvatar from './DialogAvatar'
 import type { Author, ChatMember, User } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
+import { Show } from 'solid-js'
+import { useSession } from '../../context/session'
 
 type DialogProps = {
   online?: boolean
   message?: string
   counter?: number
   members: ChatMember[]
-  ownSlug: User['slug']
 }
 
 const DialogCard = (props: DialogProps) => {
-  const participants = props.members.filter((m) => m.slug !== props.ownSlug)
+  const { session } = useSession()
+  const participants = props.members?.filter((m) => m?.id !== session().user.id) || []
   console.log('!!! participants:', participants)
   return (
     //DialogCardView - подумать
+    <Show when={participants?.length > 0}>
       <div class={styles.DialogCard}>
         <div class={styles.avatar}>
           <DialogAvatar name={participants[0].name} online={props.online} />
         </div>
         <div class={styles.row}>
           <div class={styles.name}>{participants[0].name}</div>
-        <div class={styles.message}>
-          Указать предпочтительные языки для результатов поиска можно в разделе
-        </div>
+          <div class={styles.message}>{t('You can announce your languages in profile')}</div>
         </div>
         <div class={styles.activity}>
           <div class={styles.time}>22:22</div>
@@ -33,6 +34,7 @@ const DialogCard = (props: DialogProps) => {
           </div>
         </div>
       </div>
+    </Show>
   )
 }
 

src/context/inbox.tsx

@@ -7,7 +7,7 @@ import { createStore } from 'solid-js/store'
 type InboxContextType = {
   chatEntities: { [chatId: string]: Message[] }
   actions: {
-    createChat: (members: string[], title: string) => Promise<void>
+    createChat: (members: number[], title: string) => Promise<void>
   }
 }
 
@@ -20,7 +20,7 @@ export function useInbox() {
 export const InboxProvider = (props: { children: JSX.Element }) => {
   const [chatEntities, setChatEntities] = createStore({})
 
-  const createChat = async (members: string[], title: string) => {
+  const createChat = async (members: number[], title: string) => {
     const chat = await apiClient.createChat({ members, title })
     setChatEntities((s) => {
       s[chat.id] = chat

src/context/profile.tsx

@@ -35,6 +35,7 @@ const useProfileForm = () => {
       await loadAuthor({ slug: currentSlug() })
       setForm({
         name: currentAuthor()?.name,
+        slug: currentAuthor()?.name,
         bio: currentAuthor()?.bio,
         about: currentAuthor()?.about,
         userpic: currentAuthor()?.userpic,

src/graphql/mutation/create-chat.ts

@@ -1,7 +1,7 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  mutation CreateChat($title: String, $members: [String]!) {
+  mutation CreateChat($title: String, $members: [Int]!) {
     createChat(title: $title, members: $members) {
       error
       chat {

src/graphql/privateGraphQLClient.ts

@@ -32,7 +32,7 @@ const options: ClientOptions = {
     // меняем через setToken, например при получении значения с сервера
     // скорее всего придумаем что-нибудь получше со временем
     const token = localStorage.getItem(TOKEN_LOCAL_STORAGE_KEY)
-    if (token === null) alert('token is null')
+    if (token === null) console.error('[ERROR] token is null')
     const headers = { Authorization: token }
     return { headers }
   },

src/graphql/query/chat-recipients.ts

@@ -4,6 +4,7 @@ export default gql`
   query GetChatsQuery($limit: Int, $offset: Int) {
     loadRecipients(limit: $limit, offset: $offset) {
       members {
+        id
         name
         slug
         userpic

src/graphql/types.gen.ts

@@ -199,7 +199,7 @@ export type MutationConfirmEmailArgs = {
 }
 
 export type MutationCreateChatArgs = {
-  members: Array<InputMaybe<Scalars['String']>>
+  members: Array<InputMaybe<Scalars['Int']>>
   title?: InputMaybe<Scalars['String']>
 }