Revert "Reaction manager"

package.json

@@ -9,7 +9,6 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "chroma-js": "^2.1.0",
-    "emoji-mart": "^3.0.0",
     "firebase": "^7.14.2",
     "lodash": "^4.17.15",
     "node-sass": "^4.14.0",
@@ -25,7 +24,6 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.3",
     "react-select": "^3.1.0",
-    "react-twemoji": "^0.3.0",
     "react-use": "^15.1.0",
     "styled-components": "^5.2.0",
     "uid": "^1.0.0",

src/components/DashBoard/Dashboard.js

@@ -6,26 +6,23 @@ import A from "../Shared/A";
 import SettingBox from "./Settings/SettingBox";
 import { AppContext } from "../../contexts/Appcontext";
 import DiscordPage from "./Discord/DiscordPage";
-import AccountSettings from "./Account/Account";
-import plugins from "./Discord/Plugins/plugins.json";
-import { DiscordContextProvider, DiscordContext } from "../../contexts/DiscordContext";
+import AccountSettings from "./Account/Account"
 
 const Dashboard = props => {
 	const [overlaySettings, setOverlaySettings] = useState();
 	const [appSettings, setAppSettings] = useState();
 	const [defaultSettings, setDefaultSettings] = useState();
 	const { currentUser } = useContext(AppContext);
-	const id = firebase.auth.currentUser.uid;
-	const [discordId, setDiscordId] = useState("");
-	const { activePlugins } = useContext(DiscordContext);
-	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;
+    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])
 
 	useEffect(() => {
 		(async () => {
@@ -82,20 +79,6 @@ const Dashboard = props => {
 				<NavLink className="setting-link" activeClassName="active" to={`${props.match.url}/discord${discordId ? `/${discordId}` : ""}`}>
 					Discord Settings
 				</NavLink>
-				<ul>
-					{Object.keys(activePlugins || {}).sort().map(key => {
-						const plugin = plugins.find(plugin => plugin.id === key);
-						return (
-							<NavLink
-								className="setting-link smaller"
-								activeClassName="active"
-								to={`${props.match.url}/discord/${discordId}/${plugin?.id}`}
-							>
-								{plugin?.title}
-							</NavLink>
-						);
-					})}
-				</ul>
 				<NavLink className="setting-link" activeClassName="active" to={`${props.match.url}/account`}>
 					Account Settings
 				</NavLink>
@@ -149,12 +132,4 @@ const Dashboard = props => {
 	);
 };
 
-const IntermediateDashboard = props => {
-	return (
-		<DiscordContextProvider>
-			<Dashboard {...props} />
-		</DiscordContextProvider>
-	);
-};
-
-export default IntermediateDashboard;
+export default Dashboard;

src/components/DashBoard/Dashboard.scss

@@ -157,11 +157,7 @@
 	align-items: center;
 	padding: 0 1rem;
 	border-radius: 0.5rem;
-    text-transform: capitalize;
-    &.smaller{
-        height: 35px;
-        padding: 0 .5rem;
-    }
+	text-transform: capitalize;
 }
 
 .setting-link.active {

src/components/DashBoard/Discord/DiscordPage.js

@@ -273,5 +273,12 @@ const DiscordPage = React.memo(({ location, history, match }) => {
 	);
 });
 
+const IntermediateDiscordPage = props => {
+	return (
+		<DiscordContextProvider>
+			<DiscordPage {...props} />
+		</DiscordContextProvider>
+	);
+};
 
-export default withRouter(React.memo(DiscordPage));
+export default withRouter(React.memo(IntermediateDiscordPage));

src/components/DashBoard/Discord/Plugins/CustomCommands/CommandItem.js

@@ -71,7 +71,7 @@ const CommandItem = ({
 			});
 		}
 		setDescription(description);
-		// console.log({ allowedRoles });
+		console.log({ allowedRoles });
 		setAllowedRoles(allowedRoles || []);
 		setAllowedChannels(
 			(allowedChannels || []).map(id => {

src/components/DashBoard/Discord/Plugins/CustomCommands/CommandItem.scss

@@ -14,7 +14,21 @@
 	.command-item--info{
 		margin-left: 1rem;
 	}
-
+	.delete-button {
+		position: absolute;
+		color: #b33a3a;
+		width: 24px;
+		height: 24px;
+		top: -12px;
+        right: -12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        &:hover{
+            filter: saturate(1.5);
+        }
+	}
 	h1,
 	h2,
 	h3,
@@ -49,19 +63,3 @@
 		};
 	}
 }
-
-.delete-button {
-    position: absolute;
-    color: #b33a3a;
-    width: 24px;
-    height: 24px;
-    top: -12px;
-    right: -12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    &:hover{
-        filter: saturate(1.5);
-    }
-}

src/components/DashBoard/Discord/Plugins/CustomCommands/CreateCommand.js

@@ -95,7 +95,7 @@ const CreateCommand = ({ setCreatingCommand, children, role, guild: userConnecte
 	return (
 		<>
 			<div className="command-header">
-				<h1>Create {role ? "Role" : "Text"} Command</h1>
+				<h1>Create Role Command</h1>
 				<button onClick={() => setCreatingCommand(false)}>
 					<ClearIcon />
 				</button>

src/components/DashBoard/Discord/Plugins/PluginHome.js

@@ -9,9 +9,8 @@ import Logging from "./Logging";
 import plugins from "./plugins.json";
 import CustomCommands from "./CustomCommands/CustomCommands";
 import { CommandContextProvider } from "../../../../contexts/CommandContext";
-import { RoleContextProvider } from "../../../../contexts/RoleContext";
 import App from "./App";
-import Roles from "./Roles/Roles";
+import Roles from "./Roles";
 
 const PluginHome = ({ match, guildId, connectedGuild }) => {
 	const [prefix, setPrefix] = useState("!");
@@ -93,7 +92,7 @@ const PluginHome = ({ match, guildId, connectedGuild }) => {
 								description="Get discord chats from your server in the DisStreamChat app"
 							/>
 							{displayPlugins.map(plugin => (
-								<PluginCard guild={guildId} key={plugin.id} {...plugin} active={activePlugins[plugin.id]} />
+								<PluginCard guild={guildId} {...plugin} active={activePlugins[plugin.id]} />
 							))}
 						</div>
 					</Route>
@@ -116,9 +115,9 @@ const PluginHome = ({ match, guildId, connectedGuild }) => {
 					)}
                     {activePlugins["roles"] && (
 						<Route path={`${match.url}/roles`}>
-							<RoleContextProvider>
+							<CommandContextProvider>
 								<Roles guild={connectedGuild} />
-							</RoleContextProvider>
+							</CommandContextProvider>
 						</Route>
 					)}
 					<Route path={`${match.url}/app`}>

src/components/DashBoard/Discord/Plugins/Roles.js

@@ -0,0 +1,67 @@
+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 Leveling = ({ location, guild: userConnectedGuildInfo }) => {
+	const { setActivePlugins } = useContext(DiscordContext);
+	const guildId = userConnectedGuildInfo?.id;
+
+	useEffect(() => {
+		(async () => {
+			const guild = await firebase.db
+				.collection("Leveling")
+				.doc(guildId || " ")
+				.get();
+			const data = guild.data();
+			if (data) {
+				const id = data.notifications;
+				if (id) {
+					const apiUrl = `${process.env.REACT_APP_API_URL}/resolvechannel?guild=${guildId}&channel=${id}`;
+					const response = await fetch(apiUrl);
+					const channel = await response.json();
+				}
+			}
+		})();
+	}, [location, guildId]);
+
+	return (
+		<div>
+			<div className="plugin-item-header">
+				<span className="title">
+					<img src={`${process.env.PUBLIC_URL}/trophy.svg`} alt="" />
+					<h2>Role Management</h2>
+				</span>
+				<span className="toggle-button">
+					<button
+						onClick={() => {
+							setActivePlugins(prev => {
+								const newPlugs = { ...prev, roles: false };
+								firebase.db
+									.collection("DiscordSettings")
+									.doc(guildId || " ")
+									.update({
+										activePlugins: newPlugs,
+									});
+								return newPlugs;
+							});
+						}}
+					>
+						Disable
+					</button>
+				</span>
+			</div>
+			<hr />
+			<div className="plugin-item-subheader">
+				<h4>Different ways to have the bot manage user roles. Give a role on join, toggle roles with reactions, etc.</h4>
+			</div>
+			<div className="plugin-item-body">
+				<h4 className="plugin-section-title">Add an action</h4>
+				<div className="plugin-section"></div>
+			</div>
+		</div>
+	);
+};
+
+export default React.memo(Leveling);