Skip to content
This repository was archived by the owner on Sep 1, 2021. It is now read-only.

Revert "Better leveling" #31

Open
GypsyDangerous wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Revert "Better leveling" #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 8 additions & 43 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 0 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": {
Expand Down
38 changes: 19 additions & 19 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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"}`}>
Expand All @@ -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">
Expand Down
24 changes: 7 additions & 17 deletions src/components/DashBoard/Dashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
12 changes: 4 additions & 8 deletions src/components/DashBoard/Discord/Plugins/Leveling.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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">
Expand Down
40 changes: 6 additions & 34 deletions src/components/LeaderBoard/LeaderBoard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
21 changes: 3 additions & 18 deletions src/components/LeaderBoard/LeaderBoard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}
8 changes: 4 additions & 4 deletions src/components/LeaderBoard/LeaderBoardCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="" />
Expand All @@ -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"
Expand Down