-
Notifications
You must be signed in to change notification settings - Fork 57
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1591 from ecency/feature/reply-to-message
Feature/reply to message
- Loading branch information
Showing
29 changed files
with
586 additions
and
201 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./use-chat-input-submit"; |
66 changes: 66 additions & 0 deletions
66
src/common/features/chats/components/chat-input/hooks/use-chat-input-submit.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import { MutableRefObject, useCallback } from "react"; | ||
| import { usePersistentReplyToMessage } from "../../../hooks"; | ||
| import { Channel, DirectContact, useSendMessage } from "@ecency/ns-query"; | ||
|
|
||
| interface Props { | ||
| message: string; | ||
| isDisabled: boolean; | ||
| isFilesUploading: boolean; | ||
| currentChannel?: Channel; | ||
| currentContact?: DirectContact; | ||
| setMessage: (message: string) => void; | ||
| setFiles: (files: File[]) => void; | ||
| setUploadedFileLinks: (links: string[]) => void; | ||
| uploadedFileLinks: string[]; | ||
| inputRef: MutableRefObject<HTMLInputElement | null>; | ||
| } | ||
|
|
||
| export function useChatInputSubmit({ | ||
| message, | ||
| isFilesUploading, | ||
| isDisabled, | ||
| currentChannel, | ||
| currentContact, | ||
| setMessage, | ||
| setFiles, | ||
| setUploadedFileLinks, | ||
| uploadedFileLinks, | ||
| inputRef | ||
| }: Props) { | ||
| const [reply, _, clearReply] = usePersistentReplyToMessage(currentChannel, currentContact); | ||
|
|
||
| const { mutateAsync: sendMessage, isLoading: isSendMessageLoading } = useSendMessage( | ||
| currentChannel, | ||
| currentContact, | ||
| () => { | ||
| setMessage(""); | ||
| } | ||
| ); | ||
|
|
||
| const submit = useCallback(async () => { | ||
| const nextMessage = buildImages(message); | ||
|
|
||
| if (isDisabled || isSendMessageLoading || isFilesUploading || !nextMessage) { | ||
| return; | ||
| } | ||
|
|
||
| const request: Parameters<typeof sendMessage>[0] = { message: nextMessage }; | ||
| if (reply) { | ||
| request.parentMessage = reply; | ||
| } | ||
|
|
||
| await sendMessage(request); | ||
|
|
||
| clearReply(); | ||
| setFiles([]); | ||
| setUploadedFileLinks([]); | ||
| // Re-focus to input because when DOM changes and input position changes then | ||
| // focus is lost | ||
| setTimeout(() => inputRef.current?.focus(), 1); | ||
| }, [message, isDisabled, isSendMessageLoading, isFilesUploading, sendMessage, reply, clearReply]); | ||
|
|
||
| const buildImages = (message: string) => | ||
| `${message}${uploadedFileLinks.map((link) => `\n`)}`; | ||
|
|
||
| return { submit, sendMessage, isSendMessageLoading } as const; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from "./chat-input"; | ||
| export * from "./hooks"; |
File renamed without changes.
48 changes: 48 additions & 0 deletions
48
src/common/features/chats/components/chat-message-item/chat-message-forwarding-label.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { classNameObject } from "../../../../helper/class-name-object"; | ||
| import { _t } from "../../../../i18n"; | ||
| import ProfileLink from "../../../../components/profile-link"; | ||
| import { history } from "../../../../store"; | ||
| import React from "react"; | ||
| import { Message, useNostrGetUserProfileQuery } from "@ecency/ns-query"; | ||
| import { useMappedStore } from "../../../../store/use-mapped-store"; | ||
|
|
||
| interface Props { | ||
| message: Message; | ||
| type: "receiver" | "sender"; | ||
| } | ||
|
|
||
| export function ChatMessageForwardingLabel({ message, type }: Props) { | ||
| const { addAccount } = useMappedStore(); | ||
|
|
||
| const { data: nostrForwardedUserProfiles } = useNostrGetUserProfileQuery(message.forwardedFrom); | ||
|
|
||
| return message.forwardedFrom ? ( | ||
| <div | ||
| className={classNameObject({ | ||
| "text-xs text-gray-300": true, | ||
| "dark:text-gray-700": type === "receiver" | ||
| })} | ||
| > | ||
| {_t("chat.forwarded-from")} | ||
| {nostrForwardedUserProfiles?.[0]?.name && ( | ||
| <ProfileLink | ||
| target="_blank" | ||
| addAccount={addAccount} | ||
| history={history!!} | ||
| username={nostrForwardedUserProfiles?.[0]?.name} | ||
| > | ||
| <span | ||
| className={classNameObject({ | ||
| "text-xs text-gray-300": true, | ||
| "dark:text-gray-700": type === "receiver" | ||
| })} | ||
| > | ||
| ({nostrForwardedUserProfiles[0].name}) | ||
| </span> | ||
| </ProfileLink> | ||
| )} | ||
| </div> | ||
| ) : ( | ||
| <></> | ||
| ); | ||
| } |
31 changes: 31 additions & 0 deletions
31
src/common/features/chats/components/chat-message-item/chat-message-replied-label.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { classNameObject } from "../../../../helper/class-name-object"; | ||
| import React from "react"; | ||
| import { DirectContact, Message } from "@ecency/ns-query"; | ||
| import { useFocusOnMessageById } from "./hooks"; | ||
|
|
||
| interface Props { | ||
| message: Message; | ||
| currentContact?: DirectContact; | ||
| type: "receiver" | "sender"; | ||
| } | ||
|
|
||
| export function ChatMessageRepliedLabel({ message, currentContact, type }: Props) { | ||
| const { focus } = useFocusOnMessageById(message.parentMessage?.id); | ||
|
|
||
| return message.parentMessage && currentContact ? ( | ||
| <div | ||
| className={classNameObject({ | ||
| "rounded-b-xl py-1 px-3 mb-1.5 truncate cursor-pointer": true, | ||
| "bg-blue-dark-sky-010 text-white rounded-tl-xl dark:blue-dark-sky-active": | ||
| type === "sender", | ||
| "bg-gray-300 dark:bg-gray-700 rounded-tr-xl": type === "receiver" | ||
| })} | ||
| onClick={() => focus()} | ||
| > | ||
| <div className="text-xs font-semibold">{currentContact?.name}</div> | ||
| <div className="text-xs">{message.parentMessage.content}</div> | ||
| </div> | ||
| ) : ( | ||
| <></> | ||
| ); | ||
| } |
43 changes: 43 additions & 0 deletions
43
src/common/features/chats/components/chat-message-item/chat-message-status.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { format } from "date-fns"; | ||
| import { Spinner } from "@ui/spinner"; | ||
| import { failedMessageSvg } from "../../../../img/svg"; | ||
| import { Button } from "@ui/button"; | ||
| import { _t } from "../../../../i18n"; | ||
| import React from "react"; | ||
| import { Channel, DirectContact, Message, useResendMessage } from "@ecency/ns-query"; | ||
|
|
||
| interface Props { | ||
| message: Message; | ||
| showDate?: boolean; | ||
| currentChannel?: Channel; | ||
| currentContact?: DirectContact; | ||
| } | ||
|
|
||
| export function ChatMessageStatus({ message, showDate, currentContact, currentChannel }: Props) { | ||
| const { mutateAsync: resendMessage } = useResendMessage(currentChannel, currentContact); | ||
|
|
||
| return ( | ||
| <> | ||
| {message.sent == 1 && showDate && ( | ||
| <div className="text-gray-600 dark:text-gray-400 text-xs px-2"> | ||
| {format(new Date(message.created * 1000), "HH:mm")} | ||
| </div> | ||
| )} | ||
| {message.sent === 0 && <Spinner className="w-3 h-3 mx-2" />} | ||
| {message.sent === 2 && ( | ||
| <div className="flex items-center gap-1"> | ||
| {failedMessageSvg} | ||
| <Button | ||
| size="xs" | ||
| className="text-xs" | ||
| appearance="link" | ||
| noPadding={true} | ||
| onClick={() => resendMessage(message)} | ||
| > | ||
| {_t("g.resend")} | ||
| </Button> | ||
| </div> | ||
| )} | ||
| </> | ||
| ); | ||
| } |
31 changes: 31 additions & 0 deletions
31
src/common/features/chats/components/chat-message-item/chat-message-username-label.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { Link } from "react-router-dom"; | ||
| import { classNameObject } from "../../../../helper/class-name-object"; | ||
| import { makePath } from "../../../../components/profile-link"; | ||
| import React from "react"; | ||
| import { Profile } from "@ecency/ns-query"; | ||
|
|
||
| interface Props { | ||
| showUsername?: boolean; | ||
| isGif: boolean; | ||
| isEmoji: boolean; | ||
| profile?: Profile; | ||
| } | ||
|
|
||
| export function ChatMessageUsernameLabel({ showUsername, isEmoji, isGif, profile }: Props) { | ||
| return showUsername ? ( | ||
| <Link | ||
| className={classNameObject({ | ||
| "font-semibold text-sm mb-2 text-blue-dark-sky": true, | ||
| "px-2.5": isGif || isEmoji | ||
| })} | ||
| style={{ | ||
| display: "inherit" | ||
| }} | ||
| to={makePath(profile!!.name)} | ||
| > | ||
| {profile!!.name} | ||
| </Link> | ||
| ) : ( | ||
| <></> | ||
| ); | ||
| } |
1 change: 1 addition & 0 deletions
1
src/common/features/chats/components/chat-message-item/hooks/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./use-focus-on-message-by-id"; |
Oops, something went wrong.