Revert "Account settings"

src/components/DashBoard/Account/Account.js

@@ -1,46 +1,15 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext } from "react";
 import { AppContext } from "../../../contexts/Appcontext";
 import "./Accounts.scss";
 import AccountComponent from "./AccountComponent";
-import firebase from "../../../firebase";
 
 const Account = () => {
-	const currentUser = firebase.auth.currentUser;
-	const [discordAccount, setDiscordAccount] = useState();
-	const [twitchAccount, setTwitchAccount] = useState();
-	const [mainAccount, setMainAccount] = useState();
-
-	useEffect(() => {
-		(async () => {
-			const userRef = firebase.db.collection("Streamers").doc(currentUser?.uid);
-			const discordRef = userRef.collection("discord").doc("data");
-			const twitchRef = userRef.collection("twitch").doc("data");
-			const userData = (await userRef.get()).data();
-
-			if (!userData) return;
-			const twitchData = (await twitchRef.get()).data();
-			discordRef.onSnapshot(snapshot => {
-				const discordData = snapshot.data()
-				if (discordData) {
-					const { name, profilePicture } = discordData;
-					setDiscordAccount({ name, profilePicture });
-				} else {
-					setDiscordAccount(null);
-				}
-			});
-			if (twitchData) {
-				const { name, profilePicture } = userData;
-				setTwitchAccount({ name, profilePicture });
-			}
-			if(userData.discordLinked) setMainAccount("discord")
-			else if(userData.twitchAuthenticated) setMainAccount("twitch")
-		})();
-	}, [currentUser]);
+	const { currentUser } = useContext(AppContext);
 
 	return (
 		<div classname="accounts" style={{ width: "100%" }}>
-			{twitchAccount && <AccountComponent main={mainAccount} {...twitchAccount} platform="twitch" />}
-			{discordAccount && <AccountComponent main={mainAccount} {...discordAccount} platform="discord" />}
+			<AccountComponent platform="twitch" />
+			<AccountComponent platform="discord" />
 		</div>
 	);
 };

src/components/DashBoard/Account/AccountComponent.js

@@ -1,54 +1,21 @@
 import React from "react";
-import styled from "styled-components";
-import firebase from "../../../firebase";
 
 const logos = {
-	discord: "https://cdn.iconscout.com/icon/free/png-512/discord-3-569463.png",
-	twitch: "/social-media.svg",
-};
-
-const AccountName = styled.p`
-	text-transform: capitalize;
-`;
-
-const DiscordComponent = ({ main, profilePicture, platform, name }) => {
-	const currentUser = firebase.auth.currentUser;
-	const disconnect = async () => {
-		await firebase.db
-			.collection("Streamers")
-			.doc(currentUser?.uid || " ")
-			.collection(platform)
-			.doc("data")
-			.delete();
-	};
-
-	const deleteAccount = async () => {
-		await firebase.db
-			.collection("Streamers")
-			.doc(currentUser?.uid || " ")
-			.delete();
-		try {
-			await currentUser.delete();
-		} catch (err) {
-			// re-sign in and delete
-		}
-	};
+    "discord": "https://cdn.iconscout.com/icon/free/png-512/discord-3-569463.png",
+    "twitch": "/social-media.svg"
+}
 
+const DiscordComponent = ({platform}) => {
 	return (
 		<div className={`account discord`}>
 			<div className={`account-header ${platform}`}>
 				<img src={logos[platform]} alt="" />
-				<img src={profilePicture} alt="" />
-				<div className="name">
-					<AccountName>{name}</AccountName>
-					<p>Account Name</p>
-				</div>
-			</div>
-			<div className={`account-body ${platform}`}>
-				{main !== platform && (
-					<button onClick={() => (main === platform ? null : disconnect())}>{main === platform ? "Delete" : "Disconnect"} Account</button>
-				)}
+                <div className="name">
+                    <p></p>
+                    <p>Account Name</p>
+                </div>
 			</div>
+			<div className={`account-body ${platform}`}></div>
 		</div>
 	);
 };

src/components/DashBoard/Account/Accounts.scss

@@ -16,20 +16,12 @@
 		align-items: center;
         padding: .5rem 1rem;
         .name{
-			margin-left: .5rem;
-			p{
-				margin: 0;
-			}
+            margin-left: 2rem;
             p:nth-child(2){
-				color: #aaa;
-				font-size: .75rem;
+                color: #aaa;
             }
         }
 		img {
-			&:first-child{
-				margin-right: 1rem;
-				filter: grayscale(1) brightness(1000%);
-			}
 			width: 32px;
 		}
 		height: 50px;
@@ -42,24 +34,12 @@
 	}
 
 	.account-body {
-		box-sizing: border-box !important;
 		min-height: 100px;
 		&.twitch {
 			background: #593695;
 		}
 		&.discord {
 			background: #7289da;
 		}
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		padding: 2rem;
-		button{
-			padding: .5rem 1rem;
-			background: #ee1111;
-			border: none;
-			font-weight: 600;
-			border-radius: .5rem;
-		}
 	}
 }