diff --git a/src/components/DashBoard/Dashboard.js b/src/components/DashBoard/Dashboard.js
index 98cea99..f12bac9 100644
--- a/src/components/DashBoard/Dashboard.js
+++ b/src/components/DashBoard/Dashboard.js
@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useState, useCallback, useContext, useMemo } from "react";
+import React, { useEffect, useState, useCallback, useContext, useMemo } from "react";
import { NavLink, Route, Redirect, Switch } from "react-router-dom";
import firebase from "../../firebase";
import "./Dashboard.scss";
@@ -16,15 +16,13 @@ import CloseIcon from "@material-ui/icons/Close";
import { useDocument } from "react-firebase-hooks/firestore";
const Dashboard = props => {
- // const [overlaySettings, setOverlaySettings] = useState();
+ const [overlaySettings, setOverlaySettings] = useState();
const [appSettings, setAppSettings] = useState();
const [defaultSettings, setDefaultSettings] = useState();
const { currentUser, dropDownOpen: open } = useContext(AppContext);
const id = firebase.auth.currentUser.uid;
const [discordId, setDiscordId] = useState("");
- const { activePlugins, dashboardOpen, setDashboardOpen, setUserDiscordInfo } = useContext(
- DiscordContext
- );
+ const { activePlugins, dashboardOpen, setDashboardOpen, setUserDiscordInfo } = useContext(DiscordContext);
const handleClose = (event, reason) => {
if (reason === "clickaway") {
@@ -79,7 +77,7 @@ const Dashboard = props => {
useEffect(() => {
(async () => {
if (currentUser) {
- // setOverlaySettings(currentUser.overlaySettings);
+ setOverlaySettings(currentUser.overlaySettings);
setAppSettings(currentUser.appSettings);
}
})();
@@ -93,12 +91,9 @@ const Dashboard = props => {
[activePlugins]
);
- const showDropdown = useMediaQuery("(min-width: 900px)");
-
- // TODO: handle error with third item in this array
- const [rawDiscordData, discordDataLoading] = useDocument(
- firebase.db.doc(`Streamers/${id}/discord/data`)
- );
+ const showDropdown = useMediaQuery("(min-width: 900px)");
+
+ const [rawDiscordData, discordDataLoading, DiscordDataError] = useDocument(firebase.db.doc(`Streamers/${id}/discord/data`));
useEffect(() => {
if (discordDataLoading) return;
@@ -108,30 +103,20 @@ const Dashboard = props => {
return (
-
+
App Settings
{/*
overlay Settings
*/}
-
+
Discord Settings
- {showDropdown &&
- !!displayPlugins.length &&
- window?.location?.pathname?.includes?.("discord") && (
+ {showDropdown && !!displayPlugins.length && window?.location?.pathname?.includes?.("discord") && (
{displayPlugins.map(key => {
- const plugin = plugins.find(plugin => plugin.id === key);
- if (!plugin) return null;
+ const plugin = plugins.find(plugin => plugin.id === key);
+ if(!plugin) return null;
return (
{
})}
)}
-
+
Account Settings
@@ -181,8 +162,7 @@ const Dashboard = props => {
title="App Settings"
subtitle={
<>
- Adjust the settings of your app. if you don't use the app but
- want to you can start using it{" "}
+ Adjust the settings of your app. if you don't use the app but want to you can start using it{" "}
here
@@ -208,16 +188,11 @@ const Dashboard = props => {
onClose={handleClose}
message="Saved"
action={
-
-
+
+
-
+
}
/>
diff --git a/src/components/DashBoard/Dashboard.scss b/src/components/DashBoard/Dashboard.scss
index 1150c98..6bf4482 100644
--- a/src/components/DashBoard/Dashboard.scss
+++ b/src/components/DashBoard/Dashboard.scss
@@ -42,10 +42,10 @@
.plugins {
padding-top: 1rem;
- margin-bottom: 5rem;
- @media screen and (max-width: 500px) {
- margin-right: 1rem;
- }
+ margin-bottom: 5rem;
+ @media screen and (max-width: 500px) {
+ margin-right: 1rem;
+ }
h2 {
text-transform: uppercase;
font-size: 1.25rem;
@@ -132,10 +132,6 @@
.level-settings {
display: flex;
- &,
- & * {
- box-sizing: border-box !important;
- }
@media screen and (max-width: 550px) {
flex-direction: column;
textarea {
@@ -165,26 +161,21 @@
h5 {
flex: 0;
}
- }
- }
-}
-
-.message {
- textarea {
- flex: 1;
- resize: none;
- background: lighten($color: #121212, $amount: 7);
- border: 1px solid black;
- color: white;
- border-radius: 0.5rem;
- padding: 0.5rem;
- width: 100%;
- font-size: 1rem;
- // border: none;
- &:focus {
- outline: none !important;
- box-shadow: 0 0 0 1px #137cbd, 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3),
- inset 0 0 0 1px rgba(16, 22, 26, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.4);
+ textarea {
+ flex: 1;
+ resize: none;
+ background: lighten($color: #121212, $amount: 7);
+ border: 1px solid black;
+ color: white;
+ border-radius: 0.5rem;
+ padding: 0.5rem;
+ // border: none;
+ &:focus {
+ outline: none !important;
+ box-shadow: 0 0 0 1px #137cbd, 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3), inset 0 0 0 1px rgba(16, 22, 26, 0.3),
+ inset 0 1px 1px rgba(16, 22, 26, 0.4);
+ }
+ }
}
}
}
@@ -696,9 +687,9 @@
}
@media screen and (max-width: 900px) {
- // .main {
- // padding-top: 100px;
- // }
+ .main {
+ padding-top: 100px;
+ }
.setting-link {
text-align: center;
@@ -737,13 +728,6 @@
}
}
-.plugin-item-body {
- &,
- & * {
- box-sizing: border-box !important;
- }
-}
-
.command-card-body {
width: 100%;
// min-height: 100px;
@@ -829,13 +813,7 @@
}
}
.command-body {
- & > div {
- width: 60% !important;
- margin: 0 auto;
- height: calc(100vh - 140px);
- }
- min-height: calc(100vh - 140px);
- // background: darken(#242424, 5);
+ height: calc(100vh - 140px);
overflow: auto;
.plugin-section {
padding-left: 0.5rem;
@@ -858,23 +836,18 @@
background: lighten($color: #121212, $amount: 10);
padding: 0.5rem;
border-radius: 0.25rem;
- &,
- & * {
- box-sizing: border-box !important;
- }
flex-wrap: wrap;
// height: 210px;
margin-bottom: 2rem;
justify-content: space-between;
justify-items: stretch;
-
ul {
transition: 0.25s;
transform-origin: top;
- max-height: 3000px;
- @media screen and (max-width: 500px) {
- max-height: 7000px;
- }
+ max-height: 3000px;
+ @media screen and (max-width: 500px) {
+ max-height: 7000px;
+ }
overflow: hidden;
&.closed {
max-height: 0px;
@@ -887,18 +860,18 @@
align-items: center;
margin-left: 0;
margin: 0.5rem;
- justify-content: space-between;
- @media screen and (max-width: 500px) {
- flex-direction: column;
- align-items: flex-start;
- }
+ justify-content: space-between;
+ @media screen and (max-width: 500px) {
+ flex-direction: column;
+ align-items: flex-start;
+ }
& > *:last-child {
- width: 50%;
- margin-right: 1rem;
- @media screen and (max-width: 500px) {
- width: 100%;
- margin-right: 0;
- }
+ width: 50%;
+ margin-right: 1rem;
+ @media screen and (max-width: 500px) {
+ width: 100%;
+ margin-right: 0;
+ }
}
& > div:first-child {
margin-right: 2rem;
@@ -913,7 +886,7 @@
display: block;
}
border: 0.5px solid lighten($color: #121212, $amount: 20);
- &:not(.wide) > div {
+ & > div {
width: 50%;
}
#root & > label {
@@ -1070,40 +1043,27 @@ span.toggle-button button {
}
.emoji-mart {
- .emoji-mart-emoji {
+ .emoji-mart-emoji{
width: initial !important;
margin-right: 0 !important;
}
- ul li {
+ ul li{
display: initial !important;
margin: 0 !important;
margin: 0;
}
}
-.blank-home {
- * {
+.blank-home{
+ *{
cursor: not-allowed;
}
- *:not(div),
- .prefix-body,
- .plugin-card {
+ *:not(div), .prefix-body, .plugin-card{
color: #121212 !important;
background: #121212 !important;
border-color: #121212 !important;
}
- *::after,
- .plugin-switch,
- .image,
- hr {
+ *::after, .plugin-switch, .image, hr{
display: none;
}
-}
-
-.css-jtuip8-container {
- &,
- & * {
- color: white !important;
- // z-index: 10000;
- }
-}
+}
\ No newline at end of file
diff --git a/src/components/DashBoard/Discord/DiscordPage.js b/src/components/DashBoard/Discord/DiscordPage.js
index 77b1360..f597ebd 100644
--- a/src/components/DashBoard/Discord/DiscordPage.js
+++ b/src/components/DashBoard/Discord/DiscordPage.js
@@ -1,26 +1,38 @@
-import { memo, useEffect, useState, useCallback, useContext } from "react";
-import { withRouter, useParams } from "react-router-dom";
+import React, { useEffect, useState, useCallback, useContext } from "react";
+import { Route, Redirect, Switch, withRouter, useParams } from "react-router-dom";
import firebase from "../../../firebase";
+import Select from "react-select";
+import useFetch from "../../../hooks/useFetch";
+import SmallLoader from "../../Shared/SmallLoader";
import A from "../../Shared/A";
import useSnapshot from "../../../hooks/useSnapshot";
-import { guildOption } from "../../../utils/functions";
+
+import { colorStyles, guildOption } from "../../Shared/userUtils";
import { AppContext } from "../../../contexts/Appcontext";
-import { DiscordContext } from "../../../contexts/DiscordContext";
+import { DiscordContextProvider, DiscordContext } from "../../../contexts/DiscordContext";
import PluginHome from "./Plugins/PluginHome";
-import StyledSelect from "../../../styled-components/StyledSelect";
-const DiscordPage = memo(({ history, match }) => {
+const DiscordPage = React.memo(({ location, history, match }) => {
const [displayGuild, setDisplayGuild] = useState();
const [refreshed, setRefreshed] = useState(false);
+ const { isLoading, sendRequest: sendLoadingRequest } = useFetch();
+ const id = firebase.auth.currentUser.uid;
const { id: guildId } = useParams();
- const { userDiscordInfo, userConnectedGuildInfo, setUserConnectedGuildInfo } = useContext(DiscordContext);
+ const { sendRequest } = useFetch();
+ const { currentUser, setCurrentUser } = useContext(AppContext);
+ const {
+ userDiscordInfo,
+ setUserDiscordInfo,
+ userConnectedChannels,
+ userConnectedGuildInfo,
+ setUserConnectedChannels,
+ setUserConnectedGuildInfo,
+ } = useContext(DiscordContext);
const [connectedGuild, setConnectedGuild] = useState();
- const { userId } = useContext(AppContext);
- const guilds = userDiscordInfo?.guilds
useEffect(() => {
(async () => {
- const guild = guilds?.find?.(guild => guild.id === guildId);
+ const guild = userDiscordInfo?.guilds?.find?.(guild => guild.id === guildId);
if (guild) {
const response = await fetch(`${process.env.REACT_APP_API_URL}/getchannels?new=true&guild=` + guildId);
const memberResponse = await fetch(`${process.env.REACT_APP_API_URL}/ismember?guild=` + guildId);
@@ -28,7 +40,7 @@ const DiscordPage = memo(({ history, match }) => {
const memberJson = await memberResponse.json();
const roles = json.roles;
const channels = json.channels;
- const userData = (await firebase.db.collection("Streamers").doc(userId).get()).data();
+ const userData = (await firebase.db.collection("Streamers").doc(id).get()).data();
setConnectedGuild({ ...guild, roles, channels, isMember: memberJson?.result });
setUserConnectedGuildInfo({
...guild,
@@ -39,7 +51,7 @@ const DiscordPage = memo(({ history, match }) => {
});
}
})();
- }, [guildId, setUserConnectedGuildInfo, guilds, userId]);
+ }, [guildId, userDiscordInfo?.guilds, setUserConnectedGuildInfo]);
useEffect(() => {
(async () => {
@@ -53,51 +65,110 @@ const DiscordPage = memo(({ history, match }) => {
const refreshToken = userDiscordInfo?.refreshToken;
useEffect(() => {
(async () => {
- if (!refreshToken || !userId) return;
+ if (!refreshToken || !id) return;
if (refreshed) return console.log("already refreshed");
console.log("refreshing");
- const otcData = (await firebase.db.collection("Secret").doc(userId).get()).data();
+ const otcData = (await firebase.db.collection("Secret").doc(id).get()).data();
const otc = otcData?.value;
setRefreshed(true);
- const response = await fetch(`${process.env.REACT_APP_API_URL}/discord/token/refresh?token=${refreshToken}&id=${userId}&otc=${otc}`);
+ const response = await fetch(`${process.env.REACT_APP_API_URL}/discord/token/refresh?token=${refreshToken}&id=${id}&otc=${otc}`);
if (!response.ok) return;
const json = await response.json();
-
+ console.log({ json });
if (!json) return;
await firebase.db
.collection("Streamers")
- .doc(userId || " ")
+ .doc(id || " ")
.collection("discord")
.doc("data")
.update(json.userData);
})();
- }, [userId, refreshed, refreshToken]);
+ }, [id, refreshed, refreshToken]);
+
+ const disconnect = useCallback(
+ async fullDisconnet => {
+ // if (!fullDisconnet) {
+ setUserConnectedGuildInfo(prev => ({ ...prev, connected: false }));
+ // } else {
+ // setUserConnectedGuildInfo(null);
+ // }
+ firebase.db.collection("Streamers").doc(id).collection("discord").doc("data").update({
+ connectedGuild: "",
+ liveChatId: [],
+ });
+ firebase.db.collection("Streamers").doc(id).update({
+ liveChatId: [],
+ });
+ },
+ [id]
+ );
+
+ const disconnectAccount = useCallback(async () => {
+ disconnect();
+ firebase.db.collection("Streamers").doc(id).collection("discord").doc("data").set({});
+ setCurrentUser(prev => ({ ...prev, discordData: {} }));
+ }, [id, disconnect, setCurrentUser]);
+
+ const guilds = userDiscordInfo?.guilds;
+
+ // useSnapshot(
+ // firebase.db.collection("Streamers").doc(id).collection("discord").doc("data"),
+ // async snapshot => {
+ // const data = snapshot.data();
+ // if (data) {
+ // const userData = (await firebase.db.collection("Streamers").doc(id).get()).data();
+ // const connectedGuildId = data.connectedGuild;
+ // const guildByName = guilds?.find?.(guild => guild.id === connectedGuildId);
+ // if (guildByName) {
+ // const guildId = guildByName.id;
+ // const value = await sendRequest(`${process.env.REACT_APP_API_URL}/ismember?guild=` + guildId);
+ // const response = await sendRequest(`${process.env.REACT_APP_API_URL}/getchannels?new=true&guild=` + guildId);
+ // const channelReponse = response.channels;
+ // console.log(response.roles);
+ // setUserConnectedGuildInfo({
+ // name: guildByName.name,
+ // isMember: value?.result,
+ // icon: guildByName.icon,
+ // id: guildByName.id,
+ // channels: channelReponse,
+ // roles: response.roles,
+ // connectedChannels: channelReponse?.filter(channel => userData.liveChatId?.includes(channel.id)),
+ // connected: true,
+ // });
+ // }
+ // }
+ // },
+ // [id, guilds]
+ // );
useSnapshot(
- firebase.db
- .collection("Streamers")
- .doc(userId || " ")
- .collection("discord")
- .doc("data"),
+ firebase.db.collection("Streamers").doc(id).collection("discord").doc("data"),
async snapshot => {
const data = snapshot.data();
if (data) {
firebase.db
.collection("Streamers")
- .doc(userId || " ")
+ .doc(id || " ")
.update({
guildId: data.connectedGuild || "",
});
}
},
- [userId]
+ [id]
);
+ const Connectguild = useCallback(async () => {
+ setUserConnectedGuildInfo(prev => ({ ...prev, connected: true }));
+ firebase.db.collection("Streamers").doc(id).collection("discord").doc("data").update({
+ connectedGuild: userConnectedGuildInfo.id,
+ });
+ }, [userConnectedGuildInfo, id, setUserConnectedGuildInfo]);
+
const onGuildSelect = useCallback(
async e => {
const name = e.value;
- const guildByName = guilds?.find(guild => guild.name === name);
+ const guildByName = userDiscordInfo.guilds.find(guild => guild.name === name);
const selectedGuildId = guildByName.id;
try {
if (guildId) {
@@ -111,8 +182,18 @@ const DiscordPage = memo(({ history, match }) => {
history.push(`${match.url}/${selectedGuildId}`);
}
} catch (err) {}
+ const { result: isMember } = await sendLoadingRequest(`${process.env.REACT_APP_API_URL}/ismember?guild=` + selectedGuildId);
+ // const channelReponse = await sendLoadingRequest(`${process.env.REACT_APP_API_URL}/getchannels?guild=` + selectedGuildId);
+
+ // setUserConnectedGuildInfo({
+ // name,
+ // isMember,
+ // icon: guildByName.icon,
+ // id: guildByName.id,
+ // channels: channelReponse,
+ // });
},
- [guilds, guildId, match.url, history]
+ [userDiscordInfo, sendLoadingRequest]
);
return (
@@ -127,29 +208,38 @@ const DiscordPage = memo(({ history, match }) => {
{Object.keys(userDiscordInfo || {}).length ? (
<>
-
guild.permissions.includes("MANAGE_GUILD")).map(guildOption)}
+ styles={colorStyles}
/>
+ {/*
+ {currentUser?.displayName}
+ */}
- {userConnectedGuildInfo ? (
- !userConnectedGuildInfo.isMember ? (
-
- ) : guildId ? (
-
- ) : (
- <>
- )
+ {isLoading ? (
+
+ ) : userConnectedGuildInfo ? (
+ <>
+ {!userConnectedGuildInfo.isMember ? (
+
+ ) : guildId ? (
+
+ ) : (
+ <>
+ )}
+
) : (
)}
@@ -172,4 +262,4 @@ const DiscordPage = memo(({ history, match }) => {
);
});
-export default withRouter(memo(DiscordPage));
+export default withRouter(React.memo(DiscordPage));
diff --git a/src/components/DashBoard/Discord/Plugins/App.js b/src/components/DashBoard/Discord/Plugins/App.js
index f8d854b..6170390 100644
--- a/src/components/DashBoard/Discord/Plugins/App.js
+++ b/src/components/DashBoard/Discord/Plugins/App.js
@@ -1,11 +1,20 @@
-import { memo, useCallback, useContext } from "react";
+import React, { useEffect, useState, useCallback, useContext } from "react";
import firebase from "../../../../firebase";
+import { colorStyles } from "../../../Shared/userUtils";
import { DiscordContext } from "../../../../contexts/DiscordContext";
-import StyledSelect from "../../../../styled-components/StyledSelect";
+import Select from "react-select";
-const App = () => {
- const { userConnectedGuildInfo, setUserConnectedGuildInfo } = useContext(DiscordContext);
- const id = firebase.auth.currentUser.uid;
+const App = ({ location }) => {
+ const {
+ userDiscordInfo,
+ setUserDiscordInfo,
+ userConnectedChannels,
+ userConnectedGuildInfo,
+ setUserConnectedChannels,
+ setUserConnectedGuildInfo,
+ } = useContext(DiscordContext);
+ const guildId = userConnectedGuildInfo?.id;
+ const id = firebase.auth.currentUser.uid;
const onChannelSelect = useCallback(
async e => {
@@ -40,7 +49,7 @@ const App = () => {
- DisStreamChat App
@@ -50,40 +59,46 @@ const App = () => {
Whenever a message is sent in one of the selected channels it will be sent to the app.
- <>
-
select channels to listen to
- a.parent.localeCompare(b.parent))
- ?.map(channel => ({
- value: channel.id,
- label: (
- <>
- {channel.name}
- {channel.parent}
-
- ),
- }))}
- options={userConnectedGuildInfo.channels
- .sort((a, b) => a.parent.localeCompare(b.parent))
- .map(channel => ({
- value: channel.id,
- label: (
- <>
- {channel.name}
- {channel.parent}
-
- ),
- }))}
- isMulti
- />
-
+ {(
+ <>
+ select channels to listen to
+ a.parent.localeCompare(b.parent))
+ ?.map(channel => ({
+ value: channel.id,
+ label: (
+ <>
+ {channel.name}
+ {channel.parent}
+
+ ),
+ }))}
+ options={userConnectedGuildInfo.channels
+ .sort((a, b) => a.parent.localeCompare(b.parent))
+ .map(channel => ({
+ value: channel.id,
+ label: (
+ <>
+ {channel.name}
+ {channel.parent}
+
+ ),
+ }))}
+ styles={{
+ ...colorStyles,
+ container: styles => ({ ...styles, ...colorStyles.container }),
+ }}
+ isMulti
+ />
+
+ )}
);
};
-export default memo(App);
+export default React.memo(App);
diff --git a/src/components/DashBoard/Discord/Plugins/CustomCommands/CommandItem.js b/src/components/DashBoard/Discord/Plugins/CustomCommands/CommandItem.js
index a31a03d..7baf746 100644
--- a/src/components/DashBoard/Discord/Plugins/CustomCommands/CommandItem.js
+++ b/src/components/DashBoard/Discord/Plugins/CustomCommands/CommandItem.js
@@ -1,9 +1,10 @@
-import { useCallback, useContext, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
import "./CommandItem.scss";
import firebase from "../../../../../firebase";
import CancelTwoToneIcon from "@material-ui/icons/CancelTwoTone";
+import { DiscordContext } from "../../../../../contexts/DiscordContext";
import { CommandContext } from "../../../../../contexts/CommandContext";
-import RoleItem from "../../../../../styled-components/RoleItem";
+import RoleItem from "../../../../Shared/RoleItem";
const CommandItem = ({
name,
@@ -33,7 +34,6 @@ const CommandItem = ({
setError,
setEditing,
} = useContext(CommandContext);
- const [displayRole, setDisplayRole] = useState();
const [allowedRoles, setPermittedRoles] = useState([]);
const guildId = userConnectedGuildInfo.id;
const deleteMe = useCallback(async () => {
@@ -103,9 +103,10 @@ const CommandItem = ({
setCreatingCommand(type || "text");
};
+ const [displayRole, setDisplayRole] = useState();
useEffect(() => {
setDisplayRole(userConnectedGuildInfo.roles.find(r => r.id === role));
- }, [role, setDisplayRole, userConnectedGuildInfo.roles]);
+ }, []);
return (
diff --git a/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateCommand.js b/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateCommand.js
index 1b01df9..05797fd 100644
--- a/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateCommand.js
+++ b/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateCommand.js
@@ -1,12 +1,56 @@
-import { useEffect, useContext } from "react";
import ClearIcon from "@material-ui/icons/Clear";
-import RoleItem from "../../../../../styled-components/RoleItem";
+import { DiscordContext } from "../../../../../contexts/DiscordContext";
+import React, { useEffect, useState, useCallback, useContext } from "react";
+import Select from "react-select";
+import { colorStyles } from "../../../../Shared/userUtils";
+import RoleItem from "../../../../Shared/RoleItem";
import FormControlLabel from "@material-ui/core/FormControlLabel";
+import { Switch } from "@material-ui/core";
+import { withStyles } from "@material-ui/core/styles";
+import { blueGrey } from "@material-ui/core/colors";
import { CommandContext } from "../../../../../contexts/CommandContext";
import firebase from "../../../../../firebase";
-import StyledSelect from "../../../../../styled-components/StyledSelect";
-import FancySwitch from "../../../../../styled-components/FancySwitch";
-import { parseSelectValue } from "../../../../../utils/functions";
+
+const FancySwitch = withStyles({
+ root: {
+ padding: 7,
+ },
+ thumb: {
+ width: 24,
+ height: 24,
+ backgroundColor: "#fff",
+ boxShadow: "0 0 12px 0 rgba(0,0,0,0.08), 0 0 8px 0 rgba(0,0,0,0.12), 0 0 4px 0 rgba(0,0,0,0.38)",
+ },
+ switchBase: {
+ color: "rgba(0,0,0,0.38)",
+ padding: 7,
+ },
+ track: {
+ borderRadius: 20,
+ backgroundColor: blueGrey[300],
+ },
+ checked: {
+ "& $thumb": {
+ backgroundColor: "#fff",
+ },
+ "& + $track": {
+ opacity: "1 !important",
+ },
+ },
+})(Switch);
+
+const parseSelectValue = value => {
+ if (value instanceof Array) {
+ if (value.length === 0) return value;
+ return value.map(role => JSON.parse(role.value.split("=")[1])).map(val => val.id);
+ } else {
+ try {
+ return JSON.parse(value.value.split("=")[1]).id;
+ } catch (err) {
+ return null;
+ }
+ }
+};
const CreateCommand = ({ setCreatingCommand, children, role, guild: userConnectedGuildInfo }) => {
const {
@@ -43,7 +87,7 @@ const CreateCommand = ({ setCreatingCommand, children, role, guild: userConnecte
}))
);
}
- }, [editing, userConnectedGuildInfo.roles, setAllowedRoles]);
+ }, [editing, userConnectedGuildInfo?.roles, setAllowedRoles]);
return (
<>
@@ -54,146 +98,156 @@ const CreateCommand = ({ setCreatingCommand, children, role, guild: userConnecte
-
-
Command Name
-
-
- {children}
-
Command Description
-
-
-
Allowed Roles
-
- {
- setAllowedRoles(e);
- }}
- placeholder="Select Allowed Roles"
- value={allowedRoles}
- options={userConnectedGuildInfo?.roles
- ?.sort((a, b) => b.rawPosition - a.rawPosition)
- ?.map(role => ({
- value: `${role.name}=${JSON.stringify(role)}`,
- label: {role.name} ,
- }))}
- />
-
-
Banned Roles
-
- {
- setBannedRoles(e);
- }}
- placeholder="Select Banned Roles"
- value={bannedRoles}
- options={userConnectedGuildInfo?.roles
- ?.filter(role => role.name !== "@everyone")
- ?.sort((a, b) => b.rawPosition - a.rawPosition)
- ?.map(role => ({
- value: `${role.name}=${JSON.stringify(role)}`,
- label: {role.name} ,
- }))}
- />
-
-
Allowed Channels
-
- {
- setAllowedChannels(e);
- }}
- placeholder="Select Allowed Channels"
- value={allowedChannels}
- options={userConnectedGuildInfo?.channels
- ?.sort((a, b) => a.parent.localeCompare(b.parent))
- ?.map(channel => ({
- value: `${channel.name}=${JSON.stringify(channel)}`,
- label: (
- <>
- {channel.name}
-
- {channel.parent}
-
-
- ),
- }))}
- />
-
-
Command Cooldown (in minutes)
-
-
- {role && (
- <>
-
Delete After use
-
- {
- setDeleteUsage(e.target.checked);
- }}
- name={"Delete_after_usage"}
- />
- }
- label={"Delete After Usage"}
- />
-
-
- )}
+
Command Name
+
+
+ {children}
+
Command Description
+
+
+
Allowed Roles
+
+ {
+ setAllowedRoles(e);
+ }}
+ placeholder="Select Allowed Roles"
+ value={allowedRoles}
+ options={userConnectedGuildInfo?.roles
+ ?.sort((a, b) => b.rawPosition - a.rawPosition)
+ ?.map(role => ({
+ value: `${role.name}=${JSON.stringify(role)}`,
+ label: {role.name} ,
+ }))}
+ styles={{
+ ...colorStyles,
+ container: styles => ({
+ ...styles,
+ ...colorStyles.container,
+ }),
+ }}
+ />
+
+
Banned Roles
+
+ {
+ setBannedRoles(e);
+ }}
+ placeholder="Select Banned Roles"
+ value={bannedRoles}
+ options={userConnectedGuildInfo?.roles
+ ?.filter(role => role.name !== "@everyone")
+ ?.sort((a, b) => b.rawPosition - a.rawPosition)
+ ?.map(role => ({
+ value: `${role.name}=${JSON.stringify(role)}`,
+ label: {role.name} ,
+ }))}
+ styles={{
+ ...colorStyles,
+ container: styles => ({
+ ...styles,
+ ...colorStyles.container,
+ }),
+ }}
+ />
+
+
Allowed Channels
+
+ {
+ setAllowedChannels(e);
+ }}
+ placeholder="Select Allowed Channels"
+ value={allowedChannels}
+ options={userConnectedGuildInfo?.channels
+ ?.sort((a, b) => a.parent.localeCompare(b.parent))
+ ?.map(channel => ({
+ value: `${channel.name}=${JSON.stringify(channel)}`,
+ label: (
+ <>
+ {channel.name}
+ {channel.parent}
+
+ ),
+ }))}
+ styles={{
+ ...colorStyles,
+ container: styles => ({
+ ...styles,
+ ...colorStyles.container,
+ }),
+ }}
+ />
+
+
Command Cooldown (in minutes)
+
+
+ {role && (
+ <>
+
Delete After use
+
+ {
+ setDeleteUsage(e.target.checked);
+ }}
+ name={"Delete_after_usage"}
+ />
+ }
+ label={"Delete After Usage"}
+ />
+
+
+ )}
{error.message &&
{error.message} }
{
setError({});
- if (name.length === 0)
- return setError({ message: "The Command must have name" });
- if (!role && response.length === 0)
- return setError({ message: "The Command must have a response" });
- const commandRef = firebase.db
- .collection("customCommands")
- .doc(userConnectedGuildInfo.id);
+ if (name.length === 0) return setError({ message: "The Command must have name" });
+ if (!role && response.length === 0) return setError({ message: "The Command must have a response" });
+ const commandRef = firebase.db.collection("customCommands").doc(userConnectedGuildInfo.id);
if (!editing) {
const commands = (await commandRef.get()).data();
- if (commands?.[name])
- return setError({
- message: "A Command with that name already exists",
- });
+ if (commands?.[name]) return setError({ message: "A Command with that name already exists" });
}
const parsedAllowedRoles = parseSelectValue(allowedRoles);
const parsedBannedRoles = parseSelectValue(bannedRoles);
diff --git a/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateRoleCommand.js b/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateRoleCommand.js
index 13645f3..789b7a5 100644
--- a/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateRoleCommand.js
+++ b/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateRoleCommand.js
@@ -1,15 +1,18 @@
-import { useContext } from "react";
-import RoleItem from "../../../../../styled-components/RoleItem";
+import ClearIcon from "@material-ui/icons/Clear";
+import { DiscordContext } from "../../../../../contexts/DiscordContext";
+import React, { useEffect, useState, useCallback, useContext } from "react";
+import Select from "react-select";
+import { colorStyles } from "../../../../Shared/userUtils";
+import RoleItem from "../../../../Shared/RoleItem";
import { CommandContext } from "../../../../../contexts/CommandContext";
-import StyledSelect from "../../../../../styled-components/StyledSelect";
const CreateRoleCommand = ({ setCreatingCommand, guild: userConnectedGuildInfo }) => {
- const { roleToGive, setRoleToGive } = useContext(CommandContext);
+ const { roleToGive, setRoleToGive } = useContext(CommandContext);
return (
<>
Role To give
- {
setRoleToGive(e);
@@ -24,6 +27,13 @@ const CreateRoleCommand = ({ setCreatingCommand, guild: userConnectedGuildInfo }
value: `${role.name}=${JSON.stringify(role)}`,
label: {role.name} ,
}))}
+ styles={{
+ ...colorStyles,
+ container: styles => ({
+ ...styles,
+ ...colorStyles.container,
+ }),
+ }}
/>
diff --git a/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateTextCommand.js b/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateTextCommand.js
index 37a292e..753ff3f 100644
--- a/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateTextCommand.js
+++ b/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateTextCommand.js
@@ -1,4 +1,5 @@
-import { useContext } from "react";
+import { DiscordContext } from "../../../../../contexts/DiscordContext";
+import React, { useContext } from "react";
import { CommandContext } from "../../../../../contexts/CommandContext";
const CreateTextCommand = () => {
@@ -17,25 +18,18 @@ const CreateTextCommand = () => {
Available variables
-
- {"{author} - The user who sent the command (mentions the user)"}
+ {"{author} - The user who sent the command (mentions the user)"}
{"{author.name} - the users name"}
{"{author.nickname} - the users nickname"}
{"{author.color} - the users color based on roles"}
-
- {"{n} - get the 'nth' argument passed to the command"}
-
+ {"{n} - get the 'nth' argument passed to the command"}
Available functions
-
- {
- "(time {timezone}) - returns the current time in specified timezone code"
- }
-
+ {"(time {timezone}) - returns the current time in specified timezone code"}
diff --git a/src/components/DashBoard/Discord/Plugins/CustomCommands/CustomCommands.js b/src/components/DashBoard/Discord/Plugins/CustomCommands/CustomCommands.js
index 181b168..edc7c8a 100644
--- a/src/components/DashBoard/Discord/Plugins/CustomCommands/CustomCommands.js
+++ b/src/components/DashBoard/Discord/Plugins/CustomCommands/CustomCommands.js
@@ -1,36 +1,62 @@
-import { memo, useEffect, useState, useContext, useLayoutEffect } from "react";
+import React, { useEffect, useState, useCallback, useContext } from "react";
import firebase from "../../../../../firebase";
+import { DiscordContext } from "../../../../../contexts/DiscordContext";
import Modal from "react-modal";
import CreateTextCommand from "./CreateTextCommand";
import CreateRoleCommand from "./CreateRoleCommand";
import CreateCommand from "./CreateCommand";
+import { CommandContextProvider } from "../../../../../contexts/CommandContext";
import CommandItem from "./CommandItem";
import { CommandContext } from "../../../../../contexts/CommandContext";
const CustomCommands = ({ location, guild: userConnectedGuildInfo }) => {
const [creatingCommand, setCreatingCommand] = useState(false);
const [commands, setCommands] = useState({});
+ const { setActivePlugins, setDashboardOpen } = useContext(DiscordContext);
const guildId = userConnectedGuildInfo?.id;
- const { setup: setupCommand } = useContext(CommandContext);
+ const {
+ setName,
+ setResponse,
+ setRoleToGive,
+ setDescription,
+ setAllowedRoles,
+ setBannedRoles,
+ setAllowedChannels,
+ setCooldown,
+ setDeleteUsage,
+ setError,
+ setEditing,
+ } = useContext(CommandContext);
useEffect(() => {
const unsub = firebase.db
.collection("customCommands")
- .doc(guildId || " ")
+ .doc(guildId)
.onSnapshot(snapshot => {
const data = snapshot.data();
if (data) {
- const textCommands = Object.entries(data).filter(
- command => command[1].type !== "role"
- );
- console.log(textCommands);
- setCommands(textCommands);
+ setCommands(data);
}
});
return unsub;
}, [location, guildId]);
- useLayoutEffect(() => {
+ const setupCommand = () => {
+ console.log(setName);
+ setName("");
+ setResponse("");
+ setRoleToGive("");
+ setDescription("");
+ setAllowedRoles([]);
+ setBannedRoles([]);
+ setAllowedChannels([]);
+ setCooldown(0);
+ setDeleteUsage(false);
+ setError({});
+ setEditing(false);
+ };
+
+ useEffect(() => {
document.body.style.overflow = creatingCommand ? "hidden" : "initial";
return () => {
document.body.style.overflow = "initial";
@@ -45,16 +71,8 @@ const CustomCommands = ({ location, guild: userConnectedGuildInfo }) => {
overlayClassName="command-overlay Modal-Overlay"
onRequestClose={() => setCreatingCommand(false)}
>
-
- {creatingCommand === "text" ? (
-
+ {creatingCommand === "text" ?
@@ -83,7 +101,7 @@ const CustomCommands = ({ location, guild: userConnectedGuildInfo }) => {
Text Command
A simple command that responds with a custom message in DM or public
{
setupCommand();
@@ -92,28 +110,20 @@ const CustomCommands = ({ location, guild: userConnectedGuildInfo }) => {
>
Role Command
A simple command that toggles a role for the user
-
{Object.entries(commands)
.sort((a, b) => a[0].localeCompare(b[0]))
- .filter((a, b) => a[1].type !== "role")
+ .sort((a, b) => (a[1].type === "role" ? -1 : 1))
.map(([key, value]) => (
-
-
- );
- default:
- return (
- <>
+ );
+ case "Windows":
+ case "Android":
+ return (
-
-
- );
+
+
+ );
}
};
@@ -111,9 +102,7 @@ const DownloadPage = () => {
subtitle="All your stream chats in one place"
body="Keeping track of your stream can be really difficult, especially if you are streaming cross platform and have large discord
community. DisStreamChat allows you have all your chats in one place so you can easily view and moderate the chat."
- images={[
- "https://panels-images.twitch.tv/panel-40229165-image-1b8f110f-2370-4af4-9610-a6bcb9ee8872",
- ]}
+ images={["https://panels-images.twitch.tv/panel-40229165-image-1b8f110f-2370-4af4-9610-a6bcb9ee8872"]}
>
Join The Discord
-
+
+ 
-