From 4d57d63d11e3094b47cb470373b3df3f13526c7e Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Wed, 14 Dec 2022 15:15:56 +0300 Subject: [PATCH] fix Reply view --- src/components/Inbox/Message.module.scss | 1 + src/components/Inbox/Message.tsx | 2 +- .../Inbox/QuotedMessage.module.scss | 33 ++++++++++++----- src/components/Inbox/QuotedMessage.tsx | 19 +++++++--- src/components/Views/Inbox.tsx | 26 ++++++++++---- src/context/inbox.tsx | 16 ++++++++- src/graphql/types.gen.ts | 35 ++++++++++--------- 7 files changed, 94 insertions(+), 38 deletions(-) diff --git a/src/components/Inbox/Message.module.scss b/src/components/Inbox/Message.module.scss index 614ca652..fc6b1dba 100644 --- a/src/components/Inbox/Message.module.scss +++ b/src/components/Inbox/Message.module.scss @@ -12,6 +12,7 @@ $actionsWidth: 32px * 2; .text { display: inline-flex; + flex-direction: column; max-width: 60%; margin-right: auto; background: #f6f6f6; diff --git a/src/components/Inbox/Message.tsx b/src/components/Inbox/Message.tsx index a545e603..aa7b790a 100644 --- a/src/components/Inbox/Message.tsx +++ b/src/components/Inbox/Message.tsx @@ -55,7 +55,7 @@ const Message = (props: Props) => { /> - +
diff --git a/src/components/Inbox/QuotedMessage.module.scss b/src/components/Inbox/QuotedMessage.module.scss index 31a04905..1dee92a2 100644 --- a/src/components/Inbox/QuotedMessage.module.scss +++ b/src/components/Inbox/QuotedMessage.module.scss @@ -2,18 +2,33 @@ display: flex; flex-direction: row; align-items: center; - border-top: 2px solid #ccc; - padding: 12px 0; - gap: 12px; font-size: 14px; - .icon { - width: 40px; - height: 40px; - flex-basis: 40px; + &.inline { + color: #696969; + border-left: 2px solid #404040; + padding-left: 12px; + margin-bottom: 8px; - &.cancel { - cursor: pointer; + &.own { + color: #9fa1a7; + border-color: #fff; + } + } + + &.reply { + border-top: 2px solid #ccc; + padding: 12px 0; + gap: 12px; + + .icon { + width: 40px; + height: 40px; + flex-basis: 40px; + + &.cancel { + cursor: pointer; + } } } diff --git a/src/components/Inbox/QuotedMessage.tsx b/src/components/Inbox/QuotedMessage.tsx index 64042b0f..605bff21 100644 --- a/src/components/Inbox/QuotedMessage.tsx +++ b/src/components/Inbox/QuotedMessage.tsx @@ -8,21 +8,30 @@ type QuotedMessage = { cancel?: () => void author?: string variant: 'inline' | 'reply' + isOwn?: boolean } const QuotedMessage = (props: QuotedMessage) => { return ( -
-
- -
+
+ +
+ +
+
{props.author}
{props.body}
- +
diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx index 4f9bec5a..e64dd302 100644 --- a/src/components/Views/Inbox.tsx +++ b/src/components/Views/Inbox.tsx @@ -29,9 +29,11 @@ const { changeSearchParam } = useRouter() export const InboxView = () => { const { chats, - actions: { loadChats } // setListener + messages, + actions: { loadChats, getMessages } // setListener } = useInbox() - const [messages, setMessages] = createSignal([]) + + // const [messages, setMessages] = createSignal([]) const [recipients, setRecipients] = createSignal([]) const [postMessageText, setPostMessageText] = createSignal('') const [sortByGroup, setSortByGroup] = createSignal(false) @@ -56,15 +58,26 @@ export const InboxView = () => { setCurrentDialog(chat) changeSearchParam('chat', `${chat.id}`) try { - const response = await loadMessages({ chat: chat.id }) - setMessages(response as unknown as MessageType[]) + await getMessages(chat.id) } catch (error) { - console.error('[loadMessages]', error) + console.error('[getMessages]', error) } finally { chatWindow.scrollTop = chatWindow.scrollHeight } + // try { + // const response = await loadMessages({ chat: chat.id }) + // setMessages(response as unknown as MessageType[]) + // } catch (error) { + // console.error('[loadMessages]', error) + // } finally { + // chatWindow.scrollTop = chatWindow.scrollHeight + // } } + createEffect(() => { + console.log('!!! messages:', messages()) + }) + onMount(async () => { try { const response = await loadRecipients({ days: 365 }) @@ -77,12 +90,13 @@ export const InboxView = () => { const handleSubmit = async () => { try { + console.log('!!! post:') const post = await apiClient.createMessage({ body: postMessageText().toString(), chat: currentDialog().id.toString(), replyTo: messageToReply()?.id }) - setMessages((prev) => [...prev, post.message]) + // setMessages((prev) => [...prev, post.message]) setPostMessageText('') setMessageToReply(null) chatWindow.scrollTop = chatWindow.scrollHeight diff --git a/src/context/inbox.tsx b/src/context/inbox.tsx index 5d12437d..7316e947 100644 --- a/src/context/inbox.tsx +++ b/src/context/inbox.tsx @@ -6,12 +6,15 @@ import { apiClient } from '../utils/apiClient' import newMessage from '../graphql/subs/new-message' import type { Client } from '@urql/core' import { pipe, subscribe } from 'wonka' +import { loadMessages } from '../stores/inbox' type InboxContextType = { chats: Accessor + messages?: Accessor actions: { createChat: (members: number[], title: string) => Promise<{ chat: Chat }> loadChats: () => Promise + getMessages?: (chatId: string) => Promise unsubscribe: () => void } } @@ -24,6 +27,7 @@ export function useInbox() { export const InboxProvider = (props: { children: JSX.Element }) => { const [chats, setChats] = createSignal([]) + const [messages, setMessages] = createSignal([]) const subclient = createMemo(() => createChatClient()) const loadChats = async () => { try { @@ -38,6 +42,15 @@ export const InboxProvider = (props: { children: JSX.Element }) => { } } + const getMessages = async (chatId: string) => { + try { + const response = await loadMessages({ chat: chatId }) + setMessages(response as unknown as Message[]) + } catch (error) { + console.log('[loadMessages]', error) + } + } + const createChat = async (members: number[], title: string) => { const chat = await apiClient.createChat({ members, title }) setChats((prevChats) => { @@ -57,9 +70,10 @@ export const InboxProvider = (props: { children: JSX.Element }) => { const actions = { createChat, loadChats, + getMessages, unsubscribe // TODO: call unsubscribe some time! } - const value: InboxContextType = { chats, actions } + const value: InboxContextType = { chats, messages, actions } return {props.children} } diff --git a/src/graphql/types.gen.ts b/src/graphql/types.gen.ts index 0239ba2e..228912ca 100644 --- a/src/graphql/types.gen.ts +++ b/src/graphql/types.gen.ts @@ -55,9 +55,9 @@ export type AuthorsBy = { } export type Chat = { - admins?: Maybe>> + admins?: Maybe>> createdAt: Scalars['Int'] - createdBy: Scalars['String'] + createdBy: Scalars['Int'] description?: Maybe id: Scalars['String'] members?: Maybe>> @@ -66,7 +66,7 @@ export type Chat = { title?: Maybe unread?: Maybe updatedAt: Scalars['Int'] - users?: Maybe>> + users?: Maybe>> } export type ChatInput = { @@ -79,6 +79,7 @@ export type ChatMember = { id: Scalars['Int'] lastSeen?: Maybe name: Scalars['String'] + online?: Maybe slug: Scalars['String'] userpic?: Maybe } @@ -140,12 +141,13 @@ export type LoadShoutsOptions = { } export type Message = { - author: Scalars['String'] + author: Scalars['Int'] body: Scalars['String'] chatId: Scalars['String'] createdAt: Scalars['Int'] id: Scalars['Int'] - replyTo?: Maybe + replyTo?: Maybe + seen?: Maybe updatedAt?: Maybe } @@ -354,6 +356,7 @@ export type Query = { loadShout?: Maybe loadShouts: Array> markdownBody: Scalars['String'] + searchMessages: Result searchRecipients: Result signIn: AuthResult signOut: AuthResult @@ -418,6 +421,12 @@ export type QueryMarkdownBodyArgs = { body: Scalars['String'] } +export type QuerySearchMessagesArgs = { + by: MessagesBy + limit?: InputMaybe + offset?: InputMaybe +} + export type QuerySearchRecipientsArgs = { limit?: InputMaybe offset?: InputMaybe @@ -621,19 +630,12 @@ export type Stat = { } export type Subscription = { - newMessage: Message - onlineUpdated: Array - reactionUpdated: ReactionUpdating - shoutUpdated: Shout - userUpdated: User + collabUpdate?: Maybe + newMessage?: Maybe } -export type SubscriptionNewMessageArgs = { - chats?: InputMaybe> -} - -export type SubscriptionReactionUpdatedArgs = { - shout: Scalars['String'] +export type SubscriptionCollabUpdateArgs = { + collab: Scalars['Int'] } export type Token = { @@ -670,6 +672,7 @@ export type TopicStat = { } export type User = { + about?: Maybe bio?: Maybe communities?: Maybe>> createdAt: Scalars['DateTime']