From 8be277c602e43de65675499c61bb6cc3a93f25e9 Mon Sep 17 00:00:00 2001 From: tonyrewin Date: Fri, 2 Dec 2022 14:11:45 +0300 Subject: [PATCH] inbox-hitfixes --- src/components/Inbox/CreateModalContent.tsx | 46 +++++++++++---------- src/components/Inbox/DialogCard.tsx | 36 ++++++++-------- src/context/inbox.tsx | 4 +- src/context/profile.tsx | 1 + src/graphql/mutation/create-chat.ts | 2 +- src/graphql/privateGraphQLClient.ts | 2 +- src/graphql/query/chat-recipients.ts | 1 + src/graphql/types.gen.ts | 2 +- 8 files changed, 51 insertions(+), 43 deletions(-) diff --git a/src/components/Inbox/CreateModalContent.tsx b/src/components/Inbox/CreateModalContent.tsx index c1f927c8..f8be086e 100644 --- a/src/components/Inbox/CreateModalContent.tsx +++ b/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('') - const [slugs, setSlugs] = createSignal([]) - const [collectionToInvite, setCollectionToInvite] = createSignal(inviteUsers) + const inviteUsers: InvitingUser[] = props.users.map((user) => ({ ...user, selected: false })) + const [title, setTitle] = createSignal('') + const [uids, setUids] = createSignal([]) + const [collectionToInvite, setCollectionToInvite] = createSignal(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 (

{t('create_chat')}

- {slugs().length > 2 && ( + {uids().length > 1 && ( {
- {(author) => ( + {(author: InvitingUser) => ( handleClick(author)} author={author} selected={author.selected} /> )} @@ -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')}
diff --git a/src/components/Inbox/DialogCard.tsx b/src/components/Inbox/DialogCard.tsx index 9e4b34af..be88b9b5 100644 --- a/src/components/Inbox/DialogCard.tsx +++ b/src/components/Inbox/DialogCard.tsx @@ -2,37 +2,39 @@ 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 - подумать -
-
- -
-
-
{participants[0].name}
-
- Указать предпочтительные языки для результатов поиска можно в разделе + 0}> +
+
+ +
+
+
{participants[0].name}
+
{t('You can announce your languages in profile')}
+
+
+
22:22
+
+ 12 +
-
-
22:22
-
- 12 -
-
-
+ ) } diff --git a/src/context/inbox.tsx b/src/context/inbox.tsx index e3b41d44..310a5116 100644 --- a/src/context/inbox.tsx +++ b/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 + createChat: (members: number[], title: string) => Promise } } @@ -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 diff --git a/src/context/profile.tsx b/src/context/profile.tsx index 2794c5fe..92a6cdd8 100644 --- a/src/context/profile.tsx +++ b/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, diff --git a/src/graphql/mutation/create-chat.ts b/src/graphql/mutation/create-chat.ts index b700707b..46993794 100644 --- a/src/graphql/mutation/create-chat.ts +++ b/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 { diff --git a/src/graphql/privateGraphQLClient.ts b/src/graphql/privateGraphQLClient.ts index 1c4761ca..d9064d52 100644 --- a/src/graphql/privateGraphQLClient.ts +++ b/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 } }, diff --git a/src/graphql/query/chat-recipients.ts b/src/graphql/query/chat-recipients.ts index 7acf3588..8ff5af96 100644 --- a/src/graphql/query/chat-recipients.ts +++ b/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 diff --git a/src/graphql/types.gen.ts b/src/graphql/types.gen.ts index 9c2cd9cf..bb5a7774 100644 --- a/src/graphql/types.gen.ts +++ b/src/graphql/types.gen.ts @@ -199,7 +199,7 @@ export type MutationConfirmEmailArgs = { } export type MutationCreateChatArgs = { - members: Array> + members: Array> title?: InputMaybe }