add discord sign in by default (#24)

* added all the files

* working on account settings page

* made account component modular

* create base for new App plugin

* remove app settings from main page

* making it work with new dashboard guild id system

* fixing bugs

* add discord id to link

* updated name for reaction manager plugin

* minor changes

* creating basic role management page

* fixed issue with channels in app plugin

* add more plugins

* fix merge bug

* adding discord sign in button

* added discord sign in

src/App.js

@@ -24,7 +24,7 @@ import { Button } from "@material-ui/core";
 import A from "./components/Shared/A";
 import useSnapshot from "./hooks/useSnapshot";
 import LeaderBoard from "./components/LeaderBoard/LeaderBoard";
-import { v4 as uuidv4 } from 'uuid';
+import { v4 as uuidv4 } from "uuid";
 
 function App(props) {
 	const [userId, setUserId] = useState("");
@@ -57,8 +57,8 @@ function App(props) {
 		(async () => {
 			if (setOTC.current) return;
 			if (firebaseInit !== false && user?.uid) {
-                await firebase.db.collection("Secret").doc(user.uid).set({value: uuidv4()});
-                setOTC.current = true
+				await firebase.db.collection("Secret").doc(user.uid).set({ value: uuidv4() });
+				setOTC.current = true;
 			}
 		})();
 	}, [firebaseInit, user, setOTC]);
@@ -80,24 +80,30 @@ function App(props) {
 				} else {
 					try {
 						console.log(code);
-						const response = await fetch(`${process.env.REACT_APP_API_URL}/discord/token?code=${code}`);
+						const isSignedIn = !!firebase.auth.currentUser;
+						const response = await fetch(`${process.env.REACT_APP_API_URL}/discord/token?code=${code}&create=${!isSignedIn}`);
 						// const response = await fetch("http://localhost:3200/discord/token?code="+code)
 						if (!response.ok) {
 							console.log(await response.json());
-							console.log("fail");
+							alert("fail");
 						} else {
 							console.log(user?.uid);
 							const json = await response.json();
+							let discordUser;
+							if (!isSignedIn) {
+								discordUser = await firebase.auth.signInWithCustomToken(json.token);
+							}
+
 							await firebase.db
 								.collection("Streamers")
-								.doc(user?.uid || " ")
+								.doc(user?.uid || discordUser?.uid || " ")
 								.collection("discord")
 								.doc("data")
 								.set(json);
-							console.log("success");
+							alert("success");
 						}
 					} catch (err) {
-						console.log(err.message);
+						alert(err.message);
 					}
 				}
 				window.location = "/#/dashboard/discord";
@@ -110,7 +116,14 @@ function App(props) {
 			if (firebaseInit !== false && user) {
 				setUserId(user.uid);
 				const userData = (await firebase.db.collection("Streamers").doc(user.uid).get()).data();
-				const profilePictureResponse = await fetch(`${process.env.REACT_APP_API_URL}/profilepicture?user=${userData?.TwitchName}`);
+				let profilePictureResponse;
+				if (!userData.twitchAuthenticated) {
+					profilePictureResponse = await fetch(
+						`${process.env.REACT_APP_API_URL}/profilepicture?user=${userData?.discordId}&platform=discord`
+					);
+				} else {
+					profilePictureResponse = await fetch(`${process.env.REACT_APP_API_URL}/profilepicture?user=${userData?.TwitchName}`);
+				}
 				const profilePicture = await profilePictureResponse.json();
 				firebase.db.collection("Streamers").doc(user.uid).update({
 					profilePicture,

src/components/DashBoard/Discord/DiscordPage.js

@@ -177,19 +177,22 @@ 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 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);
 

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

@@ -115,7 +115,7 @@ const CommandItem = ({
 			</div>
 			<span style={{ display: "flex" }}>
 				<div className="display-image">
-					<img width="50px" src={type == "role" ? "/role.svg" : "/speech.svg"} />
+					<img alt="" width="50px" src={type === "role" ? "/role.svg" : "/speech.svg"} />
 				</div>
 				<div className="command-item--info">
 					<h3>{name}</h3>

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

@@ -89,7 +89,7 @@ const CreateCommand = ({ setCreatingCommand, children, role, guild: userConnecte
 					}))
 			);
 		}
-    }, [editing]);
+    }, [editing, userConnectedGuildInfo?.roles, setAllowedRoles]);
 
 
 	return (

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

@@ -10,6 +10,7 @@ import plugins from "./plugins.json";
 import CustomCommands from "./CustomCommands/CustomCommands";
 import { CommandContextProvider } from "../../../../contexts/CommandContext";
 import App from "./App";
+import Roles from "./Roles";
 
 const PluginHome = ({ match, guildId, connectedGuild }) => {
 	const [prefix, setPrefix] = useState("!");
@@ -112,6 +113,13 @@ const PluginHome = ({ match, guildId, connectedGuild }) => {
 							</CommandContextProvider>
 						</Route>
 					)}
+                    {activePlugins["roles"] && (
+						<Route path={`${match.url}/roles`}>
+							<CommandContextProvider>
+								<Roles guild={connectedGuild} />
+							</CommandContextProvider>
+						</Route>
+					)}
 					<Route path={`${match.url}/app`}>
 						<App />
 					</Route>

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);

src/components/DashBoard/Discord/Plugins/plugins.json

@@ -42,10 +42,30 @@
         "comingSoon": true
     },
     {
-		"id": "reactionroles",
-		"title": "Reaction Roles",
+		"id": "roles",
+		"title": "Role Management",
 		"image": "aprove.png",
+        "description": "Let the bot manage members roles in different ways like reaction roles",
+        "comingSoon": true
+    },
+    {
+		"id": "music",
+		"title": "Music",
+		"image": "music.svg",
+        "description": "Let your members get roles by reacting to messages",
+        "comingSoon": true
+	},{
+		"id": "polls",
+		"title": "Polls",
+		"image": "poll.svg",
+        "description": "Let your members get roles by reacting to messages",
+        "comingSoon": true
+	},{
+		"id": "giveaways",
+		"title": "Giveaways",
+		"image": "gift.svg",
         "description": "Let your members get roles by reacting to messages",
         "comingSoon": true
+
 	}
 ]

src/components/header/Header.js

@@ -6,7 +6,6 @@ import { CSSTransition } from "react-transition-group";
 import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 import { useCallback } from "react";
 import Modal from "react-modal";
-import YouTubeIcon from "@material-ui/icons/YouTube";
 import A from "../Shared/A";
 import ClearIcon from "@material-ui/icons/Clear";
 import firebase from "../../firebase";
@@ -38,7 +37,7 @@ const Header = props => {
 					if (data) {
 						const { displayName, profilePicture } = data;
 						setCurrentUser(prev => ({
-                            ...prev,
+							...prev,
 							name: displayName,
 							profilePicture,
 						}));
@@ -133,10 +132,26 @@ const Header = props => {
 							Twitch
 						</A>
 					</button>
-					{/* <button disabled={!readTerms} type="submit" className="modal-button youtube" onClick={readTerms ? signInWithGoogle : () => {}}>
-						<YouTubeIcon className="logo-icon yt-icon" />
-						YouTube
-					</button> */}
+					<button type="submit">
+						<A
+							href={
+								readTerms
+									? `https://discord.com/api/oauth2/authorize?client_id=702929032601403482&redirect_uri=${process.env.REACT_APP_REDIRECT_URI}%2F%3Fdiscord%3Dtrue&response_type=code&scope=identify%20guilds`
+									: null
+							}
+							className="modal-button discord"
+							disabled={!readTerms}
+						>
+							<img
+								style={{ filter: "grayscale(1) brightness(10000%)" }}
+								src={`${process.env.PUBLIC_URL}/discord_logo.png`}
+								alt=""
+								width="20"
+								className="logo-icon"
+							/>
+							Discord
+						</A>
+					</button>
 					<div className="legal">
 						<input
 							required
@@ -178,7 +193,9 @@ const Header = props => {
 					<Link to="/apps/download">Chat Manager</Link>
 					<Link to="/bot">Discord Bot</Link>
 					<Link to="/community">Community</Link>
-                    <A href="https://www.patreon.com/disstreamchat?fan_landing=true" newTab>Support Us</A>
+					<A href="https://www.patreon.com/disstreamchat?fan_landing=true" newTab>
+						Support Us
+					</A>
 					{/* <Link to="/about">About</Link> */}
 				</nav>
 			</span>

src/components/header/Header.scss

@@ -198,7 +198,7 @@
 		justify-content: center;
         align-items: center;
 
-        & > button:first-child{
+        & > button[type="submit"]{
             all: unset;
             box-sizing: content-box !important;
             width: 100%;
@@ -242,6 +242,9 @@
         width: 70%;
         flex: 1;
         box-sizing: content-box !important;
+        &.discord{
+            background: #6f86d4;
+        }
 		cursor: pointer;
 		&:hover {
 			filter: brightness(0.85);