From 2f2fc002f6ccbf46f40fe627418367ce98682f86 Mon Sep 17 00:00:00 2001 From: OnestarLee Date: Mon, 1 Apr 2024 09:28:35 +0900 Subject: [PATCH 1/7] fix type error --- .env.example | 2 +- src/modules/App/DesktopLayout.tsx | 2 +- src/modules/App/MobileLayout.tsx | 6 +++--- src/modules/App/index.tsx | 19 ++++++++++--------- .../Channel/context/ChannelProvider.tsx | 4 ++-- .../hooks/useHandleReconnectForChannelList.ts | 2 +- .../context/ChannelListProvider.tsx | 2 +- src/modules/ChannelList/utils.ts | 2 +- .../components/ChannelProfile/index.tsx | 4 ++-- .../ModerationPanel/AddOperatorsModal.tsx | 16 ++++++++-------- .../ModerationPanel/BannedUserList.tsx | 12 +++++++++--- .../ModerationPanel/BannedUsersModal.tsx | 13 +++++++------ .../ModerationPanel/MembersModal.tsx | 4 ++-- .../ModerationPanel/MutedMemberList.tsx | 4 ++-- .../ModerationPanel/MutedMembersModal.tsx | 4 ++-- .../ModerationPanel/OperatorList.tsx | 2 +- .../ModerationPanel/OperatorsModal.tsx | 4 ++-- .../components/ModerationPanel/index.tsx | 2 +- .../components/UserPanel/index.tsx | 4 ++-- src/modules/OpenChannelApp/Community.tsx | 6 +++--- .../components/CommunityChannelList.tsx | 2 +- .../OperatorUI/AddOperatorsModal.tsx | 14 ++++++++------ .../components/OperatorUI/BannedUserList.tsx | 3 ++- .../OperatorUI/BannedUsersModal.tsx | 11 ++++++----- .../ParticipantUI/ParticipantItem.tsx | 8 ++++---- 25 files changed, 82 insertions(+), 70 deletions(-) diff --git a/.env.example b/.env.example index d46133bc4..97ba36720 100644 --- a/.env.example +++ b/.env.example @@ -1,5 +1,5 @@ // appID for dev mode using storybook -STORYBOOK_APP_ID=xxxx +STORYBOOK_APP_ID='A41EC43B-87A9-40CF-92C5-E178DD0477B1' // for frozen channel testing STORYBOOK_FROZEN_APP_ID= diff --git a/src/modules/App/DesktopLayout.tsx b/src/modules/App/DesktopLayout.tsx index a3ded1470..423e3ae59 100644 --- a/src/modules/App/DesktopLayout.tsx +++ b/src/modules/App/DesktopLayout.tsx @@ -119,7 +119,7 @@ export const DesktopLayout: React.FC = (props: DesktopLayout sendbird-app__conversation-wrap `} > - {enableLegacyChannelModules ? : } + {enableLegacyChannelModules ? : } {showSettings && (
diff --git a/src/modules/App/MobileLayout.tsx b/src/modules/App/MobileLayout.tsx index 18040e09b..bcff0f9a5 100644 --- a/src/modules/App/MobileLayout.tsx +++ b/src/modules/App/MobileLayout.tsx @@ -62,7 +62,7 @@ export const MobileLayout: React.FC = (props: MobileLayoutPro useEffect(() => { if (panel !== PANELS.CHANNEL) { - goToMessage(null, () => setHighlightedMessage(null)); + goToMessage(null, () => setHighlightedMessage?.(null)); } }, [panel]); @@ -173,7 +173,7 @@ export const MobileLayout: React.FC = (props: MobileLayoutPro )} {panel === PANELS.CHANNEL && (
- {enableLegacyChannelModules ? : } + {enableLegacyChannelModules ? : }
)} {panel === PANELS.CHANNEL_SETTINGS && ( @@ -218,7 +218,7 @@ export const MobileLayout: React.FC = (props: MobileLayoutPro setCurrentChannel(channel); goToMessage(message, (messageId) => { setPanel(PANELS.CHANNEL); - setHighlightedMessage(messageId); + setHighlightedMessage?.(messageId); }); }} /> diff --git a/src/modules/App/index.tsx b/src/modules/App/index.tsx index ce0b736fd..bdc422149 100644 --- a/src/modules/App/index.tsx +++ b/src/modules/App/index.tsx @@ -12,6 +12,7 @@ import { AppLayout } from './AppLayout'; import './index.scss'; import { AppLayoutProps } from './types'; +import { GroupChannel } from '@sendbird/chat/groupChannel'; interface AppProps { appId: SendbirdProviderProps['appId']; @@ -102,27 +103,27 @@ export default function App(props: AppProps) { isUserIdUsedForNickname = true, enableLegacyChannelModules = false, } = props; - const [currentChannel, setCurrentChannel] = useState(null); + const [currentChannel, setCurrentChannel] = useState(null); return ( diff --git a/src/modules/Channel/context/ChannelProvider.tsx b/src/modules/Channel/context/ChannelProvider.tsx index 448e61e74..9fcbfde3a 100644 --- a/src/modules/Channel/context/ChannelProvider.tsx +++ b/src/modules/Channel/context/ChannelProvider.tsx @@ -163,7 +163,7 @@ export interface ChannelProviderInterface extends ChannelContextProps, MessageSt renderUserMentionItem?: (props: { user: User }) => JSX.Element; } -const ChannelContext = React.createContext(undefined); +const ChannelContext = React.createContext(null); const ChannelProvider: React.FC = (props: ChannelContextProps) => { const { @@ -225,7 +225,7 @@ const ChannelProvider: React.FC = (props: ChannelContextPro setHighLightedMessageId(highlightedMessage); }, [highlightedMessage]); const userFilledMessageListQuery = queries?.messageListParams; - const [quoteMessage, setQuoteMessage] = useState(null); + const [quoteMessage, setQuoteMessage] = useState(null); const [isScrolled, setIsScrolled] = useState(false); const [messagesStore, messagesDispatcher] = useReducer(messagesReducer, messagesInitialState); diff --git a/src/modules/Channel/context/hooks/useHandleReconnectForChannelList.ts b/src/modules/Channel/context/hooks/useHandleReconnectForChannelList.ts index 1ebb21318..32770a7f9 100644 --- a/src/modules/Channel/context/hooks/useHandleReconnectForChannelList.ts +++ b/src/modules/Channel/context/hooks/useHandleReconnectForChannelList.ts @@ -87,7 +87,7 @@ function useHandleReconnectForChannelList({ logger.info('ChannelList refresh - channel list sorted', sortedChannelList); } // select first channel - let newCurrentChannel: GroupChannel = !disableAutoSelect ? sortedChannelList[0] : null; + let newCurrentChannel: GroupChannel | null = !disableAutoSelect ? sortedChannelList[0] : null; if (currentGroupChannel?.url) { const foundChannel = sortedChannelList.find((channel) => ( channel.url === currentGroupChannel.url diff --git a/src/modules/ChannelList/context/ChannelListProvider.tsx b/src/modules/ChannelList/context/ChannelListProvider.tsx index d50b1ef25..48c1c99cd 100644 --- a/src/modules/ChannelList/context/ChannelListProvider.tsx +++ b/src/modules/ChannelList/context/ChannelListProvider.tsx @@ -201,7 +201,7 @@ const ChannelListProvider: React.FC = (props: ChannelL channelListDispatcher, setChannelSource, onChannelSelect, - userFilledChannelListQuery, + userFilledChannelListQuery: { ...userFilledChannelListQuery }, logger, sortChannelList, disableAutoSelect, diff --git a/src/modules/ChannelList/utils.ts b/src/modules/ChannelList/utils.ts index 16439b856..b4724af34 100644 --- a/src/modules/ChannelList/utils.ts +++ b/src/modules/ChannelList/utils.ts @@ -83,7 +83,7 @@ const createEventHandler = ({ sdk, sdkChannelHandlerId, channelListDispatcher, l } }, onMessageUpdated: (channel, message) => { - if (channel.isGroupChannel() && channel.lastMessage.isEqual(message)) { + if (channel.isGroupChannel() && channel.lastMessage?.isEqual(message)) { logger.info('ChannelList: onMessageUpdated', channel); channelListDispatcher({ type: channelActions.ON_LAST_MESSAGE_UPDATED, diff --git a/src/modules/ChannelSettings/components/ChannelProfile/index.tsx b/src/modules/ChannelSettings/components/ChannelProfile/index.tsx index d745612d8..44ec58bb9 100644 --- a/src/modules/ChannelSettings/components/ChannelProfile/index.tsx +++ b/src/modules/ChannelSettings/components/ChannelProfile/index.tsx @@ -25,10 +25,10 @@ const ChannelProfile: React.FC = () => { const isOnline = state?.config?.isOnline; const disabled = !isOnline; - const { channel } = channelSettingStore; + const channel = channelSettingStore?.channel; const getChannelName = () => { - if (channel?.name && channel?.name !== 'Group Channel') { + if (channel?.name && channel.name !== 'Group Channel') { return channel.name; } if (channel?.name === 'Group Channel' || !channel?.name) { diff --git a/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx index af6005b2f..506164629 100644 --- a/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx +++ b/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx @@ -14,7 +14,7 @@ import Label, { import { ButtonTypes } from '../../../../ui/Button'; import UserListItem from '../../../../ui/UserListItem'; import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider'; -import { OperatorFilter } from '@sendbird/chat/groupChannel'; +import { Member, MemberListQuery, OperatorFilter } from '@sendbird/chat/groupChannel'; interface Props { onCancel(): void; @@ -25,22 +25,22 @@ export default function AddOperatorsModal({ onCancel, onSubmit, }: Props): ReactElement { - const [members, setMembers] = useState([]); + const [members, setMembers] = useState([]); const [selectedMembers, setSelectedMembers] = useState({}); - const [memberQuery, setMemberQuery] = useState(null); + const [memberQuery, setMemberQuery] = useState(null); const { stringSet } = useContext(LocalizationContext); - const { channel } = useChannelSettingsContext(); + const channel = useChannelSettingsContext()?.channel; useEffect(() => { const memberListQuery = channel?.createMemberListQuery({ operatorFilter: OperatorFilter.NONOPERATOR, limit: 20, }); - memberListQuery.next().then((members) => { + memberListQuery?.next().then((members) => { setMembers(members); }); - setMemberQuery(memberListQuery); + setMemberQuery(memberListQuery ?? null); }, []); const selectedCount = Object.keys(selectedMembers).filter((m) => selectedMembers[m]).length; @@ -68,12 +68,12 @@ export default function AddOperatorsModal({
{ - const { hasNext } = memberQuery; + const hasNext = memberQuery ? memberQuery.hasNext : false; const target = e.target as HTMLTextAreaElement; const fetchMore = ( target.clientHeight + target.scrollTop === target.scrollHeight ); - if (hasNext && fetchMore) { + if (hasNext && fetchMore && memberQuery) { memberQuery.next().then((o) => { setMembers([ ...members, diff --git a/src/modules/ChannelSettings/components/ModerationPanel/BannedUserList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/BannedUserList.tsx index 7b892937d..0c55271ad 100644 --- a/src/modules/ChannelSettings/components/ModerationPanel/BannedUserList.tsx +++ b/src/modules/ChannelSettings/components/ModerationPanel/BannedUserList.tsx @@ -5,7 +5,7 @@ import React, { useCallback, useContext, } from 'react'; -import { BannedUserListQueryParams } from '@sendbird/chat'; +import { BannedUserListQueryParams, RestrictedUser, User } from '@sendbird/chat'; import Button, { ButtonTypes, ButtonSizes } from '../../../../ui/Button'; import @@ -23,12 +23,12 @@ import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider import { LocalizationContext } from '../../../../lib/LocalizationContext'; export const BannedMemberList = (): ReactElement => { - const [members, setMembers] = useState([]); + const [members, setMembers] = useState([]); const [hasNext, setHasNext] = useState(false); const [showModal, setShowModal] = useState(false); const { stringSet } = useContext(LocalizationContext); - const { channel } = useChannelSettingsContext(); + const channel = useChannelSettingsContext()?.channel; const bannedUserListQueryParams: BannedUserListQueryParams = { limit: 10 }; useEffect(() => { @@ -54,6 +54,12 @@ export const BannedMemberList = (): ReactElement => { setHasNext(bannedUserListQuery.hasNext); }); }, [channel]); + + type UserWithAdditionalProps = User & { + isMuted: boolean; + role: string; + }; + return ( <> { diff --git a/src/modules/ChannelSettings/components/ModerationPanel/BannedUsersModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/BannedUsersModal.tsx index d57eb88e5..6b6c8cc1a 100644 --- a/src/modules/ChannelSettings/components/ModerationPanel/BannedUsersModal.tsx +++ b/src/modules/ChannelSettings/components/ModerationPanel/BannedUsersModal.tsx @@ -13,6 +13,7 @@ import ContextMenu, { MenuItem, MenuItems } from '../../../../ui/ContextMenu'; import { noop } from '../../../../utils/utils'; import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider'; import { useLocalization } from '../../../../lib/LocalizationContext'; +import { BannedUserListQuery, RestrictedUser } from '@sendbird/chat'; interface Props { onCancel(): void; @@ -21,17 +22,17 @@ interface Props { export default function BannedUsersModal({ onCancel, }: Props): ReactElement { - const [members, setMembers] = useState([]); - const [memberQuery, setMemberQuery] = useState(null); - const { channel } = useChannelSettingsContext(); + const [members, setMembers] = useState([]); + const [memberQuery, setMemberQuery] = useState(null); + const channel = useChannelSettingsContext()?.channel; const { stringSet } = useLocalization(); useEffect(() => { const bannedUserListQuery = channel?.createBannedUserListQuery(); - bannedUserListQuery.next().then((users) => { + bannedUserListQuery?.next().then((users) => { setMembers(users); }); - setMemberQuery(bannedUserListQuery); + setMemberQuery(bannedUserListQuery ?? null); }, []); return (
@@ -45,7 +46,7 @@ export default function BannedUsersModal({
{ - const { hasNext } = memberQuery; + const hasNext = memberQuery?.hasNext; const target = e.target as HTMLTextAreaElement; const fetchMore = ( target.clientHeight + target.scrollTop === target.scrollHeight diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx index 48973ad6a..bb2b2f3d4 100644 --- a/src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx +++ b/src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx @@ -24,8 +24,8 @@ interface Props { export default function MembersModal({ onCancel }: Props): ReactElement { const [members, setMembers] = useState([]); const [memberQuery, setMemberQuery] = useState(null); - - const { channel } = useChannelSettingsContext(); + + const channel = useChannelSettingsContext()?.channel; const state = useSendbirdStateContext(); const currentUser = state?.config?.userId; const { stringSet } = useContext(LocalizationContext); diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx index b731ca666..818078044 100644 --- a/src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx +++ b/src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx @@ -25,8 +25,8 @@ export const MutedMemberList = (): ReactElement => { const [hasNext, setHasNext] = useState(false); const [showModal, setShowModal] = useState(false); const { stringSet } = useLocalization(); - - const { channel } = useChannelSettingsContext(); + + const channel = useChannelSettingsContext()?.channel; const state = useSendbirdStateContext(); const currentUser = state?.config?.userId; diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx index 093b11c4e..a70f2ec50 100644 --- a/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx +++ b/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx @@ -23,8 +23,8 @@ export default function MutedMembersModal({ }: Props): ReactElement { const [members, setMembers] = useState([]); const [memberQuery, setMemberQuery] = useState(null); - - const { channel } = useChannelSettingsContext(); + + const channel = useChannelSettingsContext()?.channel; const state = useSendbirdStateContext(); const currentUser = state?.config?.userId; const { stringSet } = useLocalization(); diff --git a/src/modules/ChannelSettings/components/ModerationPanel/OperatorList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/OperatorList.tsx index 4ffc8a9e6..96bc9dcf0 100644 --- a/src/modules/ChannelSettings/components/ModerationPanel/OperatorList.tsx +++ b/src/modules/ChannelSettings/components/ModerationPanel/OperatorList.tsx @@ -26,7 +26,7 @@ export const OperatorList = (): ReactElement => { const { stringSet } = useContext(LocalizationContext); const state = useSendbirdStateContext(); - const { channel } = useChannelSettingsContext(); + const channel = useChannelSettingsContext()?.channel; const userId = state?.config?.userId; diff --git a/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx index 9b0452e6a..05ba2ecb2 100644 --- a/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx +++ b/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx @@ -20,8 +20,8 @@ interface Props { onCancel?(): void } export default function OperatorsModal({ onCancel }: Props): ReactElement { const [operators, setOperators] = useState([]); const [operatorQuery, setOperatorQuery] = useState(null); - - const { channel } = useChannelSettingsContext(); + + const channel = useChannelSettingsContext()?.channel; const state = useSendbirdStateContext(); const currentUserId = state?.config?.userId; const { stringSet } = useContext(LocalizationContext); diff --git a/src/modules/ChannelSettings/components/ModerationPanel/index.tsx b/src/modules/ChannelSettings/components/ModerationPanel/index.tsx index 7c209a107..bb4dfe7b2 100644 --- a/src/modules/ChannelSettings/components/ModerationPanel/index.tsx +++ b/src/modules/ChannelSettings/components/ModerationPanel/index.tsx @@ -34,7 +34,7 @@ export default function AdminPannel(): ReactElement { const [frozen, setFrozen] = useState(false); const { stringSet } = useContext(LocalizationContext); - const { channel } = useChannelSettingsContext(); + const channel = useChannelSettingsContext()?.channel; // work around for // https://sendbird.slack.com/archives/G01290GCDCN/p1595922832000900 diff --git a/src/modules/ChannelSettings/components/UserPanel/index.tsx b/src/modules/ChannelSettings/components/UserPanel/index.tsx index c12a9d63c..791bdfdf4 100644 --- a/src/modules/ChannelSettings/components/UserPanel/index.tsx +++ b/src/modules/ChannelSettings/components/UserPanel/index.tsx @@ -23,7 +23,7 @@ const kFormatter = (num: number): string|number => { const UserPanel: React.FC = () => { const { stringSet } = useContext(LocalizationContext); const [showAccordion, setShowAccordion] = useState(false); - const { channel } = useChannelSettingsContext(); + const channel = useChannelSettingsContext()?.channel; return (
{ {stringSet.CHANNEL_SETTING__MEMBERS__TITLE} (null); + const [currentChannel, setCurrentChannel] = useState(null); // const [channels, setChannels] = useState>([]); return (
{ setShowSettings(true); }} @@ -53,7 +53,7 @@ export default function Community({ { showSettings && ( { setShowSettings(false); }} diff --git a/src/modules/OpenChannelApp/components/CommunityChannelList.tsx b/src/modules/OpenChannelApp/components/CommunityChannelList.tsx index 09cf081c1..8f7ed00ac 100644 --- a/src/modules/OpenChannelApp/components/CommunityChannelList.tsx +++ b/src/modules/OpenChannelApp/components/CommunityChannelList.tsx @@ -46,7 +46,7 @@ function CommunityChannelList({ channels, setChannels, }: Props): ReactElement { - const [channelSource, setChannelSource] = useState(null); + const [channelSource, setChannelSource] = useState(null); const [showModal, setShowModal] = useState(false); const [currentImage, setCurrentImage] = useState(null); const [currentFile, setCurrentFile] = useState(null); diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/AddOperatorsModal.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/AddOperatorsModal.tsx index d47a6788d..8abe8adf1 100644 --- a/src/modules/OpenChannelSettings/components/OperatorUI/AddOperatorsModal.tsx +++ b/src/modules/OpenChannelSettings/components/OperatorUI/AddOperatorsModal.tsx @@ -14,6 +14,8 @@ import Label, { import { ButtonTypes } from '../../../../ui/Button'; import UserListItem from '../../../../ui/UserListItem'; import { useOpenChannelSettingsContext } from '../../context/OpenChannelSettingsProvider'; +import { User } from '@sendbird/chat'; +import { ParticipantListQuery } from '@sendbird/chat/openChannel'; interface Props { onCancel(): void; @@ -24,9 +26,9 @@ export default function AddOperatorsModal({ onCancel, onSubmit, }: Props): ReactElement { - const [participants, setParticipants] = useState([]); + const [participants, setParticipants] = useState([]); const [selectedUsers, setSelectedUsers] = useState({}); - const [participantQuery, setParticipantQuery] = useState(null); + const [participantQuery, setParticipantQuery] = useState(null); const { stringSet } = useContext(LocalizationContext); const { channel } = useOpenChannelSettingsContext(); @@ -35,10 +37,10 @@ export default function AddOperatorsModal({ const participantListQuery = channel?.createParticipantListQuery({ limit: 20, }); - participantListQuery.next().then((users) => { + participantListQuery?.next().then((users) => { setParticipants(users); }); - setParticipantQuery(participantListQuery); + if (participantListQuery) {setParticipantQuery(participantListQuery);} }, []); const selectedCount = Object.keys(selectedUsers).filter((m) => selectedUsers[m]).length; @@ -66,12 +68,12 @@ export default function AddOperatorsModal({
{ - const { hasNext } = participantQuery; + const hasNext = participantQuery ? participantQuery.hasNext : false; const target = e.target as HTMLTextAreaElement; const fetchMore = ( target.clientHeight + target.scrollTop === target.scrollHeight ); - if (hasNext && fetchMore) { + if (hasNext && fetchMore && participantQuery) { participantQuery.next().then((o) => { setParticipants([ ...participants, diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx index 1061fc87c..0637e17f3 100644 --- a/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx +++ b/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx @@ -17,9 +17,10 @@ import { UserListItem } from '../ParticipantUI/ParticipantItem'; import { useOpenChannelSettingsContext } from '../../context/OpenChannelSettingsProvider'; import { LocalizationContext } from '../../../../lib/LocalizationContext'; import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext'; +import { RestrictedUser } from '@sendbird/chat'; export const BannedUserList = (): ReactElement => { - const [bannedUsers, setBannedUsers] = useState([]); + const [bannedUsers, setBannedUsers] = useState([]); const [hasNext, setHasNext] = useState(false); const [showModal, setShowModal] = useState(false); diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/BannedUsersModal.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/BannedUsersModal.tsx index b71bd396e..d136e9d8e 100644 --- a/src/modules/OpenChannelSettings/components/OperatorUI/BannedUsersModal.tsx +++ b/src/modules/OpenChannelSettings/components/OperatorUI/BannedUsersModal.tsx @@ -15,6 +15,7 @@ import { noop } from '../../../../utils/utils'; import { useOpenChannelSettingsContext } from '../../context/OpenChannelSettingsProvider'; import { LocalizationContext } from '../../../../lib/LocalizationContext'; import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext'; +import { BannedUserListQuery, RestrictedUser } from '@sendbird/chat'; interface Props { onCancel(): void; @@ -23,8 +24,8 @@ interface Props { export default function BannedUsersModal({ onCancel, }: Props): ReactElement { - const [bannedUsers, setBannedUsers] = useState([]); - const [userListQuery, setUserListQuery] = useState(null); + const [bannedUsers, setBannedUsers] = useState([]); + const [userListQuery, setUserListQuery] = useState(null); const { channel } = useOpenChannelSettingsContext(); const state = useSendbirdStateContext(); const { stringSet } = useContext(LocalizationContext); @@ -32,10 +33,10 @@ export default function BannedUsersModal({ useEffect(() => { const bannedUserListQuery = channel?.createBannedUserListQuery(); - bannedUserListQuery.next().then((users) => { + bannedUserListQuery?.next().then((users) => { setBannedUsers(users); }); - setUserListQuery(bannedUserListQuery); + setUserListQuery(bannedUserListQuery ?? null); }, []); return (
@@ -49,7 +50,7 @@ export default function BannedUsersModal({
{ - const { hasNext } = userListQuery; + const hasNext = userListQuery?.hasNext; const target = e.target as HTMLTextAreaElement; const fetchMore = ( target.clientHeight + target.scrollTop === target.scrollHeight diff --git a/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantItem.tsx b/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantItem.tsx index ed029fe93..fd0f98e5d 100644 --- a/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantItem.tsx +++ b/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantItem.tsx @@ -5,7 +5,7 @@ import React, { useRef, useState, } from 'react'; -import type { Participant } from '@sendbird/chat'; +import type { Participant, User } from '@sendbird/chat'; import { LocalizationContext } from '../../../../lib/LocalizationContext'; import { UserProfileContext } from '../../../../lib/UserProfileContext'; @@ -68,7 +68,7 @@ export const UserListItem: React.FC = ({ renderUserProfile ? renderUserProfile({ user: user, - currentUserId: currentUser, + currentUserId: currentUser ?? '', close: closeDropdown, avatarRef, }) @@ -155,7 +155,7 @@ export default function ParticipantsAccordion(props: ParticipantsAccordionProps) const { channel } = useOpenChannelSettingsContext(); const globalState = useSendbirdStateContext(); const currentUserId = globalState?.config?.userId; - const [participants, setParticipants] = useState([]); + const [participants, setParticipants] = useState([]); const [showMoreModal, setShowMoreModal] = useState(false); const { stringSet } = useContext(LocalizationContext); @@ -196,7 +196,7 @@ export default function ParticipantsAccordion(props: ParticipantsAccordionProps) { participants.slice(0, maxMembers).map((p) => ( From 8569964117f19354b34a0f1e601208edb9cfc81f Mon Sep 17 00:00:00 2001 From: OnestarLee Date: Mon, 1 Apr 2024 13:41:44 +0900 Subject: [PATCH 2/7] fix type error --- .../context/CreateOpenChannelProvider.tsx | 4 ++-- .../EditUserProfileUIView.tsx | 18 +++++++++++------- .../components/CommunityChannelList.tsx | 10 ++++++---- .../components/EditDetailsModal.tsx | 17 +++++++++-------- 4 files changed, 28 insertions(+), 21 deletions(-) diff --git a/src/modules/CreateOpenChannel/context/CreateOpenChannelProvider.tsx b/src/modules/CreateOpenChannel/context/CreateOpenChannelProvider.tsx index 5c47567e4..f565b2dab 100644 --- a/src/modules/CreateOpenChannel/context/CreateOpenChannelProvider.tsx +++ b/src/modules/CreateOpenChannel/context/CreateOpenChannelProvider.tsx @@ -44,13 +44,13 @@ export const CreateOpenChannelProvider: React.FC const { name, coverUrlOrImage } = params; if (sdkInitialized) { const params = {} as OpenChannelCreateParams; - params.operatorUserIds = [sdk?.currentUser?.userId]; + params.operatorUserIds = sdk?.currentUser?.userId ? [sdk.currentUser.userId] : []; params.name = name; params.coverUrlOrImage = coverUrlOrImage; sdk.openChannel.createChannel(onBeforeCreateChannel?.(params) || params) .then((openChannel) => { logger.info('CreateOpenChannel: Succeeded creating openChannel', openChannel); - onCreateChannel(openChannel); + onCreateChannel?.(openChannel); }) .catch((err) => { logger.warning('CreateOpenChannel: Failed creating openChannel', err); diff --git a/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx b/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx index b95f560b8..20fc0b73f 100644 --- a/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx +++ b/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx @@ -24,9 +24,9 @@ export const EditUserProfileUIView = ({ const { theme, setCurrentTheme } = config; const user = stores.userStore?.user; const { stringSet } = useLocalization(); - - const [currentImg, setCurrentImg] = useState(null); - const hiddenInputRef = useRef(null); + + const [currentImg, setCurrentImg] = useState(null); + const hiddenInputRef = useRef(null); return (
{ - setCurrentImg(URL.createObjectURL(e.target.files[0])); - setProfileImage(e.target.files[0]); - hiddenInputRef.current.value = ''; + if(e.target.files) { + setCurrentImg(URL.createObjectURL(e.target.files[0])); + setProfileImage(e.target.files[0]); + } + + if(hiddenInputRef.current) + hiddenInputRef.current.value = ''; }} /> hiddenInputRef.current.click()} + onClick={() => hiddenInputRef.current?.click()} >