I’m using UIKit v3, OS is macOS Monterey.
I have a very simple implementation of chat going right now with a react application running on localhost.
Chat functionality works fine - I can enter in messages and they get logged. However, when I navigate away from my chat component page and click on a different component, my whole application crashes, and this is due to the ChannelList. The error that I get in the console is Sendbird error: Invalid parameters. I’ve attached a screenshot below. Do you possibly know how to fix this error?
import React from "react";
import { useState } from "react";
import "@sendbird/uikit-react/dist/index.css";
import SBProvider from "@sendbird/uikit-react/SendbirdProvider";
import Channel from "@sendbird/uikit-react/Channel";
import ChannelList from "@sendbird/uikit-react/ChannelList";
import { useEffect } from "react";
import { BASE_API_URL } from "../../constants";
import axios from "axios";
export default function Chat({ currentUser, chatCounterpart, createChatUser }) {
let [channelUrl, setChannelUrl] = useState("")
useEffect(() => {
if (currentUser && chatCounterpart) {
createChatUser(chatCounterpart, chatCounterpart);
// create a channel with these two users and return the url so we can display that channel
axios
.post(BASE_API_URL + "/createSendbirdChannel", {
currentUser,
chatCounterpart,
})
.then((res) => {
setChannelUrl(res.data.channelUrl);
})
}
}, [currentUser, chatCounterpart]);
const APP_ID = process.env.REACT_APP_SENDBIRD_APP_ID;
const App = () => {
return (
<div className="App">
<SBProvider
appId={APP_ID}
userId={currentUser}
nickname={currentUser}
>
<div className="customized-app">
<div className="sendbird-app__wrap">
<div className="sendbird-app__channellist-wrap">
<ChannelList
onChannelSelect={(channel) => {
if (channel && channel.url) {
setChannelUrl(channel.url);
}
}}
/>
</div>
<div className="sendbird-app__conversation-wrap">
<Channel
channelUrl={channelUrl}
replyType={"QUOTE_REPLY"}
isReactionEnabled={true}
disableUserProfile={true}
onChatHeaderActionClick={() => {
alert("match");
}}
/>
</div>
</div>
</div>
</SBProvider>
</div>
);
};
return App();
}
Thanks so much!
