2019-06-15 04:11:19 +02:00
|
|
|
import {React, WebpackModules} from "modules";
|
2019-05-28 23:27:25 +02:00
|
|
|
import SettingsTitle from "../settings/title";
|
|
|
|
import ServerCard from "./card";
|
2019-06-20 20:03:48 +02:00
|
|
|
import Manager from "./manager";
|
2019-05-28 23:27:25 +02:00
|
|
|
|
2019-06-19 05:09:49 +02:00
|
|
|
const SettingsView = WebpackModules.getByDisplayName("SettingsView");
|
|
|
|
|
2019-06-10 05:40:35 +02:00
|
|
|
export default class PublicServers extends React.Component {
|
2019-05-28 20:19:48 +02:00
|
|
|
|
2019-06-21 06:32:59 +02:00
|
|
|
get categoryButtons() {
|
|
|
|
return ["All", "FPS Games", "MMO Games", "Strategy Games", "MOBA Games", "RPG Games", "Tabletop Games", "Sandbox Games", "Simulation Games", "Music", "Community", "Language", "Programming", "Other"];
|
|
|
|
}
|
|
|
|
|
2019-05-28 20:19:48 +02:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-06-10 05:40:35 +02:00
|
|
|
this.state = {
|
2019-06-21 06:32:59 +02:00
|
|
|
category: "All",
|
|
|
|
query: "",
|
2019-06-10 05:40:35 +02:00
|
|
|
loading: true,
|
2019-06-21 06:32:59 +02:00
|
|
|
user: null,
|
|
|
|
results: {
|
|
|
|
servers: [],
|
|
|
|
size: 0,
|
|
|
|
from: 0,
|
|
|
|
total: 0,
|
|
|
|
next: null
|
2019-06-10 05:40:35 +02:00
|
|
|
}
|
|
|
|
};
|
2019-06-21 06:32:59 +02:00
|
|
|
|
2019-05-28 20:19:48 +02:00
|
|
|
this.changeCategory = this.changeCategory.bind(this);
|
|
|
|
this.searchKeyDown = this.searchKeyDown.bind(this);
|
|
|
|
this.connect = this.connect.bind(this);
|
2019-06-21 06:32:59 +02:00
|
|
|
this.loadNextPage = this.loadNextPage.bind(this);
|
2019-05-28 20:19:48 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
this.checkConnection();
|
2019-06-20 20:03:48 +02:00
|
|
|
}
|
2019-05-28 20:19:48 +02:00
|
|
|
|
2019-06-21 06:32:59 +02:00
|
|
|
async checkConnection() {
|
|
|
|
const userData = await Manager.checkConnection();
|
|
|
|
if (!userData) {
|
|
|
|
return this.setState({loading: true, user: null});
|
|
|
|
}
|
|
|
|
this.setState({user: userData});
|
|
|
|
this.search();
|
2019-05-28 20:19:48 +02:00
|
|
|
}
|
|
|
|
|
2019-06-21 06:32:59 +02:00
|
|
|
async connect() {
|
|
|
|
await Manager.connect();
|
|
|
|
this.checkConnection();
|
|
|
|
}
|
2019-05-28 20:19:48 +02:00
|
|
|
|
2019-06-21 06:32:59 +02:00
|
|
|
searchKeyDown(e) {
|
|
|
|
if (this.state.loading || e.which !== 13) return;
|
|
|
|
this.search(e.target.value);
|
|
|
|
}
|
|
|
|
|
|
|
|
async search(term = "", from = 0) {
|
|
|
|
this.setState({query: term, loading: true});
|
|
|
|
const results = await Manager.search({term, category: this.state.category == "All" ? "" : this.state.category, from});
|
|
|
|
if (!results) {
|
|
|
|
return this.setState({results: {
|
|
|
|
servers: [],
|
|
|
|
size: 0,
|
|
|
|
from: 0,
|
|
|
|
total: 0,
|
|
|
|
next: null
|
|
|
|
}});
|
|
|
|
}
|
|
|
|
this.setState({loading: false, results});
|
|
|
|
}
|
2019-05-28 20:19:48 +02:00
|
|
|
|
2019-06-21 06:32:59 +02:00
|
|
|
async changeCategory(id) {
|
|
|
|
if (this.state.loading) return;
|
|
|
|
await new Promise(resolve => this.setState({category: id}, resolve));
|
|
|
|
this.search();
|
|
|
|
}
|
2019-06-19 05:09:49 +02:00
|
|
|
|
2019-06-21 06:32:59 +02:00
|
|
|
loadNextPage() {
|
|
|
|
if (this.state.loading) return;
|
|
|
|
this.search(this.state.query, this.state.results.next);
|
|
|
|
}
|
2019-05-28 20:19:48 +02:00
|
|
|
|
2019-06-21 06:32:59 +02:00
|
|
|
get searchBox() {
|
|
|
|
return React.createElement("input", {onKeyDown: this.searchKeyDown, type: "text", className: "bd-search", placeholder: "Search...", value: this.state.query, maxLength: "50"});
|
|
|
|
}
|
2019-05-28 20:19:48 +02:00
|
|
|
|
2019-06-21 06:32:59 +02:00
|
|
|
get title() {
|
|
|
|
if (!this.state.user) return "Not connected to DiscordServers.com!";
|
|
|
|
if (this.state.loading) return "Loading...";
|
|
|
|
const start = this.state.results.from + 1;
|
|
|
|
const total = this.state.results.total;
|
|
|
|
const end = this.state.results.next ? this.state.results.next : total;
|
|
|
|
let title = `Showing ${start}-${end} of ${total} results in ${this.state.category}`;
|
|
|
|
if (this.state.query) title += ` for ${this.state.query}`;
|
|
|
|
return title;
|
|
|
|
}
|
2019-05-28 20:19:48 +02:00
|
|
|
|
2019-06-21 06:32:59 +02:00
|
|
|
get content() {
|
|
|
|
const connectButton = this.state.user ? null : {title: "Connect", onClick: this.connect};
|
|
|
|
const pinned = this.state.category == "All" || !this.state.user ? this.bdServer : null;
|
|
|
|
const servers = this.state.results.servers.map((server) => {
|
|
|
|
return React.createElement(ServerCard, {key: server.identifier, server: server});
|
2019-05-28 20:19:48 +02:00
|
|
|
});
|
2019-06-21 06:32:59 +02:00
|
|
|
return [React.createElement(SettingsTitle, {text: this.title, button: connectButton}),
|
|
|
|
pinned,
|
|
|
|
servers,
|
|
|
|
this.state.results.next ? this.nextButton : null,
|
|
|
|
this.state.results.servers.length > 0 && React.createElement(SettingsTitle, {text: this.title})];
|
2019-05-28 20:19:48 +02:00
|
|
|
}
|
|
|
|
|
2019-06-21 06:32:59 +02:00
|
|
|
get nextButton() {
|
|
|
|
return React.createElement("button", {type: "button", className: "bd-button bd-button-next", onClick: this.loadNextPage}, this.state.loading ? "Loading" : "Load More");
|
2019-05-28 20:19:48 +02:00
|
|
|
}
|
|
|
|
|
2019-06-21 06:32:59 +02:00
|
|
|
get connection() {
|
|
|
|
const {user} = this.state;
|
|
|
|
if (!user) return React.createElement("div", {id: "bd-connection"});
|
|
|
|
return React.createElement("div", {id: "bd-connection"},
|
|
|
|
React.createElement("div", {className: "bd-footnote"}, `Connected as: `, `${user.username}#${user.discriminator}`),
|
|
|
|
React.createElement("button", {type: "button", className: "bd-button bd-button-reconnect", onClick: this.connect}, "Reconnect")
|
|
|
|
);
|
2019-05-28 20:19:48 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
get bdServer() {
|
2019-05-29 06:50:26 +02:00
|
|
|
const server = {
|
2019-05-28 20:19:48 +02:00
|
|
|
name: "BetterDiscord",
|
|
|
|
online: "7500+",
|
|
|
|
members: "20000+",
|
|
|
|
categories: ["community", "programming", "support"],
|
2019-06-21 06:32:59 +02:00
|
|
|
description: "Official BetterDiscord server for plugins, themes, support, etc",
|
2019-05-28 20:19:48 +02:00
|
|
|
identifier: "86004744966914048",
|
|
|
|
iconUrl: "https://cdn.discordapp.com/icons/86004744966914048/292e7f6bfff2b71dfd13e508a859aedd.webp",
|
|
|
|
nativejoin: true,
|
|
|
|
invite_code: "0Tmfo5ZbORCRqbAd",
|
|
|
|
pinned: true
|
|
|
|
};
|
2019-06-20 20:03:48 +02:00
|
|
|
return React.createElement(ServerCard, {server: server, pinned: true});
|
2019-05-28 20:19:48 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2019-06-20 20:03:48 +02:00
|
|
|
const categories = this.categoryButtons.map(name => ({
|
|
|
|
section: name,
|
2019-06-20 04:19:34 +02:00
|
|
|
label: name,
|
2019-06-20 20:03:48 +02:00
|
|
|
element: () => this.content
|
|
|
|
})
|
|
|
|
);
|
2019-06-19 05:09:49 +02:00
|
|
|
return React.createElement(SettingsView, {
|
2019-06-21 06:32:59 +02:00
|
|
|
onClose: this.props.close,
|
2019-06-20 20:03:48 +02:00
|
|
|
onSetSection: this.changeCategory,
|
2019-06-21 06:32:59 +02:00
|
|
|
section: this.state.category,
|
2019-06-19 05:09:49 +02:00
|
|
|
sections: [
|
2019-06-20 20:03:48 +02:00
|
|
|
{section: "HEADER", label: "Search"},
|
2019-06-21 06:32:59 +02:00
|
|
|
{section: "CUSTOM", element: () => this.searchBox},
|
2019-06-19 05:09:49 +02:00
|
|
|
{section: "HEADER", label: "Categories"},
|
2019-06-20 20:03:48 +02:00
|
|
|
...categories,
|
|
|
|
{section: "DIVIDER"},
|
|
|
|
{section: "HEADER", label: React.createElement("a", {href: "https://discordservers.com", target: "_blank"}, "Discordservers.com")},
|
|
|
|
{section: "DIVIDER"},
|
|
|
|
{section: "CUSTOM", element: () => this.connection}
|
2019-06-19 05:09:49 +02:00
|
|
|
],
|
|
|
|
theme: "dark"
|
|
|
|
});
|
2019-06-20 20:03:48 +02:00
|
|
|
}
|
2019-05-28 20:55:07 +02:00
|
|
|
}
|