From ef653b0a6f12c0e05c4d960657f673f5a2c6463d Mon Sep 17 00:00:00 2001
From: David Snyder <45735850+GypsyDangerous@users.noreply.github.com>
Date: Fri, 9 Oct 2020 23:19:31 -0400
Subject: [PATCH] Revert "Better dashboard (#20)"

This reverts commit 80330588f7827f6d6fc930b3c4b0520b418feead.
---
 src/App.js                                    |   2 +-
 src/components/DashBoard/Dashboard.js         |  14 +-
 src/components/DashBoard/Dashboard.scss       |  33 +---
 .../DashBoard/Discord/DiscordPage.js          | 160 ++++++++++++------
 .../DashBoard/Discord/Plugins/App.js          | 104 ------------
 .../Plugins/CustomCommands/CommandItem.js     |  21 +--
 .../Plugins/CustomCommands/CreateCommand.js   |  10 +-
 .../CustomCommands/CreateRoleCommand.js       |  14 +-
 .../Plugins/CustomCommands/CustomCommands.js  | 144 ++++++++--------
 .../DashBoard/Discord/Plugins/Leveling.js     |   4 +-
 .../DashBoard/Discord/Plugins/Logging.js      |  12 +-
 .../DashBoard/Discord/Plugins/PluginCard.js   |  43 +++--
 .../DashBoard/Discord/Plugins/PluginHome.js   |  59 ++-----
 13 files changed, 252 insertions(+), 368 deletions(-)
 delete mode 100644 src/components/DashBoard/Discord/Plugins/App.js

diff --git a/src/App.js b/src/App.js
index 62abdb3..b8b053e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 // production
 import React, { useEffect, useState, useRef } from "react";
 import firebase from "./firebase";
-import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom";
+import { HashRouter as Router, Route, Redirect, Switch } from "react-router-dom";
 import Home from "./components/Home/Home";
 import About from "./components/About/About";
 import Community from "./components/Community/Community";
diff --git a/src/components/DashBoard/Dashboard.js b/src/components/DashBoard/Dashboard.js
index eb83096..c88bb36 100644
--- a/src/components/DashBoard/Dashboard.js
+++ b/src/components/DashBoard/Dashboard.js
@@ -13,16 +13,7 @@ const Dashboard = props => {
 	const [appSettings, setAppSettings] = useState();
 	const [defaultSettings, setDefaultSettings] = useState();
 	const { currentUser } = useContext(AppContext);
-    const id = firebase.auth.currentUser.uid;
-    const [discordId, setDiscordId] = useState("")
-    useEffect(() => {
-        const idRegex = new RegExp("/\\d{17,19}[/\\b]")
-        const path = props.location.pathname+"/"
-        const id = path.match(idRegex)
-        if(id){
-            setDiscordId(id[0].replace(/\//g, ""))
-        }
-    }, [props])
+	const id = firebase.auth.currentUser.uid;
 
 	useEffect(() => {
 		(async () => {
@@ -76,7 +67,7 @@ const Dashboard = props => {
 				{/* <NavLink className="setting-link" activeClassName="active" to={`${props.match.url}/overlaysettings`}>
 					overlay Settings
 				</NavLink> */}
-				<NavLink className="setting-link" activeClassName="active" to={`${props.match.url}/discord${discordId ? `/${discordId}` : ""}`}>
+				<NavLink className="setting-link" activeClassName="active" to={`${props.match.url}/discord`}>
 					Discord Settings
 				</NavLink>
 				<NavLink className="setting-link" activeClassName="active" to={`${props.match.url}/account`}>
@@ -86,7 +77,6 @@ const Dashboard = props => {
 			<div className="settings">
 				<Switch>
 					<Route path={`${props.match.url}/account`} component={AccountSettings}></Route>
-					<Route path={`${props.match.url}/discord/:id`} component={DiscordPage}></Route>
 					<Route path={`${props.match.url}/discord`} component={DiscordPage}></Route>
 					{/* <Route path={`${props.match.url}/overlaysettings`}>
 						<SettingBox
diff --git a/src/components/DashBoard/Dashboard.scss b/src/components/DashBoard/Dashboard.scss
index a984b88..0074b54 100644
--- a/src/components/DashBoard/Dashboard.scss
+++ b/src/components/DashBoard/Dashboard.scss
@@ -815,8 +815,8 @@ textarea.message {
 	margin: 0;
 	max-height: 175px;
 	overflow: auto;
-	&::-webkit-scrollbar {
-		width: 0.5rem;
+	&::-webkit-scrollbar{
+		width: .5rem;
 	}
 	h4 {
 		margin: 0;
@@ -824,16 +824,16 @@ textarea.message {
 	ul {
 		list-style: none;
 		padding: 0;
-		ul {
-			padding-left: 0.5rem;
+		ul{
+			padding-left: .5rem;
 		}
 		li.variable {
 			background: #202225;
 			padding: 0.25rem;
 			border-radius: 0.25rem;
-			margin-top: 0.25rem;
-			margin-bottom: 0.25rem;
-			margin-right: 0.25rem;
+			margin-top: .25rem;
+			margin-bottom: .25rem;
+			margin-right: .25rem;
 		}
 	}
 }
@@ -870,7 +870,7 @@ span.toggle-button button {
 }
 
 .command-footer {
-	height: 50px !important;
+    height: 50px !important;
 	display: flex;
 	align-items: center;
 	justify-content: flex-end;
@@ -906,20 +906,3 @@ span.toggle-button button {
 		}
 	}
 }
-
-.ping-info {
-	margin-left: 1rem;
-	.ping {
-		padding: 0.25rem;
-		color: #7289da;
-		background: rgba(114, 137, 218, 0.1);
-		border-radius: 0.25rem;
-		font-weight: 500;
-        margin-left: 0.5rem;
-        transition: .1s;
-		&:hover {
-			color: #fff;
-			background-color: #7289da;
-		}
-	}
-}
diff --git a/src/components/DashBoard/Discord/DiscordPage.js b/src/components/DashBoard/Discord/DiscordPage.js
index 7f35dd7..15e5337 100644
--- a/src/components/DashBoard/Discord/DiscordPage.js
+++ b/src/components/DashBoard/Discord/DiscordPage.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback, useContext } from "react";
-import { Route, Redirect, Switch, withRouter, useParams } from "react-router-dom";
+import { Route, Redirect, Switch, withRouter } from "react-router-dom";
 import firebase from "../../../firebase";
 import Select from "react-select";
 import useFetch from "../../../hooks/useFetch";
@@ -18,7 +18,6 @@ const DiscordPage = React.memo(({ location, history, match }) => {
 	const [refreshed, setRefreshed] = useState(false);
 	const { isLoading, sendRequest: sendLoadingRequest } = useFetch();
 	const id = firebase.auth.currentUser.uid;
-	const { id: guildId } = useParams();
 	const { sendRequest } = useFetch();
 	const { currentUser, setCurrentUser } = useContext(AppContext);
 	const {
@@ -38,28 +37,25 @@ const DiscordPage = React.memo(({ location, history, match }) => {
 	}, [rawDiscordData, discordDataLoading, setUserDiscordInfo]);
 
 	useEffect(() => {
-		(async () => {
-			const guild = userDiscordInfo?.guilds?.find?.(guild => guild.id === guildId);
-			if (guild) {
-				setDisplayGuild(guildOption(guild));
-			}
-		})();
-	}, [userDiscordInfo, guildId]);
+		if (userConnectedGuildInfo?.name) {
+			setDisplayGuild(guildOption(userConnectedGuildInfo));
+		}
+	}, [userConnectedGuildInfo]);
 
 	const refreshToken = userDiscordInfo?.refreshToken;
 	useEffect(() => {
 		(async () => {
 			if (!refreshToken || !id) return;
 			if (refreshed) return console.log("already refreshed");
-			console.log("refreshing");
-			const otcData = (await firebase.db.collection("Secret").doc(id).get()).data();
-			const otc = otcData?.value;
+            console.log("refreshing");
+            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=${id}&otc=${otc}`);
 			if (!response.ok) return;
 
-			const json = await response.json();
-			console.log({ json });
+            const json = await response.json();
+            console.log({json})
 			if (!json) return;
 			await firebase.db
 				.collection("Streamers")
@@ -95,7 +91,6 @@ const DiscordPage = React.memo(({ location, history, match }) => {
 	}, [id, disconnect, setCurrentUser]);
 
 	const guilds = userDiscordInfo?.guilds;
-
 	useSnapshot(
 		firebase.db.collection("Streamers").doc(id).collection("discord").doc("data"),
 		async snapshot => {
@@ -108,15 +103,15 @@ const DiscordPage = React.memo(({ location, history, match }) => {
 					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({
+                    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,
+                        channels: channelReponse,
+                        roles: response.roles,
 						connectedChannels: channelReponse?.filter(channel => userData.liveChatId?.includes(channel.id)),
 						connected: true,
 					});
@@ -153,36 +148,50 @@ const DiscordPage = React.memo(({ location, history, match }) => {
 		async e => {
 			const name = e.value;
 			const guildByName = userDiscordInfo.guilds.find(guild => guild.name === name);
-            const selectedGuildId = guildByName.id;
-            try{
-
-                if (guildId) {
-                    const path = match.url.split("/");
-                    if (path.length > 3) {
-                        history.push(`${path.slice(0, 3).join("/")}/${selectedGuildId}`);
-                    } else {
-                        history.push(`${selectedGuildId}`);
-                    }
-                } else {
-                    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);
+			const guildId = guildByName.id;
+			const { result: isMember } = await sendLoadingRequest(`${process.env.REACT_APP_API_URL}/ismember?guild=` + guildId);
+			const channelReponse = await sendLoadingRequest(`${process.env.REACT_APP_API_URL}/getchannels?guild=` + guildId);
 
-			// setUserConnectedGuildInfo({
-			// 	name,
-			// 	isMember,
-			// 	icon: guildByName.icon,
-			// 	id: guildByName.id,
-			// 	channels: channelReponse,
-			// });
+			setUserConnectedGuildInfo({
+				name,
+				isMember,
+				icon: guildByName.icon,
+				id: guildByName.id,
+				channels: channelReponse,
+			});
 		},
 		[userDiscordInfo, sendLoadingRequest]
 	);
 
+	const onChannelSelect = useCallback(
+		async e => {
+			setUserConnectedGuildInfo(s => ({
+				...s,
+				connectedChannels:
+					e?.map(c => ({
+						id: c.value,
+						name: c.label.props.children[0].props.children,
+						parent: c.label.props.children[1].props.children,
+					})) || [],
+			}));
+			await firebase.db
+				.collection("Streamers")
+				.doc(id)
+				.update({
+					liveChatId: e?.map(c => c.value) || [],
+				});
+			await firebase.db
+				.collection("Streamers")
+				.doc(id)
+				.collection("discord")
+				.doc("data")
+				.update({
+					liveChatId: e?.map(c => c.value) || [],
+				});
+		},
+		[id]
+	);
+
 	return (
 		<div>
 			<h1>Discord Settings</h1>
@@ -201,6 +210,7 @@ const DiscordPage = React.memo(({ location, history, match }) => {
 								placeholder="Select Guild"
 								options={userDiscordInfo?.guilds?.filter(guild => guild.permissions.includes("MANAGE_GUILD")).map(guildOption)}
 								styles={colorStyles}
+								isDisabled={!!userConnectedGuildInfo?.connected}
 							/>
 							<span>
 								<img className="discord-profile" src={userDiscordInfo?.profilePicture} alt="" />
@@ -221,15 +231,67 @@ const DiscordPage = React.memo(({ location, history, match }) => {
 												<button className="invite-link discord-settings-button">Invite it</button>
 											</a>
 										</div>
-									) : guildId ? (
-										<PluginHome guildId={guildId} match={match} />
 									) : (
-										<></>
+										<>
+											{userConnectedGuildInfo.connected ? (
+												<>
+													<h3>select channels to listen to</h3>
+													<Select
+														closeMenuOnSelect={false}
+														onChange={onChannelSelect}
+														placeholder="Select Channel"
+														value={userConnectedGuildInfo.connectedChannels
+															?.sort((a, b) => a.parent.localeCompare(b.parent))
+															?.map(channel => ({
+																value: channel.id,
+																label: (
+																	<>
+																		<span>{channel.name}</span>
+																		<span className="channel-category">{channel.parent}</span>
+																	</>
+																),
+															}))}
+														options={userConnectedGuildInfo.channels
+															.sort((a, b) => a.parent.localeCompare(b.parent))
+															.map(channel => ({
+																value: channel.id,
+																label: (
+																	<>
+																		<span>{channel.name}</span>
+																		<span className="channel-category">{channel.parent}</span>
+																	</>
+																),
+															}))}
+														styles={{
+															...colorStyles,
+															container: styles => ({ ...styles, ...colorStyles.container }),
+														}}
+														isMulti
+													/>
+													<button onClick={disconnect} className="discord-settings-button ml-0 mt-1 warning-button">
+														Disconnect Guild
+													</button>
+												</>
+											) : (
+												<>
+													<span>
+														This server is not connected to the DisStreamChat chat manager, connect it to get discord
+														messages in your app and adjust your plugin settings
+													</span>
+													<button onClick={Connectguild} className="discord-settings-button warning-button">
+														Connect it
+													</button>
+												</>
+											)}
+										</>
 									)}
 								</>
 							) : (
-								<></>
+								<button onClick={disconnectAccount} className="discord-settings-button ml-0 mt-1 warning-button">
+									Disconnect Account
+								</button>
 							)}
+							{userConnectedGuildInfo?.connected && <PluginHome match={match} />}
 						</div>
 					</>
 				) : (
diff --git a/src/components/DashBoard/Discord/Plugins/App.js b/src/components/DashBoard/Discord/Plugins/App.js
deleted file mode 100644
index 6170390..0000000
--- a/src/components/DashBoard/Discord/Plugins/App.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import React, { useEffect, useState, useCallback, useContext } from "react";
-import firebase from "../../../../firebase";
-import { colorStyles } from "../../../Shared/userUtils";
-import { DiscordContext } from "../../../../contexts/DiscordContext";
-import Select from "react-select";
-
-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 => {
-			setUserConnectedGuildInfo(s => ({
-				...s,
-				connectedChannels:
-					e?.map(c => ({
-						id: c.value,
-						name: c.label.props.children[0].props.children,
-						parent: c.label.props.children[1].props.children,
-					})) || [],
-			}));
-			await firebase.db
-				.collection("Streamers")
-				.doc(id)
-				.update({
-					liveChatId: e?.map(c => c.value) || [],
-				});
-			await firebase.db
-				.collection("Streamers")
-				.doc(id)
-				.collection("discord")
-				.doc("data")
-				.update({
-					liveChatId: e?.map(c => c.value) || [],
-				});
-		},
-		[id, setUserConnectedGuildInfo]
-	);
-
-	return (
-		<div>
-			<div className="plugin-item-header">
-				<span className="title">
-					<img src={`${process.env.PUBLIC_URL}/logo.png`} style={{maxWidth: "60px"}} alt="" />
-					<h2>DisStreamChat App</h2>
-				</span>
-			</div>
-			<hr />
-			<div className="plugin-item-subheader">
-				<h2>App Settings</h2>
-				<h4>Whenever a message is sent in one of the selected channels it will be sent to the app.</h4>
-			</div>
-			<div className="plugin-item-body">
-				{(
-					<>
-						<h3>select channels to listen to</h3>
-						<Select
-							closeMenuOnSelect={false}
-							onChange={onChannelSelect}
-							placeholder="Select Channel"
-							value={userConnectedGuildInfo.connectedChannels
-								?.sort((a, b) => a.parent.localeCompare(b.parent))
-								?.map(channel => ({
-									value: channel.id,
-									label: (
-										<>
-											<span>{channel.name}</span>
-											<span className="channel-category">{channel.parent}</span>
-										</>
-									),
-								}))}
-							options={userConnectedGuildInfo.channels
-								.sort((a, b) => a.parent.localeCompare(b.parent))
-								.map(channel => ({
-									value: channel.id,
-									label: (
-										<>
-											<span>{channel.name}</span>
-											<span className="channel-category">{channel.parent}</span>
-										</>
-									),
-								}))}
-							styles={{
-								...colorStyles,
-								container: styles => ({ ...styles, ...colorStyles.container }),
-							}}
-							isMulti
-						/>
-					</>
-				)}
-			</div>
-		</div>
-	);
-};
-
-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 742920f..c3202f7 100644
--- a/src/components/DashBoard/Discord/Plugins/CustomCommands/CommandItem.js
+++ b/src/components/DashBoard/Discord/Plugins/CustomCommands/CommandItem.js
@@ -13,14 +13,14 @@ const CommandItem = ({
 	description,
 	setCommands,
 	bannedRoles,
-	permittedRoles,
+	allowedRoles,
 	allowedChannels,
 	cooldown,
 	deleteUsage,
 	setCreatingCommand,
 	role,
-	guild: userConnectedGuildInfo,
 }) => {
+	const { userConnectedGuildInfo } = useContext(DiscordContext);
 	const {
 		setName,
 		setResponse,
@@ -34,7 +34,6 @@ const CommandItem = ({
 		setError,
 		setEditing,
 	} = useContext(CommandContext);
-	const [allowedRoles, setPermittedRoles] = useState([]);
 	const guildId = userConnectedGuildInfo.id;
 	const deleteMe = useCallback(async () => {
 		setCommands(prev => {
@@ -48,18 +47,6 @@ const CommandItem = ({
 		});
 	}, [guildId, name, setCommands]);
 
-	useEffect(() => {
-		setPermittedRoles(
-			permittedRoles.map(id => {
-				const role = userConnectedGuildInfo?.roles?.find?.(r => r.id === id);
-				return {
-					value: `${role.name}=${JSON.stringify(role)}`,
-					label: <RoleItem {...role}>{role.name}</RoleItem>,
-				};
-			})
-		);
-	}, [permittedRoles, userConnectedGuildInfo]);
-
 	const edit = async () => {
 		setName(name);
 		setResponse(message);
@@ -71,7 +58,6 @@ const CommandItem = ({
 			});
 		}
 		setDescription(description);
-		console.log({ allowedRoles });
 		setAllowedRoles(allowedRoles || []);
 		setAllowedChannels(allowedChannels || []);
 		setBannedRoles(bannedRoles || []);
@@ -87,13 +73,14 @@ const CommandItem = ({
 		setDisplayRole(userConnectedGuildInfo.roles.find(r => r.id === role));
 	}, []);
 
+	console.log(displayRole);
 
 	return (
 		<div className="command-item">
 			<div className="delete-button" onClick={deleteMe}>
 				<CancelTwoToneIcon />
 			</div>
-			<span style={{ display: "flex" }}>
+			<span style={{display: "flex"}}>
 				<div className="display-image">
 					<img width="50px" src={type == "role" ? "/role.svg" : "/speech.svg"} />
 				</div>
diff --git a/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateCommand.js b/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateCommand.js
index be59ce2..b73df81 100644
--- a/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateCommand.js
+++ b/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateCommand.js
@@ -53,8 +53,8 @@ const parseSelectValue = value => {
 	}
 };
 
-const CreateCommand = ({ setCreatingCommand, children, role, guild: userConnectedGuildInfo }) => {
-    console.log(userConnectedGuildInfo)
+const CreateCommand = ({ setCreatingCommand, children, role }) => {
+	const { userConnectedGuildInfo } = useContext(DiscordContext);
 	const {
 		editing,
 		setEditing,
@@ -89,8 +89,7 @@ const CreateCommand = ({ setCreatingCommand, children, role, guild: userConnecte
 					}))
 			);
 		}
-    }, [editing]);
-    
+	}, [editing]);
 
 	return (
 		<>
@@ -265,8 +264,7 @@ const CreateCommand = ({ setCreatingCommand, children, role, guild: userConnecte
 							bannedRoles: parsedBannedRoles,
 							permittedRoles: parsedAllowedRoles,
 							allowedChannels: parsedAllowedChannels,
-                            cooldownTime: cooldown*60000,
-                            cooldown,
+							cooldown,
 							DM: false,
 							description,
                         };
diff --git a/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateRoleCommand.js b/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateRoleCommand.js
index a2e03ae..a634c6d 100644
--- a/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateRoleCommand.js
+++ b/src/components/DashBoard/Discord/Plugins/CustomCommands/CreateRoleCommand.js
@@ -6,9 +6,9 @@ import { colorStyles } from "../../../../Shared/userUtils";
 import RoleItem from "../../../../Shared/RoleItem";
 import { CommandContext } from "../../../../../contexts/CommandContext";
 
-const CreateRoleCommand = ({ setCreatingCommand, guild: userConnectedGuildInfo }) => {
-	const { setActivePlugins } = useContext(DiscordContext);
-    const { roleToGive, setRoleToGive } = useContext(CommandContext);
+const CreateRoleCommand = ({ setCreatingCommand }) => {
+	const { setActivePlugins, userConnectedGuildInfo } = useContext(DiscordContext);
+	const { roleToGive, setRoleToGive } = useContext(CommandContext);
 	return (
 		<>
 			<h4 className="plugin-section-title">Role To give</h4>
@@ -16,13 +16,13 @@ const CreateRoleCommand = ({ setCreatingCommand, guild: userConnectedGuildInfo }
 				<Select
 					closeMenuOnSelect
 					onChange={e => {
-						setRoleToGive(e);
-					}}
+                        setRoleToGive(e)
+                    }}
 					placeholder="Select Command Role"
 					value={roleToGive}
 					options={userConnectedGuildInfo?.roles
-						?.filter(role => role.name !== "@everyone")
-						?.filter(role => !role.managed)
+                        ?.filter(role => role.name !== "@everyone")
+                        ?.filter(role => !role.managed)
 						?.sort((a, b) => b.rawPosition - a.rawPosition)
 						?.map(role => ({
 							value: `${role.name}=${JSON.stringify(role)}`,
diff --git a/src/components/DashBoard/Discord/Plugins/CustomCommands/CustomCommands.js b/src/components/DashBoard/Discord/Plugins/CustomCommands/CustomCommands.js
index c44fa8e..ecb931a 100644
--- a/src/components/DashBoard/Discord/Plugins/CustomCommands/CustomCommands.js
+++ b/src/components/DashBoard/Discord/Plugins/CustomCommands/CustomCommands.js
@@ -9,13 +9,13 @@ import { CommandContextProvider } from "../../../../../contexts/CommandContext";
 import CommandItem from "./CommandItem";
 import { CommandContext } from "../../../../../contexts/CommandContext";
 
-const CustomCommands = ({ location, guild: userConnectedGuildInfo }) => {
+const CustomCommands = ({ location }) => {
 	const [loggingChannel, setLoggingChannel] = useState("");
 	const [activeEvents, setActiveEvents] = useState({});
 	const [allEvents, setAllEvents] = useState({});
 	const [creatingCommand, setCreatingCommand] = useState(false);
 	const [commands, setCommands] = useState({});
-	const { setActivePlugins } = useContext(DiscordContext);
+	const { setActivePlugins, userConnectedGuildInfo } = useContext(DiscordContext);
 	const guildId = userConnectedGuildInfo?.id;
 	const {
 		setName,
@@ -45,7 +45,7 @@ const CustomCommands = ({ location, guild: userConnectedGuildInfo }) => {
 	}, [location, guildId]);
 
 	const setupCommand = () => {
-		console.log(setName);
+		console.log(setName)
 		setName("");
 		setResponse("");
 		setRoleToGive("");
@@ -67,83 +67,83 @@ const CustomCommands = ({ location, guild: userConnectedGuildInfo }) => {
 	}, [creatingCommand]);
 
 	return (
-		<div>
-			<Modal
-				isOpen={creatingCommand}
-				className="command-modal Modal"
-				overlayClassName="command-overlay Modal-Overlay"
-				onRequestClose={() => setCreatingCommand(false)}
-			>
-				<CreateCommand guild={userConnectedGuildInfo}  role={creatingCommand === "role"} setCreatingCommand={setCreatingCommand}>
-					{creatingCommand === "text" ? <CreateTextCommand guild={userConnectedGuildInfo} /> : <CreateRoleCommand guild={userConnectedGuildInfo} />}
-				</CreateCommand>
-			</Modal>
-			<div className="plugin-item-header">
-				<span className="title">
-					<img src={`${process.env.PUBLIC_URL}/aprove.png`} alt="" />
-					<h2>Custom Commands</h2>
-				</span>
-				<span className="toggle-button">
-					<button
-						onClick={() => {
-							setActivePlugins(prev => {
-								const newPlugs = { ...prev, commands: false };
-								firebase.db
-									.collection("DiscordSettings")
-									.doc(guildId || " ")
-									.update({
-										activePlugins: newPlugs,
-									});
-								return newPlugs;
-							});
-						}}
-					>
-						Disable
-					</button>
-				</span>
-			</div>
-			<hr />
-			{/* <div className="plugin-item-subheader">
+			<div>
+				<Modal
+					isOpen={creatingCommand}
+					className="command-modal Modal"
+					overlayClassName="command-overlay Modal-Overlay"
+					onRequestClose={() => setCreatingCommand(false)}
+				>
+					<CreateCommand role={creatingCommand === "role"} setCreatingCommand={setCreatingCommand}>
+						{creatingCommand === "text" ? <CreateTextCommand /> : <CreateRoleCommand />}
+					</CreateCommand>
+				</Modal>
+				<div className="plugin-item-header">
+					<span className="title">
+						<img src={`${process.env.PUBLIC_URL}/aprove.png`} alt="" />
+						<h2>Custom Commands</h2>
+					</span>
+					<span className="toggle-button">
+						<button
+							onClick={() => {
+								setActivePlugins(prev => {
+									const newPlugs = { ...prev, leveling: false };
+									firebase.db
+										.collection("DiscordSettings")
+										.doc(guildId || " ")
+										.update({
+											activePlugins: newPlugs,
+										});
+									return newPlugs;
+								});
+							}}
+						>
+							Disable
+						</button>
+					</span>
+				</div>
+				<hr />
+				{/* <div className="plugin-item-subheader">
 				<h4>
                 You can set a channel and events that will be sent to that particular channel. Don't miss anything happening in your server when
                 you are not around!
 				</h4>
 			</div> */}
-			<div className="plugin-item-body">
-				<h4 className="plugin-section-title">Create Command</h4>
-				<div className="command-card-body">
-					<div
-						className="create-command"
-						onClick={() => {
-							setupCommand();
-							setCreatingCommand("text");
-						}}
-					>
-						<h1>Text Command</h1>
-						<p>A simple command that responds with a custom message in DM or public</p>
-					</div>
-					<div
-						className="create-command"
-						onClick={() => {
-							setupCommand();
-							setCreatingCommand("role");
-						}}
-					>
-						<h1>Role Command</h1>
-						<p>A simple command that toggles a role for the user</p>
+				<div className="plugin-item-body">
+					<h4 className="plugin-section-title">Create Command</h4>
+					<div className="command-card-body">
+						<div
+							className="create-command"
+							onClick={() => {
+								setupCommand();
+								setCreatingCommand("text");
+							}}
+						>
+							<h1>Text Command</h1>
+							<p>A simple command that responds with a custom message in DM or public</p>
+						</div>
+						<div
+							className="create-command"
+							onClick={() => {
+								setupCommand();
+								setCreatingCommand("role");
+							}}
+						>
+							<h1>Role Command</h1>
+							<p>A simple command that toggles a role for the user</p>
+						</div>
 					</div>
+					<h4 className="plugin-section-title bigger">
+						Your Commands<span> — {Object.keys(commands).length}</span>
+					</h4>
+					{Object.entries(commands)
+						.sort((a, b) => a[0].localeCompare(b[0]))
+						.sort((a, b) => (a[1].type === "role" ? -1 : 1))
+						.map(([key, value]) => (
+							<CommandItem setCommands={setCommands} setCreatingCommand={setCreatingCommand} {...value} name={key} key={key} />
+						))}
 				</div>
-				<h4 className="plugin-section-title bigger">
-					Your Commands<span> — {Object.keys(commands).length}</span>
-				</h4>
-				{Object.entries(commands)
-					.sort((a, b) => a[0].localeCompare(b[0]))
-					.sort((a, b) => (a[1].type === "role" ? -1 : 1))
-					.map(([key, value]) => (
-						<CommandItem guild={userConnectedGuildInfo} setCommands={setCommands} setCreatingCommand={setCreatingCommand} allowedRoles={value.permittedRoles} {...value} name={key} key={key} />
-					))}
 			</div>
-		</div>
 	);
 };
 
diff --git a/src/components/DashBoard/Discord/Plugins/Leveling.js b/src/components/DashBoard/Discord/Plugins/Leveling.js
index 024c205..d97fafb 100644
--- a/src/components/DashBoard/Discord/Plugins/Leveling.js
+++ b/src/components/DashBoard/Discord/Plugins/Leveling.js
@@ -4,11 +4,11 @@ import { colorStyles } from "../../../Shared/userUtils";
 import { DiscordContext } from "../../../../contexts/DiscordContext";
 import Select from "react-select";
 
-const Leveling = ({ location, guild: userConnectedGuildInfo }) => {
+const Leveling = ({ location }) => {
 	const [levelUpAnnouncement, setLevelUpAnnouncement] = useState();
 	const [announcementChannel, setAnnouncementChannel] = useState(false);
 	const [levelUpMessage, setLevelUpMessage] = useState("Congrats {player}, you leveled up to level {level}!");
-    const {setActivePlugins, } = useContext(DiscordContext)
+    const {setActivePlugins, userConnectedGuildInfo} = useContext(DiscordContext)
 	const guildId = userConnectedGuildInfo?.id;
 
 	const handleTypeSelect = useCallback(
diff --git a/src/components/DashBoard/Discord/Plugins/Logging.js b/src/components/DashBoard/Discord/Plugins/Logging.js
index b9caa79..9843cb8 100644
--- a/src/components/DashBoard/Discord/Plugins/Logging.js
+++ b/src/components/DashBoard/Discord/Plugins/Logging.js
@@ -37,11 +37,11 @@ const FancySwitch = withStyles({
 	focusVisible: {},
 })(Switch);
 
-const Leveling = ({ location, guild: userConnectedGuildInfo }) => {
+const Leveling = ({ location }) => {
 	const [loggingChannel, setLoggingChannel] = useState("");
 	const [activeEvents, setActiveEvents] = useState({});
 	const [allEvents, setAllEvents] = useState({});
-	const { setActivePlugins } = useContext(DiscordContext);
+	const { setActivePlugins, userConnectedGuildInfo } = useContext(DiscordContext);
 	const [channelOverrides, setChannelOverrides] = useState({});
 	const guildId = userConnectedGuildInfo?.id;
 
@@ -134,11 +134,7 @@ const Leveling = ({ location, guild: userConnectedGuildInfo }) => {
 		async e => {
 			const guildLevelRef = firebase.db.collection("loggingChannel").doc(guildId);
 			setLoggingChannel(e);
-			try {
-				await guildLevelRef.update({ server: e.value });
-			} catch (err) {
-				await guildLevelRef.set({ server: e.value });
-			}
+			guildLevelRef.update({ server: e.value });
 		},
 		[guildId]
 	);
@@ -154,7 +150,7 @@ const Leveling = ({ location, guild: userConnectedGuildInfo }) => {
 					<button
 						onClick={() => {
 							setActivePlugins(prev => {
-								const newPlugs = { ...prev, logging: false };
+								const newPlugs = { ...prev, leveling: false };
 								firebase.db
 									.collection("DiscordSettings")
 									.doc(guildId || " ")
diff --git a/src/components/DashBoard/Discord/Plugins/PluginCard.js b/src/components/DashBoard/Discord/Plugins/PluginCard.js
index 5000f66..1fa5e70 100644
--- a/src/components/DashBoard/Discord/Plugins/PluginCard.js
+++ b/src/components/DashBoard/Discord/Plugins/PluginCard.js
@@ -5,35 +5,36 @@ import { useCallback } from "react";
 import ClearTwoToneIcon from "@material-ui/icons/ClearTwoTone";
 import { withRouter } from "react-router";
 import A from "../../../Shared/A";
-import firebase from "../../../../firebase";
+import firebase from "../../../../firebase"
 import { useContext } from "react";
 import { DiscordContext } from "../../../../contexts/DiscordContext";
 
 Modal.setAppElement("#root");
 
-const PluginCard = ({ guild: guildId, ...props }) => {
-	const [modalOpen, setModalOpen] = useState(false);
-	const { setActivePlugins } = useContext(DiscordContext);
+const PluginCard = props => {
+    const [modalOpen, setModalOpen] = useState(false);
+    const {setActivePlugins, userConnectedGuildInfo} = useContext(DiscordContext)
+    const guildId = userConnectedGuildInfo?.id;
 
 	const handleClick = useCallback(() => {
-		if (!props.active && !props.comingSoon) {
+		if (!props.active && (!props.comingSoon)) {
 			setModalOpen(true);
 		}
 	}, [props]);
 
-	const enable = () => {
-		setActivePlugins(prev => {
-			const newPlugs = { ...prev, [props.id]: true };
-			firebase.db
-				.collection("DiscordSettings")
-				.doc(guildId || " ")
-				.update({
-					activePlugins: newPlugs,
-				});
-			return newPlugs;
-		});
+	const enable = useCallback(() => {
+        setActivePlugins(prev => {
+            const newPlugs = { ...prev, [props.id]: true };
+            firebase.db
+                .collection("DiscordSettings")
+                .doc(guildId || " ")
+                .update({
+                    activePlugins: newPlugs,
+                });
+            return newPlugs;
+        });
 		props.history.push(`${props.match.url}/${props.id}`);
-	};
+	}, [props, guildId]);
 
 	return (
 		<>
@@ -44,9 +45,7 @@ const PluginCard = ({ guild: guildId, ...props }) => {
 				onRequestClose={() => setModalOpen(false)}
 			>
 				<div className="top-portion">
-					<h2>
-						Enable Plugin: <u>{props.title}</u>
-					</h2>
+					<h2>Enable Plugin: <u>{props.title}</u></h2>
 					<button onClick={() => setModalOpen(false)}>
 						<ClearTwoToneIcon />
 					</button>
@@ -57,10 +56,10 @@ const PluginCard = ({ guild: guildId, ...props }) => {
 					</button>
 				</div>
 			</Modal>
-			<A href={props.active ? `${props.match.url}/${props.id}` : `#`} local>
+			<A href={props.active ? `${props.match.url}/${props.id}` : null} local>
 				<div onClick={handleClick} className={`plugin-card ${props.active ? "active" : "disabled"} ${props.comingSoon ? "coming-soon" : ""}`}>
 					<div className="image">
-						<img src={`${process.env.PUBLIC_URL}/${props.image}`} alt="" />
+						<img src={props.image} alt="" />
 					</div>
 					<div className="text">
 						<h2>{props.title}</h2>
diff --git a/src/components/DashBoard/Discord/Plugins/PluginHome.js b/src/components/DashBoard/Discord/Plugins/PluginHome.js
index a0c72ce..4ddf4c4 100644
--- a/src/components/DashBoard/Discord/Plugins/PluginHome.js
+++ b/src/components/DashBoard/Discord/Plugins/PluginHome.js
@@ -9,31 +9,17 @@ import Logging from "./Logging";
 import plugins from "./plugins.json";
 import CustomCommands from "./CustomCommands/CustomCommands";
 import { CommandContextProvider } from "../../../../contexts/CommandContext";
-import App from "./App";
 
-const PluginHome = ({ match, guildId }) => {
-	const [prefix, setPrefix] = useState("!");
-	const { userDiscordInfo, activePlugins, setActivePlugins } = useContext(DiscordContext);
-	const [connectedGuild, setConnectedGuild] = useState();
 
-	useEffect(() => {
-		(async () => {
-			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 json = await response.json();
-                const roles = json.roles;
-                const channels = json.channels
-				setConnectedGuild({ ...guild, roles, channels });
-			}
-		})();
-	}, [guildId, userDiscordInfo?.guilds]);
+const PluginHome = ({ match }) => {
+	const [prefix, setPrefix] = useState("!");
+	const { userConnectedGuildInfo, activePlugins, setActivePlugins } = useContext(DiscordContext);
 
 	useEffect(() => {
 		(async () => {
 			const guild = await firebase.db
 				.collection("DiscordSettings")
-				.doc(connectedGuild?.id || " ")
+				.doc(userConnectedGuildInfo?.id || " ")
 				.get();
 			const data = guild.data();
 			if (data) {
@@ -43,30 +29,31 @@ const PluginHome = ({ match, guildId }) => {
 				setPrefix("!");
 			}
 		})();
-	}, [connectedGuild]);
+	}, [userConnectedGuildInfo]);
 
 	const prefixChange = useCallback(
 		async e => {
-			const value = e?.target?.value || "!";
+			const value = e?.target?.value || "!"
 			setPrefix(value);
-			try {
+			try{
+
 				await firebase.db
 					.collection("DiscordSettings")
-					.doc(connectedGuild?.id || " ")
+					.doc(userConnectedGuildInfo?.id || " ")
 					.update({
 						prefix: value,
 					});
-			} catch (err) {
+			}catch(err){
 				await firebase.db
 					.collection("DiscordSettings")
-					.doc(connectedGuild?.id || " ")
+					.doc(userConnectedGuildInfo?.id || " ")
 					.set({
 						activePlugins: {},
 						prefix: value,
 					});
 			}
 		},
-		[connectedGuild?.id]
+		[userConnectedGuildInfo?.id]
 	);
 
 	const displayPlugins = useMemo(() => plugins.sort((a, b) => (activePlugins[a.id] ? -1 : 1)), [plugins, activePlugins]);
@@ -81,9 +68,6 @@ const PluginHome = ({ match, guildId }) => {
 				</label>
 				<div className="prefix-body">
 					<input value={prefix} onChange={prefixChange} type="text" className="prefix-input" id="discord-prefix" />
-					<span className="ping-info">
-						or <span className="ping">@DisStreamBot</span>
-					</span>
 				</div>
 			</div>
 			<hr />
@@ -96,39 +80,28 @@ const PluginHome = ({ match, guildId }) => {
 						</div>
 
 						<div className="plugin-list">
-							<PluginCard
-								guild={guildId}
-								active
-								id="app"
-								title="DisStreamChat App"
-								image="logo.png"
-								description="Get discord chats from your server in the DisStreamChat app"
-							/>
 							{displayPlugins.map(plugin => (
-								<PluginCard guild={guildId} {...plugin} active={activePlugins[plugin.id]} />
+								<PluginCard {...plugin} active={activePlugins[plugin.id]} />
 							))}
 						</div>
 					</Route>
 					{activePlugins["leveling"] && (
 						<Route path={`${match.url}/leveling`}>
-							<Leveling guild={connectedGuild} />
+							<Leveling />
 						</Route>
 					)}
 					{activePlugins["logging"] && (
 						<Route path={`${match.url}/logging`}>
-							<Logging guild={connectedGuild} />
+							<Logging />
 						</Route>
 					)}
 					{activePlugins["commands"] && (
 						<Route path={`${match.url}/commands`}>
 							<CommandContextProvider>
-								<CustomCommands guild={connectedGuild} />
+								<CustomCommands />
 							</CommandContextProvider>
 						</Route>
 					)}
-					<Route path={`${match.url}/app`}>
-						<App />
-					</Route>
 					<Redirect to={`${match.url}`} />
 				</Switch>
 			</div>