From 9c5a58e8ab579189a0bd82a5b907a0d6b2106d35 Mon Sep 17 00:00:00 2001
From: David Snyder <45735850+GypsyDangerous@users.noreply.github.com>
Date: Thu, 15 Oct 2020 23:18:12 -0400
Subject: [PATCH] Revert "Better leveling (#30)"

This reverts commit c88d55aebebe46974936f5d364f26acef55a2a67.
---
 package-lock.json                             | 51 +++----------------
 package.json                                  |  2 -
 src/App.js                                    | 38 +++++++-------
 src/components/DashBoard/Dashboard.scss       | 24 +++------
 .../DashBoard/Discord/Plugins/Leveling.js     | 12 ++---
 src/components/LeaderBoard/LeaderBoard.js     | 40 +++------------
 src/components/LeaderBoard/LeaderBoard.scss   | 21 ++------
 src/components/LeaderBoard/LeaderBoardCard.js |  8 +--
 8 files changed, 51 insertions(+), 145 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b9f2b5a..5811de0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10300,22 +10300,6 @@
         "prepend-http": "^1.0.0",
         "query-string": "^4.1.0",
         "sort-keys": "^1.0.0"
-      },
-      "dependencies": {
-        "query-string": {
-          "version": "4.3.4",
-          "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
-          "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
-          "requires": {
-            "object-assign": "^4.1.0",
-            "strict-uri-encode": "^1.0.0"
-          }
-        },
-        "strict-uri-encode": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-          "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
-        }
       }
     },
     "npm-run-path": {
@@ -12050,13 +12034,12 @@
       "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
     },
     "query-string": {
-      "version": "6.13.5",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.13.5.tgz",
-      "integrity": "sha512-svk3xg9qHR39P3JlHuD7g3nRnyay5mHbrPctEBDUxUkHRifPHXJDhBUycdCC0NBjXoDf44Gb+IsOZL1Uwn8M/Q==",
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
       "requires": {
-        "decode-uri-component": "^0.2.0",
-        "split-on-first": "^1.0.0",
-        "strict-uri-encode": "^2.0.0"
+        "object-assign": "^4.1.0",
+        "strict-uri-encode": "^1.0.0"
       }
     },
     "querystring": {
@@ -13383,11 +13366,6 @@
         "randombytes": "^2.1.0"
       }
     },
-    "serialize-query-params": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/serialize-query-params/-/serialize-query-params-1.2.3.tgz",
-      "integrity": "sha512-pTssDTpnDR2p54q1/V1LpG/czg29iX9imxfKF1cupl30BWcRg8R8y3ddB4iHuhuVBO+HjSNj4+tAT1s075iimw=="
-    },
     "serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
@@ -13896,11 +13874,6 @@
       "resolved": "https://registry.npmjs.org/spin.js/-/spin.js-2.3.2.tgz",
       "integrity": "sha1-bKpW1SBnNFD9XPvGlx5tB3LDeho="
     },
-    "split-on-first": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
-      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
-    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -14061,9 +14034,9 @@
       "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
     },
     "strict-uri-encode": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
-      "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
     "string-length": {
       "version": "2.0.0",
@@ -15013,14 +14986,6 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
-    "use-query-params": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/use-query-params/-/use-query-params-1.1.8.tgz",
-      "integrity": "sha512-tB9V4IEE1AbHHtbqxpIjajrDOJsnxS2+PrEfiI/zYatOgns3hkRqj+hrn7F0z5Vxf7z8k4ZV9CGanuk+tt8dEg==",
-      "requires": {
-        "serialize-query-params": "^1.2.3"
-      }
-    },
     "util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
diff --git a/package.json b/package.json
index 06b8de4..2d70241 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,6 @@
     "firebase": "^7.14.2",
     "lodash": "^4.17.15",
     "node-sass": "^4.14.0",
-    "query-string": "^6.13.5",
     "react": "^16.13.1",
     "react-animate-height": "^2.0.21",
     "react-color": "^2.18.1",
@@ -30,7 +29,6 @@
     "react-use": "^15.1.0",
     "styled-components": "^5.2.0",
     "uid": "^1.0.0",
-    "use-query-params": "^1.1.8",
     "uuid": "^8.3.0"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.js
index b1ae798..0a91158 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,7 +16,7 @@ import Loader from "react-loader";
 import DownloadPage from "./components/Apps/DownloadPage";
 import PrivacyPolicy from "./components/Shared/PrivacyPolicy";
 import Terms from "./components/Shared/Terms";
-import { QueryParamProvider } from "use-query-params";
+
 import "./App.scss";
 import { AppContext } from "./contexts/Appcontext";
 import Banner from "./components/Shared/Banner";
@@ -134,17 +134,17 @@ function App(props) {
 
 	return firebaseInit !== false && !new URLSearchParams(window.location.search).has("code") ? (
 		<Router>
-			<QueryParamProvider ReactRouterRoute={Route}>
-				<AppContext.Provider
-					value={{
-						userId,
-						setUserId,
-						dropDownOpen,
-						setDropDownOpen,
-						currentUser,
-						setCurrentUser,
-					}}
-				>
+			<AppContext.Provider
+				value={{
+					userId,
+					setUserId,
+					dropDownOpen,
+					setDropDownOpen,
+					currentUser,
+					setCurrentUser,
+				}}
+			>
+				<Switch>
 					<div className="App">
 						<Header />
 						<main className={`main ${dropDownOpen && "open"}`}>
@@ -166,13 +166,13 @@ function App(props) {
 						<Footer />
 					</div>{" "}
 					: <></>
-					<Banner message="DisStreamChat is in early alpha and we would like your help to test it">
-						<A newTab href="https://api.disstreamchat.com/discord">
-							<Button className="banner-button">Join the Discord</Button>
-						</A>
-					</Banner>
-				</AppContext.Provider>
-			</QueryParamProvider>
+				</Switch>
+				<Banner message="DisStreamChat is in early alpha and we would like your help to test it">
+					<A newTab href="https://api.disstreamchat.com/discord">
+						<Button className="banner-button">Join the Discord</Button>
+					</A>
+				</Banner>
+			</AppContext.Provider>
 		</Router>
 	) : (
 		<main className="App">
diff --git a/src/components/DashBoard/Dashboard.scss b/src/components/DashBoard/Dashboard.scss
index 00afd1d..0638493 100644
--- a/src/components/DashBoard/Dashboard.scss
+++ b/src/components/DashBoard/Dashboard.scss
@@ -66,16 +66,6 @@
 		}
 	}
 	.plugin-item-subheader {
-		&.flex {
-			display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding-right: 1rem;
-            .leader-board-link{
-                padding: .5rem 1rem;
-                background: var(--disstreamchat-blue)
-            }
-		}
 		h2 {
 			margin-bottom: 0;
 		}
@@ -167,11 +157,11 @@
 	align-items: center;
 	padding: 0 1rem;
 	border-radius: 0.5rem;
-	text-transform: capitalize;
-	&.smaller {
-		height: 35px;
-		padding: 0 0.5rem;
-	}
+    text-transform: capitalize;
+    &.smaller{
+        height: 35px;
+        padding: 0 .5rem;
+    }
 }
 
 .setting-link.active {
@@ -929,8 +919,8 @@ span.toggle-button button {
 		background: rgba(114, 137, 218, 0.1);
 		border-radius: 0.25rem;
 		font-weight: 500;
-		margin-left: 0.5rem;
-		transition: 0.1s;
+        margin-left: 0.5rem;
+        transition: .1s;
 		&:hover {
 			color: #fff;
 			background-color: #7289da;
diff --git a/src/components/DashBoard/Discord/Plugins/Leveling.js b/src/components/DashBoard/Discord/Plugins/Leveling.js
index a04d50e..024c205 100644
--- a/src/components/DashBoard/Discord/Plugins/Leveling.js
+++ b/src/components/DashBoard/Discord/Plugins/Leveling.js
@@ -3,13 +3,12 @@ import firebase from "../../../../firebase";
 import { colorStyles } from "../../../Shared/userUtils";
 import { DiscordContext } from "../../../../contexts/DiscordContext";
 import Select from "react-select";
-import { Link } from "react-router-dom";
 
 const Leveling = ({ location, guild: userConnectedGuildInfo }) => {
 	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, } = useContext(DiscordContext)
 	const guildId = userConnectedGuildInfo?.id;
 
 	const handleTypeSelect = useCallback(
@@ -99,12 +98,9 @@ const Leveling = ({ location, guild: userConnectedGuildInfo }) => {
 				</span>
 			</div>
 			<hr />
-			<div className="plugin-item-subheader flex">
-				<span>
-					<h2>Leveling Up</h2>
-					<h4>Whenever a user gains a level, DisStreamBot can send a personalized message.</h4>
-				</span>
-				<Link className="leader-board-link" to={`/leaderboard/${userConnectedGuildInfo.id}`}>Go To Leaderboard</Link>
+			<div className="plugin-item-subheader">
+				<h2>Leveling Up</h2>
+				<h4>Whenever a user gains a level, DisStreamBot can send a personalized message.</h4>
 			</div>
 			<div className="plugin-item-body">
 				<div className="level-settings">
diff --git a/src/components/LeaderBoard/LeaderBoard.js b/src/components/LeaderBoard/LeaderBoard.js
index 1e08aad..e5d2790 100644
--- a/src/components/LeaderBoard/LeaderBoard.js
+++ b/src/components/LeaderBoard/LeaderBoard.js
@@ -5,82 +5,54 @@ import SmallLoader from "../Shared/SmallLoader";
 import LeaderBoardCard from "./LeaderBoardCard";
 import "./LeaderBoard.scss";
 import { useDocumentOnce } from "react-firebase-hooks/firestore";
-import { useQueryParam, NumberParam, StringParam } from "use-query-params";
-import { Link } from "react-router-dom";
-import { useLocation } from "react-router-dom";
-
-const defaultPageSize = 50;
 
 const LeaderBoard = ({ history }) => {
 	const [leaderBoardInfo, setLeaderBoardInfo] = useState([]);
 	const [guildInfo, setGuildInfo] = useState({});
 	const { id } = useParams();
-	const [fullLoading, setFullLoading] = useState(true);
-	const [hasMore, setHasMore] = useState();
-	const [page, setPage] = useQueryParam("page", NumberParam);
-	const [pageSize, setPageSize] = useQueryParam("page-size", NumberParam);
-
 	const [rawLeaderBoardData, loading, error] = useDocumentOnce(firebase.db.collection("Leveling").doc(id));
 
-	const location = useLocation();
-
-	useEffect(() => {
-        setTimeout(() => {
-            window.scrollTo(0, 0);
-        }, 100)
-	}, [location]);
-
 	useEffect(() => {
 		(async () => {
-            setFullLoading(true)
 			if (loading) return;
 			const data = rawLeaderBoardData.data();
 			if (!data) {
 				history.push("/");
 			}
 			const leaderBoardData = Object.keys(data || {})
+
 				.filter(key => data[key].xp)
 				.sort((a, b) => data[b].xp - data[a].xp)
-				.slice(((page || 1) - 1) * (pageSize || defaultPageSize), (page || 1) * (pageSize || defaultPageSize));
+				.slice(0, 101);
 			const leaderBoardDashBoard = await Promise.all(
 				leaderBoardData.map(async id => {
 					const response = await fetch(`${process.env.REACT_APP_API_URL}/resolveuser?user=${id}&platform=discord`);
 					return { ...(await response.json()), ...data[id] };
 				})
 			);
-			setFullLoading(loading);
 			setLeaderBoardInfo(leaderBoardDashBoard);
-			setHasMore( Object.keys(data || {}).length > (page || 1) * (pageSize || defaultPageSize));
 			try {
 				const guildResponse = await fetch(`${process.env.REACT_APP_API_URL}/resolveguild?guild=${id}`);
 				const guildJson = await guildResponse.json();
 				setGuildInfo(prev => guildJson || prev);
 			} catch (err) {}
 		})();
-	}, [id, rawLeaderBoardData, loading, history, page, pageSize]);
-
+	}, [id, rawLeaderBoardData, loading, history]);
 
 	return (
 		<div className="leaderboard">
-			<SmallLoader loaded={!fullLoading && !error} />
-			{error && <h1>There was an error loading the leaderboard</h1>}
+			<SmallLoader loaded={!loading} />
 			<div className="leaderboard-header">
 				<img src={guildInfo.iconURL} alt="" />
 				<h1>{guildInfo.name}</h1>
 			</div>
-			{!fullLoading && (
+			{!loading && (
 				<div className="leaderboard-body">
 					<ul>
 						{leaderBoardInfo.map((user, idx) => (
-							<LeaderBoardCard key={user.id} place={idx + 1 + ((page || 1) - 1) * (pageSize || defaultPageSize)} {...user} />
+							<LeaderBoardCard place={idx + 1} {...user} />
 						))}
 					</ul>
-					<div className="leaderboard-footer">
-						{!!(page - 1) && (
-							<Link to={`/leaderboard/${id}?page=${(page || 1) - 1}&page-size=${pageSize || defaultPageSize}`}>Previous Page</Link>
-						)}
-						{hasMore && <Link to={`/leaderboard/${id}?page=${(page || 1) + 1}&page-size=${pageSize || defaultPageSize}`}>Next Page</Link>}
-					</div>
 				</div>
 			)}
 		</div>
diff --git a/src/components/LeaderBoard/LeaderBoard.scss b/src/components/LeaderBoard/LeaderBoard.scss
index ab06817..e8f870f 100644
--- a/src/components/LeaderBoard/LeaderBoard.scss
+++ b/src/components/LeaderBoard/LeaderBoard.scss
@@ -25,21 +25,6 @@
 	padding: 1rem 1.25rem;
     margin-bottom: 4rem;
     box-shadow: 0px 0px 16px -6px darken(#686464, 10);
-    .leaderboard-footer{
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        a{
-            margin: 0 .5rem;
-            padding: .5rem 1rem;
-            background: var(--disstreamchat-purple);
-            border-radius: .35rem;
-            &:hover{
-                text-decoration: underline;
-            }
-        }
-    }
 }
 
 .leaderboard-item {
@@ -100,13 +85,13 @@
 	align-items: center;
 	justify-content: center;
 	border-radius: 50%;
-	.leaderboard-item#place-1 & {
+	.leaderboard-item:first-child & {
 		background: #da9e3b;
 	}
-	.leaderboard-item#place-2 & {
+	.leaderboard-item:nth-child(2) & {
 		background: #989898;
 	}
-	.leaderboard-item#place-3 & {
+	.leaderboard-item:nth-child(3) & {
 		background: #ae7441;
 	}
 }
diff --git a/src/components/LeaderBoard/LeaderBoardCard.js b/src/components/LeaderBoard/LeaderBoardCard.js
index 913aa20..8e0ce45 100644
--- a/src/components/LeaderBoard/LeaderBoardCard.js
+++ b/src/components/LeaderBoard/LeaderBoardCard.js
@@ -21,7 +21,7 @@ const LeaderBoardCard = ({ place, level, xp, username, displayAvatarURL }) => {
 	}, [level, xp]);
 
 	return (
-		<div className="leaderboard-item" id={`place-${place}`}>
+		<div className="leaderboard-item">
 			<div className="user-info">
 				<span className={`place-card`}>{place}</span>
 				<img src={displayAvatarURL} alt="" />
@@ -33,13 +33,13 @@ const LeaderBoardCard = ({ place, level, xp, username, displayAvatarURL }) => {
 					{xp > 1000 ? `${(xp / 1000).toFixed(2)}k` : xp}
 				</div>
 				<div className="level-data">
-					<svg className="progress-ring" width="120" height="120">
+					<svg class="progress-ring" width="120" height="120">
 						<circle
                             strokeDashoffset={progression}
                             strokeDasharray={`${circ} ${circ}`}
-							className="progress-ring__circle"
+							class="progress-ring__circle"
 							stroke="#347aa5"
-							strokeWidth="4"
+							stroke-width="4"
 							fill="transparent"
 							r={radius}
 							cx="60"