+
+ return
+
;
}
handleError() {
@@ -40,7 +64,7 @@ export default class ServerCard extends React.Component {
}
async join() {
- if (this.state.joined) return;
+ if (this.state.joined) return this.props.navigateTo(this.props.server.identifier);
this.setState({joined: "joining"});
const didJoin = await this.props.join(this.props.server.identifier, this.props.server.nativejoin);
this.setState({joined: didJoin});
diff --git a/src/ui/publicservers/menu.js b/src/ui/publicservers/menu.js
index 16518f9f..80ff1f50 100644
--- a/src/ui/publicservers/menu.js
+++ b/src/ui/publicservers/menu.js
@@ -1,21 +1,35 @@
import {React, WebpackModules, Strings} from "modules";
+import Modals from "../modals";
import SettingsTitle from "../settings/title";
import ServerCard from "./card";
+import EmptyResults from "./noresults";
import Connection from "../../structs/psconnection";
import Search from "../settings/components/search";
+
const SettingsView = WebpackModules.getByDisplayName("SettingsView");
+const GuildActions = WebpackModules.getByProps("transitionToGuildSync");
+const LayerManager = WebpackModules.getByProps("popLayer");
+
+const betterDiscordServer = {
+ name: "BetterDiscord",
+ members: 55000,
+ categories: ["community", "programming", "support"],
+ description: "Official BetterDiscord server for plugins, themes, support, etc",
+ identifier: "86004744966914048",
+ iconUrl: "https://cdn.discordapp.com/icons/86004744966914048/292e7f6bfff2b71dfd13e508a859aedd.webp",
+ nativejoin: true,
+ invite_code: "BJD2yvJ",
+ pinned: true,
+ insertDate: 1517806800
+};
export default class PublicServers extends React.Component {
- 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"];
- }
-
constructor(props) {
super(props);
this.state = {
- category: "All",
+ tab: "Featured",
query: "",
loading: true,
user: null,
@@ -28,24 +42,44 @@ export default class PublicServers extends React.Component {
}
};
- this.changeCategory = this.changeCategory.bind(this);
+ this.featured = [];
+ this.popular = [];
+ this.keywords = [];
+
+ this.changeTab = this.changeTab.bind(this);
this.searchKeyDown = this.searchKeyDown.bind(this);
this.connect = this.connect.bind(this);
this.loadNextPage = this.loadNextPage.bind(this);
this.join = this.join.bind(this);
+ this.navigateTo = this.navigateTo.bind(this);
}
componentDidMount() {
+ this.getDashboard();
this.checkConnection();
}
async checkConnection() {
const userData = await Connection.checkConnection();
- if (!userData) {
- return this.setState({loading: true, user: null});
- }
+ if (!userData) return this.setState({user: null});
this.setState({user: userData});
- this.search();
+ }
+
+ async getDashboard() {
+ const dashboardData = await Connection.getDashboard();
+ const featuredFirst = dashboardData.results[0].key === "featured";
+ const featuredServers = dashboardData.results[featuredFirst ? 0 : 1].response.hits;
+ const popularServers = dashboardData.results[featuredFirst ? 1 : 0].response.hits;
+ const mainKeywords = dashboardData.mainKeywords.map(k => k.charAt(0).toUpperCase() + k.slice(1)).sort();
+
+ featuredServers.unshift(betterDiscordServer);
+
+ this.featured = featuredServers;
+ this.popular = popularServers;
+ this.keywords = mainKeywords;
+
+ this.setState({loading: false});
+ this.changeTab(this.state.tab);
}
async connect() {
@@ -55,12 +89,14 @@ export default class PublicServers extends React.Component {
searchKeyDown(e) {
if (this.state.loading || e.which !== 13) return;
- this.search(e.target.value);
+ const term = e.target.value;
+ if (this.state.tab == "Featured" || this.state.tab == "Popular") this.setState({tab: "All"}, () => this.search(term));
+ else this.search(term);
}
async search(term = "", from = 0) {
this.setState({query: term, loading: true});
- const results = await Connection.search({term, category: this.state.category == "All" ? "" : this.state.category, from});
+ const results = await Connection.search({term, keyword: this.state.tab == "All" || this.state.tab == "Featured" || this.state.tab == "Popular" ? "" : this.state.tab, from});
if (!results) {
return this.setState({results: {
servers: [],
@@ -70,12 +106,23 @@ export default class PublicServers extends React.Component {
next: null
}});
}
+
this.setState({loading: false, results});
}
- async changeCategory(id) {
+ async changeTab(id) {
if (this.state.loading) return;
- await new Promise(resolve => this.setState({category: id}, resolve));
+ await new Promise(resolve => this.setState({tab: id}, resolve));
+ if (this.state.tab === "Featured" || this.state.tab == "Popular") {
+ return this.setState({results: {
+ servers: this[this.state.tab.toLowerCase()],
+ size: this[this.state.tab.toLowerCase()].length,
+ from: 0,
+ total: this[this.state.tab.toLowerCase()].length,
+ next: null
+ }});
+ }
+
this.search();
}
@@ -85,33 +132,44 @@ export default class PublicServers extends React.Component {
}
async join(id, native = false) {
+ if (!this.state.user && !native) {
+ return Modals.showConfirmationModal(Strings.PublicServers.notConnected, Strings.PublicServers.connectionRequired, {
+ cancelText: Strings.Modals.nevermind,
+ confirmText: Strings.Modals.okay,
+ onConfirm: () => {
+ this.connect().then(() => Connection.join(id, native));
+ }
+ });
+ }
return await Connection.join(id, native);
}
+ navigateTo(id) {
+ if (GuildActions) GuildActions.transitionToGuildSync(id);
+ if (LayerManager) LayerManager.popLayer();
+ }
+
get searchBox() {
- return
-
- {server.name}
-{server.members} Members
-
- 
+
- {server.description}
+
-
;
+ {server.categories.join(", ")}
-
+
+
-
+ {server.pinned && badge}
+
- {server.name}
+ {this.state.joined && {buttonText}
}
{server.description}
+
+
+
+
+
+ {server.members.toLocaleString()} Members
+
+
+
+ Added {addedDate.toLocaleDateString()}
+
+
;
+ }
+}
\ No newline at end of file
diff --git a/src/ui/settings/components/search.jsx b/src/ui/settings/components/search.jsx
index e7e5e8b3..21686612 100644
--- a/src/ui/settings/components/search.jsx
+++ b/src/ui/settings/components/search.jsx
@@ -3,7 +3,7 @@ import SearchIcon from "../../icons/search";
export default class Search extends React.Component {
render() {
- return
+ return