diff --git a/discord-clone/src/CustomizedMessageItems/FileMessage.js b/discord-clone/src/CustomizedMessageItems/FileMessage.jsx
similarity index 96%
rename from discord-clone/src/CustomizedMessageItems/FileMessage.js
rename to discord-clone/src/CustomizedMessageItems/FileMessage.jsx
index 8b90c90..7697c91 100644
--- a/discord-clone/src/CustomizedMessageItems/FileMessage.js
+++ b/discord-clone/src/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 (
diff --git a/discord-clone/src/CustomizedMessageItems/UserMessage.js b/discord-clone/src/CustomizedMessageItems/UserMessage.jsx
similarity index 98%
rename from discord-clone/src/CustomizedMessageItems/UserMessage.js
rename to discord-clone/src/CustomizedMessageItems/UserMessage.jsx
index 3f3e4a1..48f265c 100644
--- a/discord-clone/src/CustomizedMessageItems/UserMessage.js
+++ b/discord-clone/src/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
index eff660a..f92741a 100644
--- 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,
- }) => (
-
- );
-
return (
(
+
+ )}
/>
{showSettings && (
diff --git a/discord-clone/src/OnCall/GroupCall/Button.js b/discord-clone/src/OnCall/GroupCall/Button.jsx
similarity index 100%
rename from discord-clone/src/OnCall/GroupCall/Button.js
rename to discord-clone/src/OnCall/GroupCall/Button.jsx
diff --git a/discord-clone/src/OnCall/GroupCall/DeviceSettings.js b/discord-clone/src/OnCall/GroupCall/DeviceSettings.jsx
similarity index 100%
rename from discord-clone/src/OnCall/GroupCall/DeviceSettings.js
rename to discord-clone/src/OnCall/GroupCall/DeviceSettings.jsx
diff --git a/discord-clone/src/OnCall/GroupCall/GroupCall.js b/discord-clone/src/OnCall/GroupCall/GroupCall.jsx
similarity index 100%
rename from discord-clone/src/OnCall/GroupCall/GroupCall.js
rename to discord-clone/src/OnCall/GroupCall/GroupCall.jsx
diff --git a/discord-clone/src/OnCall/GroupCall/Info.js b/discord-clone/src/OnCall/GroupCall/Info.jsx
similarity index 100%
rename from discord-clone/src/OnCall/GroupCall/Info.js
rename to discord-clone/src/OnCall/GroupCall/Info.jsx
diff --git a/discord-clone/src/OnCall/GroupCall/MediaContent.js b/discord-clone/src/OnCall/GroupCall/MediaContent.jsx
similarity index 100%
rename from discord-clone/src/OnCall/GroupCall/MediaContent.js
rename to discord-clone/src/OnCall/GroupCall/MediaContent.jsx
diff --git a/discord-clone/src/OnCall/GroupCall/Modal.js b/discord-clone/src/OnCall/GroupCall/Modal.jsx
similarity index 100%
rename from discord-clone/src/OnCall/GroupCall/Modal.js
rename to discord-clone/src/OnCall/GroupCall/Modal.jsx
diff --git a/discord-clone/src/OnCall/GroupCall/RoomCreated.js b/discord-clone/src/OnCall/GroupCall/RoomCreated.jsx
similarity index 100%
rename from discord-clone/src/OnCall/GroupCall/RoomCreated.js
rename to discord-clone/src/OnCall/GroupCall/RoomCreated.jsx
diff --git a/discord-clone/src/OnCall/GroupCall/SbCalls/SbCallsContext/context.js b/discord-clone/src/OnCall/GroupCall/SbCalls/SbCallsContext/context.jsx
similarity index 100%
rename from discord-clone/src/OnCall/GroupCall/SbCalls/SbCallsContext/context.js
rename to discord-clone/src/OnCall/GroupCall/SbCalls/SbCallsContext/context.jsx
diff --git a/discord-clone/src/OnCall/GroupCall/Toast.js b/discord-clone/src/OnCall/GroupCall/Toast.jsx
similarity index 100%
rename from discord-clone/src/OnCall/GroupCall/Toast.js
rename to discord-clone/src/OnCall/GroupCall/Toast.jsx
diff --git a/discord-clone/src/OpenChannelConversation.jsx b/discord-clone/src/OpenChannelConversation.jsx
index f30171a..99c7c3e 100644
--- 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
index 581f0a9..ff88e91 100644
--- 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({
);
}
-
-export default withSendBird(CommunityChannelList, (store) => {
- return {
- sdk: sendBirdSelectors.getSdk(store)
- };
-});
diff --git a/discord-clone/src/community-components/StreamingChannelList.jsx b/discord-clone/src/community-components/StreamingChannelList.jsx
index 13a78c5..6586632 100644
--- a/discord-clone/src/community-components/StreamingChannelList.jsx
+++ b/discord-clone/src/community-components/StreamingChannelList.jsx
@@ -1,28 +1,26 @@
-import React, { ReactElement, useEffect, useState } from "react";
-import { withSendBird, sendBirdSelectors } from "sendbird-uikit";
+import React, { useEffect, useState } from "react";
+import { useSendbirdStateContext, sendbirdSelectors } from "@sendbird/uikit-react";
import "./streaming-channel-list.scss";
import OpenChannelPreview from "./OpenChannelPreview";
import Profile from "./Profile";
-function StreamingChannelList({
- sdk,
- user,
+export default function StreamingChannelList({
currentChannelUrl,
setCurrentChannel,
}) {
+ const context = useSendbirdStateContext();
+ const sdk = sendbirdSelectors.getSdk(context);
+ const user = context?.stores?.userStore?.user;
+
const [channels, setChannels] = useState([]);
useEffect(() => {
- if (!sdk || !sdk.OpenChannel) {
+ if (!sdk || !sdk.openChannel) {
return;
}
- const openChannelListQuery = sdk.OpenChannel.createOpenChannelListQuery();
- // @ts-ignore: Unreachable code error
+ const openChannelListQuery = sdk.openChannel.createOpenChannelListQuery();
openChannelListQuery.customTypes = ["SB_LIVE_TYPE"];
- openChannelListQuery.next(function (openChannels, error) {
- if (error) {
- return;
- }
+ openChannelListQuery.next().then((openChannels) => {
setChannels(openChannels);
if (openChannels.length > 0) {
setCurrentChannel(openChannels[0]);
@@ -63,11 +61,3 @@ function StreamingChannelList({
);
}
-
-export default withSendBird(StreamingChannelList, (store) => {
- console.warn(store);
- return {
- sdk: sendBirdSelectors.getSdk(store),
- user: store.stores.userStore.user,
- };
-});
diff --git a/discord-clone/src/community-components/create-community-channel/AddCommunityChannel.jsx b/discord-clone/src/community-components/create-community-channel/AddCommunityChannel.jsx
index 73187c8..2908f97 100644
--- a/discord-clone/src/community-components/create-community-channel/AddCommunityChannel.jsx
+++ b/discord-clone/src/community-components/create-community-channel/AddCommunityChannel.jsx
@@ -11,20 +11,16 @@ export default function AddCommunityChannel({ sdk, userId, setShowingForm }) {
var data = null;
const openChannelFormSubmit = () => {
- sdk.OpenChannel.createChannel(
- newChannelName,
- imageUrl,
- data,
- operatorUserIds,
- customType,
- function (openChannel, error) {
- if (error) {
- // Handle error.
- }
- const channel = openChannel.channelUrl;
- console.log('Channel created:', channel)
- }
- );
+ const params = {
+ name: newChannelName,
+ coverUrlOrImage: imageUrl,
+ data: data,
+ operatorUserIds: operatorUserIds,
+ customType: customType,
+ };
+ sdk.openChannel.createChannel(params).then((openChannel) => {
+ console.log('Channel created:', openChannel.url);
+ });
changeNewChannelName("");
};
@@ -52,7 +48,7 @@ export default function AddCommunityChannel({ sdk, userId, setShowingForm }) {
AddCommunityChannel.propTypes = {
sdk: PropTypes.shape({
- getErrorFirstCallback: PropTypes.func,
+ openChannel: PropTypes.object,
}).isRequired,
disabled: PropTypes.bool,
userId: PropTypes.string.isRequired,
diff --git a/discord-clone/src/community-components/create-community-channel/modal/Modal.js b/discord-clone/src/community-components/create-community-channel/modal/Modal.jsx
similarity index 100%
rename from discord-clone/src/community-components/create-community-channel/modal/Modal.js
rename to discord-clone/src/community-components/create-community-channel/modal/Modal.jsx
diff --git a/discord-clone/src/index.css b/discord-clone/src/index.css
index ac10c2b..551a643 100644
--- a/discord-clone/src/index.css
+++ b/discord-clone/src/index.css
@@ -165,7 +165,7 @@ body {
.sendbird-channel-list__body .MuiAvatar-img,
.sendbird-channel-list__body
.MuiTypography-root.MuiTypography-caption.MuiTypography-colorTextSecondary,
-.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall,
+.sendbird-channel-list__body .MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall,
.sendbird-chat-header
.sendbird-chat-header--avatar--group-channel.sendbird-avatar
.sendbird-avatar-img.sendbird-image-renderer,
@@ -201,6 +201,17 @@ body {
color: #8e9297;
flex: 1;
height: 100%;
+ overflow: visible;
+}
+
+.private-channel-list .sendbird-channel-list {
+ height: auto !important;
+ overflow: visible !important;
+}
+
+.private-channel-list .sendbird-channel-list__body {
+ height: auto !important;
+ overflow: visible !important;
}
.user-message
diff --git a/discord-clone/src/index.js b/discord-clone/src/main.jsx
similarity index 69%
rename from discord-clone/src/index.js
rename to discord-clone/src/main.jsx
index fa77abd..6832e78 100644
--- a/discord-clone/src/index.js
+++ b/discord-clone/src/main.jsx
@@ -2,9 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-require('dotenv').config();
ReactDOM.render(
@@ -12,5 +9,3 @@ ReactDOM.render(
,
document.getElementById('root')
);
-
-reportWebVitals();
\ No newline at end of file
diff --git a/discord-clone/src/reportWebVitals.js b/discord-clone/src/reportWebVitals.js
deleted file mode 100644
index 5253d3a..0000000
--- a/discord-clone/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
- if (onPerfEntry && onPerfEntry instanceof Function) {
- import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
- }
-};
-
-export default reportWebVitals;
diff --git a/discord-clone/src/setupTests.js b/discord-clone/src/setupTests.js
deleted file mode 100644
index 8f2609b..0000000
--- a/discord-clone/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
diff --git a/discord-clone/vite.config.js b/discord-clone/vite.config.js
new file mode 100644
index 0000000..fb517f7
--- /dev/null
+++ b/discord-clone/vite.config.js
@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
+
+export default defineConfig({
+ plugins: [
+ react({
+ jsxRuntime: 'classic',
+ }),
+ svgr({
+ svgrOptions: { exportType: 'default' },
+ include: '**/*.svg',
+ }),
+ ],
+ define: {
+ global: 'globalThis',
+ },
+ server: {
+ port: 3000,
+ open: true,
+ },
+ build: {
+ outDir: 'build',
+ },
+});