Skip to content

fix: update open channel interface properly #1049

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Apr 12, 2024
Merged

fix: update open channel interface properly #1049

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
636de09
fix: update open channel interface properly
bang9 Apr 11, 2024
f510881
fix: typo
bang9 Apr 11, 2024
62c29e4
chore: lint fix
bang9 Apr 11, 2024
07af594
refactor: refactor isXXXMessage utils and removed redundant type-casting
bang9 Apr 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/modules/Channel/context/hooks/useSendFileMessageCallback.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,16 @@ export default function useSendFileMessageCallback(
pubSub.publish(topics.SEND_MESSAGE_START, {
/* pubSub is used instead of messagesDispatcher
to avoid redundantly calling `messageActionTypes.SEND_MESSAGE_START` */
// TODO: remove data pollution
message: {
...pendingMessage,
url: URL.createObjectURL(compressedFile),
// pending thumbnail message seems to be failed
requestState: 'pending',
isUserMessage: pendingMessage.isUserMessage,
isFileMessage: pendingMessage.isFileMessage,
isAdminMessage: pendingMessage.isAdminMessage,
isMultipleFilesMessage: pendingMessage.isMultipleFilesMessage,
} as unknown as FileMessage,
channel: currentGroupChannel,
publishingModules: [PublishingModuleType.CHANNEL],
Expand Down
23 changes: 5 additions & 18 deletions src/modules/OpenChannel/components/OpenChannelMessage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useRef, ReactElement, useMemo } from 'react';
import React, { useState, useRef, ReactElement } from 'react';
import { AdminMessage, FileMessage, UserMessage } from '@sendbird/chat/message';
import { User } from '@sendbird/chat';
import format from 'date-fns/format';
Expand All @@ -24,17 +24,15 @@ import { useLocalization } from '../../../../lib/LocalizationContext';
import { CoreMessageType, SendableMessageType } from '../../../../utils';

export type OpenChannelMessageProps = {
renderMessage?: (
props: RenderMessageProps
) => React.ElementType<RenderMessageProps>;
renderMessage?: (props: RenderMessageProps) => React.ReactElement;
message: CoreMessageType;
chainTop?: boolean;
chainBottom?: boolean;
hasSeparator?: boolean;
editDisabled?: boolean;
};

export default function MessagOpenChannelMessageeHoc(
export default function OpenChannelMessage(
props: OpenChannelMessageProps,
): ReactElement {
const { message, chainTop, chainBottom, hasSeparator, renderMessage } = props;
Expand All @@ -57,13 +55,6 @@ export default function MessagOpenChannelMessageeHoc(
sender = (message as SendableMessageType)?.sender;
}

const RenderedMessage = useMemo(
() => (props: RenderMessageProps) => {
return <>{renderMessage ? renderMessage(props) : null}</>;
},
[message, renderMessage],
);

const [showEdit, setShowEdit] = useState(false);
const [showRemove, setShowRemove] = useState(false);
const [showFileViewer, setShowFileViewer] = useState(false);
Expand All @@ -80,14 +71,10 @@ export default function MessagOpenChannelMessageeHoc(
=== SendingMessageStatus.FAILED;
}

if (renderMessage && RenderedMessage) {
if (renderMessage) {
return (
<div className="sendbird-msg-hoc sendbird-msg--scroll-ref">
<RenderedMessage
message={message}
chainTop={chainTop}
chainBottom={chainBottom}
/>
{renderMessage({ message, chainTop, chainBottom })}
</div>
);
}
Expand Down
14 changes: 7 additions & 7 deletions src/modules/OpenChannel/components/OpenChannelMessageList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
import { useHandleOnScrollCallback } from '../../../../hooks/useHandleOnScrollCallback';
import { compareMessagesForGrouping } from '../../../../utils/messages';

export type OpenchannelMessageListProps = {
renderMessage?: (props: RenderMessageProps) => React.ElementType<RenderMessageProps>;
export type OpenChannelMessageListProps = {
renderMessage?: (props: RenderMessageProps) => React.ReactElement;
renderPlaceHolderEmptyList?: () => React.ReactElement;
};

function OpenchannelMessageList(
props: OpenchannelMessageListProps,
ref: React.RefObject<HTMLDivElement>,
): ReactElement {
/** @deprecated * */
export type OpenchannelMessageListProps = OpenChannelMessageListProps;
Comment on lines +23 to +24
Copy link
Contributor

@HoonBaek HoonBaek Apr 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


function OpenChannelMessageList(props: OpenChannelMessageListProps, ref: React.RefObject<HTMLDivElement>): ReactElement {
const {
isMessageGroupingEnabled = true,
allMessages,
Expand Down Expand Up @@ -129,4 +129,4 @@ function OpenchannelMessageList(
);
}

export default React.forwardRef(OpenchannelMessageList);
export default React.forwardRef(OpenChannelMessageList);
30 changes: 12 additions & 18 deletions src/modules/OpenChannel/components/OpenChannelUI/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,27 @@ import OpenChannelMessageList from '../OpenChannelMessageList';
import { RenderMessageProps } from '../../../../types';

export interface OpenChannelUIProps {
renderMessage?: (props: RenderMessageProps) => React.ElementType<RenderMessageProps>;
renderMessage?: (props: RenderMessageProps) => React.ReactElement;
renderHeader?: () => React.ReactElement;
renderInput?: () => React.ReactElement;
renderMessageInput?: () => React.ReactElement;
renderPlaceHolderEmptyList?: () => React.ReactElement;
renderPlaceHolderError?: () => React.ReactElement;
renderPlaceHolderLoading?: () => React.ReactElement;

/** @deprecated Please use renderMessageInput instead * */
renderInput?: () => React.ReactElement;
}

const COMPONENT_CLASS_NAME = 'sendbird-openchannel-conversation';

const OpenChannelUI: React.FC<OpenChannelUIProps> = ({
renderMessage,
renderHeader,
renderInput,
renderPlaceHolderEmptyList,
renderPlaceHolderError,
renderPlaceHolderLoading,
renderMessageInput,
renderInput,
}: OpenChannelUIProps) => {
const {
currentOpenChannel,
Expand Down Expand Up @@ -58,28 +62,18 @@ const OpenChannelUI: React.FC<OpenChannelUIProps> = ({
);
}

const renderInputComponent = renderMessageInput || renderInput;

return (
<div className={COMPONENT_CLASS_NAME}>
{
renderHeader?.() || (
<OpenChannelHeader />
)
}
{
currentOpenChannel?.isFrozen && (
<FrozenChannelNotification />
)
}
{renderHeader?.() || <OpenChannelHeader />}
{currentOpenChannel?.isFrozen && <FrozenChannelNotification />}
<OpenChannelMessageList
ref={conversationScrollRef}
renderMessage={renderMessage}
renderPlaceHolderEmptyList={renderPlaceHolderEmptyList}
/>
{
renderInput?.() || (
<OpenChannelInput ref={messageInputRef} />
)
}
{renderInputComponent?.() || <OpenChannelInput ref={messageInputRef} />}
</div>
);
};
Expand Down
5 changes: 5 additions & 0 deletions src/modules/OpenChannel/context/hooks/useFileUploadCallback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,11 +104,16 @@ function useFileUploadCallback({
messagesDispatcher({
type: messageActionTypes.SENDING_MESSAGE_START,
payload: {
// TODO: remove data pollution
message: {
...pendingMessage,
url: URL.createObjectURL(file),
// pending thumbnail message seems to be failed
requestState: 'pending',
isUserMessage: pendingMessage.isUserMessage,
isFileMessage: pendingMessage.isFileMessage,
isAdminMessage: pendingMessage.isAdminMessage,
isMultipleFilesMessage: pendingMessage.isMultipleFilesMessage,
},
channel: currentOpenChannel,
},
Expand Down
1 change: 1 addition & 0 deletions src/modules/OpenChannel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const OpenChannel: React.FC<OpenChannelProps> = (props: OpenChannelProps) => {
renderMessage={props?.renderMessage}
renderHeader={props?.renderHeader}
renderInput={props?.renderInput}
renderMessageInput={props?.renderMessageInput}
renderPlaceHolderEmptyList={props?.renderPlaceHolderEmptyList}
renderPlaceHolderError={props?.renderPlaceHolderError}
renderPlaceHolderLoading={props?.renderPlaceHolderLoading}
Expand Down
5 changes: 5 additions & 0 deletions src/modules/Thread/context/hooks/useSendFileMessage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,16 @@ export default function useSendFileMessageCallback({
payload: {
/* pubSub is used instead of messagesDispatcher
to avoid redundantly calling `messageActionTypes.SEND_MESSAGE_START` */
// TODO: remove data pollution
message: {
...pendingMessage,
url: URL.createObjectURL(file),
// pending thumbnail message seems to be failed
requestState: 'pending',
isUserMessage: pendingMessage.isUserMessage,
isFileMessage: pendingMessage.isFileMessage,
isAdminMessage: pendingMessage.isAdminMessage,
isMultipleFilesMessage: pendingMessage.isMultipleFilesMessage,
},
},
});
Expand Down
5 changes: 5 additions & 0 deletions src/modules/Thread/context/hooks/useSendVoiceMessageCallback.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,16 @@ export const useSendVoiceMessageCallback = ({
payload: {
/* pubSub is used instead of messagesDispatcher
to avoid redundantly calling `messageActionTypes.SEND_MESSAGE_START` */
// TODO: remove data pollution
message: {
...pendingMessage,
url: URL.createObjectURL(file),
// pending thumbnail message seems to be failed
requestState: 'pending',
isUserMessage: pendingMessage.isUserMessage,
isFileMessage: pendingMessage.isFileMessage,
isAdminMessage: pendingMessage.isAdminMessage,
isMultipleFilesMessage: pendingMessage.isMultipleFilesMessage,
},
},
});
Expand Down
Loading