sendbird · sf-tyler-jeong · Apr 8, 2026 · Apr 10, 2026
diff --git a/discord-clone/index.html b/discord-clone/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Discord clone using Sendbird UIKit" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/discord-clone/package-lock.json b/discord-clone/package-lock.json
diff --git a/discord-clone/package.json b/discord-clone/package.json
@@ -3,50 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@babel/core": "^7.15.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/styles": "^4.11.4",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
+    "@sendbird/uikit-react": "^3.15.0",
     "copy-to-clipboard": "^3.3.1",
-    "dotenv": "^10.0.0",
-    "node-sass": "^6.0.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-is": "^16.13.1",
     "react-modal": "^3.14.4",
-    "react-scripts": "4.0.3",
     "react-toastify": "^8.1.0",
-    "sendbird": "^3.1.7",
     "sendbird-calls": "^1.9.0",
-    "sendbird-uikit": "^2.5.3",
-    "styled-components": "^5.3.3",
-    "web-vitals": "^1.1.2"
+    "styled-components": "^5.3.3"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.1",
+    "sass": "1.77.6",
+    "vite": "^8.0.7",
+    "vite-plugin-svgr": "^4.3.0"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   }
 }
diff --git a/discord-clone/public/index.html b/discord-clone/public/index.html
diff --git a/discord-clone/src/App.js → discord-clone/src/App.jsx b/discord-clone/src/App.js → discord-clone/src/App.jsx
@@ -1,17 +1,17 @@
 import React, { useState} from "react";
-import { SendBirdProvider as SBProvider } from "sendbird-uikit";
-import "sendbird-uikit/dist/index.css";
+import { SendBirdProvider as SBProvider } from "@sendbird/uikit-react";
+import "@sendbird/uikit-react/dist/index.css";
 import CustomizedApp from "./CustomizedApp.jsx";
 import "./index.css";
 import SendBirdCall from "sendbird-calls";
-import GroupCall from "./OnCall/GroupCall/GroupCall.js";
-import RoomCreated from "./OnCall/GroupCall/RoomCreated.js";
+import GroupCall from "./OnCall/GroupCall/GroupCall.jsx";
+import RoomCreated from "./OnCall/GroupCall/RoomCreated.jsx";
 
 export default function App() {
-  const APP_ID = process.env.REACT_APP_APP_ID;
-  const USER_ID = process.env.REACT_APP_USER_ID;
-  const NICKNAME = process.env.REACT_APP_NICKNAME;
-  const ACCESS_TOKEN = process.env.REACT_APP_ACCESS_TOKEN;
+  const APP_ID = import.meta.env.VITE_APP_ID;
+  const USER_ID = import.meta.env.VITE_USER_ID;
+  const NICKNAME = import.meta.env.VITE_NICKNAME;
+  const ACCESS_TOKEN = import.meta.env.VITE_ACCESS_TOKEN;
   const myColorSet = {
     "--sendbird-light-background-50": "#474a50",
     "--sendbird-light-primary-500": "#33353a",

diff --git a/discord-clone/src/CustomizedApp.jsx b/discord-clone/src/CustomizedApp.jsx
@@ -1,6 +1,6 @@
-import "sendbird-uikit/dist/index.css";
+import "@sendbird/uikit-react/dist/index.css";
 import React, { useState } from "react";
-import { ChannelList as SBChannelList, withSendBird } from "sendbird-uikit";
+import { ChannelList as SBChannelList, useSendbirdStateContext } from "@sendbird/uikit-react";
 import CustomizedChannelPreviewItem from "./CustomizedChannelPreviewItem";
 import CommunityChannelList from "./community-components/CommunityChannelList.jsx";
 import "./community.css";
@@ -10,8 +10,7 @@ import OpenChannelConversation from "./OpenChannelConversation";
 import Profile from "./community-components/Profile";
 import GroupCallForm from "./VoiceCallForms/GroupCallForm";
 
-function CustomizedApp({
-  user,
+export default function CustomizedApp({
   customizedPreviewItem,
   userId,
   appId,
@@ -20,6 +19,9 @@ function CustomizedApp({
   setPassedRoom,
   setOnCall,
 }) {
+  const context = useSendbirdStateContext();
+  const user = context?.stores?.userStore?.user;
+
   const [showSettings, setShowSettings] = useState(false);
   const [showGroupCallForm, setShowGroupCallForm] = useState(false);
   const [currentChannel, setCurrentChannel] = useState(null);
@@ -114,9 +116,3 @@ function CustomizedApp({
       </div>
   );
 }
-
-export default withSendBird(CustomizedApp, (store) => {
-  return {
-    user: store.stores.userStore.user,
-  };
-});
diff --git a/...clone/src/CustomizedChannelPreviewItem.js → ...lone/src/CustomizedChannelPreviewItem.jsx b/...clone/src/CustomizedChannelPreviewItem.js → ...lone/src/CustomizedChannelPreviewItem.jsx
diff --git a/...rc/CustomizedMessageItems/AdminMessage.js → ...c/CustomizedMessageItems/AdminMessage.jsx b/...rc/CustomizedMessageItems/AdminMessage.js → ...c/CustomizedMessageItems/AdminMessage.jsx
diff --git a/...izedMessageItems/CustomizedMessageItem.js → ...zedMessageItems/CustomizedMessageItem.jsx b/...izedMessageItems/CustomizedMessageItem.js → ...zedMessageItems/CustomizedMessageItem.jsx
@@ -1,10 +1,25 @@
 import React, { useMemo } from "react";
+import { useChannelContext } from "@sendbird/uikit-react/Channel/context";
+import { useSendbirdStateContext } from "@sendbird/uikit-react";
+import sendbirdSelectors from "@sendbird/uikit-react/sendbirdSelectors";
 import AdminMessage from "./AdminMessage";
 import FileMessage from "./FileMessage";
 import UserMessage from "./UserMessage";
 
 export default function CustomizedMessageItem(props) {
-  const { message, onDeleteMessage, onUpdateMessage, emojiContainer, userId } = props;
+  const { message, userId } = props;
+  const { currentGroupChannel } = useChannelContext();
+  const globalStore = useSendbirdStateContext();
+
+  const onDeleteMessage = (msg) => {
+    const deleteMessage = sendbirdSelectors.getDeleteMessage(globalStore);
+    deleteMessage(currentGroupChannel, msg);
+  };
+
+  const onUpdateMessage = (messageId, text) => {
+    const updateMessage = sendbirdSelectors.getUpdateUserMessage(globalStore);
+    updateMessage(currentGroupChannel, messageId, { message: text });
+  };
 
   const MessageHOC = useMemo(() => {
     if (message.isAdminMessage && message.isAdminMessage()) {
@@ -16,23 +31,21 @@ export default function CustomizedMessageItem(props) {
           userId={userId}
           onDeleteMessage={onDeleteMessage}
         />
-      );   
+      );
     } else if (message.isUserMessage && message.isUserMessage()) {
       return () => (
         <UserMessage
           message={message}
           userId={userId}
-          emojiContainer={emojiContainer}
           onDeleteMessage={onDeleteMessage}
           onUpdateMessage={onUpdateMessage}
         />
       );
     }
     return () => <div />;
-  }, [message, emojiContainer, userId, onDeleteMessage, onUpdateMessage]);
+  }, [message, userId]);
 
   return (
-
     <div id={message.messageId} className="customized-message-item">
       <MessageHOC />
       <br />

diff --git a/...src/CustomizedMessageItems/FileMessage.js → ...rc/CustomizedMessageItems/FileMessage.jsx b/...src/CustomizedMessageItems/FileMessage.js → ...rc/CustomizedMessageItems/FileMessage.jsx
@@ -23,7 +23,7 @@ const useStyles = makeStyles(theme => ({
 export default function FileMessage(props) {
   const classes = useStyles();
   // props
-  const { message, userId, onDeleteMessage } = props;
+  const { message, userId, onDeleteMessage = () => {} } = props;
 
   return (
     <div className="file-message">

diff --git a/...src/CustomizedMessageItems/UserMessage.js → ...rc/CustomizedMessageItems/UserMessage.jsx b/...src/CustomizedMessageItems/UserMessage.js → ...rc/CustomizedMessageItems/UserMessage.jsx
@@ -10,7 +10,7 @@ import {
 
 export default function UserMessage(props) {
   // props
-  const { message, userId, onDeleteMessage, onUpdateMessage } = props;
+  const { message, userId, onDeleteMessage = () => {}, onUpdateMessage = () => {} } = props;
 
   // useState
   const [messageText, changeMessageText] = useState(message.message);

diff --git a/discord-clone/src/GroupChannelConversation.jsx b/discord-clone/src/GroupChannelConversation.jsx
@@ -2,8 +2,8 @@ import React from "react";
 import {
   Channel as SBConversation,
   ChannelSettings as SBChannelSettings,
-} from "sendbird-uikit";
-import "sendbird-uikit/dist/index.css";
+} from "@sendbird/uikit-react";
+import "@sendbird/uikit-react/dist/index.css";
 import "./index.css";
 import "./community.css";
 import CustomizedMessageItem from "./CustomizedMessageItems/CustomizedMessageItem";
@@ -20,21 +20,6 @@ export default function GroupChannelConversation(props) {
     conversationWrap.style.marginRight = "0px";
   };
 
-  const RenderMessage = ({
-    message,
-    onDeleteMessage,
-    onUpdateMessage,
-    emojiContainer,
-  }) => (
-    <CustomizedMessageItem
-      message={message}
-      onDeleteMessage={onDeleteMessage}
-      onUpdateMessage={onUpdateMessage}
-      emojiContainer={emojiContainer}
-      userId={userId}
-    />
-  );
-
   return (
     <div className="group-channel__conversation-wrap">
       <SBConversation
@@ -43,7 +28,12 @@ export default function GroupChannelConversation(props) {
           setShowSettings(true);
           renderSettingsBar();
         }}
-        renderChatItem={RenderMessage}
+        renderMessage={(props) => (
+          <CustomizedMessageItem
+            message={props.message}
+            userId={userId}
+          />
+        )}
       />
       {showSettings && (
         <div className="sendbird-app__settingspanel-wrap">

diff --git a/discord-clone/src/OnCall/GroupCall/Button.js → ...ord-clone/src/OnCall/GroupCall/Button.jsx b/discord-clone/src/OnCall/GroupCall/Button.js → ...ord-clone/src/OnCall/GroupCall/Button.jsx
diff --git a/...ne/src/OnCall/GroupCall/DeviceSettings.js → ...e/src/OnCall/GroupCall/DeviceSettings.jsx b/...ne/src/OnCall/GroupCall/DeviceSettings.js → ...e/src/OnCall/GroupCall/DeviceSettings.jsx
diff --git a/...d-clone/src/OnCall/GroupCall/GroupCall.js → ...-clone/src/OnCall/GroupCall/GroupCall.jsx b/...d-clone/src/OnCall/GroupCall/GroupCall.js → ...-clone/src/OnCall/GroupCall/GroupCall.jsx
diff --git a/discord-clone/src/OnCall/GroupCall/Info.js → discord-clone/src/OnCall/GroupCall/Info.jsx b/discord-clone/src/OnCall/GroupCall/Info.js → discord-clone/src/OnCall/GroupCall/Info.jsx
diff --git a/...lone/src/OnCall/GroupCall/MediaContent.js → ...one/src/OnCall/GroupCall/MediaContent.jsx b/...lone/src/OnCall/GroupCall/MediaContent.js → ...one/src/OnCall/GroupCall/MediaContent.jsx
diff --git a/discord-clone/src/OnCall/GroupCall/Modal.js → discord-clone/src/OnCall/GroupCall/Modal.jsx b/discord-clone/src/OnCall/GroupCall/Modal.js → discord-clone/src/OnCall/GroupCall/Modal.jsx
diff --git a/...clone/src/OnCall/GroupCall/RoomCreated.js → ...lone/src/OnCall/GroupCall/RoomCreated.jsx b/...clone/src/OnCall/GroupCall/RoomCreated.js → ...lone/src/OnCall/GroupCall/RoomCreated.jsx
diff --git a/...oupCall/SbCalls/SbCallsContext/context.js → ...upCall/SbCalls/SbCallsContext/context.jsx b/...oupCall/SbCalls/SbCallsContext/context.js → ...upCall/SbCalls/SbCallsContext/context.jsx
diff --git a/discord-clone/src/OnCall/GroupCall/Toast.js → discord-clone/src/OnCall/GroupCall/Toast.jsx b/discord-clone/src/OnCall/GroupCall/Toast.js → discord-clone/src/OnCall/GroupCall/Toast.jsx
diff --git a/discord-clone/src/OpenChannelConversation.jsx b/discord-clone/src/OpenChannelConversation.jsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { OpenChannel, OpenChannelSettings } from "sendbird-uikit";
-import "sendbird-uikit/dist/index.css";
+import { OpenChannel, OpenChannelSettings } from "@sendbird/uikit-react";
+import "@sendbird/uikit-react/dist/index.css";
 import "./index.css";
 import "./community.css";
 

diff --git a/discord-clone/src/community-components/CommunityChannelList.jsx b/discord-clone/src/community-components/CommunityChannelList.jsx
@@ -1,35 +1,32 @@
 import React, { useEffect, useState } from "react";
-import { withSendBird, sendBirdSelectors } from "sendbird-uikit";
+import { useSendbirdStateContext, sendbirdSelectors } from "@sendbird/uikit-react";
 import "./community-channel-list.scss";
 import OpenChannelPreview from "./OpenChannelPreview.jsx";
 import AddCommunityChannel from "./create-community-channel/AddCommunityChannel";
 
-function CommunityChannelList({
-  sdk,
+export default function CommunityChannelList({
   userId,
   currentChannelUrl,
   setCurrentChannel,
 }) {
+  const context = useSendbirdStateContext();
+  const sdk = sendbirdSelectors.getSdk(context);
+
   const [channels, setChannels] = useState([]);
   const [showingForm, setShowingForm] = useState(false);
   useEffect(() => {
-    if (!sdk || !sdk.OpenChannel) {
+    if (!sdk || !sdk.openChannel) {
       return;
     }
 
-    const openChannelListQuery = sdk.OpenChannel.createOpenChannelListQuery();
-    // @ts-ignore: Unreachable code error
-
-    openChannelListQuery.next(function (openChannels, error) {
-      if (error) {
-        return;
-      }
+    const openChannelListQuery = sdk.openChannel.createOpenChannelListQuery();
+    openChannelListQuery.next().then((openChannels) => {
       setChannels(openChannels);
       if (openChannels.length > 0) {
         setCurrentChannel(openChannels[0]);
       }
     });
-  }, [sdk,setCurrentChannel]);
+  }, [sdk, setCurrentChannel]);
 
   const showForm = () => {
     setShowingForm(!showingForm);
@@ -74,9 +71,3 @@ function CommunityChannelList({
     </div>
   );
 }
-
-export default withSendBird(CommunityChannelList, (store) => {
-  return {
-    sdk: sendBirdSelectors.getSdk(store)
-  };
-});