goodbye old uwufier :cry:

4 files changed, 219 insertions, 0 deletions

diff --git a/client/src/components/App.js b/client/src/components/App.js
new file mode 100644
index 0000000..270e199
--- /dev/null
+++ b/client/src/components/App.js
@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+import fetch from 'node-fetch';
+
+import NavigationBar from './navigation/NavigationBar';
+import ServerSelection from '../pages/ServerSelection';
+import ManageServer from '../pages/ManageServer';
+
+export default class App extends Component {
+    state = {
+        loading: true,
+        user: null
+    }
+    
+    componentDidMount() {
+        fetch('http://localhost:8088/oauth/details', {
+            credentials: 'include'
+        })
+        .then(res => res.json())
+        .then(res => {
+            if (!res) return this.setState({ loading: false });
+            this.setState({
+                loading: false,
+                user: res
+            })
+        })
+        .catch(() => this.setState({ loading: false }));
+    }
+    
+    render() {
+        if (this.state.loading) {
+            return(
+                <React.Fragment>
+                    <div className="container">
+                        <h1>Loading...</h1>
+                    </div>
+                </React.Fragment>
+            );
+        } else if (!this.state.user) {
+            window.location.replace('http://localhost:8088/oauth/login'); // OAuth2...
+            return (<React.Fragment />);
+        } else {
+            return(
+                <React.Fragment>
+                    <Router>
+                        <div className="container">
+                            <NavigationBar user={this.state.user} />
+                            
+                            <br />
+                            
+                            <Route exact path="/" render={(props) => <ServerSelection {...props} user={this.state.user} /> } />
+                            <Route exact path="/server/:id" render={(props) => <ManageServer {...props} user={this.state.user} /> } />
+                            
+                            <br />
+                        </div>
+                    </Router>
+                </React.Fragment>
+            );
+        }
+    }
+}
\ No newline at end of file
diff --git a/client/src/components/manageserver/ManageServerSettings.js b/client/src/components/manageserver/ManageServerSettings.js
new file mode 100644
index 0000000..66a5fe5
--- /dev/null
+++ b/client/src/components/manageserver/ManageServerSettings.js
@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { MDBCard, MDBCardHeader, MDBCardBody, MDBInput, MDBAlert, MDBBtn } from 'mdbreact';
+import fetch from 'node-fetch';
+
+export default class ManageServerSettings extends Component {
+    state = {
+        error: null,
+        success: false,
+        disabled: false
+    }
+    
+    handleSave() {
+        this.setState({
+            error: null,
+            success: false,
+            disabled: true
+        });
+        
+        fetch(`http://localhost:8088/v1/post/guild-name/${this.props.guild}`, {
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                'Authorization': process.env.REACT_APP_AUTHORIZATION,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                name: this.props.data.name
+            })
+        })
+        .then(res => res.json())
+        .then(res => {
+            if (res.message) return this.setState({ error: res.message, disabled: false });
+            
+            this.setState({ success: true });
+        })
+        .catch(err => {
+            console.log(err);
+            this.setState({ error: 'An unknown error occured' });
+        });
+    }
+    
+    render() {
+        return(
+            <React.Fragment>
+                <MDBCard>
+                    <MDBCardHeader>
+                        <h3>Server Settings</h3>
+                    </MDBCardHeader>
+                    <MDBCardBody>
+                        {this.state.error &&
+                            <MDBAlert color="danger">{this.state.error}</MDBAlert>
+                        }
+                        {this.state.success &&
+                            <MDBAlert color="success">Updated server settings successfully</MDBAlert>
+                        }
+                        
+                        <MDBInput id="name" label="Server name" value={this.props.data.name} onChange={this.props.handleInput} />
+                        <MDBBtn color="dark" onClick={this.handleSave.bind(this)} disabled={this.state.disabled}>Save</MDBBtn>
+                    </MDBCardBody>
+                </MDBCard>
+            </React.Fragment>
+        )
+    }
+}
+
+ManageServerSettings.propTypes = {
+    data: PropTypes.object,
+    handleInput: PropTypes.func,
+    guild: PropTypes.string
+}
\ No newline at end of file
diff --git a/client/src/components/navigation/NavigationBar.js b/client/src/components/navigation/NavigationBar.js
new file mode 100644
index 0000000..3962aae
--- /dev/null
+++ b/client/src/components/navigation/NavigationBar.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import {
+    MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBIcon,
+    MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBCol
+} from 'mdbreact'
+import PropTypes from 'prop-types';
+
+export default class NavigationBar extends Component {
+    state = {
+        isOpen: false
+    };
+    
+    toggleCollapse() {
+        this.setState({ isOpen: !this.state.isOpen });
+    }
+    
+    render() {
+        return(
+            <MDBNavbar color="black" dark expand="md">
+                <MDBNavbarBrand>
+                    <strong className="white-text">Bot Dashboard</strong>
+                </MDBNavbarBrand>
+                <MDBNavbarToggler onClick={this.toggleCollapse} />
+                <MDBCollapse id="navbarCollapse" isOpen={this.state.isOpen} navbar>
+                    <MDBNavbarNav left>
+                        <MDBNavItem>
+                            <MDBNavLink to="/">Server Selection</MDBNavLink>
+                        </MDBNavItem>
+                    </MDBNavbarNav>
+                    <MDBNavbarNav right>
+                        <MDBNavItem>
+                            <MDBDropdown>
+                                <MDBDropdownToggle nav caret>
+                                    <MDBIcon icon='user' />
+                                </MDBDropdownToggle>
+                                <MDBDropdownMenu className="dropdown-default">
+                                    <MDBDropdownItem href="http://localhost:8088/oauth/logout">{`Logout (${this.props.user.username})`}</MDBDropdownItem>
+                                </MDBDropdownMenu>
+                            </MDBDropdown>
+                        </MDBNavItem>
+                    </MDBNavbarNav>
+                </MDBCollapse>
+            </MDBNavbar>
+        );
+    }
+}
+
+NavigationBar.propTypes = {
+    user: PropTypes.object
+}
\ No newline at end of file
diff --git a/client/src/components/selection/ServerCard.js b/client/src/components/selection/ServerCard.js
new file mode 100644
index 0000000..93c7ad6
--- /dev/null
+++ b/client/src/components/selection/ServerCard.js
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { MDBBtn, MDBCard, MDBCardBody, MDBCardTitle, MDBCol } from 'mdbreact';
+
+export default class ServerCard extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <MDBCol size={6}>
+                    <MDBCard className="server-card">
+                        <MDBCardBody>
+                            <img
+                                width="200px"
+                                alt={`Icon of ${this.props.guild.name}`}
+                                className="server-card-image"
+                                src={this.props.guild.icon ?
+                                    `https://cdn.discordapp.com/icons/${this.props.guild.id}/${this.props.guild.icon}.png?size=4096` :
+                                    `https://cdn.discordapp.com/embed/avatars/3.png`
+                                }
+                            />
+                            
+                            <MDBCardTitle><h6><strong>{this.props.guild.name}</strong></h6></MDBCardTitle>
+                            <Link to={`/server/${this.props.guild.id}`}>
+                                <MDBBtn color="primary">Manage</MDBBtn>
+                            </Link>
+                        </MDBCardBody>
+                    </MDBCard>
+                </MDBCol>
+            </React.Fragment>
+        )
+    }
+}
+
+ServerCard.propTypes = {
+    guild: PropTypes.object
+}
\ No newline at end of file